Minor fixes about pages

src/components/Pages/about/GuidePage.tsx

@@ -6,7 +6,7 @@ import { Icon } from '../../Nav/Icon'
 export const GuidePage = () => {
   const title = t('How it works')
 
-  const [indexExpanded, setIndexExpanded] = createSignal(false)
+  const [indexExpanded, setIndexExpanded] = createSignal(true)
 
   const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
 
@@ -28,12 +28,14 @@ export const GuidePage = () => {
                 <Icon name="content-index-control" />
               </Show>
               <Show when={indexExpanded()}>
-                <Icon name="content-index-control-expanded" />
+                <Icon name="content-index-control-expanded" class={'expanded'} />
               </Show>
             </button>
 
             <Show when={indexExpanded()}>
               <nav class="content-index">
+                <h4>Оглавление</h4>
+
                 <ul class="nodash">
                   <li>
                     <a href="#how-it-works">{title}</a>

src/components/Pages/about/HelpPage.tsx

@@ -6,7 +6,7 @@ import { Icon } from '../../Nav/Icon'
 // const title = t('Support us')
 
 export const HelpPage = () => {
-  const [indexExpanded, setIndexExpanded] = createSignal(false)
+  const [indexExpanded, setIndexExpanded] = createSignal(true)
 
   const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
 
@@ -25,12 +25,14 @@ export const HelpPage = () => {
                 <Icon name="content-index-control" />
               </Show>
               <Show when={indexExpanded()}>
-                <Icon name="content-index-control-expanded" />
+                <Icon name="content-index-control-expanded" class={'expanded'} />
               </Show>
             </button>
 
             <Show when={indexExpanded()}>
               <nav class="content-index">
+                <h4>Оглавление</h4>
+
                 <ul class="nodash">
                   <li>
                     <a href="#help-us">Как вы&nbsp;можете поддержать Дискурс?</a>

src/components/Pages/about/ManifestPage.tsx

@@ -9,7 +9,7 @@ import { Icon } from '../../Nav/Icon'
 // title={t('Manifest')}
 
 export const ManifestPage = () => {
-  const [indexExpanded, setIndexExpanded] = createSignal(false)
+  const [indexExpanded, setIndexExpanded] = createSignal(true)
 
   const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
 
@@ -29,12 +29,14 @@ export const ManifestPage = () => {
                 <Icon name="content-index-control" />
               </Show>
               <Show when={indexExpanded()}>
-                <Icon name="content-index-control-expanded" />
+                <Icon name="content-index-control-expanded" class={'expanded'} />
               </Show>
             </button>
 
             <Show when={indexExpanded()}>
               <nav class="content-index">
+                <h4>Оглавление</h4>
+
                 <ul class="nodash">
                   <li>
                     <a href="#manifest">Манифест</a>
@@ -104,7 +106,7 @@ export const ManifestPage = () => {
               независимой журналистики. Участвовать в&nbsp;открытой редакции и&nbsp;помогать журналу можно
               следующими способами:
             </p>
-            <details>
+            <details open>
               <summary>
                 <h3 id="contribute">Предлагать материалы</h3>
               </summary>

src/components/Pages/about/TermsOfUsePage.tsx

@@ -5,7 +5,7 @@ import { Icon } from '../../Nav/Icon'
 // const title = t('Terms of use')
 
 export const TermsOfUsePage = () => {
-  const [indexExpanded, setIndexExpanded] = createSignal(false)
+  const [indexExpanded, setIndexExpanded] = createSignal(true)
 
   const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
 
@@ -23,12 +23,14 @@ export const TermsOfUsePage = () => {
                 <Icon name="content-index-control" />
               </Show>
               <Show when={indexExpanded()}>
-                <Icon name="content-index-control-expanded" />
+                <Icon name="content-index-control-expanded" class={'expanded'} />
               </Show>
             </button>
 
             <Show when={indexExpanded()}>
               <nav class="content-index">
+                <h4>Оглавление</h4>
+
                 <ul class="nodash">
                   <li>
                     <a href="#terms-of-use">Пользовательское соглашение</a>

src/styles/app.scss

@@ -250,8 +250,8 @@ button {
 }
 
 .button--content-index {
-  border: 2px solid #fff;
   background: none;
+  border: 2px solid #fff;
   height: 3.2rem;
   float: right;
   padding: 0;
@@ -271,15 +271,31 @@ button {
     right: $container-padding-x;
   }
 
+  .icon {
+    background: #fff;
+    transition: filter 0.3s;
+  }
+
   .icon,
   img {
+    height: 100%;
     vertical-align: middle;
     width: auto;
   }
 
   &:hover {
     .icon {
-      opacity: 0.5;
+      filter: invert(1);
+    }
+  }
+
+  .expanded {
+    border-radius: 100%;
+    overflow: hidden;
+
+    img {
+      height: auto;
+      margin-top: 0.8rem;
     }
   }
 }
@@ -723,6 +739,10 @@ astro-island {
   a {
     border: none;
   }
+
+  h4 {
+    @include font-size(1.6rem);
+  }
 }
 
 .load-more-container {