Fixed about pages style

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-7 shift-content order-md-first">
+          <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1>
               <span class="wrapped" innerHTML={title} />
             </h1>

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-7 shift-content order-md-first">
+          <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h4>Редакционные принципы</h4>
             <p>
               Дискурс - журнал с открытой горизонтальной редакцией. Содержание журнала определяется прямым

src/components/Pages/about/GuidePage.tsx

@@ -22,8 +22,7 @@ export const GuidePage = () => {
 
       <article class="container container--static-page">
         <div class="row">
-          <div class="col-md-3 col-lg-2 col-xl-3 order-md-last">
+          <div class="col-md-4 col-lg-3 order-md-last">
-            <p class="content-index-control-container">
             <button class="button button--content-index" onClick={toggleIndexExpanded}>
               <Show when={!indexExpanded()}>
                 <Icon name="content-index-control" />
@@ -32,7 +31,6 @@ export const GuidePage = () => {
                 <Icon name="content-index-control-expanded" />
               </Show>
             </button>
-            </p>
 
             <Show when={indexExpanded()}>
               <nav class="content-index">
@@ -60,7 +58,7 @@ export const GuidePage = () => {
             </Show>
           </div>
 
-          <div class="col-md-7 shift-content order-md-first">
+          <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1 id="about">
               <span class="wrapped">Как устроен Дискурс</span>
             </h1>

src/components/Pages/about/HelpPage.tsx

@@ -19,8 +19,7 @@ export const HelpPage = () => {
 
       <article class="container container--static-page discours-help">
         <div class="row">
-          <div class="col-md-3 col-lg-2 col-xl-3 order-md-last">
+          <div class="col-md-4 col-lg-3 order-md-last">
-            <p class="content-index-control-container">
             <button class="button button--content-index" onClick={toggleIndexExpanded}>
               <Show when={!indexExpanded()}>
                 <Icon name="content-index-control" />
@@ -29,7 +28,6 @@ export const HelpPage = () => {
                 <Icon name="content-index-control-expanded" />
               </Show>
             </button>
-            </p>
 
             <Show when={indexExpanded()}>
               <nav class="content-index">
@@ -51,7 +49,7 @@ export const HelpPage = () => {
             </Show>
           </div>
 
-          <div class="col-md-7 shift-content order-md-first">
+          <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1 id="help-us">
               <span class="wrapped">Как вы&nbsp;можете поддержать Дискурс?</span>
             </h1>

src/components/Pages/about/ManifestPage.tsx

@@ -23,8 +23,7 @@ export const ManifestPage = () => {
       </Modal>
       <article class="container container--static-page">
         <div class="row">
-          <div class="col-md-3 col-lg-2 col-xl-3 order-md-last">
+          <div class="col-md-4 col-lg-3 order-md-last">
-            <p class="content-index-control-container">
             <button class="button button--content-index" onClick={toggleIndexExpanded}>
               <Show when={!indexExpanded()}>
                 <Icon name="content-index-control" />
@@ -33,7 +32,6 @@ export const ManifestPage = () => {
                 <Icon name="content-index-control-expanded" />
               </Show>
             </button>
-            </p>
 
             <Show when={indexExpanded()}>
               <nav class="content-index">
@@ -66,7 +64,7 @@ export const ManifestPage = () => {
             </Show>
           </div>
 
-          <div class="col-md-7 shift-content order-md-first">
+          <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1 id="manifest">
               <span class="wrapped">Манифест</span>
             </h1>

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-7 shift-content order-md-first">
+          <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1>{t('Partners')}</h1>
           </div>
         </div>

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-7 shift-content order-md-first">
+          <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1>
               <span class="wrapped">{title}</span>
             </h1>

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-7 shift-content order-md-first">
+          <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1>{t('Projects')}</h1>
           </div>
         </div>

src/components/Pages/about/TermsOfUsePage.tsx

@@ -17,8 +17,7 @@ export const TermsOfUsePage = () => {
       {/*<Meta property="og:description" content={title} />*/}
       <article class="container container--static-page">
         <div class="row">
-          <div class="col-md-3 col-lg-2 col-xl-3 order-md-last">
+          <div class="col-md-4 col-lg-3 order-md-last">
-            <p class="content-index-control-container">
             <button class="button button--content-index" onClick={toggleIndexExpanded}>
               <Show when={!indexExpanded()}>
                 <Icon name="content-index-control" />
@@ -27,7 +26,6 @@ export const TermsOfUsePage = () => {
                 <Icon name="content-index-control-expanded" />
               </Show>
             </button>
-            </p>
 
             <Show when={indexExpanded()}>
               <nav class="content-index">
@@ -55,7 +53,7 @@ export const TermsOfUsePage = () => {
             </Show>
           </div>
 
-          <div class="col-md-7 shift-content order-md-first">
+          <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1 id="terms-of-use">
               <span class="wrapped">Пользовательское соглашение</span>
             </h1>

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-7 shift-content order-md-first">
+          <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1>
               <span class="wrapped">{title}</span>
             </h1>

src/styles/app.scss

@@ -243,8 +243,23 @@ button {
   border: 2px solid #fff;
   background: none;
   height: 3.2rem;
+  float: right;
   padding: 0;
+  position: absolute;
+  right: $container-padding-x * 0.5;
+  top: -0.5rem;
   width: 3.2rem;
+  z-index: 1;
+
+  @include media-breakpoint-up(md) {
+    margin-top: -0.5rem;
+    position: sticky;
+    top: 90px;
+  }
+
+  @include media-breakpoint-up(sm) {
+    right: $container-padding-x;
+  }
 
   .icon,
   img {
@@ -259,10 +274,6 @@ button {
   }
 }
 
-.content-index-control-container {
-  text-align: right;
-}
-
 form {
   .pretty-form__item {
     position: relative;
@@ -617,18 +628,26 @@ astro-island {
 
 .container {
   max-width: 1400px;
-
-  // margin-left: 201px;
-  // width: auto;
-
-  @include media-breakpoint-up(md) {
-    // padding-left: 227px;
-  }
 }
 
 .container--static-page {
+  @include font-size(1.7rem);
+
+  color: #404040;
+  position: relative;
+
   @include media-breakpoint-up(md) {
     padding-top: 1.5em;
+
+    > .row {
+      flex-wrap: nowrap;
+      justify-content: space-between;
+      margin-right: 0;
+    }
+  }
+
+  .order-md-last {
+    padding-right: 0;
   }
 }
 
@@ -664,7 +683,7 @@ astro-island {
 .content-index {
   @include font-size(1.4rem);
 
-  margin-bottom: 2em;
+  margin: 0 3.6rem 2em 0;
 
   @include media-breakpoint-up(md) {
     position: sticky;
@@ -695,6 +714,10 @@ astro-island {
 details {
   margin-bottom: 1.5em;
 
+  @include media-breakpoint-down(md) {
+    padding-left: 3rem;
+  }
+
   summary {
     display: block;
     position: relative;