discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

About pages style fixes

Browse Source
This commit is contained in:
kvakazyambra 2022-11-08 22:48:00 +03:00
parent 54d4c4d055
commit 1b84f51f50
12 changed files with 49 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/icons/expand.svg Normal file
View File

@ -0,0 +1,2 @@
<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 12.8999L0.100098 3L2.57507 0.525024L10.0002 7.95013L17.4246 0.525716L19.8996 3.00069L12.4747 10.4256L12.4745 10.4254L10 12.8999Z" fill="#000"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 259 B

2
src/components/Pages/about/DiscussionRulesPage.tsx
View File

@ -7,7 +7,7 @@ export const DiscussionRulesPage = () => {
<MainLayout>
<article class="container container--static-page">
<div class="row">
<div class="col-md-8 col-lg-7 col-xl-8 shift-content order-md-first">
<div class="col-md-7 shift-content order-md-first">
<h1>
<span class="wrapped" innerHTML={title} />
</h1>

2
src/components/Pages/about/DogmaPage.tsx
View File

@ -7,7 +7,7 @@ export const DogmaPage = () => {
<MainLayout>
<article class="container container--static-page">
<div class="row">
<div class="col-md-8 col-lg-7 col-xl-8 shift-content order-md-first">
<div class="col-md-7 shift-content order-md-first">
<h4>Редакционные принципы</h4>
<p>
Дискурс - журнал с открытой горизонтальной редакцией. Содержание журнала определяется прямым

4
src/components/Pages/about/GuidePage.tsx
View File

@ -21,7 +21,7 @@ export const GuidePage = () => {
<article class="container container--static-page">
<div class="row">
<div class="col-md-2 col-lg-3 col-xl-2 order-md-last">
<div class="col-md-3 col-lg-2 col-xl-3 order-md-last">
<p>
<button class="button button--light button--subscribe-topic" onClick={toggleIndexExpanded}>
{indexExpanded() ? 'Свернуть' : 'Оглавление'}
@ -54,7 +54,7 @@ export const GuidePage = () => {
</Show>
</div>
<div class="col-md-8 col-lg-7 col-xl-8 shift-content order-md-first">
<div class="col-md-7 shift-content order-md-first">
<h1 id="about">
<span class="wrapped">Как устроен Дискурс</span>
</h1>

4
src/components/Pages/about/HelpPage.tsx
View File

@ -18,7 +18,7 @@ export const HelpPage = () => {
<article class="container container--static-page discours-help">
<div class="row">
<div class="col-md-2 col-lg-3 col-xl-2 order-md-last">
<div class="col-md-3 col-lg-2 col-xl-3 order-md-last">
<p>
<button class="button button--light button--subscribe-topic" onClick={toggleIndexExpanded}>
{indexExpanded() ? 'Свернуть' : 'Оглавление'}
@ -45,7 +45,7 @@ export const HelpPage = () => {
</Show>
</div>
<div class="col-md-8 col-lg-7 col-xl-8 shift-content order-md-first">
<div class="col-md-7 shift-content order-md-first">
<h1 id="help-us">
<span class="wrapped">Как вы&nbsp;можете поддержать Дискурс?</span>
</h1>

4
src/components/Pages/about/ManifestPage.tsx
View File

@ -22,7 +22,7 @@ export const ManifestPage = () => {
</Modal>
<article class="container container--static-page">
<div class="row">
<div class="col-md-2 col-lg-3 col-xl-2 order-md-last">
<div class="col-md-3 col-lg-2 col-xl-3 order-md-last">
<p>
<button class="button button--light button--subscribe-topic" onClick={toggleIndexExpanded}>
{indexExpanded() ? 'Свернуть' : 'Оглавление'}
@ -60,7 +60,7 @@ export const ManifestPage = () => {
</Show>
</div>
<div class="col-md-8 col-lg-7 col-xl-8 shift-content order-md-first">
<div class="col-md-7 shift-content order-md-first">
<h1 id="manifest">
<span class="wrapped">Манифест</span>
</h1>

2
src/components/Pages/about/PartnersPage.tsx
View File

@ -8,7 +8,7 @@ export const PartnersPage = () => {
<MainLayout>
<article class="container container--static-page">
<div class="row">
<div class="col-md-8 col-lg-7 col-xl-8 shift-content order-md-first">
<div class="col-md-7 shift-content order-md-first">
<h1>{t('Partners')}</h1>
</div>
</div>

2
src/components/Pages/about/PrinciplesPage.tsx
View File

@ -7,7 +7,7 @@ export const PrinciplesPage = () => {
<MainLayout>
<article class="container container--static-page">
<div class="row">
<div class="col-md-8 col-lg-7 col-xl-8 shift-content order-md-first">
<div class="col-md-7 shift-content order-md-first">
<h1>
<span class="wrapped">{title}</span>
</h1>

2
src/components/Pages/about/ProjectsPage.tsx
View File

@ -8,7 +8,7 @@ export const ProjectsPage = () => {
<MainLayout>
<article class="container container--static-page">
<div class="row">
<div class="col-md-8 col-lg-7 col-xl-8 shift-content order-md-first">
<div class="col-md-7 shift-content order-md-first">
<h1>{t('Projects')}</h1>
</div>
</div>

4
src/components/Pages/about/TermsOfUsePage.tsx
View File

@ -16,7 +16,7 @@ export const TermsOfUsePage = () => {
{/*<Meta property="og:description" content={title} />*/}
<article class="container container--static-page">
<div class="row">
<div class="col-md-2 col-lg-3 col-xl-2 order-md-last">
<div class="col-md-3 col-lg-2 col-xl-3 order-md-last">
<p>
<button class="button button--light button--subscribe-topic" onClick={toggleIndexExpanded}>
{indexExpanded() ? 'Свернуть' : 'Оглавление'}
@ -49,7 +49,7 @@ export const TermsOfUsePage = () => {
</Show>
</div>
<div class="col-md-8 col-lg-7 col-xl-8 shift-content order-md-first">
<div class="col-md-7 shift-content order-md-first">
<h1 id="terms-of-use">
<span class="wrapped">Пользовательское соглашение</span>
</h1>

2
src/components/Pages/about/ThanksPage.tsx
View File

@ -12,7 +12,7 @@ export const ThanksPage = () => {
<article class="container container--static-page">
<div class="row">
<div class="col-md-8 col-lg-7 col-xl-8 shift-content order-md-first">
<div class="col-md-7 shift-content order-md-first">
<h1>
<span class="wrapped">{title}</span>
</h1>

37
src/styles/app.scss
View File

@ -75,6 +75,7 @@ h2 {
.wrapped {
background: #000;
color: #fff;
margin-left: -0.15em;
padding: 0 0.15em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
@ -650,9 +651,37 @@ astro-island {
details {
margin-bottom: 1.5em;
summary h3 {
display: inline-block;
cursor: pointer;
margin-bottom: 0;
summary {
display: block;
position: relative;
&::marker {
display: none;
}
h3 {
display: inline-block;
cursor: pointer;
margin-bottom: 0;
&:before {
content: '';
background: url(/icons/expand.svg) no-repeat;
background-size: contain;
height: 1.3rem;
margin-right: 0.5em;
position: absolute;
right: 100%;
top: 0.35em;
transition: transform 0.3s;
width: 2rem;
}
}
}
&[open] {
h3:before {
transform: rotate(180deg);
}
}
}