From 1b84f51f50bc4af668822cb6befe86dd1de63a42 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Tue, 8 Nov 2022 22:48:00 +0300
Subject: [PATCH] About pages style fixes

---
 public/icons/expand.svg                       |  2 +
 .../Pages/about/DiscussionRulesPage.tsx       |  2 +-
 src/components/Pages/about/DogmaPage.tsx      |  2 +-
 src/components/Pages/about/GuidePage.tsx      |  4 +-
 src/components/Pages/about/HelpPage.tsx       |  4 +-
 src/components/Pages/about/ManifestPage.tsx   |  4 +-
 src/components/Pages/about/PartnersPage.tsx   |  2 +-
 src/components/Pages/about/PrinciplesPage.tsx |  2 +-
 src/components/Pages/about/ProjectsPage.tsx   |  2 +-
 src/components/Pages/about/TermsOfUsePage.tsx |  4 +-
 src/components/Pages/about/ThanksPage.tsx     |  2 +-
 src/styles/app.scss                           | 37 +++++++++++++++++--
 12 files changed, 49 insertions(+), 18 deletions(-)
 create mode 100644 public/icons/expand.svg

diff --git a/public/icons/expand.svg b/public/icons/expand.svg
new file mode 100644
index 00000000..fcbcd21c
--- /dev/null
+++ b/public/icons/expand.svg
@@ -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>
diff --git a/src/components/Pages/about/DiscussionRulesPage.tsx b/src/components/Pages/about/DiscussionRulesPage.tsx
index 0ec5105a..832c1c0e 100644
--- a/src/components/Pages/about/DiscussionRulesPage.tsx
+++ b/src/components/Pages/about/DiscussionRulesPage.tsx
@@ -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>
diff --git a/src/components/Pages/about/DogmaPage.tsx b/src/components/Pages/about/DogmaPage.tsx
index 061432ed..cf764cd4 100644
--- a/src/components/Pages/about/DogmaPage.tsx
+++ b/src/components/Pages/about/DogmaPage.tsx
@@ -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>
               Дискурс - журнал с открытой горизонтальной редакцией. Содержание журнала определяется прямым
diff --git a/src/components/Pages/about/GuidePage.tsx b/src/components/Pages/about/GuidePage.tsx
index 15366782..3b55056f 100644
--- a/src/components/Pages/about/GuidePage.tsx
+++ b/src/components/Pages/about/GuidePage.tsx
@@ -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>
diff --git a/src/components/Pages/about/HelpPage.tsx b/src/components/Pages/about/HelpPage.tsx
index d96355fa..6e0275bd 100644
--- a/src/components/Pages/about/HelpPage.tsx
+++ b/src/components/Pages/about/HelpPage.tsx
@@ -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>
diff --git a/src/components/Pages/about/ManifestPage.tsx b/src/components/Pages/about/ManifestPage.tsx
index bcbd7a69..4b42465e 100644
--- a/src/components/Pages/about/ManifestPage.tsx
+++ b/src/components/Pages/about/ManifestPage.tsx
@@ -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>
diff --git a/src/components/Pages/about/PartnersPage.tsx b/src/components/Pages/about/PartnersPage.tsx
index 410ba866..3db7c4eb 100644
--- a/src/components/Pages/about/PartnersPage.tsx
+++ b/src/components/Pages/about/PartnersPage.tsx
@@ -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>
diff --git a/src/components/Pages/about/PrinciplesPage.tsx b/src/components/Pages/about/PrinciplesPage.tsx
index 7260b5cf..d22cb77a 100644
--- a/src/components/Pages/about/PrinciplesPage.tsx
+++ b/src/components/Pages/about/PrinciplesPage.tsx
@@ -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>
diff --git a/src/components/Pages/about/ProjectsPage.tsx b/src/components/Pages/about/ProjectsPage.tsx
index 45c4b0e1..f78c25ff 100644
--- a/src/components/Pages/about/ProjectsPage.tsx
+++ b/src/components/Pages/about/ProjectsPage.tsx
@@ -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>
diff --git a/src/components/Pages/about/TermsOfUsePage.tsx b/src/components/Pages/about/TermsOfUsePage.tsx
index 7577bd3c..9ea7e9bc 100644
--- a/src/components/Pages/about/TermsOfUsePage.tsx
+++ b/src/components/Pages/about/TermsOfUsePage.tsx
@@ -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>
diff --git a/src/components/Pages/about/ThanksPage.tsx b/src/components/Pages/about/ThanksPage.tsx
index b516e4c6..6f6938d1 100644
--- a/src/components/Pages/about/ThanksPage.tsx
+++ b/src/components/Pages/about/ThanksPage.tsx
@@ -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>
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 1372872d..0b63000e 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -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);
+    }
   }
 }