Merge remote-tracking branch 'origin/dev' into prepare-inbox

# Conflicts:
#	src/components/Nav/AuthModal/ForgotPasswordForm.tsx
#	src/graphql/types.gen.ts
#	src/stores/auth.ts
#	src/utils/apiClient.ts
#	src/utils/config.ts

package.json

@@ -107,7 +107,6 @@
     "prosemirror-markdown": "^1.9.4",
     "prosemirror-menu": "^1.2.1",
     "prosemirror-model": "^1.16.0",
-    "prosemirror-schema-basic": "^1.2.0",
     "prosemirror-schema-list": "^1.2.2",
     "prosemirror-state": "^1.4.1",
     "prosemirror-view": "^1.28.1",

public/icons/content-index-control-expanded.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 8V5H0V3H10V0L14 4L10 8Z" fill="black"/>
+</svg>

public/icons/content-index-control.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 9.24437C6 8.55582 6.57935 8 7.29706 8C8.01477 8 8.59412 8.55582 8.59412 9.24437C8.59412 9.93293 8.01477 10.4887 7.29706 10.4887C6.57935 10.4887 6 9.93293 6 9.24437ZM6 14.222C6 13.5334 6.57935 12.9776 7.29706 12.9776C8.01477 12.9776 8.59412 13.5334 8.59412 14.222C8.59412 14.9105 8.01477 15.4663 7.29706 15.4663C6.57935 15.4663 6 14.9105 6 14.222ZM7.29706 17.9548C6.57935 17.9548 6 18.5189 6 19.1991C6 19.8794 6.588 20.4435 7.29706 20.4435C8.00612 20.4435 8.59412 19.8794 8.59412 19.1991C8.59412 18.5189 8.01477 17.9548 7.29706 17.9548ZM22.0015 20.0284H9.89562V18.3692H22.0015V20.0284ZM9.89562 15.0517H22.0015V13.3925H9.89562V15.0517ZM9.89562 10.0741V8.41491H22.0015V10.0741H9.89562Z" fill="black"/>
+<rect x="1" y="1" width="26" height="26" stroke="black" stroke-width="2"/>
+</svg>

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>

src/components/Article/FullArticle.tsx

@@ -7,10 +7,10 @@ import { createMemo, For, onMount, Show } from 'solid-js'
 import type { Author, Reaction, Shout } from '../../graphql/types.gen'
 import { t } from '../../utils/intl'
 import { showModal } from '../../stores/ui'
-import { useAuthStore } from '../../stores/auth'
 import { incrementView } from '../../stores/zine/articles'
 import MD from './MD'
 import { SharePopup } from './SharePopup'
+import { useSession } from '../../context/session'
 
 const MAX_COMMENT_LEVEL = 6
 
@@ -38,7 +38,7 @@ const formatDate = (date: Date) => {
 }
 
 export const FullArticle = (props: ArticleProps) => {
-  const { session } = useAuthStore()
+  const { session } = useSession()
 
   onMount(() => {
     incrementView({ articleSlug: props.article.slug })

src/components/Article/SharePopup.tsx

@@ -1,7 +1,9 @@
 import { Icon } from '../Nav/Icon'
-import styles from '../Nav/Popup.module.scss'
 import { t } from '../../utils/intl'
-import { Popup, PopupProps } from '../Nav/Popup'
+
+import styles from '../_shared/Popup.module.scss'
+import type { PopupProps } from '../_shared/Popup'
+import { Popup } from '../_shared/Popup'
 
 type SharePopupProps = Omit<PopupProps, 'children'>
 

src/components/Author/Card.module.scss

@@ -15,12 +15,25 @@
 .authorDetails {
   display: flex;
   flex: 1;
-  padding-right: 1.2rem;
   width: max-content;
+
+  // padding-right: 1.2rem;
+
+  @include media-breakpoint-down(sm) {
+    flex-wrap: wrap;
+  }
 }
 
 .authorDetailsWrapper {
-  flex: 1;
+  flex: 1 100%;
+
+  @include media-breakpoint-up(sm) {
+    flex: 1;
+  }
+
+  @include media-breakpoint-up(md) {
+    padding-right: 1.2rem;
+  }
 }
 
 .authorName {
@@ -33,15 +46,13 @@
 .authorAbout {
   font-size: 1.5rem;
   color: rgb(0 0 0 / 60%);
+  word-break: break-word;
 }
 
 .authorSubscribe {
   align-items: center;
   display: flex;
-
+  padding: 0 0 0 42px;
-  @include media-breakpoint-down(lg) {
-    padding: 0 0 0 42px;
-  }
 
   a {
     background: #f7f7f7;
@@ -118,6 +129,10 @@
 
   button {
     margin-right: 0.5em;
+
+    &:last-child {
+      margin-right: 0;
+    }
   }
 }
 
@@ -221,3 +236,23 @@
     vertical-align: middle;
   }
 }
+
+.authorsListItem {
+  .authorName {
+    @include font-size(2.2rem);
+
+    font-weight: bold;
+  }
+
+  .authorSubscribe {
+    align-items: baseline;
+
+    @include media-breakpoint-down(sm) {
+      padding: 1rem 0 0;
+    }
+  }
+
+  .buttonLabel {
+    display: block;
+  }
+}

src/components/Author/Card.tsx

@@ -1,14 +1,14 @@
 import type { Author } from '../../graphql/types.gen'
 import Userpic from './Userpic'
 import { Icon } from '../Nav/Icon'
-import style from './Card.module.scss'
+import styles from './Card.module.scss'
 import { createMemo, For, Show } from 'solid-js'
 import { translit } from '../../utils/ru2en'
 import { t } from '../../utils/intl'
-import { useAuthStore } from '../../stores/auth'
 import { locale } from '../../stores/ui'
 import { follow, unfollow } from '../../stores/zine/common'
 import { clsx } from 'clsx'
+import { useSession } from '../../context/session'
 
 interface AuthorCardProps {
   compact?: boolean
@@ -19,10 +19,11 @@ interface AuthorCardProps {
   author: Author
   isAuthorPage?: boolean
   noSocialButtons?: boolean
+  isAuthorsList?: boolean
 }
 
 export const AuthorCard = (props: AuthorCardProps) => {
-  const { session } = useAuthStore()
+  const { session } = useSession()
 
   const subscribed = createMemo<boolean>(
     () => session()?.news?.authors?.some((u) => u === props.author.slug) || false
@@ -36,51 +37,81 @@ export const AuthorCard = (props: AuthorCardProps) => {
   }
   // TODO: reimplement AuthorCard
   return (
-    <div class={style.author} classList={{ [style.authorPage]: props.isAuthorPage }}>
+    <div
-      <Userpic user={props.author} hasLink={props.hasLink} isBig={props.isAuthorPage} />
+      class={clsx(styles.author)}
+      classList={{
+        [styles.authorPage]: props.isAuthorPage,
+        [styles.authorsListItem]: props.isAuthorsList
+      }}
+    >
+      <Userpic
+        user={props.author}
+        hasLink={props.hasLink}
+        isBig={props.isAuthorPage}
+        isAuthorsList={props.isAuthorsList}
+      />
 
-      <div class={style.authorDetails}>
+      <div class={styles.authorDetails}>
-        <div class={style.authorDetailsWrapper}>
+        <div class={styles.authorDetailsWrapper}>
           <Show when={props.hasLink}>
-            <a class={style.authorName} href={`/author/${props.author.slug}`}>
+            <a class={styles.authorName} href={`/author/${props.author.slug}`}>
               {name()}
             </a>
           </Show>
           <Show when={!props.hasLink}>
-            <div class={style.authorName}>{name()}</div>
+            <div class={styles.authorName}>{name()}</div>
           </Show>
 
           <Show when={!props.hideDescription}>
-            <div class={style.authorAbout}>{bio()}</div>
+            <div class={styles.authorAbout} classList={{ 'text-truncate': props.isAuthorsList }}>
+              {bio()}
+            </div>
           </Show>
         </div>
 
         <Show when={canFollow()}>
-          <div class={style.authorSubscribe}>
+          <div class={styles.authorSubscribe}>
             <Show
               when={subscribed()}
               fallback={
                 <button
                   onClick={() => follow}
-                  class={clsx('button button--subscribe', style.button, style.buttonSubscribe)}
+                  class={clsx('button', styles.button)}
+                  classList={{
+                    [styles.buttonSubscribe]: !props.isAuthorsList,
+                    'button--subscribe': !props.isAuthorsList,
+                    'button--subscribe-topic': props.isAuthorsList,
+                    [styles.buttonWrite]: props.isAuthorsList
+                  }}
                 >
-                  <Icon name="author-subscribe" class={style.icon} />
+                  <Show when={!props.isAuthorsList}>
-                  <span class={style.buttonLabel}>&nbsp;{t('Follow')}</span>
+                    <Icon name="author-subscribe" class={styles.icon} />
+                    &nbsp;
+                  </Show>
+                  <span class={styles.buttonLabel}>{t('Follow')}</span>
                 </button>
               }
             >
               <button
                 onClick={() => unfollow}
-                class={clsx('button button--subscribe', style.button, style.buttonSubscribe)}
+                classList={{
+                  [styles.buttonSubscribe]: !props.isAuthorsList,
+                  'button--subscribe': !props.isAuthorsList,
+                  'button--subscribe-topic': props.isAuthorsList,
+                  [styles.buttonWrite]: props.isAuthorsList
+                }}
               >
-                <Icon name="author-unsubscribe" class={style.icon} />
+                <Show when={!props.isAuthorsList}>
-                <span class={style.buttonLabel}>-&nbsp;{t('Unfollow')}</span>
+                  <Icon name="author-unsubscribe" class={styles.icon} />
+                  &nbsp;
+                </Show>
+                <span class={styles.buttonLabel}>{t('Unfollow')}</span>
               </button>
             </Show>
 
-            <Show when={!props.compact}>
+            <Show when={!props.compact && !props.isAuthorsList}>
-              <button class={clsx(style.buttonWrite, style.button, 'button button--subscribe-topic')}>
+              <button class={clsx(styles.buttonWrite, styles.button, 'button button--subscribe-topic')}>
-                <Icon name="edit" class={style.icon} />
+                <Icon name="edit" class={styles.icon} />
                 {t('Write')}
               </button>
 

src/components/Author/Userpic.module.scss

@@ -20,7 +20,7 @@
     border: 2px solid black;
     background-color: white;
     text-align: center;
-    line-height: 32px;
+    line-height: 28px;
   }
 
   .anonymous {
@@ -47,3 +47,15 @@
     width: 100%;
   }
 }
+
+.authorsList {
+  margin-right: 2.4rem;
+  max-height: 6.8rem;
+  min-width: 6.8rem;
+  height: 6.8rem;
+  width: 6.8rem;
+
+  .userpic {
+    line-height: 6.4rem;
+  }
+}

src/components/Author/Userpic.tsx

@@ -1,6 +1,6 @@
 import { Show } from 'solid-js'
 import type { Author } from '../../graphql/types.gen'
-import style from './Userpic.module.scss'
+import styles from './Userpic.module.scss'
 import { clsx } from 'clsx'
 
 interface UserpicProps {
@@ -8,6 +8,7 @@ interface UserpicProps {
   hasLink?: boolean
   isBig?: boolean
   class?: string
+  isAuthorsList?: boolean
 }
 
 export default (props: UserpicProps) => {
@@ -18,7 +19,13 @@ export default (props: UserpicProps) => {
   }
 
   return (
-    <div class={clsx(style.circlewrap, props.class)} classList={{ [style.big]: props.isBig }}>
+    <div
+      class={clsx(styles.circlewrap, props.class)}
+      classList={{
+        [styles.big]: props.isBig,
+        [styles.authorsList]: props.isAuthorsList
+      }}
+    >
       <Show when={props.hasLink}>
         <a href={`/author/${props.user.slug}`}>
           <Show
@@ -31,7 +38,7 @@ export default (props: UserpicProps) => {
               />
             }
           >
-            <div class={style.userpic}>{letters()}</div>
+            <div class={styles.userpic}>{letters()}</div>
           </Show>
         </a>
       </Show>
@@ -47,7 +54,7 @@ export default (props: UserpicProps) => {
             />
           }
         >
-          <div class={style.userpic}>{letters()}</div>
+          <div class={styles.userpic}>{letters()}</div>
         </Show>
       </Show>
     </div>

src/components/Discours/Footer.module.scss

@@ -39,6 +39,11 @@
       padding: 0 $container-padding-x;
     }
   }
+
+  ::selection {
+    background: #fff;
+    color: #000;
+  }
 }
 
 .discoursFooterContent {
@@ -56,7 +61,7 @@
   padding-top: 1.6rem;
 
   a {
-    color: rgba(255, 255, 255, 0.7);
+    color: rgb(255 255 255 / 70%);
 
     &:hover {
       color: #fff;

src/components/Discours/Hero.scss

@@ -19,6 +19,11 @@
   .wide-container {
     padding: 0;
   }
+
+  ::selection {
+    background: #fff;
+    color: #000;
+  }
 }
 
 .about-discours__actions {

src/components/Discours/Subscribe.tsx

@@ -1,4 +1,4 @@
-import { createSignal, onMount } from 'solid-js'
+import { createSignal } from 'solid-js'
 import styles from './Subscribe.module.scss'
 import { t } from '../../utils/intl'
 import { clsx } from 'clsx'

src/components/EditorExample/components/Sidebar.tsx

@@ -9,7 +9,6 @@ import { clsx } from 'clsx'
 import styles from './Sidebar.module.scss'
 import { useOutsideClickHandler } from '../../../utils/useOutsideClickHandler'
 import { useEscKeyDownHandler } from '../../../utils/useEscKeyDownHandler'
-import { hideModal } from '../../../stores/ui'
 
 const Off = (props) => <div class={styles.sidebarOff}>{props.children}</div>
 

src/components/EditorNew/Editor.tsx

@@ -0,0 +1,79 @@
+import { onMount } from 'solid-js'
+import { EditorState, Transaction } from 'prosemirror-state'
+import { EditorView, MarkViewConstructor, NodeViewConstructor } from 'prosemirror-view'
+import './prosemirror/styles/ProseMirror.scss'
+import type { Nodes, Marks } from './prosemirror/schema'
+import { createImageView } from './prosemirror/views/image'
+import { schema } from './prosemirror/schema'
+import { createPlugins } from './prosemirror/plugins'
+import { DOMSerializer } from 'prosemirror-model'
+import { clsx } from 'clsx'
+import { createArticle } from '../../stores/zine/articles'
+import type { ShoutInput } from '../../graphql/types.gen'
+import { Sidebar } from './Sidebar'
+
+const htmlContainer = typeof document === 'undefined' ? null : document.createElement('div')
+
+const getHtml = (state: EditorState) => {
+  const fragment = DOMSerializer.fromSchema(schema).serializeFragment(state.doc.content)
+  htmlContainer.replaceChildren(fragment)
+  return htmlContainer.innerHTML
+}
+
+export const Editor = () => {
+  const editorElRef: {
+    current: HTMLDivElement
+  } = {
+    current: null
+  }
+
+  const editorViewRef: { current: EditorView } = { current: null }
+
+  const dispatchTransaction = (tr: Transaction) => {
+    const newState = editorViewRef.current.state.apply(tr)
+    editorViewRef.current.updateState(newState)
+  }
+
+  onMount(async () => {
+    const plugins = createPlugins({ schema })
+
+    const nodeViews: Partial<Record<Nodes, NodeViewConstructor>> = {
+      image: createImageView
+    }
+
+    const markViews: Partial<Record<Marks, MarkViewConstructor>> = {}
+
+    editorViewRef.current = new EditorView(editorElRef.current, {
+      state: EditorState.create({
+        schema,
+        plugins
+      }),
+      nodeViews,
+      markViews,
+      dispatchTransaction
+    })
+
+    editorViewRef.current.focus()
+  })
+
+  const handleSaveButtonClick = () => {
+    const article: ShoutInput = {
+      body: getHtml(editorViewRef.current.state),
+      community: 'discours', // ?
+      slug: 'new-' + Math.floor(Math.random() * 1000000)
+    }
+    createArticle({ article })
+  }
+
+  return (
+    <div class="container" style={{ display: 'flex' }}>
+      <div style={{ flex: 1 }}>
+        <div ref={(el) => (editorElRef.current = el)} />
+        <button class={clsx('button')} onClick={handleSaveButtonClick}>
+          Опубликовать WIP
+        </button>
+      </div>
+      <Sidebar editorViewRef={editorViewRef} />
+    </div>
+  )
+}

src/components/EditorNew/Sidebar.module.scss

@@ -0,0 +1,221 @@
+.sidebarContainer {
+  color: rgb(255 255 255 / 50%);
+  @include font-size(1.6rem);
+
+  overflow: hidden;
+  position: relative;
+  top: 0;
+
+  p {
+    color: var(--foreground);
+  }
+
+  h4 {
+    @include font-size(120%);
+
+    margin-left: 1rem;
+  }
+
+  button {
+    height: auto;
+    min-height: 50px;
+    padding: 0 1rem;
+    width: 100%;
+  }
+}
+
+.sidebarOff {
+  background: #1f1f1f;
+  height: 100%;
+  min-height: 100vh;
+  padding: 40px 20px 20px;
+  top: 0;
+  transform: translateX(0);
+  transition: transform 0.3s;
+  overflow-y: auto;
+  scrollbar-width: none;
+  width: 350px;
+
+  .sidebarContainerHidden & {
+    transform: translateX(100%);
+  }
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.sidebarOpener {
+  color: #000;
+  cursor: pointer;
+  opacity: 1;
+  position: absolute;
+  top: 1em;
+  transition: opacity 0.3s;
+
+  &:hover {
+    opacity: 0.5;
+  }
+
+  &::after {
+    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_1090_23825' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='14' width='4' height='4'%3E%3Crect y='14.8237' width='3.17647' height='3.17647' fill='%23fff'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1090_23825)'%3E%3Cpath d='M16.0941 1.05908H0.847027C0.379194 1.05908 0 1.43828 0 1.90611V18.0003L3.38824 14.612H16.0942C16.562 14.612 16.9412 14.2328 16.9412 13.765V1.90614C16.9412 1.43831 16.562 1.05912 16.0942 1.05912L16.0941 1.05908ZM15.2471 12.9179H1.69412V2.7532H15.2471V12.9179Z' fill='black'/%3E%3C/g%3E%3Crect x='1' y='1' width='16' height='12.8235' stroke='black' stroke-width='2'/%3E%3Crect x='4.23535' y='3.17627' width='9.52941' height='2.11765' fill='black'/%3E%3Crect x='4.23535' y='9.5293' width='7.41176' height='2.11765' fill='black'/%3E%3Crect x='4.23535' y='6.35303' width='5.29412' height='2.11765' fill='black'/%3E%3C/svg%3E");
+    content: '';
+    height: 18px;
+    left: 100%;
+    margin-left: 0.3em;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 18px;
+  }
+}
+
+.sidebarCloser {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.1517 0.423857L0.42375 13.1518L2.84812 15.5761L15.576 2.84822L13.1517 0.423857Z M15.576 13.1518L2.84812 0.423855L0.423751 2.84822L13.1517 15.5761L15.576 13.1518Z' fill='white'/%3E%3C/svg%3E%0A");
+  cursor: pointer;
+  height: 16px;
+  opacity: 1;
+  position: absolute;
+  transition: opacity 0.3s;
+  top: 20px;
+  width: 16px;
+
+  &:hover {
+    opacity: 0.5;
+  }
+}
+
+.sidebarLabel {
+  color: var(--foreground);
+
+  > i {
+    text-transform: none;
+  }
+}
+
+.sidebarContainer button,
+.sidebarContainer a,
+.sidebarItem {
+  margin: 0;
+  outline: none;
+  display: flex;
+  align-items: center;
+  line-height: 24px;
+  text-align: left;
+}
+
+.sidebarContainer a,
+.sidebarItem {
+  font-size: 18px;
+  padding: 2px 0;
+  width: 100%;
+}
+
+.sidebarLink {
+  background: none;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  font-size: inherit;
+  justify-content: flex-start;
+
+  &:hover {
+    color: #fff !important;
+  }
+
+  &:active {
+    > span i {
+      position: relative;
+      box-shadow: none;
+      top: 1px;
+    }
+  }
+
+  &[disabled] {
+    color: var(--foreground);
+    cursor: not-allowed;
+  }
+
+  &.draft {
+    color: rgb(255 255 255 / 50%);
+    line-height: 1.4;
+    margin: 0 0 1em 1.5em;
+    width: calc(100% - 2rem);
+
+    &:hover {
+      background: none;
+    }
+  }
+
+  > span {
+    justify-self: flex-end;
+    margin-left: auto;
+
+    > i {
+      border: 1px solid;
+      border-bottom-width: 2px;
+      border-radius: 0.2rem;
+      display: inline-block;
+      color: inherit;
+      font-size: 13px;
+      line-height: 1.4;
+      margin: 0 0.5em 0 0;
+      padding: 1px 4px;
+
+      &:last-child {
+        text-transform: uppercase;
+      }
+    }
+  }
+}
+
+.themeSwitcher {
+  border-bottom: 1px solid rgb(255 255 255 / 30%);
+  border-top: 1px solid rgb(255 255 255 / 30%);
+  display: flex;
+  justify-content: space-between;
+  margin: 1rem;
+  padding: 1em 0;
+
+  input[type='checkbox'] {
+    opacity: 0;
+    position: absolute;
+
+    + label {
+      background: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.20869 7.73227C5.22953 7.36499 4.38795 6.70402 3.79906 5.83976C3.2103 4.97565 2.90318 3.95064 2.91979 2.90512C2.93639 1.8597 3.27597 0.844915 3.8919 0C2.82862 0.254038 1.87585 0.844877 1.17594 1.68438C0.475894 2.52388 0.0660276 3.5671 0.00731938 4.6585C-0.0513888 5.74989 0.244296 6.83095 0.850296 7.74073C1.45631 8.65037 2.34006 9.33992 3.36994 9.70637C4.39987 10.073 5.52063 10.0969 6.56523 9.77466C7.60985 9.45247 8.52223 8.80134 9.16667 7.91837C8.1842 8.15404 7.15363 8.08912 6.20869 7.73205V7.73227Z' fill='white'/%3E%3C/svg%3E%0A")
+          no-repeat 30px 9px,
+        url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.41196 0H5.58811V2.43024H6.41196V0ZM5.99988 8.96576C4.36601 8.96576 3.03419 7.63397 3.03419 6.00007C3.04792 4.3662 4.36598 3.04818 5.99988 3.03439C7.63375 3.03439 8.96557 4.3662 8.96557 6.00007C8.96557 7.63395 7.63375 8.96576 5.99988 8.96576ZM5.58811 9.56977H6.41196V12H5.58811V9.56977ZM12.0002 5.58811H9.56996V6.41196H12.0002V5.58811ZM0 5.58811H2.43024V6.41196H0V5.58811ZM8.81339 3.76727L10.5318 2.04891L9.94925 1.46641L8.23089 3.18477L8.81339 3.76727ZM3.7745 8.8129L2.05614 10.5313L1.47364 9.94877L3.192 8.2304L3.7745 8.8129ZM9.95043 10.5269L10.5329 9.94437L8.81456 8.22601L8.23207 8.80851L9.95043 10.5269ZM3.76864 3.18731L3.18614 3.76981L1.46778 2.05145L2.05028 1.46895L3.76864 3.18731Z' fill='%231F1F1F'/%3E%3C/svg%3E%0A")
+          #000 no-repeat 8px 8px;
+      border-radius: 14px;
+      cursor: pointer;
+      display: block;
+      height: 28px;
+      line-height: 10em;
+      overflow: hidden;
+      position: relative;
+      transition: background-color 0.3s;
+      width: 46px;
+
+      &::before {
+        background-color: #fff;
+        border-radius: 100%;
+        content: '';
+        height: 16px;
+        left: 6px;
+        position: absolute;
+        top: 6px;
+        transition: left 0.3s, color 0.3s;
+        width: 16px;
+      }
+    }
+
+    &:checked + label {
+      background-color: #fff;
+
+      &::before {
+        background-color: #1f1f1f;
+        left: 24px;
+      }
+    }
+  }
+}

src/components/EditorNew/Sidebar.tsx

@@ -0,0 +1,113 @@
+import { For, createEffect, createSignal, onCleanup, onMount } from 'solid-js'
+import type { JSX } from 'solid-js'
+import { undo, redo } from 'prosemirror-history'
+import { clsx } from 'clsx'
+import styles from './Sidebar.module.scss'
+import { useOutsideClickHandler } from '../../utils/useOutsideClickHandler'
+import { useEscKeyDownHandler } from '../../utils/useEscKeyDownHandler'
+import type { EditorView } from 'prosemirror-view'
+
+const Off = (props) => <div class={styles.sidebarOff}>{props.children}</div>
+
+const Link = (props: {
+  withMargin?: boolean
+  disabled?: boolean
+  title?: string
+  className?: string
+  children: JSX.Element
+  onClick?: () => void
+}) => (
+  <button
+    class={clsx(styles.sidebarLink, props.className, {
+      [styles.withMargin]: props.withMargin
+    })}
+    onClick={props.onClick}
+    disabled={props.disabled}
+    title={props.title}
+    data-testid={props['data-testid']}
+  >
+    {props.children}
+  </button>
+)
+
+const Keys = (props: { keys: string[] }) => (
+  <span>
+    <For each={props.keys}>{(k) => <i>{k}</i>}</For>
+  </span>
+)
+
+type SidebarProps = {
+  editorViewRef: {
+    current: EditorView
+  }
+}
+
+export const Sidebar = (props: SidebarProps) => {
+  const [lastAction, setLastAction] = createSignal<string | undefined>()
+
+  const { editorViewRef } = props
+
+  const onUndo = () => undo(editorViewRef.current.state, editorViewRef.current.dispatch)
+  const onRedo = () => redo(editorViewRef.current.state, editorViewRef.current.dispatch)
+
+  const [isHidden, setIsHidden] = createSignal(true)
+
+  const toggleSidebar = () => {
+    setIsHidden((oldIsHidden) => !oldIsHidden)
+  }
+
+  createEffect(() => {
+    setLastAction()
+  })
+
+  createEffect(() => {
+    if (!lastAction()) return
+    const id = setTimeout(() => {
+      setLastAction()
+    }, 1000)
+    onCleanup(() => clearTimeout(id))
+  })
+
+  const [mod, setMod] = createSignal<'Ctrl' | 'Cmd'>('Ctrl')
+
+  onMount(() => {
+    setMod(navigator.platform.includes('Mac') ? 'Cmd' : 'Ctrl')
+  })
+
+  const containerRef: { current: HTMLElement } = {
+    current: null
+  }
+
+  useEscKeyDownHandler(() => setIsHidden(true))
+  useOutsideClickHandler({
+    containerRef,
+    predicate: () => !isHidden(),
+    handler: () => setIsHidden(true)
+  })
+
+  return (
+    <div
+      class={clsx(styles.sidebarContainer, {
+        [styles.sidebarContainerHidden]: isHidden()
+      })}
+      ref={(el) => (containerRef.current = el)}
+    >
+      <span class={styles.sidebarOpener} onClick={toggleSidebar}>
+        Советы и&nbsp;предложения
+      </span>
+
+      <Off onClick={() => editorViewRef.current.focus()}>
+        <div class={styles.sidebarCloser} onClick={toggleSidebar} />
+
+        <div>
+          <Link onClick={onUndo}>
+            Undo <Keys keys={[mod(), 'z']} />
+          </Link>
+          <Link onClick={onRedo}>
+            Redo <Keys keys={[mod(), 'Shift', 'z']} />
+          </Link>
+        </div>
+      </Off>
+    </div>
+  )
+}

src/components/EditorNew/prosemirror/helpers/menu.ts

@@ -0,0 +1,215 @@
+import { toggleMark } from 'prosemirror-commands'
+import { wrapInList } from 'prosemirror-schema-list'
+import { blockTypeItem, icons, MenuItem, wrapItem, Dropdown } from 'prosemirror-menu'
+
+import type { NodeSelection } from 'prosemirror-state'
+
+import { TextField, openPrompt } from './prompt'
+
+import type { DiscoursSchema } from '../schema'
+
+function wrapListItem(nodeType, options) {
+  return cmdItem(wrapInList(nodeType, options.attrs), options)
+}
+
+function canInsert(state, nodeType) {
+  const $from = state.selection.$from
+
+  for (let d = $from.depth; d >= 0; d--) {
+    const index = $from.index(d)
+
+    if ($from.node(d).canReplaceWith(index, index, nodeType)) return true
+  }
+
+  return false
+}
+
+function insertImageItem(nodeType) {
+  return new MenuItem({
+    icon: icons.image,
+    label: 'image',
+    enable(state) {
+      return canInsert(state, nodeType)
+    },
+    run(state, _, view) {
+      const {
+        from,
+        to,
+        node: { attrs }
+      } = state.selection as NodeSelection
+
+      openPrompt({
+        title: 'Insert image',
+        fields: {
+          src: new TextField({
+            label: 'Location',
+            required: true,
+            value: attrs && attrs.src
+          }),
+          title: new TextField({ label: 'Title', value: attrs && attrs.title }),
+          alt: new TextField({
+            label: 'Description',
+            value: attrs ? attrs.alt : state.doc.textBetween(from, to, ' ')
+          })
+        },
+        onSubmit(newAttrs) {
+          view.dispatch(view.state.tr.replaceSelectionWith(nodeType.createAndFill(newAttrs)))
+          view.focus()
+        }
+      })
+    }
+  })
+}
+
+function cmdItem(cmd, options) {
+  const passedOptions = {
+    label: options.title,
+    run: cmd
+  }
+
+  for (const prop in options) passedOptions[prop] = options[prop]
+
+  if ((!options.enable || options.enable === true) && !options.select) {
+    passedOptions[options.enable ? 'enable' : 'select'] = (state) => cmd(state)
+  }
+
+  return new MenuItem(passedOptions)
+}
+
+function markActive(state, type) {
+  const { from, $from, to, empty } = state.selection
+
+  if (empty) return type.isInSet(state.storedMarks || $from.marks())
+
+  return state.doc.rangeHasMark(from, to, type)
+}
+
+function markItem(markType, options) {
+  const passedOptions = {
+    active(state) {
+      return markActive(state, markType)
+    },
+    enable: true
+  }
+
+  for (const prop in options) passedOptions[prop] = options[prop]
+
+  return cmdItem(toggleMark(markType), passedOptions)
+}
+
+function linkItem(markType) {
+  return new MenuItem({
+    title: 'Add or remove link',
+    icon: {
+      width: 18,
+      height: 18,
+      path: 'M3.27177 14.7277C2.06258 13.5186 2.06258 11.5527 3.27177 10.3435L6.10029 7.51502L4.75675 6.17148L1.92823 9C-0.0234511 10.9517 -0.0234511 14.1196 1.92823 16.0713C3.87991 18.023 7.04785 18.023 8.99952 16.0713L11.828 13.2428L10.4845 11.8992L7.65598 14.7277C6.44679 15.9369 4.48097 15.9369 3.27177 14.7277ZM6.87756 12.536L12.5346 6.87895L11.1203 5.46469L5.4633 11.1217L6.87756 12.536ZM6.17055 4.75768L8.99907 1.92916C10.9507 -0.0225206 14.1187 -0.0225201 16.0704 1.92916C18.022 3.88084 18.022 7.04878 16.0704 9.00046L13.2418 11.829L11.8983 10.4854L14.7268 7.65691C15.936 6.44772 15.936 4.4819 14.7268 3.27271C13.5176 2.06351 11.5518 2.06351 10.3426 3.2727L7.51409 6.10122L6.17055 4.75768Z'
+    },
+    active(state) {
+      return markActive(state, markType)
+    },
+    enable(state) {
+      return !state.selection.empty
+    },
+    run(state, dispatch, view) {
+      if (markActive(state, markType)) {
+        toggleMark(markType)(state, dispatch)
+
+        return true
+      }
+
+      openPrompt({
+        fields: {
+          href: new TextField({
+            label: 'Link target',
+            required: true
+          })
+        },
+        onSubmit(attrs) {
+          toggleMark(markType, attrs)(view.state, view.dispatch)
+          view.focus()
+        }
+      })
+    }
+  })
+}
+
+export const buildMenuItems = (schema: DiscoursSchema) => {
+  const toggleStrong = markItem(schema.marks.strong, {
+    title: 'Toggle strong style',
+    icon: {
+      width: 13,
+      height: 16,
+      path: 'M9.82857 7.76C10.9371 6.99429 11.7143 5.73714 11.7143 4.57143C11.7143 1.98857 9.71428 0 7.14286 0H0V16H8.04571C10.4343 16 12.2857 14.0571 12.2857 11.6686C12.2857 9.93143 11.3029 8.44571 9.82857 7.76ZM3.42799 2.85708H6.85656C7.80513 2.85708 8.57085 3.6228 8.57085 4.57137C8.57085 5.51994 7.80513 6.28565 6.85656 6.28565H3.42799V2.85708ZM3.42799 13.1429H7.42799C8.37656 13.1429 9.14228 12.3772 9.14228 11.4286C9.14228 10.4801 8.37656 9.71434 7.42799 9.71434H3.42799V13.1429Z'
+    }
+  })
+
+  const toggleEm = markItem(schema.marks.em, {
+    title: 'Toggle emphasis',
+    icon: {
+      width: 14,
+      height: 16,
+      path: 'M4.39216 0V3.42857H6.81882L3.06353 12.5714H0V16H8.78431V12.5714H6.35765L10.1129 3.42857H13.1765V0H4.39216Z'
+    }
+  })
+
+  const toggleLink = linkItem(schema.marks.link)
+
+  const insertImage = insertImageItem(schema.nodes.image)
+
+  const wrapBlockQuote = wrapItem(schema.nodes.blockquote, {
+    title: 'Wrap in block quote',
+    icon: icons.blockquote
+  })
+
+  const headingIcons = [
+    'M0 12H2.57143V7.16571H7.95429V12H10.5257V0H7.95429V4.83429H2.57143V0H0V12Z M12.6801 12H19.3315V9.78857H17.3944V0.342858H15.5087L12.6801 1.42286V3.75429L14.8744 2.93143V9.78857H12.6801V12Z',
+    'M0 12H2.57143V7.16571H7.95429V12H10.5257V0H7.95429V4.83429H2.57143V0H0V12Z M12.4915 12H21.2515V9.78857H15.4229C15.4229 9.05143 16.6229 8.43429 17.9944 7.59429C19.5372 6.68571 21.1658 5.52 21.1658 3.54857C21.1658 1.16571 19.2458 0.102858 16.8972 0.102858C15.4744 0.102858 14.0858 0.48 12.8858 1.33714V3.73714C14.1201 2.79429 15.4915 2.36571 16.6744 2.36571C17.8229 2.36571 18.5772 2.79429 18.5772 3.65143C18.5772 4.76571 17.5487 5.22857 16.3315 5.93143C14.6172 6.94286 12.4915 8.02286 12.4915 10.8514V12Z',
+    'M0 11.7647H2.52101V7.02521H7.79832V11.7647H10.3193V0H7.79832V4.7395H2.52101V0H0V11.7647Z M16.3474 12C18.7004 12 20.9189 11.042 20.9189 8.63866C20.9189 6.95798 19.8936 6.06723 18.7172 5.71429C19.7928 5.34454 20.4483 4.43697 20.4483 3.2605C20.4483 1.17647 18.6836 0.100841 16.3138 0.100841C14.9189 0.100841 13.6079 0.436975 12.5827 0.991597V3.34454C13.7088 2.63865 14.9357 2.31933 15.9609 2.31933C17.339 2.31933 18.0617 2.78992 18.0617 3.61345C18.0617 4.40336 17.3558 4.82353 16.2466 4.80672L14.6668 4.78992L14.6499 6.97479H16.5323C17.6752 6.97479 18.5155 7.31092 18.5155 8.28571C18.5155 9.36134 17.4399 9.7647 16.1457 9.78151C14.8348 9.79832 13.692 9.59664 12.381 8.87395V11.2269C13.692 11.7647 14.8852 12 16.3474 12Z'
+  ]
+
+  // 3 is the max heading level mb move to constant
+  const headings: MenuItem[] = []
+
+  for (let i = 0; i < 3; i++) {
+    headings.push(
+      blockTypeItem(schema.nodes.heading, {
+        label: `H${i + 1}`,
+        attrs: { level: i + 1 },
+        icon: {
+          width: 22,
+          height: 12,
+          path: headingIcons[i]
+        }
+      })
+    )
+  }
+
+  const typeMenu = new Dropdown([...headings, wrapBlockQuote], {
+    label: 'Тт',
+    class: 'editor-dropdown'
+  })
+
+  const wrapBulletList = wrapListItem(schema.nodes.bullet_list, {
+    title: 'Wrap in bullet list',
+    icon: {
+      width: 20,
+      height: 16,
+      path: 'M0.000114441 1.6C0.000114441 0.714665 0.71478 0 1.60011 0C2.48544 0 3.20011 0.714665 3.20011 1.6C3.20011 2.48533 2.48544 3.19999 1.60011 3.19999C0.71478 3.19999 0.000114441 2.48533 0.000114441 1.6ZM0 8.00013C0 7.1148 0.714665 6.40014 1.6 6.40014C2.48533 6.40014 3.19999 7.1148 3.19999 8.00013C3.19999 8.88547 2.48533 9.60013 1.6 9.60013C0.714665 9.60013 0 8.88547 0 8.00013ZM1.6 12.8C0.714665 12.8 0 13.5254 0 14.4C0 15.2747 0.725332 16 1.6 16C2.47466 16 3.19999 15.2747 3.19999 14.4C3.19999 13.5254 2.48533 12.8 1.6 12.8ZM19.7333 15.4662H4.79999V13.3329H19.7333V15.4662ZM4.79999 9.06677H19.7333V6.93344H4.79999V9.06677ZM4.79999 2.66664V0.533307H19.7333V2.66664H4.79999Z'
+    }
+  })
+
+  const wrapOrderedList = wrapListItem(schema.nodes.ordered_list, {
+    title: 'Wrap in ordered list',
+    icon: {
+      width: 19,
+      height: 16,
+      path: 'M2.00002 4.00003H1.00001V1.00001H0V0H2.00002V4.00003ZM2.00002 13.5V13H0V12H3.00003V16H0V15H2.00002V14.5H1.00001V13.5H2.00002ZM0 6.99998H1.80002L0 9.1V10H3.00003V9H1.20001L3.00003 6.89998V5.99998H0V6.99998ZM4.9987 2.99967V0.999648H18.9988V2.99967H4.9987ZM4.9987 15.0001H18.9988V13.0001H4.9987V15.0001ZM18.9988 8.99987H4.9987V6.99986H18.9988V8.99987Z'
+    }
+  })
+
+  const listMenu = [wrapBulletList, wrapOrderedList]
+  const inlineMenu = [toggleStrong, toggleEm]
+
+  return [[typeMenu, ...inlineMenu, toggleLink, insertImage, ...listMenu]]
+}

src/components/EditorNew/prosemirror/helpers/prompt.ts

@@ -0,0 +1,197 @@
+const prefix = 'ProseMirror-prompt'
+
+const createButton = ({
+  textContent,
+  type = 'button',
+  className,
+  onClick
+}: {
+  textContent: string
+  type?: 'button' | 'submit'
+  className: string
+  onClick?: () => void
+}) => {
+  const button = document.createElement('button')
+  button.type = type
+  button.className = className
+  button.textContent = textContent
+
+  if (onClick) {
+    button.addEventListener('click', onClick)
+  }
+
+  return button
+}
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
+export function openPrompt(options: {
+  title?: string
+  fields: Record<string, Field>
+  onSubmit: (values: Record<string, string>) => void
+}) {
+  const wrapper = document.body.appendChild(document.createElement('div'))
+  wrapper.className = prefix
+
+  const mouseOutside = (ev: MouseEvent & { target: Node }) => {
+    if (!wrapper.contains(ev.target)) {
+      close()
+    }
+  }
+
+  setTimeout(() => window.addEventListener('mousedown', mouseOutside), 50)
+
+  const close = () => {
+    window.removeEventListener('mousedown', mouseOutside)
+    if (wrapper.parentNode) wrapper.remove()
+  }
+
+  const domFields: HTMLElement[] = []
+
+  Object.keys(options.fields).forEach((name) => {
+    domFields.push(options.fields[name].render())
+  })
+
+  const submitButton = createButton({ textContent: 'OK', type: 'submit', className: prefix + '-submit' })
+  const cancelButton = createButton({
+    className: prefix + '-cancel',
+    textContent: 'Cancel',
+    onClick: close
+  })
+
+  const form = wrapper.appendChild(document.createElement('form'))
+
+  if (options.title) {
+    form.appendChild(document.createElement('h5')).textContent = options.title
+  }
+
+  domFields.forEach((fieldEl: HTMLElement) => {
+    form.appendChild(document.createElement('div')).appendChild(fieldEl)
+  })
+
+  const buttons = form.appendChild(document.createElement('div'))
+  buttons.className = prefix + '-buttons'
+  buttons.appendChild(submitButton)
+  buttons.appendChild(document.createTextNode(' '))
+  buttons.appendChild(cancelButton)
+
+  const box = wrapper.getBoundingClientRect()
+  wrapper.style.top = (window.innerHeight - box.height) / 2 + 'px'
+  wrapper.style.left = (window.innerWidth - box.width) / 2 + 'px'
+
+  const submit = () => {
+    const values = getValues(options.fields, domFields)
+    if (values) {
+      close()
+      options.onSubmit(values)
+    }
+  }
+
+  form.addEventListener('submit', (e) => {
+    e.preventDefault()
+    submit()
+  })
+
+  form.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      close()
+    } else if (e.key === 'Enter' && !(e.ctrlKey || e.metaKey || e.shiftKey)) {
+      e.preventDefault()
+      submit()
+    } else if (e.key === 'Tab') {
+      window.setTimeout(() => {
+        if (!wrapper.contains(document.activeElement)) close()
+      }, 500)
+    }
+  })
+
+  form.querySelector('input')?.focus()
+}
+
+function getValues(fields: Record<string, Field>, domFields: HTMLElement[]) {
+  const result = {}
+
+  // TODO: make field read its own value, maybe move to SolidJS
+  const fieldNames = Object.keys(fields)
+
+  for (const [i, fieldName] of fieldNames.entries()) {
+    const field = fields[fieldName]
+
+    const dom = domFields[i]
+    const value = field.read(dom)
+    const bad = field.validate(value)
+
+    if (bad) {
+      reportInvalid(dom, bad)
+      return null
+    }
+
+    result[fieldName] = field.clean(value)
+  }
+
+  return result
+}
+
+function reportInvalid(dom: HTMLElement, message: string) {
+  const msg: HTMLElement = dom.parentNode.appendChild(document.createElement('div'))
+  msg.style.left = dom.offsetLeft + dom.offsetWidth + 2 + 'px'
+  msg.style.top = dom.offsetTop - 5 + 'px'
+  msg.className = 'ProseMirror-invalid'
+  msg.textContent = message
+  setTimeout(msg.remove, 1500)
+}
+
+export abstract class Field {
+  options: any
+
+  constructor(options: any) {
+    this.options = options
+  }
+
+  read(dom: any) {
+    return dom.value
+  }
+
+  // :: (any) → ?string
+  // A field-type-specific validation function.
+  validateType(_value) {
+    return typeof _value === typeof ''
+  }
+
+  validate(value: any) {
+    if (!value && this.options.required) return 'Required field'
+
+    return this.validateType(value) || (this.options.validate && this.options.validate(value))
+  }
+
+  clean(value: any) {
+    return this.options.clean ? this.options.clean(value) : value
+  }
+
+  abstract render(): HTMLElement
+}
+
+export class TextField extends Field {
+  render() {
+    const input: HTMLInputElement = document.createElement('input')
+
+    input.type = 'text'
+    input.placeholder = this.options.label
+    input.value = this.options.value || ''
+    input.autocomplete = 'off'
+    return input
+  }
+}
+
+export class SelectField extends Field {
+  render() {
+    const select = document.createElement('select')
+    this.options.options.forEach((o: { value: string; label: string }) => {
+      const opt = select.appendChild(document.createElement('option'))
+      opt.value = o.value
+      opt.selected = o.value === this.options.value
+      opt.label = o.label
+    })
+    return select
+  }
+}

src/components/EditorNew/prosemirror/plugins/customKeymap.ts

@@ -0,0 +1,18 @@
+import { baseKeymap } from 'prosemirror-commands'
+import type { Command } from 'prosemirror-state'
+import { redo, undo } from 'prosemirror-history'
+import { keymap } from 'prosemirror-keymap'
+
+export const customKeymap = () => {
+  const bindings: {
+    [key: string]: Command
+  } = {
+    ...baseKeymap,
+    Tab: () => true,
+    // TODO: collab
+    [`Mod-z`]: undo,
+    [`Shift-Mod-z`]: redo
+  }
+
+  return keymap(bindings)
+}

src/components/EditorNew/prosemirror/plugins/dragHandle.ts

@@ -0,0 +1,48 @@
+import { Plugin, NodeSelection } from 'prosemirror-state'
+import { DecorationSet, Decoration } from 'prosemirror-view'
+
+const handleIcon = `
+  <svg viewBox="0 0 10 10" height="14" width="14">
+  <path d="M3 2a1 1 0 110-2 1 1 0 010 2zm0 4a1 1 0 110-2 1 1 0 010 2zm0 4a1 1 0 110-2 1 1 0 010 2zm4-8a1 1 0 110-2 1 1 0 010 2zm0 4a1 1 0 110-2 1 1 0 010 2zm0 4a1 1 0 110-2 1 1 0 010 2z"/>
+  </svg>`
+
+const createDragHandle = () => {
+  const handle = document.createElement('span')
+  handle.setAttribute('contenteditable', 'false')
+  const icon = document.createElement('span')
+  icon.innerHTML = handleIcon
+  handle.appendChild(icon)
+  handle.classList.add('handle')
+  return handle
+}
+
+export const dragHandle = () =>
+  new Plugin({
+    props: {
+      decorations(state) {
+        const decos = []
+        state.doc.forEach((node, pos) => {
+          decos.push(
+            Decoration.widget(pos + 1, createDragHandle),
+            Decoration.node(pos, pos + node.nodeSize, { class: 'draggable' })
+          )
+        })
+
+        return DecorationSet.create(state.doc, decos)
+      },
+      handleDOMEvents: {
+        mousedown: (editorView, event: MouseEvent & { target: Element }) => {
+          const target = event.target
+
+          if (target.classList.contains('handle')) {
+            const pos = editorView.posAtCoords({ left: event.x, top: event.y })
+            const resolved = editorView.state.doc.resolve(pos.pos)
+            const tr = editorView.state.tr
+            tr.setSelection(NodeSelection.create(editorView.state.doc, resolved.before()))
+            editorView.dispatch(tr)
+            return false
+          }
+        }
+      }
+    }
+  })

src/components/EditorNew/prosemirror/plugins/image.ts

@@ -0,0 +1,50 @@
+import { Plugin } from 'prosemirror-state'
+import type { DiscoursSchema } from '../schema'
+
+const REGEX = /^!\[([^[\]]*?)]\((.+?)\)\s+/
+const MAX_MATCH = 500
+
+const isUrl = (str: string) => {
+  try {
+    const url = new URL(str)
+    return url.protocol === 'http:' || url.protocol === 'https:'
+  } catch {
+    return false
+  }
+}
+
+const isBlank = (text: string) => text === ' ' || text === '\u00A0'
+
+export const imageInput = (schema: DiscoursSchema) =>
+  new Plugin({
+    props: {
+      handleTextInput(view, from, to, text) {
+        if (view.composing || !isBlank(text)) return false
+        const $from = view.state.doc.resolve(from)
+        if ($from.parent.type.spec.code) return false
+        const textBefore =
+          $from.parent.textBetween(
+            Math.max(0, $from.parentOffset - MAX_MATCH),
+            $from.parentOffset,
+            null,
+            '\uFFFC'
+          ) + text
+
+        const match = REGEX.exec(textBefore)
+        if (match) {
+          const [, title, src] = match
+          if (isUrl(src)) {
+            const node = schema.node('image', { src, title })
+            const start = from - (match[0].length - text.length)
+            const tr = view.state.tr
+            tr.delete(start, to)
+            tr.insert(start, node)
+            view.dispatch(tr)
+            return true
+          }
+
+          return false
+        }
+      }
+    }
+  })

src/components/EditorNew/prosemirror/plugins/index.ts

@@ -0,0 +1,24 @@
+import { history } from 'prosemirror-history'
+import { dropCursor } from 'prosemirror-dropcursor'
+import { placeholder } from './placeholder'
+import { t } from '../../../../utils/intl'
+import styles from '../styles/ProseMirror.module.scss'
+import type { DiscoursSchema } from '../schema'
+import { dragHandle } from './dragHandle'
+import { selectionMenu } from './selectionMenu'
+import { imageInput } from './image'
+import { customKeymap } from './customKeymap'
+
+export const createPlugins = ({ schema }: { schema: DiscoursSchema }) => {
+  return [
+    placeholder(t('Just start typing...')),
+    customKeymap(),
+    history(),
+    dropCursor({ class: styles.dropCursor }),
+    selectionMenu(schema),
+    dragHandle(),
+    imageInput(schema)
+    // TODO
+    // link(),
+  ]
+}

src/components/EditorNew/prosemirror/plugins/placeholder.ts

@@ -0,0 +1,23 @@
+import { Plugin } from 'prosemirror-state'
+import { DecorationSet, Decoration } from 'prosemirror-view'
+import styles from '../styles/ProseMirror.module.scss'
+
+export const placeholder = (text: string): Plugin =>
+  new Plugin({
+    props: {
+      decorations(state) {
+        const { doc } = state
+
+        if (doc.childCount > 1 || !doc.firstChild.isTextblock || doc.firstChild.content.size > 0) {
+          return
+        }
+
+        const div = document.createElement('div')
+        div.setAttribute('contenteditable', 'false')
+        div.classList.add(styles.placeholder)
+        div.textContent = text
+
+        return DecorationSet.create(doc, [Decoration.widget(1, div)])
+      }
+    }
+  })

src/components/EditorNew/prosemirror/plugins/selectionMenu.ts

@@ -0,0 +1,53 @@
+import { renderGrouped } from 'prosemirror-menu'
+import { EditorState, Plugin } from 'prosemirror-state'
+import styles from '../styles/ProseMirror.module.scss'
+import type { EditorView } from 'prosemirror-view'
+import type { DiscoursSchema } from '../schema'
+import { buildMenuItems } from '../helpers/menu'
+
+export class SelectionMenuView {
+  tooltip: HTMLDivElement
+
+  constructor(view: EditorView, schema: DiscoursSchema) {
+    this.tooltip = document.createElement('div')
+    this.tooltip.className = styles.selectionMenu
+    view.dom.parentNode.appendChild(this.tooltip)
+    const { dom } = renderGrouped(view, buildMenuItems(schema))
+    this.tooltip.appendChild(dom)
+    this.update(view, null)
+  }
+
+  update(view: EditorView, lastState: EditorState) {
+    const state = view.state
+
+    if (lastState && lastState.doc.eq(state.doc) && lastState.selection.eq(state.selection)) {
+      return
+    }
+
+    if (state.selection.empty) {
+      this.tooltip.style.display = 'none'
+      return
+    }
+
+    this.tooltip.style.display = ''
+    const { from, to } = state.selection
+    const start = view.coordsAtPos(from)
+    const end = view.coordsAtPos(to)
+    const box = this.tooltip.offsetParent.getBoundingClientRect()
+    const width = this.tooltip.getBoundingClientRect().width
+    const left = (start.left + end.left - width) / 2
+    this.tooltip.style.left = `${left - box.left}px`
+    this.tooltip.style.bottom = `${box.bottom - start.top + 8}px`
+  }
+
+  destroy() {
+    this.tooltip.remove()
+  }
+}
+
+export const selectionMenu = (schema: DiscoursSchema) =>
+  new Plugin({
+    view(editorView: EditorView) {
+      return new SelectionMenuView(editorView, schema)
+    }
+  })

src/components/EditorNew/prosemirror/schema.ts

@@ -0,0 +1,172 @@
+import { Node, Schema, SchemaSpec } from 'prosemirror-model'
+
+export type Nodes =
+  | 'doc'
+  | 'paragraph'
+  | 'text'
+  | 'heading'
+  | 'ordered_list'
+  | 'bullet_list'
+  | 'list_item'
+  | 'blockquote'
+  | 'image'
+  | 'embed'
+
+export type Marks = 'strong' | 'em' | 'strikethrough' | 'note' | 'link' | 'highlight'
+
+export type DiscoursSchema = Schema<Nodes, Marks>
+
+export const schemaSpec: SchemaSpec<Nodes, Marks> = {
+  nodes: {
+    doc: {
+      content: 'block+'
+    },
+    paragraph: {
+      content: 'inline*',
+      group: 'block',
+      parseDOM: [{ tag: 'p' }],
+      toDOM: () => ['p', 0]
+    },
+    text: {
+      group: 'inline'
+    },
+    heading: {
+      attrs: { level: { default: 1 } },
+      content: 'inline*',
+      group: 'block',
+      defining: true,
+      parseDOM: [
+        { tag: 'h1', attrs: { level: 1 } },
+        { tag: 'h2', attrs: { level: 2 } },
+        { tag: 'h3', attrs: { level: 3 } }
+      ],
+      toDOM(node) {
+        return ['h' + node.attrs.level, 0]
+      }
+    },
+    ordered_list: {
+      group: 'block',
+      content: 'list_item+',
+      attrs: { order: { default: 1 } },
+      parseDOM: [
+        {
+          tag: 'ol',
+          getAttrs(dom: HTMLElement) {
+            return { order: dom.hasAttribute('start') ? +dom.getAttribute('start') : 1 }
+          }
+        }
+      ],
+      toDOM(node) {
+        return node.attrs.order === 1 ? ['ol', 0] : ['ol', { start: node.attrs.order }, 0]
+      }
+    },
+    bullet_list: {
+      group: 'block',
+      content: 'list_item+',
+      parseDOM: [{ tag: 'ul' }],
+      toDOM() {
+        return ['ul', 0]
+      }
+    },
+    list_item: {
+      content: 'paragraph block*',
+      parseDOM: [{ tag: 'li' }],
+      toDOM() {
+        return ['li', 0]
+      },
+      defining: true
+    },
+    blockquote: {
+      content: 'block+',
+      group: 'block',
+      defining: true,
+      parseDOM: [{ tag: 'blockquote' }],
+      toDOM() {
+        return ['blockquote', 0]
+      }
+    },
+    embed: {},
+    ///
+    image: {
+      inline: true,
+      attrs: {
+        src: {},
+        alt: { default: null },
+        title: { default: null },
+        path: { default: null },
+        width: { default: null }
+      },
+      group: 'inline',
+      draggable: true,
+      parseDOM: [
+        {
+          tag: 'img[src]',
+          getAttrs: (dom: HTMLElement) => ({
+            src: dom.getAttribute('src'),
+            title: dom.getAttribute('title'),
+            alt: dom.getAttribute('alt'),
+            path: dom.dataset.path
+          })
+        }
+      ],
+      toDOM: (node: Node) => [
+        'img',
+        {
+          src: node.attrs.src,
+          title: node.attrs.title,
+          alt: node.attrs.alt,
+          'data-path': node.attrs.path
+        }
+      ]
+    }
+  },
+  marks: {
+    strong: {
+      parseDOM: [
+        { tag: 'strong' },
+        // This works around a Google Docs misbehavior where
+        // pasted content will be inexplicably wrapped in `<b>`
+        // tags with a font-weight normal.
+        { tag: 'b', getAttrs: (node: HTMLElement) => node.style.fontWeight !== 'normal' && null },
+        {
+          style: 'font-weight',
+          getAttrs: (value: string) => /^(bold(er)?|[5-9]\d{2,})$/.test(value) && null
+        }
+      ],
+      toDOM() {
+        return ['strong', 0]
+      }
+    },
+    em: {
+      parseDOM: [{ tag: 'i' }, { tag: 'em' }, { style: 'font-style=italic' }],
+      toDOM() {
+        return ['em', 0]
+      }
+    },
+    link: {
+      attrs: {
+        href: {},
+        title: { default: null }
+      },
+      inclusive: false,
+      parseDOM: [
+        {
+          tag: 'a[href]',
+          getAttrs(dom: HTMLElement) {
+            return { href: dom.getAttribute('href'), title: dom.getAttribute('title') }
+          }
+        }
+      ],
+      toDOM(node) {
+        const { href, title } = node.attrs
+        return ['a', { href, title }, 0]
+      }
+    },
+    // TODO:
+    highlight: {},
+    strikethrough: {},
+    note: {}
+  }
+}
+
+export const schema = new Schema(schemaSpec)

src/components/EditorNew/prosemirror/styles/ProseMirror.module.scss

@@ -0,0 +1,21 @@
+.dropCursor {
+  // TODO check why important
+  height: 2px !important;
+  opacity: 0.5;
+}
+
+.selectionMenu {
+  background: #fff;
+  box-shadow: 0 4px 10px rgb(0 0 0 / 25%);
+  color: #000;
+  display: flex;
+  position: absolute;
+  z-index: 100;
+}
+
+.placeholder {
+  opacity: 0.3;
+  position: absolute;
+  pointer-events: none;
+  user-select: none;
+}

src/components/EditorNew/prosemirror/styles/ProseMirror.scss

@@ -0,0 +1,329 @@
+.ProseMirror {
+  color: var(--foreground);
+  background-color: var(--background);
+  position: relative;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  font-variant-ligatures: none;
+  outline: none;
+  margin: 1em 1em 1em 0;
+
+  .dark & {
+    color: var(--background);
+    background-color: var(--foreground);
+  }
+
+  .draggable {
+    position: relative;
+    margin-left: -30px;
+    padding-left: 30px;
+  }
+
+  .handle {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: calc(var(--font-fize) * 1.6px);
+    opacity: 0;
+    cursor: move;
+    transition: opacity 0.3s;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    > span {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 3px;
+      padding: 6px;
+      fill: var(--foreground);
+      pointer-events: none;
+      user-select: none;
+    }
+
+    &:hover > span {
+      background: var(--foreground);
+    }
+  }
+
+  h1 .handle {
+    height: calc(var(--font-size) * 2.3px);
+  }
+
+  .draggable:hover .handle {
+    opacity: 1;
+  }
+
+  blockquote {
+    border-left: 2px solid;
+    @include font-size(1.6rem);
+
+    margin: 1.5em 0;
+    padding-left: 1.6em;
+  }
+}
+
+.ProseMirror-menuitem {
+  display: flex;
+  font-size: small;
+
+  &:hover {
+    > * {
+      background: #eee;
+    }
+
+    .ProseMirror-menu-disabled {
+      background: inherit;
+    }
+  }
+
+  > * {
+    cursor: pointer;
+    align-items: center;
+    display: flex;
+    padding: 0.8rem 1em;
+  }
+}
+
+.ProseMirror-textblock-dropdown {
+  min-width: 3em;
+}
+
+.ProseMirror-menu {
+  margin: 0 -4px;
+  line-height: 1;
+}
+
+.ProseMirror-tooltip .ProseMirror-menu {
+  width: fit-content;
+  white-space: pre;
+}
+
+.ProseMirror-menuseparator {
+  border-right: 1px solid #ddd;
+}
+
+.ProseMirror-menu-dropdown,
+.ProseMirror-menu-dropdown-menu {
+  padding: 4px;
+  white-space: nowrap;
+}
+
+.ProseMirror-menu-dropdown {
+  vertical-align: 1px;
+  cursor: pointer;
+  position: relative;
+  padding-right: 15px;
+}
+
+.ProseMirror-menu-dropdown-wrap {
+  padding: 1px 0 1px 4px;
+  display: inline-block;
+  position: relative;
+}
+
+.ProseMirror-menu-dropdown::after {
+  content: '';
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid currentcolor;
+  opacity: 0.6;
+  position: absolute;
+  right: 4px;
+  top: calc(50% - 2px);
+}
+
+.ProseMirror-menu-dropdown-menu,
+.ProseMirror-menu-submenu {
+  position: absolute;
+  background: white;
+  color: #666;
+  border: 1px solid #aaa;
+  padding: 2px;
+}
+
+.ProseMirror-menu-dropdown-menu {
+  z-index: 15;
+
+  /* min-width: 6em; */
+}
+
+.ProseMirror-menu-dropdown-item {
+  cursor: pointer;
+  padding: 2px 8px 2px 4px;
+}
+
+.ProseMirror-menu-dropdown-item:hover {
+  background: #f2f2f2;
+}
+
+.ProseMirror-menu-submenu-wrap {
+  position: relative;
+  margin-right: -4px;
+}
+
+.ProseMirror-menu-submenu-label::after {
+  content: '';
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 4px solid currentcolor;
+  opacity: 0.6;
+  position: absolute;
+  right: 4px;
+  top: calc(50% - 4px);
+}
+
+.ProseMirror-menu-submenu {
+  display: none;
+  left: 100%;
+  top: -3px;
+}
+
+.ProseMirror-menu-active {
+  background: #eee;
+}
+
+.ProseMirror-menu-disabled {
+  cursor: default;
+  opacity: 0.3;
+}
+
+.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu,
+.ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu {
+  display: block;
+}
+
+.ProseMirror-menubar {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+  display: flex;
+  position: relative;
+  min-height: 1em;
+  color: #666;
+  padding: 0 1.5em;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-bottom: 1px solid silver;
+  background: white;
+  z-index: 10;
+  box-sizing: border-box;
+  overflow: visible;
+}
+
+.ProseMirror-icon {
+  cursor: pointer;
+  line-height: 0.8;
+}
+
+.ProseMirror-menu-disabled.ProseMirror-icon {
+  cursor: default;
+}
+
+.ProseMirror-icon svg {
+  fill: currentcolor;
+  height: 1em;
+}
+
+.ProseMirror-icon span {
+  vertical-align: text-top;
+}
+
+.ProseMirror pre {
+  white-space: pre-wrap;
+}
+
+.ProseMirror li {
+  position: relative;
+}
+
+.ProseMirror-hideselection *::selection {
+  background: transparent;
+}
+
+.ProseMirror-hideselection {
+  caret-color: transparent;
+}
+
+.ProseMirror-selectednode {
+  outline: 2px solid #8cf;
+}
+
+/* Make sure li selections wrap around markers */
+li.ProseMirror-selectednode {
+  outline: none;
+}
+
+li.ProseMirror-selectednode::after {
+  content: '';
+  position: absolute;
+  left: -32px;
+  right: -2px;
+  top: -2px;
+  bottom: -2px;
+  border: 2px solid #8cf;
+  pointer-events: none;
+}
+
+.ProseMirror .empty-node::before {
+  position: absolute;
+  color: #aaa;
+  cursor: text;
+}
+
+.ProseMirror .empty-node:hover::before {
+  color: #777;
+}
+
+.ProseMirror.editor_empty::before {
+  position: absolute;
+  content: attr(data-placeholder);
+  pointer-events: none;
+  color: var(--ui-color-placeholder);
+}
+
+.ProseMirror-prompt {
+  background: #fff;
+  box-shadow: 0 4px 10px rgb(0 0 0 / 25%);
+  font-size: 0.7em;
+  position: absolute;
+}
+
+.ProseMirror-prompt input[type='text'] {
+  border: none;
+  font-size: 100%;
+  margin-bottom: 0;
+  padding: 0.5em 7.5em 0.5em 0.5em;
+}
+
+.ProseMirror-prompt-buttons {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 100%;
+}
+
+.ProseMirror-prompt-buttons button {
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 90%;
+  height: 100%;
+  line-height: 10em;
+  margin-bottom: 0;
+  overflow: hidden;
+  vertical-align: top;
+  width: 2.5em;
+}
+
+.ProseMirror-prompt-submit {
+  background: url("data:image/svg+xml,%3Csvg width='19' height='15' viewBox='0 0 19 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19 2.73787L16.2621 0L6.78964 9.47248L2.73787 5.42071L0 8.15858L6.78964 14.9482L19 2.73787Z' fill='%23393840'/%3E%3C/svg%3E")
+    center no-repeat;
+}
+
+.ProseMirror-prompt-cancel {
+  background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.1512 0.423856L0.423263 13.1518L2.84763 15.5761L15.5756 2.84822L13.1512 0.423856Z M15.5755 13.1518L2.84763 0.423855L0.423263 2.84822L13.1512 15.5761L15.5755 13.1518Z' fill='%23393840'/%3E%3C/svg%3E%0A")
+    center no-repeat;
+}

src/components/EditorNew/prosemirror/views/image.ts

@@ -0,0 +1,68 @@
+import type { EditorView, NodeView, NodeViewConstructor } from 'prosemirror-view'
+import type { Node } from 'prosemirror-model'
+
+class ImageView implements NodeView {
+  node: Node
+  view: EditorView
+  getPos: () => number
+  dom: Element
+  container: HTMLElement
+  handle: HTMLElement
+  onResizeFn: any
+  onResizeEndFn: any
+  width: number
+  updating: number
+
+  constructor(node: Node, view: EditorView, getPos: () => number) {
+    this.node = node
+    this.view = view
+    this.getPos = getPos
+    this.onResizeFn = this.onResize.bind(this)
+    this.onResizeEndFn = this.onResizeEnd.bind(this)
+
+    this.container = document.createElement('span')
+    this.container.className = 'image-container'
+    if (node.attrs.width) this.setWidth(node.attrs.width)
+
+    const image = document.createElement('img')
+    image.setAttribute('title', node.attrs.title ?? '')
+    image.setAttribute('src', node.attrs.src)
+
+    this.handle = document.createElement('span')
+    this.handle.className = 'resize-handle'
+    this.handle.addEventListener('mousedown', (e) => {
+      e.preventDefault()
+      window.addEventListener('mousemove', this.onResizeFn)
+      window.addEventListener('mouseup', this.onResizeEndFn)
+    })
+
+    this.container.appendChild(image)
+    this.container.appendChild(this.handle)
+    this.dom = this.container
+  }
+
+  onResize(e: MouseEvent) {
+    this.width = e.pageX - this.container.getBoundingClientRect().left
+    this.setWidth(this.width)
+  }
+
+  onResizeEnd() {
+    window.removeEventListener('mousemove', this.onResizeFn)
+    if (this.updating === this.width) return
+    this.updating = this.width
+    const tr = this.view.state.tr
+    tr.setNodeMarkup(this.getPos(), undefined, {
+      ...this.node.attrs,
+      width: this.width
+    })
+
+    this.view.dispatch(tr)
+  }
+
+  setWidth(width: number) {
+    this.container.style.width = width + 'px'
+  }
+}
+
+export const createImageView: NodeViewConstructor = (node: Node, view: EditorView, getPos: () => number) =>
+  new ImageView(node, view, getPos)

src/components/Feed/Beside.module.scss

@@ -12,6 +12,8 @@
   }
 
   li {
+    margin-bottom: 1em;
+
     &.top {
       border-bottom: 1px solid #e1e1e1;
       display: flex;

src/components/Feed/Row2.tsx

@@ -8,7 +8,7 @@ const x = [
   ['8', '4']
 ]
 
-export const Row2 = (props: { articles: Shout[] }) => {
+export const Row2 = (props: { articles: Shout[]; isEqual?: boolean }) => {
   const [y, setY] = createSignal(0)
 
   createComputed(() => setY(Math.floor(Math.random() * x.length)))
@@ -20,8 +20,11 @@ export const Row2 = (props: { articles: Shout[] }) => {
           {(a, i) => {
             return (
               <Show when={!!a}>
-                <div class={`col-md-${x[y()][i()]}`}>
+                <div class={`col-md-${props.isEqual ? '6' : x[y()][i()]}`}>
-                  <ArticleCard article={a} settings={{ isWithCover: x[y()][i()] === '8' }} />
+                  <ArticleCard
+                    article={a}
+                    settings={{ isWithCover: props.isEqual || x[y()][i()] === '8' }}
+                  />
                 </div>
               </Show>
             )

src/components/Feed/Sidebar.tsx

@@ -1,12 +1,12 @@
 import { For } from 'solid-js'
 import type { Author } from '../../graphql/types.gen'
-import { useAuthStore } from '../../stores/auth'
 import { useAuthorsStore } from '../../stores/zine/authors'
 import { t } from '../../utils/intl'
 import { Icon } from '../Nav/Icon'
 import { useTopicsStore } from '../../stores/zine/topics'
 import { useArticlesStore } from '../../stores/zine/articles'
 import { useSeenStore } from '../../stores/zine/seen'
+import { useSession } from '../../context/session'
 
 type FeedSidebarProps = {
   authors: Author[]
@@ -14,7 +14,7 @@ type FeedSidebarProps = {
 
 export const FeedSidebar = (props: FeedSidebarProps) => {
   const { getSeen: seen } = useSeenStore()
-  const { session } = useAuthStore()
+  const { session } = useSession()
   const { authorEntities } = useAuthorsStore({ authors: props.authors })
   const { articlesByTopic } = useArticlesStore()
   const { topicEntities } = useTopicsStore()

src/components/Feed/Slider.scss

@@ -1,15 +1,18 @@
 .swiper-slide {
-  height: 0 !important;
   min-height: 0 !important;
   margin-bottom: 0 !important;
-  padding-top: 100%;
 
-  @include media-breakpoint-up(sm) {
+  .cards-with-cover & {
-    padding-top: 56.2% !important;
+    height: 0 !important;
-  }
+    padding-top: 100%;
 
-  @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(sm) {
-    padding-top: 35% !important;
+      padding-top: 56.2% !important;
+    }
+
+    @include media-breakpoint-up(md) {
+      padding-top: 35% !important;
+    }
   }
 }
 

src/components/Feed/Slider.tsx

@@ -12,6 +12,8 @@ import { Icon } from '../Nav/Icon'
 interface SliderProps {
   title?: string
   articles: Shout[]
+  slidesPerView?: number
+  isCardsWithCover?: boolean
 }
 
 export default (props: SliderProps) => {
@@ -19,11 +21,14 @@ export default (props: SliderProps) => {
   let pagEl: HTMLDivElement | undefined
   let nextEl: HTMLDivElement | undefined
   let prevEl: HTMLDivElement | undefined
+
+  const isCardsWithCover = typeof props.isCardsWithCover === 'boolean' ? props.isCardsWithCover : true
+
   const opts: SwiperOptions = {
+    roundLengths: true,
     loop: true,
     centeredSlides: true,
     slidesPerView: 1,
-    spaceBetween: 8,
     modules: [Navigation, Pagination],
     speed: 500,
     navigation: { nextEl, prevEl },
@@ -34,7 +39,12 @@ export default (props: SliderProps) => {
     },
     breakpoints: {
       768: {
-        slidesPerView: 1.66666
+        slidesPerView: props.slidesPerView > 0 ? props.slidesPerView : 1.66666,
+        spaceBetween: isCardsWithCover ? 8 : 26
+      },
+      992: {
+        slidesPerView: props.slidesPerView > 0 ? props.slidesPerView : 1.66666,
+        spaceBetween: isCardsWithCover ? 8 : 52
       }
     }
   }
@@ -48,12 +58,13 @@ export default (props: SliderProps) => {
     }
   })
   const articles = createMemo(() => props.articles)
+
   return (
     <div class="floor floor--important">
       <div class="wide-container row">
         <h2 class="col-12">{props.title}</h2>
         <Show when={!!articles()}>
-          <div class="swiper" ref={el}>
+          <div class="swiper" classList={{ 'cards-with-cover': isCardsWithCover }} ref={el}>
             <div class="swiper-wrapper">
               <For each={articles()}>
                 {(a: Shout) => (
@@ -62,7 +73,7 @@ export default (props: SliderProps) => {
                     settings={{
                       additionalClass: 'swiper-slide',
                       isFloorImportant: true,
-                      isWithCover: true,
+                      isWithCover: isCardsWithCover,
                       nodate: true
                     }}
                   />
@@ -70,10 +81,10 @@ export default (props: SliderProps) => {
               </For>
             </div>
             <div class="slider-arrow-next" ref={nextEl} onClick={() => swiper()?.slideNext()}>
-              <Icon name="slider-arrow" />
+              <Icon name="slider-arrow" class={'icon'} />
             </div>
             <div class="slider-arrow-prev" ref={prevEl} onClick={() => swiper()?.slidePrev()}>
-              <Icon name="slider-arrow" />
+              <Icon name="slider-arrow" class={'icon'} />
             </div>
             <div class="slider-pagination" ref={pagEl} />
           </div>

src/components/Nav/AuthModal/EmailConfirm.tsx

@@ -2,16 +2,20 @@ import styles from './AuthModal.module.scss'
 import { clsx } from 'clsx'
 import { t } from '../../../utils/intl'
 import { hideModal } from '../../../stores/ui'
-import { createMemo, onMount, Show } from 'solid-js'
+import { createMemo, createSignal, onMount, Show } from 'solid-js'
-import { useRouter } from '../../../stores/router'
+import { handleClientRouteLinkClick, useRouter } from '../../../stores/router'
-import { confirmEmail, useAuthStore } from '../../../stores/auth'
+import type { ConfirmEmailSearchParams } from './types'
-
+import { ApiError } from '../../../utils/apiClient'
-type ConfirmEmailSearchParams = {
+import { useSession } from '../../../context/session'
-  token: string
-}
 
 export const EmailConfirm = () => {
-  const { session } = useAuthStore()
+  const {
+    session,
+    actions: { confirmEmail }
+  } = useSession()
+
+  const [isTokenExpired, setIsTokenExpired] = createSignal(false)
+  const [isTokenInvalid, setIsTokenInvalid] = createSignal(false)
 
   const confirmedEmail = createMemo(() => session()?.user?.email || '')
 
@@ -22,23 +26,54 @@ export const EmailConfirm = () => {
     try {
       await confirmEmail(token)
     } catch (error) {
+      if (error instanceof ApiError) {
+        if (error.code === 'token_expired') {
+          setIsTokenExpired(true)
+          return
+        }
+
+        if (error.code === 'token_invalid') {
+          setIsTokenInvalid(true)
+          return
+        }
+      }
+
       console.log(error)
     }
   })
 
   return (
     <div>
-      <div class={styles.title}>{t('Hooray! Welcome!')}</div>
+      {/* TODO: texts */}
+      <Show when={isTokenExpired()}>
+        <div class={styles.title}>Ссылка больше не действительна</div>
+        <div class={styles.text}>
+          <a href="/?modal=auth&mode=login" class={styles.sendLink} onClick={handleClientRouteLinkClick}>
+            {/*TODO: temp solution, should be send link again, but we don't have email here*/}
+            Вход
+          </a>
+        </div>
+      </Show>
+      <Show when={isTokenInvalid()}>
+        <div class={styles.title}>Неправильная ссылка</div>
+        <div class={styles.text}>
+          <a href="/?modal=auth&mode=login" class={styles.sendLink} onClick={handleClientRouteLinkClick}>
+            {/*TODO: temp solution, should be send link again, but we don't have email here*/}
+            Вход
+          </a>
+        </div>
+      </Show>
       <Show when={Boolean(confirmedEmail())}>
+        <div class={styles.title}>{t('Hooray! Welcome!')}</div>
         <div class={styles.text}>
           {t("You've confirmed email")} {confirmedEmail()}
         </div>
+        <div>
+          <button class={clsx('button', styles.submitButton)} onClick={() => hideModal()}>
+            {t('Go to main page')}
+          </button>
+        </div>
       </Show>
-      <div>
-        <button class={clsx('button', styles.submitButton)} onClick={() => hideModal()}>
-          {t('Go to main page')}
-        </button>
-      </div>
     </div>
   )
 }

src/components/Nav/AuthModal/ForgotPasswordForm.tsx

@@ -6,8 +6,9 @@ import { useRouter } from '../../../stores/router'
 import { email, setEmail } from './sharedLogic'
 import type { AuthModalSearchParams } from './types'
 import { isValidEmail } from './validators'
-import { signSendLink } from '../../../stores/auth'
 import { locale } from '../../../stores/ui'
+import { ApiError } from '../../../utils/apiClient'
+import { signSendLink } from '../../../stores/auth'
 
 type FormFields = {
   email: string
@@ -22,15 +23,17 @@ export const ForgotPasswordForm = () => {
     setValidationErrors(({ email: _notNeeded, ...rest }) => rest)
     setEmail(newEmail)
   }
-  const [sended, setSended] = createSignal(false)
+
   const [submitError, setSubmitError] = createSignal('')
   const [isSubmitting, setIsSubmitting] = createSignal(false)
   const [validationErrors, setValidationErrors] = createSignal<ValidationErrors>({})
+  const [isUserNotFount, setIsUserNotFound] = createSignal(false)
 
   const handleSubmit = async (event: Event) => {
     event.preventDefault()
 
     setSubmitError('')
+    setIsUserNotFound(false)
 
     const newValidationErrors: ValidationErrors = {}
 
@@ -51,10 +54,12 @@ export const ForgotPasswordForm = () => {
     setIsSubmitting(true)
 
     try {
-      const result = await signSendLink({ email: email(), lang: locale() })
+      await signSendLink({ email: email(), lang: locale() })
-      if (result.error) setSubmitError(result.error)
-      else setSended(true)
     } catch (error) {
+      if (error instanceof ApiError && error.code === 'user_not_found') {
+        setIsUserNotFound(true)
+        return
+      }
       setSubmitError(error.message)
     } finally {
       setIsSubmitting(false)
@@ -64,12 +69,7 @@ export const ForgotPasswordForm = () => {
   return (
     <form onSubmit={handleSubmit}>
       <h4>{t('Forgot password?')}</h4>
-      <Show
+      <div class={styles.authSubtitle}>{t('Everything is ok, please give us your email address')}</div>
-        when={!sended()}
-        fallback={<div class={styles.authInfo}>{t('Link sent, check your email')}</div>}
-      >
-        <div class={styles.authSubtitle}>{t('Everything is ok, please give us your email address')}</div>
-      </Show>
       <Show when={submitError()}>
         <div class={styles.authInfo}>
           <ul>
@@ -77,6 +77,21 @@ export const ForgotPasswordForm = () => {
           </ul>
         </div>
       </Show>
+      <Show when={isUserNotFount()}>
+        <div class={styles.authSubtitle}>
+          {/*TODO: text*/}
+          {t("We can't find you, check email or")}{' '}
+          <a
+            href="#"
+            onClick={(event) => {
+              event.preventDefault()
+              changeSearchParam('mode', 'register')
+            }}
+          >
+            {t('register')}
+          </a>
+        </div>
+      </Show>
       <Show when={validationErrors().email}>
         <div class={styles.validationError}>{validationErrors().email}</div>
       </Show>

src/components/Nav/AuthModal/LoginForm.tsx

@@ -2,7 +2,6 @@ import { t } from '../../../utils/intl'
 import styles from './AuthModal.module.scss'
 import { clsx } from 'clsx'
 import { SocialProviders } from './SocialProviders'
-import { signIn, signSendLink } from '../../../stores/auth'
 import { ApiError } from '../../../utils/apiClient'
 import { createSignal, Show } from 'solid-js'
 import { isValidEmail } from './validators'
@@ -10,6 +9,8 @@ import { email, setEmail } from './sharedLogic'
 import { useRouter } from '../../../stores/router'
 import type { AuthModalSearchParams } from './types'
 import { hideModal, locale } from '../../../stores/ui'
+import { useSession } from '../../../context/session'
+import { signSendLink } from '../../../stores/auth'
 
 type FormFields = {
   email: string
@@ -26,6 +27,10 @@ export const LoginForm = () => {
   const [isEmailNotConfirmed, setIsEmailNotConfirmed] = createSignal(false)
   const [isLinkSent, setIsLinkSent] = createSignal(false)
 
+  const {
+    actions: { signIn }
+  } = useSession()
+
   const { changeSearchParam } = useRouter<AuthModalSearchParams>()
 
   const [password, setPassword] = createSignal('')
@@ -53,6 +58,7 @@ export const LoginForm = () => {
     event.preventDefault()
 
     setIsLinkSent(false)
+    setIsEmailNotConfirmed(false)
     setSubmitError('')
 
     const newValidationErrors: ValidationErrors = {}

src/components/Nav/AuthModal/RegisterForm.tsx

@@ -4,13 +4,14 @@ import { t } from '../../../utils/intl'
 import styles from './AuthModal.module.scss'
 import { clsx } from 'clsx'
 import { SocialProviders } from './SocialProviders'
-import { checkEmail, register, useAuthStore } from '../../../stores/auth'
 import { isValidEmail } from './validators'
 import { ApiError } from '../../../utils/apiClient'
 import { email, setEmail } from './sharedLogic'
 import { useRouter } from '../../../stores/router'
 import type { AuthModalSearchParams } from './types'
 import { hideModal } from '../../../stores/ui'
+import { checkEmail, useEmailChecks } from '../../../stores/emailChecks'
+import { register } from '../../../stores/auth'
 
 type FormFields = {
   name: string
@@ -23,7 +24,7 @@ type ValidationErrors = Partial<Record<keyof FormFields, string | JSX.Element>>
 export const RegisterForm = () => {
   const { changeSearchParam } = useRouter<AuthModalSearchParams>()
 
-  const { emailChecks } = useAuthStore()
+  const { emailChecks } = useEmailChecks()
 
   const [submitError, setSubmitError] = createSignal('')
   const [name, setName] = createSignal('')
@@ -60,11 +61,14 @@ export const RegisterForm = () => {
 
     const newValidationErrors: ValidationErrors = {}
 
-    if (!name()) {
+    const clearName = name().trim()
+    const clearEmail = email().trim()
+
+    if (!clearName) {
       newValidationErrors.name = t('Please enter a name to sign your comments and publication')
     }
 
-    if (!email()) {
+    if (!clearEmail) {
       newValidationErrors.email = t('Please enter email')
     } else if (!isValidEmail(email())) {
       newValidationErrors.email = t('Invalid email')
@@ -76,7 +80,7 @@ export const RegisterForm = () => {
 
     setValidationErrors(newValidationErrors)
 
-    const emailCheckResult = await checkEmail(email())
+    const emailCheckResult = await checkEmail(clearEmail)
 
     const isValid = Object.keys(newValidationErrors).length === 0 && !emailCheckResult
 
@@ -88,8 +92,8 @@ export const RegisterForm = () => {
 
     try {
       await register({
-        name: name(),
+        name: clearName,
-        email: email(),
+        email: clearEmail,
         password: password()
       })
 

src/components/Nav/AuthModal/index.tsx

@@ -39,7 +39,7 @@ export const AuthModal = () => {
       class={clsx('row', styles.view)}
       classList={{ [styles.signUp]: mode() === 'register' || mode() === 'confirm-email' }}
     >
-      <div class={clsx('col-sm-6', 'd-md-none', styles.authImage)}>
+      <div class={clsx('col-md-6 d-none d-md-block', styles.authImage)}>
         <div
           class={styles.authImageText}
           classList={{ [styles.hidden]: mode() !== 'register' && mode() !== 'confirm-email' }}
@@ -68,7 +68,7 @@ export const AuthModal = () => {
           </p>
         </div>
       </div>
-      <div class={clsx('col-sm-6', styles.auth)}>
+      <div class={clsx('col-md-6', styles.auth)}>
         <Dynamic component={AUTH_MODAL_MODES[mode()]} />
       </div>
     </div>

src/components/Nav/AuthModal/types.ts

@@ -3,3 +3,7 @@ export type AuthModalMode = 'login' | 'register' | 'confirm-email' | 'forgot-pas
 export type AuthModalSearchParams = {
   mode: AuthModalMode
 }
+
+export type ConfirmEmailSearchParams = {
+  token: string
+}

src/components/Nav/Header.module.scss

@@ -71,12 +71,16 @@
   align-items: center;
   display: inline-flex;
   height: 56px;
-  padding: 0 $container-padding-x 0 0;
+  padding: 0;
   position: relative;
   transition: height 0.2s;
   text-align: center;
   z-index: 9;
 
+  @include media-breakpoint-up(sm) {
+    padding: 0 6rem 0 0;
+  }
+
   @include media-breakpoint-up(md) {
     height: 70px;
   }
@@ -114,6 +118,7 @@
 
 .usernav {
   display: inline-flex;
+  font-weight: 500;
   padding-right: 0;
   position: relative;
   width: auto;
@@ -130,6 +135,10 @@
   position: relative;
   @include font-size(1.7rem);
 
+  @include media-breakpoint-down(lg) {
+    margin-right: 7rem;
+  }
+
   @include media-breakpoint-down(md) {
     display: none;
   }
@@ -141,6 +150,7 @@
 
 .mainNavigation {
   display: inline-flex;
+  font-weight: 500;
   list-style: none;
   margin: 0;
   opacity: 1;
@@ -204,10 +214,14 @@
   box-sizing: content-box;
   display: inline-flex;
   float: right;
+  padding-left: 0;
   padding-right: 0;
-  padding-left: divide($container-padding-x, 2);
   width: 2.2rem;
 
+  @include media-breakpoint-up(sm) {
+    padding-left: divide($container-padding-x, 2);
+  }
+
   @include media-breakpoint-up(md) {
     display: none;
   }
@@ -290,7 +304,7 @@
   @include font-size(1.4rem);
 
   left: 0;
-  margin: 0.2em;
+  margin: 0.2em 0;
   overflow: hidden;
   position: absolute;
   text-overflow: ellipsis;
@@ -318,12 +332,24 @@
 .articleControls {
   display: flex;
   justify-content: flex-end;
-  left: 0;
   position: absolute;
+  right: 5rem;
   top: 50%;
   transform: translateY(-50%);
   width: 100%;
 
+  @include media-breakpoint-up(sm) {
+    right: 6rem;
+  }
+
+  @include media-breakpoint-up(md) {
+    right: 1.5rem;
+  }
+
+  @include media-breakpoint-up(lg) {
+    right: 1.5rem;
+  }
+
   .control {
     cursor: pointer;
     border: 0;
@@ -344,7 +370,11 @@
   }
 
   .control + .control {
-    margin-left: 1.6rem;
+    margin-left: 1.2rem;
+
+    @include media-breakpoint-up(sm) {
+      margin-left: 2rem;
+    }
   }
 
   img {
@@ -385,17 +415,21 @@
 
 .userControlItem {
   align-items: center;
-  border: 2px solid #f6f6f6;
   border-radius: 100%;
   display: flex;
   height: 2.4em;
   justify-content: center;
-  margin-left: divide($container-padding-x, 2);
   position: relative;
+  transition: margin-left 0.3s;
   width: 2.4em;
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-down(sm) {
-    margin-left: 1.2rem;
+    margin-left: 0.4rem !important;
+  }
+
+  .headerScrolledTop &,
+  .headerScrolledBottom & {
+    transition: none;
   }
 
   .circlewrap {
@@ -459,10 +493,10 @@
   }
 }
 
-.userControlItemWritePost {
+.userControlItemVerbose {
-  width: auto;
-
   @include media-breakpoint-up(lg) {
+    width: auto;
+
     .icon {
       display: none;
     }

src/components/Nav/Header.tsx

@@ -1,22 +1,15 @@
-import { For, Show, createSignal, createMemo, createEffect, onMount, onCleanup } from 'solid-js'
+import { For, Show, createSignal, createEffect, onMount, onCleanup } from 'solid-js'
-import Notifications from './Notifications'
 import { Icon } from './Icon'
 import { Modal } from './Modal'
 import { AuthModal } from './AuthModal'
 import { t } from '../../utils/intl'
-import { useModalStore, showModal, useWarningsStore } from '../../stores/ui'
+import { useModalStore } from '../../stores/ui'
-import { useAuthStore } from '../../stores/auth'
 import { handleClientRouteLinkClick, router, Routes, useRouter } from '../../stores/router'
 import styles from './Header.module.scss'
 import { getPagePath } from '@nanostores/router'
-import { getLogger } from '../../utils/logger'
 import { clsx } from 'clsx'
+import { HeaderAuth } from './HeaderAuth'
 import { SharePopup } from '../Article/SharePopup'
-import { ProfilePopup } from './ProfilePopup'
-import Userpic from '../Author/Userpic'
-import type { Author } from '../../graphql/types.gen'
-
-const log = getLogger('header')
 
 const resources: { name: string; route: keyof Routes }[] = [
   { name: t('zine'), route: 'home' },
@@ -34,39 +27,36 @@ export const Header = (props: Props) => {
   const [getIsScrollingBottom, setIsScrollingBottom] = createSignal(false)
   const [getIsScrolled, setIsScrolled] = createSignal(false)
   const [fixed, setFixed] = createSignal(false)
-  const [visibleWarnings, setVisibleWarnings] = createSignal(false)
   const [isSharePopupVisible, setIsSharePopupVisible] = createSignal(false)
   const [isProfilePopupVisible, setIsProfilePopupVisible] = createSignal(false)
 
-  // stores
-  const { warnings } = useWarningsStore()
-  const { session } = useAuthStore()
   const { modal } = useModalStore()
 
   const { page } = useRouter()
 
   // methods
-  const toggleWarnings = () => setVisibleWarnings(!visibleWarnings())
+
   const toggleFixed = () => setFixed((oldFixed) => !oldFixed)
   // effects
+
+  let windowScrollTop = 0
+
   createEffect(() => {
-    document.body.classList.toggle('fixed', fixed() || modal() !== null)
+    const mainContent = document.querySelector('.main-content') as HTMLDivElement
-    document.body.classList.toggle(styles.fixed, fixed() && !modal())
-  })
 
-  // derived
+    if (fixed() || modal() !== null) {
-  const authorized = createMemo(() => session()?.user?.slug)
+      windowScrollTop = window.scrollY
-
+      mainContent.style.marginTop = `-${windowScrollTop}px`
-  const handleBellIconClick = (event: Event) => {
-    event.preventDefault()
-
-    if (!authorized()) {
-      showModal('auth')
-      return
     }
 
-    toggleWarnings()
+    document.body.classList.toggle('fixed', fixed() || modal() !== null)
-  }
+    document.body.classList.toggle(styles.fixed, fixed() && !modal())
+
+    if (!fixed() && !modal()) {
+      mainContent.style.marginTop = ''
+      window.scrollTo(0, windowScrollTop)
+    }
+  })
 
   onMount(() => {
     let scrollTop = window.scrollY
@@ -131,85 +121,27 @@ export const Header = (props: Props) => {
               </li>
             </ul>
           </div>
-          <div class={styles.usernav}>
+          <HeaderAuth setIsProfilePopupVisible={setIsProfilePopupVisible} />
-            <div class={clsx(styles.userControl, styles.userControl, 'col')}>
+          <Show when={props.title}>
-              <div class={clsx(styles.userControlItem, styles.userControlItemWritePost)}>
+            <div class={styles.articleControls}>
-                <a href="/create" onClick={handleClientRouteLinkClick}>
+              <SharePopup
-                  <span class={styles.textLabel}>{t('Create post')}</span>
+                onVisibilityChange={(isVisible) => {
-                  <Icon name="pencil" class={styles.icon} />
+                  setIsSharePopupVisible(isVisible)
-                </a>
+                }}
-              </div>
+                containerCssClass={styles.control}
-
+                trigger={<Icon name="share-outline" class={styles.icon} />}
-              <div class={styles.userControlItem}>
+              />
-                <a href="#" onClick={handleBellIconClick}>
+              <a href="#comments" class={styles.control}>
-                  <div>
+                <Icon name="comments-outline" class={styles.icon} />
-                    <Icon name="bell-white" counter={authorized() ? warnings().length : 1} />
+              </a>
-                  </div>
+              <a href="#" class={styles.control} onClick={(event) => event.preventDefault()}>
-                </a>
+                <Icon name="pencil-outline" class={styles.icon} />
-              </div>
+              </a>
-
+              <a href="#" class={styles.control} onClick={(event) => event.preventDefault()}>
-              <Show when={visibleWarnings()}>
+                <Icon name="bookmark" class={styles.icon} />
-                <div class={clsx(styles.userControlItem, 'notifications')}>
+              </a>
-                  <Notifications />
-                </div>
-              </Show>
-
-              <Show
-                when={authorized()}
-                fallback={
-                  <div class={clsx(styles.userControlItem, 'loginbtn')}>
-                    <a href="?modal=auth&mode=login" onClick={handleClientRouteLinkClick}>
-                      <Icon name="user-anonymous" />
-                    </a>
-                  </div>
-                }
-              >
-                <div class={clsx(styles.userControlItem, styles.userControlItemInbox)}>
-                  <a href="/inbox">
-                    {/*FIXME: replace with route*/}
-                    <div classList={{ entered: page().path === '/inbox' }}>
-                      <Icon name="inbox-white" counter={session()?.news?.unread || 0} />
-                    </div>
-                  </a>
-                </div>
-                <ProfilePopup
-                  onVisibilityChange={(isVisible) => {
-                    setIsProfilePopupVisible(isVisible)
-                  }}
-                  containerCssClass={styles.control}
-                  trigger={
-                    <div class={styles.userControlItem}>
-                      <button class={styles.button}>
-                        <div classList={{ entered: page().path === `/${session().user?.slug}` }}>
-                          <Userpic user={session().user as Author} class={styles.userpic} />
-                        </div>
-                      </button>
-                    </div>
-                  }
-                />
-              </Show>
             </div>
-            <Show when={props.title}>
+          </Show>
-              <div class={styles.articleControls}>
-                <SharePopup
-                  onVisibilityChange={(isVisible) => {
-                    setIsSharePopupVisible(isVisible)
-                  }}
-                  containerCssClass={styles.control}
-                  trigger={<Icon name="share-outline" class={styles.icon} />}
-                />
-                <a href="#comments" class={styles.control}>
-                  <Icon name="comments-outline" class={styles.icon} />
-                </a>
-                <a href="#" class={styles.control} onClick={(event) => event.preventDefault()}>
-                  <Icon name="pencil-outline" class={styles.icon} />
-                </a>
-                <a href="#" class={styles.control} onClick={(event) => event.preventDefault()}>
-                  <Icon name="bookmark" class={styles.icon} />
-                </a>
-              </div>
-            </Show>
-          </div>
           <div class={styles.burgerContainer}>
             <div class={styles.burger} classList={{ fixed: fixed() }} onClick={toggleFixed}>
               <div />

src/components/Nav/HeaderAuth.tsx

@@ -0,0 +1,107 @@
+import styles from './Header.module.scss'
+import { clsx } from 'clsx'
+import { handleClientRouteLinkClick, useRouter } from '../../stores/router'
+import { t } from '../../utils/intl'
+import { Icon } from './Icon'
+import { createSignal, onMount, Show } from 'solid-js'
+import Notifications from './Notifications'
+import { ProfilePopup } from './ProfilePopup'
+import Userpic from '../Author/Userpic'
+import type { Author } from '../../graphql/types.gen'
+import { showModal, useWarningsStore } from '../../stores/ui'
+import { ClientContainer } from '../_shared/ClientContainer'
+import { useSession } from '../../context/session'
+
+type HeaderAuthProps = {
+  setIsProfilePopupVisible: (value: boolean) => void
+}
+
+export const HeaderAuth = (props: HeaderAuthProps) => {
+  const { page } = useRouter()
+  const [visibleWarnings, setVisibleWarnings] = createSignal(false)
+  const { warnings } = useWarningsStore()
+
+  const { session, isAuthenticated } = useSession()
+
+  const toggleWarnings = () => setVisibleWarnings(!visibleWarnings())
+
+  const handleBellIconClick = (event: Event) => {
+    event.preventDefault()
+
+    if (!isAuthenticated()) {
+      showModal('auth')
+      return
+    }
+
+    toggleWarnings()
+  }
+
+  return (
+    <ClientContainer>
+      <Show when={!session.loading}>
+        <div class={styles.usernav}>
+          <div class={clsx(styles.userControl, styles.userControl, 'col')}>
+            <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
+              <a href="/create" onClick={handleClientRouteLinkClick}>
+                <span class={styles.textLabel}>{t('Create post')}</span>
+                <Icon name="pencil" class={styles.icon} />
+              </a>
+            </div>
+
+            <Show when={isAuthenticated()}>
+              <div class={styles.userControlItem}>
+                <a href="#" onClick={handleBellIconClick}>
+                  <div>
+                    <Icon name="bell-white" counter={isAuthenticated() ? warnings().length : 1} />
+                  </div>
+                </a>
+              </div>
+            </Show>
+
+            <Show when={visibleWarnings()}>
+              <div class={clsx(styles.userControlItem, 'notifications')}>
+                <Notifications />
+              </div>
+            </Show>
+
+            <Show
+              when={isAuthenticated()}
+              fallback={
+                <div class={clsx(styles.userControlItem, styles.userControlItemVerbose, 'loginbtn')}>
+                  <a href="?modal=auth&mode=login" onClick={handleClientRouteLinkClick}>
+                    <span class={styles.textLabel}>{t('Enter')}</span>
+                    <Icon name="user-anonymous" class={styles.icon} />
+                  </a>
+                </div>
+              }
+            >
+              <div class={clsx(styles.userControlItem, styles.userControlItemInbox)}>
+                <a href="/inbox">
+                  {/*FIXME: replace with route*/}
+                  <div classList={{ entered: page().path === '/inbox' }}>
+                    <Icon name="inbox-white" counter={session()?.news?.unread || 0} />
+                  </div>
+                </a>
+              </div>
+              <ProfilePopup
+                onVisibilityChange={(isVisible) => {
+                  props.setIsProfilePopupVisible(isVisible)
+                }}
+                containerCssClass={styles.control}
+                trigger={
+                  <div class={styles.userControlItem}>
+                    <button class={styles.button}>
+                      <div classList={{ entered: page().path === `/${session().user?.slug}` }}>
+                        <Userpic user={session().user as Author} class={styles.userpic} />
+                      </div>
+                    </button>
+                  </div>
+                }
+              />
+            </Show>
+          </div>
+        </div>
+      </Show>
+    </ClientContainer>
+  )
+}

src/components/Nav/Icon.module.scss

@@ -8,17 +8,19 @@ img {
   height: 100%;
 }
 
-.notifications-counter {
+.notificationsCounter {
-  background-color: red;
+  background-color: #d00820;
-  border-radius: 1rem;
+  border: 2px solid #fff;
+  border-radius: 2em;
   color: #fff;
   font-size: 1rem;
   font-weight: 700;
-  height: 1.5em;
+  height: 1.6em;
-  line-height: 1.5em;
+  left: 1.1em;
+  line-height: 1.25em;
+  padding: 0 0.25em;
   position: absolute;
-  right: -0.5rem;
   text-align: center;
   top: -0.5rem;
-  width: 1.5em;
+  min-width: 1.5em;
 }

src/components/Nav/Icon.tsx

@@ -1,7 +1,7 @@
 import { mergeProps, Show } from 'solid-js'
 import type { JSX } from 'solid-js'
 import { clsx } from 'clsx'
-import './Icon.css'
+import styles from './Icon.module.scss'
 
 type IconProps = {
   class?: string
@@ -16,10 +16,10 @@ export const Icon = (passedProps: IconProps) => {
   const props = mergeProps({ title: '', counter: 0 }, passedProps)
 
   return (
-    <div class={clsx('icon', props.class)} style={props.style}>
+    <div class={clsx('icon', styles.icon, props.class)} style={props.style}>
       <img src={`/icons/${props.name}.svg`} alt={props.title ?? props.name} class={props.iconClassName} />
       <Show when={props.counter}>
-        <div class="notifications-counter">{props.counter}</div>
+        <div class={styles.notificationsCounter}>{props.counter}</div>
       </Show>
     </div>
   )

src/components/Nav/Modal.scss

@@ -1,11 +1,12 @@
 .modalwrap {
-  pointer-events: all;
   align-items: center;
   background: rgb(20 20 20 / 70%);
   display: flex;
   justify-content: center;
   height: 100%;
   left: 0;
+  overflow: auto;
+  pointer-events: all;
   position: fixed;
   top: 0;
   width: 100%;

src/components/Nav/Modal.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createSignal, onCleanup, onMount, Show } from 'solid-js'
+import { createEffect, createSignal, Show } from 'solid-js'
 import type { JSX } from 'solid-js'
 import { getLogger } from '../../utils/logger'
 import './Modal.scss'

src/components/Nav/ProfileModal.tsx

@@ -2,19 +2,23 @@ import { AuthorCard } from '../Author/Card'
 import type { Author } from '../../graphql/types.gen'
 import { t } from '../../utils/intl'
 import { hideModal } from '../../stores/ui'
-import { useAuthStore, signOut } from '../../stores/auth'
 import { createMemo, For } from 'solid-js'
+import { useSession } from '../../context/session'
 
-const quit = () => {
+export const ProfileModal = () => {
-  signOut()
+  const {
-  hideModal()
+    session,
-}
+    actions: { signOut }
+  } = useSession()
 
-export default () => {
+  const quit = () => {
-  const { session } = useAuthStore()
+    signOut()
+    hideModal()
+  }
 
   const author = createMemo<Author>(() => {
     const a: Author = {
+      id: null,
       name: 'anonymous',
       userpic: '',
       slug: ''

src/components/Nav/ProfilePopup.tsx

@@ -1,17 +1,21 @@
-import { Popup, PopupProps } from './Popup'
+import { useSession } from '../../context/session'
-import { signOut, useAuthStore } from '../../stores/auth'
+import type { PopupProps } from '../_shared/Popup'
-import styles from './Popup.module.scss'
+import { Popup } from '../_shared/Popup'
+import styles from '../_shared/Popup.module.scss'
 
 type ProfilePopupProps = Omit<PopupProps, 'children'>
 
 export const ProfilePopup = (props: ProfilePopupProps) => {
-  const { session } = useAuthStore()
+  const {
+    session,
+    actions: { signOut }
+  } = useSession()
 
   return (
     <Popup {...props} horizontalAnchor="right">
       <ul class="nodash">
         <li>
-          <a href={`/${session().user?.slug}`}>Профиль</a>
+          <a href={`/author/${session().user?.slug}`}>Профиль</a>
         </li>
         <li>
           <a href="#">Черновики</a>

src/components/Nav/Topics.tsx

@@ -4,6 +4,7 @@ import { Icon } from './Icon'
 import './Topics.scss'
 import { t } from '../../utils/intl'
 import { locale } from '../../stores/ui'
+import { handleClientRouteLinkClick } from '../../stores/router'
 
 export const NavTopics = (props: { topics: Topic[] }) => {
   const tag = (topic: Topic) =>
@@ -17,7 +18,7 @@ export const NavTopics = (props: { topics: Topic[] }) => {
           <For each={props.topics}>
             {(topic) => (
               <li class="item">
-                <a href={`/topic/${topic.slug}`}>
+                <a href={`/topic/${topic.slug}`} onClick={handleClientRouteLinkClick}>
                   <span>#{tag(topic)}</span>
                 </a>
               </li>

src/components/Pages/ConnectPage.tsx

@@ -5,10 +5,11 @@ export const ConnectPage = () => {
     <MainLayout>
       <article class="container container--static-page">
         <div class="row">
-          <h1 class="col-md-8 offset-md-2">
+          <div class="col-sm-10 col-md-8 col-lg-7 col-xl-6 shift-content">
-            <span class="wrapped">Предложить идею</span>
+            <h1>
-          </h1>
+              <span class="wrapped">Предложить идею</span>
-          <div class="col-md-8 col-lg-6 offset-md-3">
+            </h1>
+
             <p>
               Хотите что-то предложить, обсудить или посоветовать? Поделиться темой или идеей? Напишите нам
               скорее! Если укажете свою почту, мы&nbsp;обязательно ответим.

src/components/Pages/TopicPage.tsx

@@ -8,7 +8,7 @@ import { loadTopic } from '../../stores/zine/topics'
 import { Loading } from '../Loading'
 
 export const TopicPage = (props: PageProps) => {
-  const [isLoaded, setIsLoaded] = createSignal(Boolean(props.authorArticles) && Boolean(props.author))
+  const [isLoaded, setIsLoaded] = createSignal(Boolean(props.topicArticles) && Boolean(props.topic))
 
   const slug = createMemo(() => {
     const { page: getPage } = useRouter()

src/components/Pages/about/DiscussionRulesPage.tsx

@@ -7,112 +7,110 @@ export const DiscussionRulesPage = () => {
     <MainLayout>
       <article class="container container--static-page">
         <div class="row">
-          <div class="col-md-8 offset-md-2">
+          <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1>
               <span class="wrapped" innerHTML={title} />
             </h1>
 
-            <div class="col-lg-10 offset-md-1">
+            <p>
-              <p>
+              Открытая редакция существует благодаря дружному сообществу авторов
-                Открытая редакция существует благодаря дружному сообществу авторов
+              и&nbsp;читателей&nbsp;&mdash; вдумчивых и&nbsp;сознательных людей, приверженных ценностям
-                и&nbsp;читателей&nbsp;&mdash; вдумчивых и&nbsp;сознательных людей, приверженных ценностям
+              гуманизма, демократии и&nbsp;прав человека. Мы&nbsp;очень ценим атмосферу осмысленного
-                гуманизма, демократии и&nbsp;прав человека. Мы&nbsp;очень ценим атмосферу осмысленного
+              общения, которая здесь сложилась. Чтобы сохранить ее&nbsp;такой&nbsp;же уютной
-                общения, которая здесь сложилась. Чтобы сохранить ее&nbsp;такой&nbsp;же уютной
+              и&nbsp;творческой, мы&nbsp;составили правила общения в&nbsp;сообществе, руководствуясь
-                и&nbsp;творческой, мы&nbsp;составили правила общения в&nbsp;сообществе, руководствуясь
+              которыми каждый мог&nbsp;бы соучаствовать в&nbsp;плодотворных дискуссиях, не&nbsp;задевая
-                которыми каждый мог&nbsp;бы соучаствовать в&nbsp;плодотворных дискуссиях, не&nbsp;задевая
+              других. Ключевой принцип этих правил предельно прост&nbsp;&mdash; уважайте ближних,
-                других. Ключевой принцип этих правил предельно прост&nbsp;&mdash; уважайте ближних,
+              постарайтесь не&nbsp;нарушать законы Российской Федерации без крайней
-                постарайтесь не&nbsp;нарушать законы Российской Федерации без крайней
+              на&nbsp;то&nbsp;необходимости и&nbsp;помните, что в&nbsp;дискуссиях чутких
-                на&nbsp;то&nbsp;необходимости и&nbsp;помните, что в&nbsp;дискуссиях чутких
+              и&nbsp;здравомыслящих людей рождается истина.
-                и&nbsp;здравомыслящих людей рождается истина.
+            </p>
-              </p>
 
-              <h3>За&nbsp;что можно получить дырку в&nbsp;карме и&nbsp;выиграть бан в&nbsp;сообществе</h3>
+            <h3>За&nbsp;что можно получить дырку в&nbsp;карме и&nbsp;выиграть бан в&nbsp;сообществе</h3>
-              <ol>
+            <ol>
-                <li>
+              <li>
-                  <p>
+                <p>
-                    Оскорбления, личные нападки, травля и&nbsp;угрозы. В&nbsp;любом виде. Конкретного
+                  Оскорбления, личные нападки, травля и&nbsp;угрозы. В&nbsp;любом виде. Конкретного человека
-                    человека или социальной группы&nbsp;&mdash; не&nbsp;суть. Агрессия, переход
+                  или социальной группы&nbsp;&mdash; не&nbsp;суть. Агрессия, переход на&nbsp;личности
-                    на&nbsp;личности и&nbsp;токсичность едва&nbsp;ли способствуют плодотворному общению.
+                  и&nbsp;токсичность едва&nbsp;ли способствуют плодотворному общению.
-                  </p>
+                </p>
-                </li>
+              </li>
 
-                <li>
+              <li>
-                  <p>
+                <p>
-                    Шовинизм, расизм, сексизм, гомофобия, пропаганда ненависти, педофилии, суицида,
+                  Шовинизм, расизм, сексизм, гомофобия, пропаганда ненависти, педофилии, суицида,
-                    распространение детской порнографии и&nbsp;другого человеконенавистнического контента.
+                  распространение детской порнографии и&nbsp;другого человеконенавистнического контента.
-                  </p>
+                </p>
-                </li>
+              </li>
 
-                <li>
+              <li>
-                  <p>
+                <p>
-                    Спам, реклама, фейкньюз, ссылки на&nbsp;пропагандистские СМИ, вбросы дезинформации,
+                  Спам, реклама, фейкньюз, ссылки на&nbsp;пропагандистские СМИ, вбросы дезинформации,
-                    специально уводящий от&nbsp;темы флуд, провокации, разжигание конфликтов, намеренный
+                  специально уводящий от&nbsp;темы флуд, провокации, разжигание конфликтов, намеренный срыв
-                    срыв дискуссий.
+                  дискуссий.
-                  </p>
+                </p>
-                </li>
+              </li>
 
-                <li>
+              <li>
-                  <p>
+                <p>
-                    Неаргументированная критика и&nbsp;комментарии вроде &laquo;отстой&raquo;, &laquo;зачем
+                  Неаргументированная критика и&nbsp;комментарии вроде &laquo;отстой&raquo;, &laquo;зачем
-                    я&nbsp;это увидел/а&raquo;, &laquo;не&nbsp;читал, но&nbsp;осуждаю&raquo;,
+                  я&nbsp;это увидел/а&raquo;, &laquo;не&nbsp;читал, но&nbsp;осуждаю&raquo;, &laquo;либераху
-                    &laquo;либераху порвало&raquo;, &laquo;лол&raquo;, &laquo;скатились&raquo;,
+                  порвало&raquo;, &laquo;лол&raquo;, &laquo;скатились&raquo;, &laquo;первый нах&raquo;
-                    &laquo;первый нах&raquo; и&nbsp;тому подобные. Односложные реплики не&nbsp;подразумевают
+                  и&nbsp;тому подобные. Односложные реплики не&nbsp;подразумевают возможность обогащающего
-                    возможность обогащающего диалога, не&nbsp;продуктивны и&nbsp;никак не&nbsp;помогают
+                  диалога, не&nbsp;продуктивны и&nbsp;никак не&nbsp;помогают авторам делать материалы лучше,
-                    авторам делать материалы лучше, а&nbsp;читателям&nbsp;&mdash; разобраться.
+                  а&nbsp;читателям&nbsp;&mdash; разобраться.
-                  </p>
+                </p>
-                </li>
+              </li>
-              </ol>
+            </ol>
 
-              <h3>За&nbsp;что можно получить лучи добра и&nbsp;благодарности в&nbsp;сообществе</h3>
+            <h3>За&nbsp;что можно получить лучи добра и&nbsp;благодарности в&nbsp;сообществе</h3>
-              <ol>
+            <ol>
-                <li>
+              <li>
-                  <p>
+                <p>
-                    <strong>Вежливость и&nbsp;конструктивность.</strong> Мы&nbsp;выступаем
+                  <strong>Вежливость и&nbsp;конструктивность.</strong> Мы&nbsp;выступаем
-                    за&nbsp;конструктивный диалог, аргументированные комментарии и&nbsp;доброжелательное
+                  за&nbsp;конструктивный диалог, аргументированные комментарии и&nbsp;доброжелательное
-                    отношение друг к&nbsp;другу. Задавайте содержательные вопросы, пишите развернутые
+                  отношение друг к&nbsp;другу. Задавайте содержательные вопросы, пишите развернутые
-                    комментарии, подкрепляйте их&nbsp;аргументами, чтобы диалог был полезен всем участникам,
+                  комментарии, подкрепляйте их&nbsp;аргументами, чтобы диалог был полезен всем участникам,
-                    помогая глубже понять тему и&nbsp;разобраться в&nbsp;вопросе. И, пожалуйста, уважайте
+                  помогая глубже понять тему и&nbsp;разобраться в&nbsp;вопросе. И, пожалуйста, уважайте
-                    собеседника, даже если он&nbsp;вам лично не&nbsp;импонирует: только так получаются
+                  собеседника, даже если он&nbsp;вам лично не&nbsp;импонирует: только так получаются
-                    продуктивные дискуссии.
+                  продуктивные дискуссии.
-                  </p>
+                </p>
-                </li>
+              </li>
 
-                <li>
+              <li>
-                  <p>
+                <p>
-                    <strong>Обмен знаниями и&nbsp;историями.</strong> Осмысленные высказывания по&nbsp;теме
+                  <strong>Обмен знаниями и&nbsp;историями.</strong> Осмысленные высказывания по&nbsp;теме
-                    поста, оригинальные рассуждения, рассказы о&nbsp;личном опыте и&nbsp;проектах, обмен
+                  поста, оригинальные рассуждения, рассказы о&nbsp;личном опыте и&nbsp;проектах, обмен
-                    профессиональной экспертизой, наблюдения и&nbsp;реальные истории
+                  профессиональной экспертизой, наблюдения и&nbsp;реальные истории
-                    из&nbsp;жизни&nbsp;&mdash; чем больше мы&nbsp;делимся друг с&nbsp;другом знаниями, тем
+                  из&nbsp;жизни&nbsp;&mdash; чем больше мы&nbsp;делимся друг с&nbsp;другом знаниями, тем
-                    интереснее и&nbsp;плодотворнее становится наше общение. Помните, что каждый вдумчивый
+                  интереснее и&nbsp;плодотворнее становится наше общение. Помните, что каждый вдумчивый
-                    ответ повышает качество дискуссий в&nbsp;сообществе и&nbsp;делает чтение самиздата ещё
+                  ответ повышает качество дискуссий в&nbsp;сообществе и&nbsp;делает чтение самиздата ещё
-                    интереснее.
+                  интереснее.
-                  </p>
+                </p>
-                </li>
+              </li>
 
-                <li>
+              <li>
-                  <p>
+                <p>
-                    <strong>Чувство юмора и&nbsp;добродушие.</strong> Остроумие и&nbsp;дружелюбие
+                  <strong>Чувство юмора и&nbsp;добродушие.</strong> Остроумие и&nbsp;дружелюбие
-                    не&nbsp;только направляют дискуссии в&nbsp;продуктивное русло, но&nbsp;и&nbsp;улучшают
+                  не&nbsp;только направляют дискуссии в&nbsp;продуктивное русло, но&nbsp;и&nbsp;улучшают
-                    настроение. Не&nbsp;вредите негативом, которого в&nbsp;интернете и&nbsp;без нас хватает,
+                  настроение. Не&nbsp;вредите негативом, которого в&nbsp;интернете и&nbsp;без нас хватает,
-                    и&nbsp;не&nbsp;травите на&nbsp;корню классные инициативы&nbsp;&mdash; всё великое
+                  и&nbsp;не&nbsp;травите на&nbsp;корню классные инициативы&nbsp;&mdash; всё великое
-                    начинается с&nbsp;малого. Мы&nbsp;за&nbsp;поддерживающую и&nbsp;вдохновляющую атмосферу
+                  начинается с&nbsp;малого. Мы&nbsp;за&nbsp;поддерживающую и&nbsp;вдохновляющую атмосферу
-                    в&nbsp;сообществе. Надеемся, вы&nbsp;тоже.
+                  в&nbsp;сообществе. Надеемся, вы&nbsp;тоже.
-                  </p>
+                </p>
-                </li>
+              </li>
 
-                <li>
+              <li>
-                  <p>
+                <p>
-                    <strong>Благодарность и&nbsp;поддержка.</strong> Если публикация вам зашла,
+                  <strong>Благодарность и&nbsp;поддержка.</strong> Если публикация вам зашла,
-                    не&nbsp;стесняйтесь ставить лайки, делиться понравившимися материалами, благодарить
+                  не&nbsp;стесняйтесь ставить лайки, делиться понравившимися материалами, благодарить
-                    авторов, читателей, художников и&nbsp;редакторов в&nbsp;комментариях. Цените
+                  авторов, читателей, художников и&nbsp;редакторов в&nbsp;комментариях. Цените
-                    и&nbsp;поддерживайте классные проекты, сильные тексты, новое искусство, осмысленные
+                  и&nbsp;поддерживайте классные проекты, сильные тексты, новое искусство, осмысленные
-                    комментарии и&nbsp;вклад других в&nbsp;самиздат&nbsp;&mdash; сотрудничество делает нас
+                  комментарии и&nbsp;вклад других в&nbsp;самиздат&nbsp;&mdash; сотрудничество делает нас
-                    сильнее и&nbsp;усиливает звучание идей и&nbsp;смыслов, которые помогают лучше понимать
+                  сильнее и&nbsp;усиливает звучание идей и&nbsp;смыслов, которые помогают лучше понимать
-                    мир.
+                  мир.
-                  </p>
+                </p>
-                </li>
+              </li>
-              </ol>
+            </ol>
-            </div>
           </div>
         </div>
       </article>

src/components/Pages/about/DogmaPage.tsx

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

src/components/Pages/about/GuidePage.tsx

@@ -1,9 +1,15 @@
+import { createSignal, Show } from 'solid-js'
 import { MainLayout } from '../../Layouts/MainLayout'
 import { t } from '../../../utils/intl'
+import { Icon } from '../../Nav/Icon'
 
 export const GuidePage = () => {
   const title = t('How it works')
 
+  const [indexExpanded, setIndexExpanded] = createSignal(true)
+
+  const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
+
   return (
     <MainLayout>
       {/*<Meta name="description" content={title} />*/}
@@ -16,64 +22,76 @@ export const GuidePage = () => {
 
       <article class="container container--static-page">
         <div class="row">
-          <div class="col-md-2">
+          <div class="col-md-4 col-lg-3 order-md-last">
-            <nav class="content-index">
+            <button class="button button--content-index" onClick={toggleIndexExpanded}>
-              <ul class="nodash">
+              <Show when={!indexExpanded()}>
-                <li>
+                <Icon name="content-index-control" />
-                  <a href="#how-it-works">{title}</a>
+              </Show>
-                </li>
+              <Show when={indexExpanded()}>
-                <li>
+                <Icon name="content-index-control-expanded" class={'expanded'} />
-                  <a href="#become-author">Как стать автором журнала</a>
+              </Show>
-                </li>
+            </button>
-                <li>
+
-                  <a href="#voting">Как проходит голосование</a>
+            <Show when={indexExpanded()}>
-                </li>
+              <nav class="content-index">
-                <li>
+                <h4>Оглавление</h4>
-                  <a href="#editing">Как мы делаем тексты друг друга лучше</a>
+
-                </li>
+                <ul class="nodash">
-                <li>
+                  <li>
-                  <a href="#perks">Что сообщество дает авторам</a>
+                    <a href="#how-it-works">{title}</a>
-                </li>
+                  </li>
-                <li>
+                  <li>
-                  <a href="#contacts">Как быть в курсе</a>
+                    <a href="#become-author">Как стать автором журнала</a>
-                </li>
+                  </li>
-              </ul>
+                  <li>
-            </nav>
+                    <a href="#voting">Как проходит голосование</a>
+                  </li>
+                  <li>
+                    <a href="#editing">Как мы делаем тексты друг друга лучше</a>
+                  </li>
+                  <li>
+                    <a href="#perks">Что сообщество дает авторам</a>
+                  </li>
+                  <li>
+                    <a href="#contacts">Как быть в курсе</a>
+                  </li>
+                </ul>
+              </nav>
+            </Show>
           </div>
 
-          <div class="col-md-8">
+          <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1 id="about">
               <span class="wrapped">Как устроен Дискурс</span>
             </h1>
 
-            <div class="col-lg-10 offset-md-1">
+            <p>
-              <p>
+              Дискурс&nbsp;&mdash; независимый журнал о&nbsp;культуре, науке, искусстве и&nbsp;обществе
-                Дискурс&nbsp;&mdash; независимый журнал о&nbsp;культуре, науке, искусстве и&nbsp;обществе
+              с&nbsp;<a href="/about/manifest">открытой редакцией</a>. У&nbsp;нас нет главного редактора,
-                с&nbsp;<a href="/about/manifest">открытой редакцией</a>. У&nbsp;нас нет главного редактора,
+              инвестора и&nbsp;вообще никого, кто&nbsp;бы принимал единоличные решения. Вместо традиционных
-                инвестора и&nbsp;вообще никого, кто&nbsp;бы принимал единоличные решения. Вместо
+              иерархий Дискурс основан на&nbsp;принципах прямой демократии: в&nbsp;нашем горизонтальном
-                традиционных иерархий Дискурс основан на&nbsp;принципах прямой демократии: в&nbsp;нашем
+              сообществе все редакционные вопросы решаются открытым голосованием авторов журнала. Вот как
-                горизонтальном сообществе все редакционные вопросы решаются открытым голосованием авторов
+              это работает.
-                журнала. Вот как это работает.
+            </p>
-              </p>
+            <h3 id="how-it-works">Как устроен сайт Дискурса</h3>
-              <h3 id="how-it-works">Как устроен сайт Дискурса</h3>
+            <p>Дискурс состоит из&nbsp;четырех основных разделов:</p>
-              <p>Дискурс состоит из&nbsp;четырех основных разделов:</p>
+            <ul>
-              <ul>
+              <li>
-                <li>
+                <p>
-                  <p>
+                  <a href="/topics">Темы</a>&nbsp;&mdash; у&nbsp;нас публикуются исследования, обзоры, эссе,
-                    <a href="/topics">Темы</a>&nbsp;&mdash; у&nbsp;нас публикуются исследования, обзоры,
+                  интервью, репортажи, аналитика и&nbsp;другие материалы о&nbsp;культуре, науке, искусстве
-                    эссе, интервью, репортажи, аналитика и&nbsp;другие материалы о&nbsp;культуре, науке,
+                  и&nbsp;обществе.
-                    искусстве и&nbsp;обществе.
+                </p>
-                  </p>
+              </li>
-                </li>
+              <li>
-                <li>
+                <p>
-                  <p>
+                  <a href="/topic/art">Искусство</a>&nbsp;&mdash; здесь, например, представлены
-                    <a href="/topic/art">Искусство</a>&nbsp;&mdash; здесь, например, представлены
+                  художественные произведения: литература, живопись, музыка, фотографии, видео. Этот раздел
-                    художественные произведения: литература, живопись, музыка, фотографии, видео. Этот
+                  помогает прозвучать новому искусству, которое создают российские художники, писатели,
-                    раздел помогает прозвучать новому искусству, которое создают российские художники,
+                  режиссёры и&nbsp;музыканты.
-                    писатели, режиссёры и&nbsp;музыканты.
+                </p>
-                  </p>
+              </li>
-                </li>
+              {/*
-                {/*
               <li>
             <p>
             <a href="/topic/events">События</a>&nbsp;— в&nbsp;этом разделе
@@ -94,176 +112,174 @@ export const GuidePage = () => {
                 </p>
               </li>
       */}
-              </ul>
+            </ul>
-              <p>
+            <p>
-                Материалы в&nbsp;Дискурсе объединяются по&nbsp;<b>темам</b>
+              Материалы в&nbsp;Дискурсе объединяются по&nbsp;<b>темам</b>
-                &mdash;&nbsp;ключевым словам, которые располагаются в&nbsp;конце материалов и&nbsp;связывают
+              &mdash;&nbsp;ключевым словам, которые располагаются в&nbsp;конце материалов и&nbsp;связывают
-                материалы по&nbsp;жанрам (например,
+              материалы по&nbsp;жанрам (например,
-                <a href="/topic/interview">интервью</a>, <a href="/topic/reportage">репортажи</a>,{' '}
+              <a href="/topic/interview">интервью</a>, <a href="/topic/reportage">репортажи</a>,{' '}
-                <a href="/topic/essay">эссе</a>, <a href="/topic/likbez">ликбезы</a>), по&nbsp;тематике (
+              <a href="/topic/essay">эссе</a>, <a href="/topic/likbez">ликбезы</a>), по&nbsp;тематике (
-                <a href="/topic/cinema">кино</a>, <a href="/topic/philosophy">философия</a>,{' '}
+              <a href="/topic/cinema">кино</a>, <a href="/topic/philosophy">философия</a>,{' '}
-                <a href="/topic/history">история</a>, <a href="/topic/absurdism">абсурдизм</a>,{' '}
+              <a href="/topic/history">история</a>, <a href="/topic/absurdism">абсурдизм</a>,{' '}
-                <a href="/topic/sex">секс</a> и&nbsp;т.д.) или в&nbsp;серии (как &laquo;
+              <a href="/topic/sex">секс</a> и&nbsp;т.д.) или в&nbsp;серии (как &laquo;
-                <a href="/topic/zakony-mira">Законы мира</a>&raquo; или &laquo;
+              <a href="/topic/zakony-mira">Законы мира</a>&raquo; или &laquo;
-                <a href="/topic/za-liniey-mannergeyma">За&nbsp;линией Маннергейма</a>&raquo;). Темы
+              <a href="/topic/za-liniey-mannergeyma">За&nbsp;линией Маннергейма</a>&raquo;). Темы объединяют
-                объединяют сотни публикаций, помогают ориентироваться в&nbsp;журнале и&nbsp;следить
+              сотни публикаций, помогают ориентироваться в&nbsp;журнале и&nbsp;следить за&nbsp;интересными
-                за&nbsp;интересными материалами.
+              материалами.
-              </p>
+            </p>
 
-              <section>
+            <section>
-                <h3 id="become-author">Как стать автором журнала</h3>
+              <h3 id="become-author">Как стать автором журнала</h3>
+              <p>
+                Дискурс объединяет журналистов, активистов, музыкантов, художников, фотографов, режиссеров,
+                философов, ученых и&nbsp;других замечательных людей. Каждый может{' '}
+                <a href="/create">прислать</a>
+                свой материал в&nbsp;журнал. Формат и&nbsp;тематика не&nbsp;имеют значения, единственное,
+                что важно &mdash; <a href="/how-to-write-a-good-article">хороший</a> ли&nbsp;материал. Если
+                сообщество поддержит вашу публикацию, она выйдет в&nbsp;журнале и&nbsp;станет доступна
+                тысячам наших читателей.
+              </p>
+            </section>
+
+            <h3 id="voting">Как проходит голосование</h3>
+            <p>
+              Все присылаемые в&nbsp;Дискурс материалы попадают в&nbsp;
+              <strong>&laquo;Редакцию&raquo;</strong>. Это внутренний раздел сайта, где участники сообщества
+              решают, что будет опубликовано в&nbsp;Дискурсе. Как только работа получает одобрение как
+              минимум пятерых авторов открытой редакции, она немедленно публикуется в&nbsp;журнале.
+              Если&nbsp;же материал набирает более&nbsp;20% голосов &laquo;против&raquo;,
+              он&nbsp;не&nbsp;выходит и&nbsp;может быть отправлен на&nbsp;доработку. Жестких сроков
+              рассмотрения материалов у&nbsp;нас нет, иногда это занимает час, иногда месяц,
+              обычно&nbsp;&mdash; несколько дней.
+            </p>
+            <section>
+              <p>
+                Как только сообщество поддержит публикацию, вы&nbsp;получите приглашение
+                в&nbsp;интернет-редакцию и&nbsp;сможете голосовать за&nbsp;новые материалы.
+              </p>
+            </section>
+
+            <h3 id="editing">Как мы&nbsp;делаем тексты друг друга лучше</h3>
+            <p>
+              Дискурс&nbsp;&mdash; журнал с&nbsp;совместным редактированием. Совершенствовать тексты нам
+              помогает <b>система ремарок</b>. Вы&nbsp;можете выделить часть текста в&nbsp;любой статье
+              и&nbsp;оставить к&nbsp;ней замечание, вопрос или предложение&nbsp;&mdash; автор текста получит
+              совет на&nbsp;почту и&nbsp;сможет его учесть. Так мы&nbsp;устраняем опечатки, неточности
+              и&nbsp;советуем друг другу, как сделать тексты качественнее и&nbsp;интереснее.
+            </p>
+            <p>
+              Среди участников сообщества есть профессиональные редакторы, которые помогают авторам делать
+              тексты лучше. Если вашему материалу потребуется доработка, они помогут отредактировать текст,
+              подобрать иллюстрации, придумать заголовок и&nbsp;красиво сверстать публикацию. Если
+              вы&nbsp;хотите обсудить текст, прежде чем загрузить материал в интернет-редакцию&nbsp;&mdash;
+              разместите его в&nbsp;google-документе, откройте доступ к&nbsp;редактированию по&nbsp;ссылке
+              и&nbsp;напишите нам на&nbsp;
+              <a href="mailto:welcome@discours.io" target="_blank">
+                welcome@discours.io
+              </a>
+              .
+            </p>
+            <p>
+              Если у&nbsp;вас возникают трудности с&nbsp;тем, чтобы подобрать к&nbsp;своему материалу
+              иллюстрации, тоже пишите на&nbsp;
+              <a href="mailto:welcome@discours.io" target="_blank">
+                почту
+              </a>
+              &mdash; наши коллеги-художники могут вам помочь{' '}
+              <a href="/create?collab" target="_blank">
+                в&nbsp;режиме совместного редактирования
+              </a>
+              .
+            </p>
+
+            <h3 id="perks">Что сообщество дает авторам</h3>
+            <ul>
+              <li>
                 <p>
-                  Дискурс объединяет журналистов, активистов, музыкантов, художников, фотографов,
+                  <strong>Право определять, каким будет журнал</strong>. Дискурс&nbsp;&mdash; это
-                  режиссеров, философов, ученых и&nbsp;других замечательных людей. Каждый может{' '}
+                  общественная институция, созданная людьми и&nbsp;ради людей, функционирующая
-                  <a href="/create">прислать</a>
+                  на&nbsp;условиях прямой демократии. Авторы публикуют статьи и&nbsp;художественные проекты,
-                  свой материал в&nbsp;журнал. Формат и&nbsp;тематика не&nbsp;имеют значения, единственное,
+                  участвуют в&nbsp;обсуждениях, голосуют за&nbsp;работы коллег и&nbsp;таким образом вносят
-                  что важно &mdash; <a href="/how-to-write-a-good-article">хороший</a> ли&nbsp;материал.
+                  свой вклад в&nbsp;развитие проекта, определяя содержание и&nbsp;направление журнала.
-                  Если сообщество поддержит вашу публикацию, она выйдет в&nbsp;журнале и&nbsp;станет
-                  доступна тысячам наших читателей.
                 </p>
-              </section>
+              </li>
-
+              <li>
-              <h3 id="voting">Как проходит голосование</h3>
-              <p>
-                Все присылаемые в&nbsp;Дискурс материалы попадают в&nbsp;
-                <strong>&laquo;Редакцию&raquo;</strong>. Это внутренний раздел сайта, где участники
-                сообщества решают, что будет опубликовано в&nbsp;Дискурсе. Как только работа получает
-                одобрение как минимум пятерых авторов открытой редакции, она немедленно публикуется
-                в&nbsp;журнале. Если&nbsp;же материал набирает более&nbsp;20% голосов &laquo;против&raquo;,
-                он&nbsp;не&nbsp;выходит и&nbsp;может быть отправлен на&nbsp;доработку. Жестких сроков
-                рассмотрения материалов у&nbsp;нас нет, иногда это занимает час, иногда месяц,
-                обычно&nbsp;&mdash; несколько дней.
-              </p>
-              <section>
                 <p>
-                  Как только сообщество поддержит публикацию, вы&nbsp;получите приглашение
+                  <strong>Возможность обратиться к&nbsp;широкой аудитории</strong>. Дискурс читают десятки
-                  в&nbsp;интернет-редакцию и&nbsp;сможете голосовать за&nbsp;новые материалы.
+                  тысяч людей, и&nbsp;с&nbsp;каждым днем их&nbsp;становится больше.
                 </p>
-              </section>
+              </li>
+              <li>
+                <p>
+                  <strong>Поддержка редакции</strong>. Дискурс предоставляет авторам аккредитацию
+                  на&nbsp;мероприятия, базу контактов, юридическую поддержку, ознакомление с&nbsp;книжными,
+                  кино- и&nbsp;музыкальными новинками до&nbsp;их&nbsp;выхода в&nbsp;свет. Если что-то
+                  из&nbsp;этого вам понадобится, пишите на&nbsp;почту{' '}
+                  <a href="mailto:welcome@discours.io" target="_blank">
+                    welcome@discours.io
+                  </a>
+                  &nbsp;&mdash; поможем.
+                </p>
+              </li>
+              <li>
+                <p>
+                  <strong>Пресс-карты для корреспондентов</strong>. Три опубликованные статьи позволяют
+                  авторам Дискурса получить официальные удостоверения журналистов (пресс-карты)
+                  на&nbsp;следующий год. Пресс-карты удостоверяют, что вы&nbsp;журналист и&nbsp;можете
+                  пользоваться всеми теми правами, которые гарантирует Закон о&nbsp;СМИ. Кроме того, многие
+                  культурные институции (музеи, галереи и&nbsp;др.) предоставляют журналистам право
+                  свободного входа.
+                </p>
+              </li>
+              <li>
+                <p>
+                  <strong>Помощь сотен специалистов в&nbsp;разных областях</strong>. В&nbsp;основе Дискурса
+                  лежит идея совместного редактирования. Участники редакционного сообщества&nbsp;&mdash;
+                  несколько сотен журналистов, исследователей, художников, литераторов из&nbsp;разных стран
+                  &mdash; изучают материалы друг друга до&nbsp;публикации и&nbsp;помогают сделать
+                  их&nbsp;качественнее и&nbsp;интереснее. Так, в&nbsp;редакции нередко складываются
+                  творческие союзы: например, авторов текстов и&nbsp;художников, создающих для них
+                  иллюстрации.
+                </p>
+              </li>
+              <li>
+                <p>
+                  <strong>Пространство общения полное выдающихся людей</strong>. Дискурс&nbsp;&mdash;
+                  большое живое сообщество интеллектуалов, разбросанных по&nbsp;всему земному шару. Вступив
+                  в&nbsp;редакцию, вы&nbsp;сможете познакомиться со&nbsp;множеством интересных людей,
+                  которые определяют повестку завтрашнего дня, вдохновляют окружающих, создают новое
+                  и&nbsp;изучают старое, ищут знания и&nbsp;готовы ими делиться, чтобы менять мир
+                  в&nbsp;соответствии со&nbsp;своими идеалами.
+                </p>
+              </li>
+            </ul>
 
-              <h3 id="editing">Как мы&nbsp;делаем тексты друг друга лучше</h3>
+            <h3 id="contacts">Как быть в&nbsp;курсе</h3>
-              <p>
+            <p>
-                Дискурс&nbsp;&mdash; журнал с&nbsp;совместным редактированием. Совершенствовать тексты нам
+              За&nbsp;свежими публикациями Дискурса можно следить не&nbsp;только на&nbsp;сайте,
-                помогает <b>система ремарок</b>. Вы&nbsp;можете выделить часть текста в&nbsp;любой статье
+              но&nbsp;и&nbsp;на&nbsp;страницах в&nbsp;
-                и&nbsp;оставить к&nbsp;ней замечание, вопрос или предложение&nbsp;&mdash; автор текста
+              <a href="https://facebook.com/discoursio/" target="_blank">
-                получит совет на&nbsp;почту и&nbsp;сможет его учесть. Так мы&nbsp;устраняем опечатки,
+                Фейсбуке
-                неточности и&nbsp;советуем друг другу, как сделать тексты качественнее и&nbsp;интереснее.
+              </a>
-              </p>
+              ,{' '}
-              <p>
+              <a href="https://vk.com/discoursio" target="_blank">
-                Среди участников сообщества есть профессиональные редакторы, которые помогают авторам делать
+                ВКонтакте
-                тексты лучше. Если вашему материалу потребуется доработка, они помогут отредактировать
+              </a>{' '}
-                текст, подобрать иллюстрации, придумать заголовок и&nbsp;красиво сверстать публикацию. Если
+              и&nbsp;
-                вы&nbsp;хотите обсудить текст, прежде чем загрузить материал в
+              <a href="https://t.me/discoursio" target="_blank">
-                интернет-редакцию&nbsp;&mdash; разместите его в&nbsp;google-документе, откройте доступ
+                Телеграме
-                к&nbsp;редактированию по&nbsp;ссылке и&nbsp;напишите нам на&nbsp;
+              </a>
-                <a href="mailto:welcome@discours.io" target="_blank">
+              . А&nbsp;ещё раз в&nbsp;месяц мы&nbsp;отправляем <a href="#subscribe">почтовую рассылку</a>{' '}
-                  welcome@discours.io
+              с&nbsp;дайджестом лучших материалов.
-                </a>
+            </p>
-                .
+            <p>
-              </p>
+              Если вы&nbsp;хотите сотрудничать, что-то обсудить или предложить &mdash; пожалуйста, пишите
-              <p>
+              на&nbsp;
-                Если у&nbsp;вас возникают трудности с&nbsp;тем, чтобы подобрать к&nbsp;своему материалу
+              <a href="mailto:welcome@discours.io" target="_blank">
-                иллюстрации, тоже пишите на&nbsp;
+                welcome@discours.io
-                <a href="mailto:welcome@discours.io" target="_blank">
+              </a>
-                  почту
+              . Мы&nbsp;обязательно ответим.
-                </a>
+            </p>
-                &mdash; наши коллеги-художники могут вам помочь{' '}
-                <a href="/create?collab" target="_blank">
-                  в&nbsp;режиме совместного редактирования
-                </a>
-                .
-              </p>
-
-              <h3 id="perks">Что сообщество дает авторам</h3>
-              <ul>
-                <li>
-                  <p>
-                    <strong>Право определять, каким будет журнал</strong>. Дискурс&nbsp;&mdash; это
-                    общественная институция, созданная людьми и&nbsp;ради людей, функционирующая
-                    на&nbsp;условиях прямой демократии. Авторы публикуют статьи и&nbsp;художественные
-                    проекты, участвуют в&nbsp;обсуждениях, голосуют за&nbsp;работы коллег и&nbsp;таким
-                    образом вносят свой вклад в&nbsp;развитие проекта, определяя содержание
-                    и&nbsp;направление журнала.
-                  </p>
-                </li>
-                <li>
-                  <p>
-                    <strong>Возможность обратиться к&nbsp;широкой аудитории</strong>. Дискурс читают десятки
-                    тысяч людей, и&nbsp;с&nbsp;каждым днем их&nbsp;становится больше.
-                  </p>
-                </li>
-                <li>
-                  <p>
-                    <strong>Поддержка редакции</strong>. Дискурс предоставляет авторам аккредитацию
-                    на&nbsp;мероприятия, базу контактов, юридическую поддержку, ознакомление
-                    с&nbsp;книжными, кино- и&nbsp;музыкальными новинками до&nbsp;их&nbsp;выхода в&nbsp;свет.
-                    Если что-то из&nbsp;этого вам понадобится, пишите на&nbsp;почту{' '}
-                    <a href="mailto:welcome@discours.io" target="_blank">
-                      welcome@discours.io
-                    </a>
-                    &nbsp;&mdash; поможем.
-                  </p>
-                </li>
-                <li>
-                  <p>
-                    <strong>Пресс-карты для корреспондентов</strong>. Три опубликованные статьи позволяют
-                    авторам Дискурса получить официальные удостоверения журналистов (пресс-карты)
-                    на&nbsp;следующий год. Пресс-карты удостоверяют, что вы&nbsp;журналист и&nbsp;можете
-                    пользоваться всеми теми правами, которые гарантирует Закон о&nbsp;СМИ. Кроме того,
-                    многие культурные институции (музеи, галереи и&nbsp;др.) предоставляют журналистам право
-                    свободного входа.
-                  </p>
-                </li>
-                <li>
-                  <p>
-                    <strong>Помощь сотен специалистов в&nbsp;разных областях</strong>. В&nbsp;основе
-                    Дискурса лежит идея совместного редактирования. Участники редакционного
-                    сообщества&nbsp;&mdash; несколько сотен журналистов, исследователей, художников,
-                    литераторов из&nbsp;разных стран &mdash; изучают материалы друг друга до&nbsp;публикации
-                    и&nbsp;помогают сделать их&nbsp;качественнее и&nbsp;интереснее. Так, в&nbsp;редакции
-                    нередко складываются творческие союзы: например, авторов текстов и&nbsp;художников,
-                    создающих для них иллюстрации.
-                  </p>
-                </li>
-                <li>
-                  <p>
-                    <strong>Пространство общения полное выдающихся людей</strong>. Дискурс&nbsp;&mdash;
-                    большое живое сообщество интеллектуалов, разбросанных по&nbsp;всему земному шару.
-                    Вступив в&nbsp;редакцию, вы&nbsp;сможете познакомиться со&nbsp;множеством интересных
-                    людей, которые определяют повестку завтрашнего дня, вдохновляют окружающих, создают
-                    новое и&nbsp;изучают старое, ищут знания и&nbsp;готовы ими делиться, чтобы менять мир
-                    в&nbsp;соответствии со&nbsp;своими идеалами.
-                  </p>
-                </li>
-              </ul>
-
-              <h3 id="contacts">Как быть в&nbsp;курсе</h3>
-              <p>
-                За&nbsp;свежими публикациями Дискурса можно следить не&nbsp;только на&nbsp;сайте,
-                но&nbsp;и&nbsp;на&nbsp;страницах в&nbsp;
-                <a href="https://facebook.com/discoursio/" target="_blank">
-                  Фейсбуке
-                </a>
-                ,{' '}
-                <a href="https://vk.com/discoursio" target="_blank">
-                  ВКонтакте
-                </a>{' '}
-                и&nbsp;
-                <a href="https://t.me/discoursio" target="_blank">
-                  Телеграме
-                </a>
-                . А&nbsp;ещё раз в&nbsp;месяц мы&nbsp;отправляем <a href="#subscribe">почтовую рассылку</a>{' '}
-                с&nbsp;дайджестом лучших материалов.
-              </p>
-              <p>
-                Если вы&nbsp;хотите сотрудничать, что-то обсудить или предложить &mdash; пожалуйста, пишите
-                на&nbsp;
-                <a href="mailto:welcome@discours.io" target="_blank">
-                  welcome@discours.io
-                </a>
-                . Мы&nbsp;обязательно ответим.
-              </p>
-            </div>
           </div>
         </div>
       </article>

src/components/Pages/about/HelpPage.tsx

@@ -1,9 +1,15 @@
+import { createSignal, Show } from 'solid-js'
 import { MainLayout } from '../../Layouts/MainLayout'
 import { Donate } from '../../Discours/Donate'
+import { Icon } from '../../Nav/Icon'
 
 // const title = t('Support us')
 
 export const HelpPage = () => {
+  const [indexExpanded, setIndexExpanded] = createSignal(true)
+
+  const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
+
   return (
     <MainLayout>
       {/*<Meta name="description">Здесь можно поддержать Дискурс материально.</Meta>*/}
@@ -13,134 +19,145 @@ export const HelpPage = () => {
 
       <article class="container container--static-page discours-help">
         <div class="row">
-          <div class="col-md-2">
+          <div class="col-md-4 col-lg-3 order-md-last">
-            <nav class="content-index">
+            <button class="button button--content-index" onClick={toggleIndexExpanded}>
-              <ul class="nodash">
+              <Show when={!indexExpanded()}>
-                <li>
+                <Icon name="content-index-control" />
-                  <a href="#help-us">Как вы&nbsp;можете поддержать Дискурс?</a>
+              </Show>
-                </li>
+              <Show when={indexExpanded()}>
-                <li>
+                <Icon name="content-index-control-expanded" class={'expanded'} />
-                  <a href="#financial-report">На&nbsp;что пойдут деньги?</a>
+              </Show>
-                </li>
+            </button>
-                <li>
+
-                  <a href="#trustee">Войдите в&nbsp;попечительский совет Дискурса</a>
+            <Show when={indexExpanded()}>
-                </li>
+              <nav class="content-index">
-                <li>
+                <h4>Оглавление</h4>
-                  <a href="#other">Как ещё можно поддержать Дискурс?</a>
+
-                </li>
+                <ul class="nodash">
-              </ul>
+                  <li>
-            </nav>
+                    <a href="#help-us">Как вы&nbsp;можете поддержать Дискурс?</a>
+                  </li>
+                  <li>
+                    <a href="#financial-report">На&nbsp;что пойдут деньги?</a>
+                  </li>
+                  <li>
+                    <a href="#trustee">Войдите в&nbsp;попечительский совет Дискурса</a>
+                  </li>
+                  <li>
+                    <a href="#other">Как ещё можно поддержать Дискурс?</a>
+                  </li>
+                </ul>
+              </nav>
+            </Show>
           </div>
 
-          <div class="col-md-8">
+          <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1 id="help-us">
               <span class="wrapped">Как вы&nbsp;можете поддержать Дискурс?</span>
             </h1>
 
-            <div class="col-lg-10 offset-md-1">
+            <p>
-              <p>
+              Дискурс&nbsp;&mdash; уникальное независимое издание с&nbsp;горизонтальной редакцией,
-                Дискурс&nbsp;&mdash; уникальное независимое издание с&nbsp;горизонтальной редакцией,
+              существующее в&nbsp;интересах своих читателей. Ваша поддержка действительно много
-                существующее в&nbsp;интересах своих читателей. Ваша поддержка действительно много
+              значит&nbsp;&mdash; не&nbsp;только для редакции Дискурса, но&nbsp;и&nbsp;для сохранения
-                значит&nbsp;&mdash; не&nbsp;только для редакции Дискурса, но&nbsp;и&nbsp;для сохранения
+              свободной мысли и&nbsp;некоммерческого искусства в&nbsp;нашем обществе.
-                свободной мысли и&nbsp;некоммерческого искусства в&nbsp;нашем обществе.
+            </p>
-              </p>
+            <p>
-              <p>
+              Дискурс существует на&nbsp;добровольных началах. Никакой медиахолдинг, фонд или
-                Дискурс существует на&nbsp;добровольных началах. Никакой медиахолдинг, фонд или
+              государственная структура не&nbsp;финансирует нас&nbsp;&mdash; благодаря этому мы&nbsp;можем
-                государственная структура не&nbsp;финансирует нас&nbsp;&mdash; благодаря этому мы&nbsp;можем
+              писать о&nbsp;том, что важно, а&nbsp;не&nbsp;о&nbsp;том, что выгодно. Сообщество наших
-                писать о&nbsp;том, что важно, а&nbsp;не&nbsp;о&nbsp;том, что выгодно. Сообщество наших
+              волонтеров ежедневно трудится, чтобы рассказывать вам интересные, не&nbsp;освещенные другими
-                волонтеров ежедневно трудится, чтобы рассказывать вам интересные, не&nbsp;освещенные другими
+              изданиями истории&nbsp;&mdash; но&nbsp;мы&nbsp;не&nbsp;сможем делать это без вашей помощи.
-                изданиями истории&nbsp;&mdash; но&nbsp;мы&nbsp;не&nbsp;сможем делать это без вашей помощи.
+              Пожертвования читателей составляют основу нашего бюджета и&nbsp;позволяют нам существовать.
-                Пожертвования читателей составляют основу нашего бюджета и&nbsp;позволяют нам существовать.
+            </p>
-              </p>
+            <p>
-              <p>
+              Если вам нравится&nbsp;то, что мы&nbsp;делаем и&nbsp;вы&nbsp;хотите, чтобы Дискурс
-                Если вам нравится&nbsp;то, что мы&nbsp;делаем и&nbsp;вы&nbsp;хотите, чтобы Дискурс
+              продолжался, пожалуйста, поддержите проект.
-                продолжался, пожалуйста, поддержите проект.
+            </p>
-              </p>
+            <div class="row">
-              <div class="row">
+              <div class="col-sm-11 col-md-12">
-                <div class="col-sm-11 col-md-12">
+                <Donate />
-                  <Donate />
-                </div>
               </div>
-              <h3 id="financial-report">На&nbsp;что пойдут деньги?</h3>
-              <p>
-                Ваши пожертвования пойдут на&nbsp;оплату серверов, содержание офиса, зарплату редакции
-                и&nbsp;налоги, оплату юридического сопровождения и&nbsp;труда бухгалтера, совершенствование
-                сайта, аренду помещения для открытой редакции, на&nbsp;печать альманаха Дискурс
-                с&nbsp;лучшими текстами авторов за&nbsp;полгода, а&nbsp;также на&nbsp;другие редакционные
-                и&nbsp;технические расходы.
-              </p>
-              <h3>Ваша помощь позволит нам</h3>
-              <ul>
-                <li>
-                  <h4>Оставаться бесплатным изданием.</h4>
-                  <p>
-                    Мы&nbsp;делаем открытый журнал для всех желающих, а&nbsp;также собираем искусство лучших
-                    авторов по&nbsp;всему миру. Ваша поддержка позволяет нам становиться лучше.
-                  </p>
-                </li>
-                <li>
-                  <h4>Создавать еще больше контента.</h4>
-                  <p>
-                    Каждый день к&nbsp;нам присоединяются новые люди, и&nbsp;чем больше нас становится, тем
-                    больше мы&nbsp;творим и&nbsp;строже оцениваем результаты творчества друг друга.
-                    В&nbsp;результате повышается и&nbsp;количество, и&nbsp;качество контента. Каждый день мы
-                    трудимся, чтобы открывать нашим читателям новые грани окружающего мира.
-                  </p>
-                </li>
-                <li>
-                  <h4>Развивать форматы и&nbsp;расширять деятельность Дискурса.</h4>
-                  <p>
-                    Мы&nbsp;создаем различные спецпроекты и&nbsp;регулярно проводим необычные мероприятия.
-                    Мы&nbsp;хотим приносить пользу человечеству всеми возможными способами.
-                  </p>
-                </li>
-                <li>
-                  <h4>Модернизировать сайт.</h4>
-                  <p>
-                    Мы&nbsp;совершенствуем платформу и&nbsp;стараемся сделать проект максимально удобным для
-                    вас. Мы&nbsp;работаем над мобильной версией, новым дизайном, фукционалом, системой
-                    регистрации, навигации и&nbsp;рекомендаций, которые сделают наше общение еще
-                    увлекательней.
-                  </p>
-                </li>
-                <li>
-                  <h4>Выпускать альманах.</h4>
-                  <p>
-                    Выпускать раз в&nbsp;полугодие печатный альманах Дискурс с&nbsp;33&nbsp;лучшими текстами
-                    сайта.
-                  </p>
-                </li>
-                <li>
-                  <h4>Захватить весь мир</h4>
-                  <p>и&nbsp;принести &laquo;Дискурс&raquo; в&nbsp;каждый дом.</p>
-                </li>
-              </ul>
-              <h3 id="trustee">Войдите в&nbsp;попечительский совет Дискурса</h3>
-              <p>
-                Вы&nbsp;хотите сделать крупное пожертвование? Станьте попечителем Дискурса &mdash;
-                <a class="black-link" href="mailto:welcome@discours.io" target="_blank">
-                  напишите нам
-                </a>
-                , мы&nbsp;будем рады единомышленникам.
-              </p>
-              <h3 id="other">Как ещё можно поддержать Дискурс?</h3>
-              <p>
-                Есть много других способов поддержать Дискурс и&nbsp;труд наших авторов. Например,
-                вы&nbsp;можете периодически рассказывать о&nbsp;проекте своим друзьям в&nbsp;соцсетях,
-                делиться хорошими материалами или&nbsp;&mdash; что еще лучше&nbsp;&mdash; публиковать свои
-                статьи в&nbsp;&laquo;Дискурсе&raquo;. Но&nbsp;главное, что вы&nbsp;можете сделать для
-                Дискурса, &mdash; читать нас. Мы&nbsp;вкладываем в&nbsp;журнал душу, и&nbsp;внимание каждого
-                читателя убеждает нас в&nbsp;правильности выбранного пути. Не&nbsp;переключайтесь.
-              </p>
-              <p>
-                Если вы&nbsp;хотите помочь проекту, но&nbsp;у&nbsp;вас возникли вопросы, напишите нам письмо
-                по&nbsp;адресу{' '}
-                <a class="black-link" href="mailto:welcome@discours.io" target="_blank">
-                  welcome@discours.io
-                </a>
-                .
-              </p>
             </div>
+            <h3 id="financial-report">На&nbsp;что пойдут деньги?</h3>
+            <p>
+              Ваши пожертвования пойдут на&nbsp;оплату серверов, содержание офиса, зарплату редакции
+              и&nbsp;налоги, оплату юридического сопровождения и&nbsp;труда бухгалтера, совершенствование
+              сайта, аренду помещения для открытой редакции, на&nbsp;печать альманаха Дискурс с&nbsp;лучшими
+              текстами авторов за&nbsp;полгода, а&nbsp;также на&nbsp;другие редакционные и&nbsp;технические
+              расходы.
+            </p>
+            <h3>Ваша помощь позволит нам</h3>
+            <ul>
+              <li>
+                <h4>Оставаться бесплатным изданием.</h4>
+                <p>
+                  Мы&nbsp;делаем открытый журнал для всех желающих, а&nbsp;также собираем искусство лучших
+                  авторов по&nbsp;всему миру. Ваша поддержка позволяет нам становиться лучше.
+                </p>
+              </li>
+              <li>
+                <h4>Создавать еще больше контента.</h4>
+                <p>
+                  Каждый день к&nbsp;нам присоединяются новые люди, и&nbsp;чем больше нас становится, тем
+                  больше мы&nbsp;творим и&nbsp;строже оцениваем результаты творчества друг друга.
+                  В&nbsp;результате повышается и&nbsp;количество, и&nbsp;качество контента. Каждый день мы
+                  трудимся, чтобы открывать нашим читателям новые грани окружающего мира.
+                </p>
+              </li>
+              <li>
+                <h4>Развивать форматы и&nbsp;расширять деятельность Дискурса.</h4>
+                <p>
+                  Мы&nbsp;создаем различные спецпроекты и&nbsp;регулярно проводим необычные мероприятия.
+                  Мы&nbsp;хотим приносить пользу человечеству всеми возможными способами.
+                </p>
+              </li>
+              <li>
+                <h4>Модернизировать сайт.</h4>
+                <p>
+                  Мы&nbsp;совершенствуем платформу и&nbsp;стараемся сделать проект максимально удобным для
+                  вас. Мы&nbsp;работаем над мобильной версией, новым дизайном, фукционалом, системой
+                  регистрации, навигации и&nbsp;рекомендаций, которые сделают наше общение еще
+                  увлекательней.
+                </p>
+              </li>
+              <li>
+                <h4>Выпускать альманах.</h4>
+                <p>
+                  Выпускать раз в&nbsp;полугодие печатный альманах Дискурс с&nbsp;33&nbsp;лучшими текстами
+                  сайта.
+                </p>
+              </li>
+              <li>
+                <h4>Захватить весь мир</h4>
+                <p>и&nbsp;принести &laquo;Дискурс&raquo; в&nbsp;каждый дом.</p>
+              </li>
+            </ul>
+            <h3 id="trustee">Войдите в&nbsp;попечительский совет Дискурса</h3>
+            <p>
+              Вы&nbsp;хотите сделать крупное пожертвование? Станьте попечителем Дискурса &mdash;
+              <a class="black-link" href="mailto:welcome@discours.io" target="_blank">
+                напишите нам
+              </a>
+              , мы&nbsp;будем рады единомышленникам.
+            </p>
+            <h3 id="other">Как ещё можно поддержать Дискурс?</h3>
+            <p>
+              Есть много других способов поддержать Дискурс и&nbsp;труд наших авторов. Например,
+              вы&nbsp;можете периодически рассказывать о&nbsp;проекте своим друзьям в&nbsp;соцсетях,
+              делиться хорошими материалами или&nbsp;&mdash; что еще лучше&nbsp;&mdash; публиковать свои
+              статьи в&nbsp;&laquo;Дискурсе&raquo;. Но&nbsp;главное, что вы&nbsp;можете сделать для
+              Дискурса, &mdash; читать нас. Мы&nbsp;вкладываем в&nbsp;журнал душу, и&nbsp;внимание каждого
+              читателя убеждает нас в&nbsp;правильности выбранного пути. Не&nbsp;переключайтесь.
+            </p>
+            <p>
+              Если вы&nbsp;хотите помочь проекту, но&nbsp;у&nbsp;вас возникли вопросы, напишите нам письмо
+              по&nbsp;адресу{' '}
+              <a class="black-link" href="mailto:welcome@discours.io" target="_blank">
+                welcome@discours.io
+              </a>
+              .
+            </p>
           </div>
         </div>
       </article>

src/components/Pages/about/ManifestPage.tsx

@@ -1,12 +1,18 @@
+import { createSignal, Show } from 'solid-js'
 import { MainLayout } from '../../Layouts/MainLayout'
 import { Modal } from '../../Nav/Modal'
 import { Feedback } from '../../Discours/Feedback'
 import Subscribe from '../../Discours/Subscribe'
 import Opener from '../../Nav/Opener'
+import { Icon } from '../../Nav/Icon'
 
 // title={t('Manifest')}
 
 export const ManifestPage = () => {
+  const [indexExpanded, setIndexExpanded] = createSignal(true)
+
+  const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
+
   return (
     <MainLayout>
       <Modal name="feedback">
@@ -17,80 +23,93 @@ export const ManifestPage = () => {
       </Modal>
       <article class="container container--static-page">
         <div class="row">
-          <div class="col-md-2">
+          <div class="col-md-4 col-lg-3 order-md-last">
-            <nav class="content-index">
+            <button class="button button--content-index" onClick={toggleIndexExpanded}>
-              <ul class="nodash">
+              <Show when={!indexExpanded()}>
-                <li>
+                <Icon name="content-index-control" />
-                  <a href="#manifest">Манифест</a>
+              </Show>
-                </li>
+              <Show when={indexExpanded()}>
-                <li>
+                <Icon name="content-index-control-expanded" class={'expanded'} />
-                  <a href="#participation">Как участвовать в&nbsp;самиздате</a>
+              </Show>
-                  <ul class="nodash">
+            </button>
-                    <li>
+
-                      <a href="#contribute">Предлагать материалы</a>
+            <Show when={indexExpanded()}>
-                    </li>
+              <nav class="content-index">
-                    <li>
+                <h4>Оглавление</h4>
-                      <a href="#donate">Поддерживать проект</a>
+
-                    </li>
+                <ul class="nodash">
-                    <li>
+                  <li>
-                      <a href="#cooperation">Сотрудничать с&nbsp;журналом</a>
+                    <a href="#manifest">Манифест</a>
-                    </li>
+                  </li>
-                    <li>
+                  <li>
-                      <a href="#follow">Как еще можно помочь</a>
+                    <a href="#participation">Как участвовать в&nbsp;самиздате</a>
-                    </li>
+                    <ul class="nodash">
-                  </ul>
+                      <li>
-                </li>
+                        <a href="#contribute">Предлагать материалы</a>
-                <li>
+                      </li>
-                  <a href="#connection">Будем на&nbsp;связи</a>
+                      <li>
-                </li>
+                        <a href="#donate">Поддерживать проект</a>
-              </ul>
+                      </li>
-            </nav>
+                      <li>
+                        <a href="#cooperation">Сотрудничать с&nbsp;журналом</a>
+                      </li>
+                      <li>
+                        <a href="#follow">Как еще можно помочь</a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li>
+                    <a href="#connection">Будем на&nbsp;связи</a>
+                  </li>
+                </ul>
+              </nav>
+            </Show>
           </div>
 
-          <div class="col-md-8">
+          <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1 id="manifest">
               <span class="wrapped">Манифест</span>
             </h1>
 
-            <div class="col-lg-10 offset-md-1">
+            <p>
-              <p>
+              Дискурс&nbsp;&mdash; независимый художественно-аналитический журнал с&nbsp;горизонтальной
-                Дискурс&nbsp;&mdash; независимый художественно-аналитический журнал с&nbsp;горизонтальной
+              редакцией, основанный на&nbsp;принципах свободы слова, прямой демократии и&nbsp;совместного
-                редакцией, основанный на&nbsp;принципах свободы слова, прямой демократии и&nbsp;совместного
+              редактирования. Дискурс создаётся открытым медиасообществом ученых, журналистов, музыкантов,
-                редактирования. Дискурс создаётся открытым медиасообществом ученых, журналистов, музыкантов,
+              писателей, предпринимателей, философов, инженеров, художников и&nbsp;специалистов
-                писателей, предпринимателей, философов, инженеров, художников и&nbsp;специалистов
+              со&nbsp;всего мира, объединившихся, чтобы вместе делать общий журнал и&nbsp;объяснять
-                со&nbsp;всего мира, объединившихся, чтобы вместе делать общий журнал и&nbsp;объяснять
+              с&nbsp;разных точек зрения мозаичную картину современности.
-                с&nbsp;разных точек зрения мозаичную картину современности.
+            </p>
-              </p>
+            <p>
-              <p>
+              Мы&nbsp;пишем о&nbsp;культуре, науке и&nbsp;обществе, рассказываем о&nbsp;новых идеях
-                Мы&nbsp;пишем о&nbsp;культуре, науке и&nbsp;обществе, рассказываем о&nbsp;новых идеях
+              и&nbsp;современном искусстве, публикуем статьи, исследования, репортажи, интервью людей, чью
-                и&nbsp;современном искусстве, публикуем статьи, исследования, репортажи, интервью людей, чью
+              прямую речь стоит услышать, и&nbsp;работы художников из&nbsp;разных стран&nbsp;&mdash;
-                прямую речь стоит услышать, и&nbsp;работы художников из&nbsp;разных стран&nbsp;&mdash;
+              от&nbsp;фильмов и&nbsp;музыки до&nbsp;живописи и&nbsp;фотографии. Помогая друг другу делать
-                от&nbsp;фильмов и&nbsp;музыки до&nbsp;живописи и&nbsp;фотографии. Помогая друг другу делать
+              публикации качественнее и&nbsp;общим голосованием выбирая лучшие материалы для журнала,
-                публикации качественнее и&nbsp;общим голосованием выбирая лучшие материалы для журнала,
+              мы&nbsp;создаём новую горизонтальную журналистику, чтобы честно рассказывать о&nbsp;важном
-                мы&nbsp;создаём новую горизонтальную журналистику, чтобы честно рассказывать о&nbsp;важном
+              и&nbsp;интересном.
-                и&nbsp;интересном.
+            </p>
-              </p>
+            <p>
-              <p>
+              Редакция Дискурса открыта для всех: у&nbsp;нас нет цензуры, запретных тем
-                Редакция Дискурса открыта для всех: у&nbsp;нас нет цензуры, запретных тем
+              и&nbsp;идеологических рамок. Каждый может <a href="/create">прислать материал</a>{' '}
-                и&nbsp;идеологических рамок. Каждый может <a href="/create">прислать материал</a>{' '}
+              в&nbsp;журнал и&nbsp;<a href="/about/guide">присоединиться к&nbsp;редакции</a>. Предоставляя
-                в&nbsp;журнал и&nbsp;<a href="/about/guide">присоединиться к&nbsp;редакции</a>. Предоставляя
+              трибуну для независимой журналистики и&nbsp;художественных проектов, мы&nbsp;помогаем людям
-                трибуну для независимой журналистики и&nbsp;художественных проектов, мы&nbsp;помогаем людям
+              рассказывать свои истории так, чтобы они были услышаны. Мы&nbsp;убеждены: чем больше голосов
-                рассказывать свои истории так, чтобы они были услышаны. Мы&nbsp;убеждены: чем больше голосов
+              будет звучать на&nbsp;Дискурсе, тем громче в&nbsp;полифонии мнений будет слышна истина.
-                будет звучать на&nbsp;Дискурсе, тем громче в&nbsp;полифонии мнений будет слышна истина.
+            </p>
-              </p>
-            </div>
 
             <h2 class="h2" id="participation">
               <span class="wrapped">Как участвовать в&nbsp;самиздате</span>
             </h2>
 
-            <div class="col-lg-10 offset-md-1">
+            <p>
-              <p>
+              Дискурс создается <a href="/about/guide">открытым сообществом</a> энтузиастов новой
-                Дискурс создается <a href="/about/guide">открытым сообществом</a> энтузиастов новой
+              независимой журналистики. Участвовать в&nbsp;открытой редакции и&nbsp;помогать журналу можно
-                независимой журналистики. Участвовать в&nbsp;открытой редакции и&nbsp;помогать журналу можно
+              следующими способами:
-                следующими способами:
+            </p>
-              </p>
+            <details open>
-              <h3 id="contribute">Предлагать материалы</h3>
+              <summary>
+                <h3 id="contribute">Предлагать материалы</h3>
+              </summary>
               <p>
                 <a href="/create">Создавайте</a> свои статьи и&nbsp;художественные работы&nbsp;&mdash;
                 лучшие из них будут опубликованы в&nbsp;журнале. Дискурс&nbsp;&mdash; некоммерческое
@@ -98,7 +117,12 @@ export const ManifestPage = () => {
                 <a href="/create?collab=true">поддержку</a> редакции, право голоса, множество других
                 возможностей и&nbsp;читателей по&nbsp;всему миру.
               </p>
-              <h3 id="donate">Поддерживать проект</h3>
+            </details>
+
+            <details>
+              <summary>
+                <h3 id="donate">Поддерживать проект</h3>
+              </summary>
               <p>
                 Дискурс существует на&nbsp;пожертвования читателей. Если вам нравится журнал, пожалуйста,
               </p>
@@ -106,7 +130,12 @@ export const ManifestPage = () => {
                 <a href="/about/help">поддержите</a> нашу работу. Ваши пожертвования пойдут на&nbsp;выпуск
                 новых материалов, оплату серверов, труда программистов, дизайнеров и&nbsp;редакторов.
               </p>
-              <h3 id="cooperation">Сотрудничать с&nbsp;журналом</h3>
+            </details>
+
+            <details>
+              <summary>
+                <h3 id="cooperation">Сотрудничать с&nbsp;журналом</h3>
+              </summary>
               <p>
                 Мы всегда открыты для сотрудничества и&nbsp;рады единомышленникам. Если вы хотите помогать
                 журналу с&nbsp;редактурой, корректурой, иллюстрациями, переводами, версткой, подкастами,
@@ -125,7 +154,12 @@ export const ManifestPage = () => {
                 и&nbsp;медиаинструментов находится{' '}
                 <a href="https://github.com/Discours">в&nbsp;свободном доступе на&nbsp;GitHub</a>.
               </p>
-              <h3 id="follow">Как еще можно помочь</h3>
+            </details>
+
+            <details>
+              <summary>
+                <h3 id="follow">Как еще можно помочь</h3>
+              </summary>
               <p>
                 Советуйте Дискурс друзьям и&nbsp;знакомым. Обсуждайте и&nbsp;распространяйте наши
                 публикации&nbsp;&mdash; все материалы открытой редакции можно читать и&nbsp;перепечатывать
@@ -141,19 +175,19 @@ export const ManifestPage = () => {
                 интересными темами, о&nbsp;которых хотели бы узнать больше, и&nbsp;историями, которые нужно
                 рассказать.
               </p>
-            </div>
+            </details>
 
             <h2 class="h2" id="connection">
               <span class="wrapped">Будем на&nbsp;связи</span>
             </h2>
 
-            <div class="col-lg-10 offset-md-1">
+            <p>
               Если вы хотите предложить материал, сотрудничать, рассказать о&nbsp;проблеме, которую нужно
               осветить, сообщить об&nbsp;ошибке или баге, что-то обсудить, уточнить или посоветовать,
               пожалуйста, <Opener name="feedback">напишите нам здесь</Opener> или на&nbsp;почту{' '}
               <a href="mailto:welcome@discours.io">welcome@discours.io</a>. Мы обязательно ответим
               и&nbsp;постараемся реализовать все хорошие задумки.
-            </div>
+            </p>
           </div>
         </div>
       </article>

src/components/Pages/about/PartnersPage.tsx

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

src/components/Pages/about/PrinciplesPage.tsx

@@ -7,173 +7,168 @@ export const PrinciplesPage = () => {
     <MainLayout>
       <article class="container container--static-page">
         <div class="row">
-          <div class="col-md-8 offset-md-2">
+          <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1>
               <span class="wrapped">{title}</span>
             </h1>
 
-            <div class="col-lg-10 offset-md-1">
+            <ol>
-              <ol>
+              <li>
-                <li>
+                <p>
-                  <p>
+                  <strong>Горизонтальность</strong>. Мы&nbsp;все разные, и&nbsp;это классно. Вертикалей
-                    <strong>Горизонтальность</strong>. Мы&nbsp;все разные, и&nbsp;это классно. Вертикалей
+                  в&nbsp;мире достаточно, мы&nbsp;&mdash; горизонтальное сообщество и&nbsp;ценим наши
-                    в&nbsp;мире достаточно, мы&nbsp;&mdash; горизонтальное сообщество и&nbsp;ценим наши
+                  различия, потому что знаем&nbsp;&mdash; в&nbsp;них наша сила. Благодаря разнообразию сотен
-                    различия, потому что знаем&nbsp;&mdash; в&nbsp;них наша сила. Благодаря разнообразию
+                  голосов, усиливающих друг друга, в&nbsp;сообществе складывается неповторимая синергия,
-                    сотен голосов, усиливающих друг друга, в&nbsp;сообществе складывается неповторимая
+                  которая помогает вместе достигать большего.
-                    синергия, которая помогает вместе достигать большего.
+                </p>
-                  </p>
+              </li>
-                </li>
+              <li>
-                <li>
+                <p>
-                  <p>
+                  <strong>Многоголосие</strong>. Мы&nbsp;ценим свободу слова и&nbsp;аргументированные
-                    <strong>Многоголосие</strong>. Мы&nbsp;ценим свободу слова и&nbsp;аргументированные
+                  мнения. Предоставляя трибуну каждому, кому есть что сказать, самиздат отражает полифонию
-                    мнения. Предоставляя трибуну каждому, кому есть что сказать, самиздат отражает полифонию
+                  позиций, знаний и&nbsp;опыта, которые открывают более полную картину реальности.
-                    позиций, знаний и&nbsp;опыта, которые открывают более полную картину реальности.
+                </p>
-                  </p>
+              </li>
-                </li>
+              <li>
-                <li>
+                <p>
-                  <p>
+                  <strong>Взаимопомощь</strong>. Мы&nbsp;помогаем друг другу, потому что хотим, чтобы
-                    <strong>Взаимопомощь</strong>. Мы&nbsp;помогаем друг другу, потому что хотим, чтобы
+                  в&nbsp;мире было еще больше хорошего. Обсуждая что-то, мы&nbsp;всегда интересуемся, чем
-                    в&nbsp;мире было еще больше хорошего. Обсуждая что-то, мы&nbsp;всегда интересуемся, чем
+                  можем помочь. В&nbsp;самиздате можно найти специалистов практически в&nbsp;любых сферах
-                    можем помочь. В&nbsp;самиздате можно найти специалистов практически в&nbsp;любых сферах
+                  и&nbsp;получить поддержку от&nbsp;сотен людей. Благодаря коллективной экспертизе
-                    и&nbsp;получить поддержку от&nbsp;сотен людей. Благодаря коллективной экспертизе
+                  глобального сообщества в&nbsp;самиздате выходят крутейшие публикации, которыми можно вечно
-                    глобального сообщества в&nbsp;самиздате выходят крутейшие публикации, которыми можно
+                  гордиться.
-                    вечно гордиться.
+                </p>
-                  </p>
+              </li>
-                </li>
+              <li>
-                <li>
+                <p>
-                  <p>
+                  <strong>Взаимоуважение</strong>. Мы&nbsp;ценим, искренне уважаем друг друга и&nbsp;вместо
-                    <strong>Взаимоуважение</strong>. Мы&nbsp;ценим, искренне уважаем друг друга
+                  борщевиков враждебности культивируем цветы добра, мира, знания и&nbsp;юмора. Нам некогда
-                    и&nbsp;вместо борщевиков враждебности культивируем цветы добра, мира, знания
+                  доказывать друг другу, кто круче. Гораздо приятнее сотрудничать, помогать и&nbsp;создавать
-                    и&nbsp;юмора. Нам некогда доказывать друг другу, кто круче. Гораздо приятнее
+                  что-то важное, интересное и&nbsp;полезное.
-                    сотрудничать, помогать и&nbsp;создавать что-то важное, интересное и&nbsp;полезное.
+                </p>
-                  </p>
+              </li>
-                </li>
+              <li>
-                <li>
+                <p>
-                  <p>
+                  <strong>Созидание</strong>. Мы&nbsp;создаем, потому что любим создавать. Мы&nbsp;открыто
-                    <strong>Созидание</strong>. Мы&nbsp;создаем, потому что любим создавать. Мы&nbsp;открыто
+                  делимся опытом, дарим идеи, обмениваемся мнениями и&nbsp;благодарим за&nbsp;критику,
-                    делимся опытом, дарим идеи, обмениваемся мнениями и&nbsp;благодарим за&nbsp;критику,
+                  используя ее&nbsp;для совершенствования мастерства и&nbsp;саморазвития. Мы&nbsp;знаем, что
-                    используя ее&nbsp;для совершенствования мастерства и&nbsp;саморазвития. Мы&nbsp;знаем,
+                  мир не&nbsp;идеальное место, и&nbsp;делаем всё возможное, чтобы он&nbsp;стал лучше.
-                    что мир не&nbsp;идеальное место, и&nbsp;делаем всё возможное, чтобы он&nbsp;стал лучше.
+                </p>
-                  </p>
+              </li>
-                </li>
+            </ol>
-              </ol>
-            </div>
 
             <h2 class="h2" id="participation">
               <span class="wrapped">Как участвовать в&nbsp;самиздате</span>
             </h2>
 
-            <div class="col-lg-10 offset-md-1">
+            <p>
-              <p>
+              Открытая редакция объединяет сотни потрясающих людей со&nbsp;всего мира, которые делают
-                Открытая редакция объединяет сотни потрясающих людей со&nbsp;всего мира, которые делают
+              крутейшие вещи. Это пространство, где доверяют, вдохновляют, исследуют и&nbsp;создают новое
-                крутейшие вещи. Это пространство, где доверяют, вдохновляют, исследуют и&nbsp;создают новое
+              вместе. Поскольку все в&nbsp;сообществе очень разные, как-то мы&nbsp;собрались и&nbsp;решили
-                вместе. Поскольку все в&nbsp;сообществе очень разные, как-то мы&nbsp;собрались и&nbsp;решили
+              зафиксировать базовые ценности открытой редакции, а&nbsp;заодно придумали универсальные
-                зафиксировать базовые ценности открытой редакции, а&nbsp;заодно придумали универсальные
+              правила взаимодействия, чтобы общение было не&nbsp;только плодотворным,
-                правила взаимодействия, чтобы общение было не&nbsp;только плодотворным,
+              но&nbsp;и&nbsp;приятным для всех участников сообщества.
-                но&nbsp;и&nbsp;приятным для всех участников сообщества.
+            </p>
-              </p>
+            <ol>
-              <ol>
+              <li>
-                <li>
+                <p>
-                  <p>
+                  <strong>Действуем, помогаем и&nbsp;делимся</strong>. В&nbsp;редакции мы&nbsp;создаем свои
-                    <strong>Действуем, помогаем и&nbsp;делимся</strong>. В&nbsp;редакции мы&nbsp;создаем
+                  проекты и&nbsp;помогаем другим создавать свои&nbsp;&mdash; советами, делом, участием,
-                    свои проекты и&nbsp;помогаем другим создавать свои&nbsp;&mdash; советами, делом,
+                  вовлеченностью. Мы&nbsp;открыто делимся опытом, мнениями и&nbsp;идеями, потому что ценим
-                    участием, вовлеченностью. Мы&nbsp;открыто делимся опытом, мнениями и&nbsp;идеями, потому
+                  силу сотрудничества и&nbsp;знаем, что идеи реализуются скорее, лучше и&nbsp;веселее, если
-                    что ценим силу сотрудничества и&nbsp;знаем, что идеи реализуются скорее, лучше
+                  над ними трудиться сообща.
-                    и&nbsp;веселее, если над ними трудиться сообща.
+                </p>
-                  </p>
+              </li>
-                </li>
 
-                <li>
+              <li>
-                  <p>
+                <p>
-                    <strong>Общаемся дружелюбно</strong>. Помните, по&nbsp;ту&nbsp;сторону монитора
+                  <strong>Общаемся дружелюбно</strong>. Помните, по&nbsp;ту&nbsp;сторону монитора находятся
-                    находятся реальные люди. Неуважение ранит других так&nbsp;же, как ранило&nbsp;бы вас
+                  реальные люди. Неуважение ранит других так&nbsp;же, как ранило&nbsp;бы вас самих. Поэтому
-                    самих. Поэтому не&nbsp;стоит кричать (даже капслоком), заполнять эфир желчью
+                  не&nbsp;стоит кричать (даже капслоком), заполнять эфир желчью и&nbsp;бросаться
-                    и&nbsp;бросаться грубостями&nbsp;&mdash; так вы&nbsp;рискуете не&nbsp;только растерять
+                  грубостями&nbsp;&mdash; так вы&nbsp;рискуете не&nbsp;только растерять доверие окружающих,
-                    доверие окружающих, но&nbsp;и&nbsp;остаться непонятым.
+                  но&nbsp;и&nbsp;остаться непонятым.
-                  </p>
+                </p>
-                </li>
+              </li>
 
-                <li>
+              <li>
-                  <p>
+                <p>
-                    <strong>Критикуем и&nbsp;реагируем конструктивно</strong>. Самиздат про&nbsp;то, чтобы
+                  <strong>Критикуем и&nbsp;реагируем конструктивно</strong>. Самиздат про&nbsp;то, чтобы
-                    разбираться в&nbsp;сложных вещах всем сообществом, поэтому мы&nbsp;тактично и&nbsp;без
+                  разбираться в&nbsp;сложных вещах всем сообществом, поэтому мы&nbsp;тактично и&nbsp;без
-                    агрессии делимся мнениями, стараясь убедительно аргументировать позиции.
+                  агрессии делимся мнениями, стараясь убедительно аргументировать позиции.
-                    И&nbsp;с&nbsp;благодарностью принимаем критику, используя ее&nbsp;для улучшения наших
+                  И&nbsp;с&nbsp;благодарностью принимаем критику, используя ее&nbsp;для улучшения наших
-                    проектов. Мы&nbsp;верим, что каждый участник сообщества имеет добрые намерения,
+                  проектов. Мы&nbsp;верим, что каждый участник сообщества имеет добрые намерения,
-                    и&nbsp;придерживаемся принципов доброжелательной критики, стараемся делиться
+                  и&nbsp;придерживаемся принципов доброжелательной критики, стараемся делиться
-                    советами&nbsp;&mdash; лучшим средством для самосовершенствования. Обоснованная критика
+                  советами&nbsp;&mdash; лучшим средством для самосовершенствования. Обоснованная критика
-                    помогает и&nbsp;адресату, и&nbsp;всем участникам сообщества досконально изучить тему
+                  помогает и&nbsp;адресату, и&nbsp;всем участникам сообщества досконально изучить тему
-                    и&nbsp;глубже разобраться в&nbsp;проблеме.
+                  и&nbsp;глубже разобраться в&nbsp;проблеме.
-                  </p>
+                </p>
-                </li>
+              </li>
 
-                <li>
+              <li>
-                  <p>
+                <p>
-                    <strong>Решаем трудности не&nbsp;агрессией, а&nbsp;диалогом</strong>. Обесценивать
+                  <strong>Решаем трудности не&nbsp;агрессией, а&nbsp;диалогом</strong>. Обесценивать мнения
-                    мнения и&nbsp;оскорблять других людей только потому, что вы&nbsp;с&nbsp;ними
+                  и&nbsp;оскорблять других людей только потому, что вы&nbsp;с&nbsp;ними
-                    не&nbsp;согласны,&nbsp;&mdash; не&nbsp;лучший способ донести свою точку зрения. Конечно,
+                  не&nbsp;согласны,&nbsp;&mdash; не&nbsp;лучший способ донести свою точку зрения. Конечно,
-                    важно высказаться, если вас что-то не&nbsp;устраивает и&nbsp;откровенно бесит.
+                  важно высказаться, если вас что-то не&nbsp;устраивает и&nbsp;откровенно бесит.
-                    Но&nbsp;прежде чем сжигать оппонента гневом, попробуйте понять, почему этот
+                  Но&nbsp;прежде чем сжигать оппонента гневом, попробуйте понять, почему этот
-                    &laquo;нехороший человек&raquo; так поступает. Возможно, аргументы собеседника окажутся
+                  &laquo;нехороший человек&raquo; так поступает. Возможно, аргументы собеседника окажутся
-                    убедительными или вам удастся изменить его мнение. В&nbsp;любом случае конфликты
+                  убедительными или вам удастся изменить его мнение. В&nbsp;любом случае конфликты решаются
-                    решаются в&nbsp;диалогах и&nbsp;проходят, а&nbsp;налаженное взаимопонимание останется
+                  в&nbsp;диалогах и&nbsp;проходят, а&nbsp;налаженное взаимопонимание останется надолго.
-                    надолго.
+                </p>
-                  </p>
+              </li>
-                </li>
 
-                <li>
+              <li>
-                  <p>
+                <p>
-                    <strong>Не&nbsp;переходим на&nbsp;личности&nbsp;&mdash; это признак токсичности</strong>
+                  <strong>Не&nbsp;переходим на&nbsp;личности&nbsp;&mdash; это признак токсичности</strong>.
-                    . Всегда мудрее обсуждать точку зрения человека, а&nbsp;не&nbsp;его самого, даже если
+                  Всегда мудрее обсуждать точку зрения человека, а&nbsp;не&nbsp;его самого, даже если
-                    он&nbsp;вам не&nbsp;импонирует. Предвзятое отношение ограничивает кругозор, добавляет
+                  он&nbsp;вам не&nbsp;импонирует. Предвзятое отношение ограничивает кругозор, добавляет
-                    преждевременные морщины и&nbsp;не&nbsp;помогает окружающим стать лучше. Вежливость
+                  преждевременные морщины и&nbsp;не&nbsp;помогает окружающим стать лучше. Вежливость
-                    и&nbsp;взаимоуважение&nbsp;&mdash; краеугольная основа вдумчивых и&nbsp;осмысленных
+                  и&nbsp;взаимоуважение&nbsp;&mdash; краеугольная основа вдумчивых и&nbsp;осмысленных
-                    дискуссий.
+                  дискуссий.
-                  </p>
+                </p>
-                </li>
+              </li>
 
-                <li>
+              <li>
-                  <p>
+                <p>
-                    <strong>Благодарим за&nbsp;помощь</strong>. Благодарите коллег даже за&nbsp;самые,
+                  <strong>Благодарим за&nbsp;помощь</strong>. Благодарите коллег даже за&nbsp;самые,
-                    казалось&nbsp;бы, простые вещи. &laquo;Спасибо&raquo; не&nbsp;зря называют волшебным
+                  казалось&nbsp;бы, простые вещи. &laquo;Спасибо&raquo; не&nbsp;зря называют волшебным
-                    словом&nbsp;&mdash; на&nbsp;искренней благодарности держится любое подлинное
+                  словом&nbsp;&mdash; на&nbsp;искренней благодарности держится любое подлинное
-                    сотрудничество. Поддержка воодушевляет на&nbsp;новые подвиги и&nbsp;напоминает, что мир
+                  сотрудничество. Поддержка воодушевляет на&nbsp;новые подвиги и&nbsp;напоминает, что мир
-                    делают прекрасным не&nbsp;машины, а&nbsp;живые люди.
+                  делают прекрасным не&nbsp;машины, а&nbsp;живые люди.
-                  </p>
+                </p>
-                </li>
+              </li>
 
-                <li>
+              <li>
-                  <p>
+                <p>
-                    <strong>Даем еще один шанс</strong>. Все совершают ошибки, и&nbsp;за&nbsp;один проступок
+                  <strong>Даем еще один шанс</strong>. Все совершают ошибки, и&nbsp;за&nbsp;один проступок
-                    не&nbsp;стоит вычеркивать людей из&nbsp;жизни. Ошибки нужны, чтобы на&nbsp;них учиться
+                  не&nbsp;стоит вычеркивать людей из&nbsp;жизни. Ошибки нужны, чтобы на&nbsp;них учиться
-                    и&nbsp;делать выводы. Однако если многократно и&nbsp;систематически нарушать правила
+                  и&nbsp;делать выводы. Однако если многократно и&nbsp;систематически нарушать правила
-                    сообщества, наверняка можно заслужить минусы в&nbsp;карму от&nbsp;других участников
+                  сообщества, наверняка можно заслужить минусы в&nbsp;карму от&nbsp;других участников
-                    и&nbsp;потерять доступ к&nbsp;сообществу.
+                  и&nbsp;потерять доступ к&nbsp;сообществу.
-                  </p>
+                </p>
-                </li>
+              </li>
 
-                <li>
+              <li>
-                  <p>
+                <p>
-                    <strong>Вместе создаем идеальную среду общения</strong>. Открытая редакция&nbsp;&mdash;
+                  <strong>Вместе создаем идеальную среду общения</strong>. Открытая редакция&nbsp;&mdash;
-                    это утопическое пространство обогащающей и&nbsp;осмысленной коммуникации. Атмосфера
+                  это утопическое пространство обогащающей и&nbsp;осмысленной коммуникации. Атмосфера
-                    горизонтального сообщества складывается из&nbsp;действий каждого, поэтому
+                  горизонтального сообщества складывается из&nbsp;действий каждого, поэтому
-                    мы&nbsp;действуем так, чтобы способствовать сотворчеству, коллективному познанию
+                  мы&nbsp;действуем так, чтобы способствовать сотворчеству, коллективному познанию
-                    и&nbsp;развитию самиздата и&nbsp;нашей альтернативной интеллектуальной медиасреды.
+                  и&nbsp;развитию самиздата и&nbsp;нашей альтернативной интеллектуальной медиасреды.
-                  </p>
+                </p>
-                </li>
+              </li>
 
-                <li>
+              <li>
-                  <p>
+                <p>
-                    <strong>Помним, что всё в&nbsp;сообществе зависит от&nbsp;нас</strong>. Если нам чего-то
+                  <strong>Помним, что всё в&nbsp;сообществе зависит от&nbsp;нас</strong>. Если нам чего-то
-                    не&nbsp;хватает, мы&nbsp;начинаем действовать&nbsp;&mdash; рассказываем об&nbsp;идее,
+                  не&nbsp;хватает, мы&nbsp;начинаем действовать&nbsp;&mdash; рассказываем об&nbsp;идее,
-                    находим единомышленников, готовим и&nbsp;запускаем проект. Так в&nbsp;сообществе
+                  находим единомышленников, готовим и&nbsp;запускаем проект. Так в&nbsp;сообществе
-                    становится на&nbsp;одну крутую активность больше. Так появилось наше сообщество. Так
+                  становится на&nbsp;одну крутую активность больше. Так появилось наше сообщество. Так
-                    появился самиздат и&nbsp;все проекты открытой редакции. Чтобы в&nbsp;сообществе
+                  появился самиздат и&nbsp;все проекты открытой редакции. Чтобы в&nbsp;сообществе случилось
-                    случилось что-то прекрасное, достаточно просто положить этому начало.
+                  что-то прекрасное, достаточно просто положить этому начало.
-                  </p>
+                </p>
-                </li>
+              </li>
-              </ol>
+            </ol>
-            </div>
           </div>
         </div>
       </article>

src/components/Pages/about/ProjectsPage.tsx

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

src/components/Pages/about/TermsOfUsePage.tsx

@@ -1,8 +1,14 @@
+import { createSignal, Show } from 'solid-js'
 import { MainLayout } from '../../Layouts/MainLayout'
+import { Icon } from '../../Nav/Icon'
 
 // const title = t('Terms of use')
 
 export const TermsOfUsePage = () => {
+  const [indexExpanded, setIndexExpanded] = createSignal(true)
+
+  const toggleIndexExpanded = () => setIndexExpanded((oldExpanded) => !oldExpanded)
+
   return (
     <MainLayout>
       {/*<Meta name="description" content={title} />*/}
@@ -11,254 +17,260 @@ export const TermsOfUsePage = () => {
       {/*<Meta property="og:description" content={title} />*/}
       <article class="container container--static-page">
         <div class="row">
-          <div class="col-md-2">
+          <div class="col-md-4 col-lg-3 order-md-last">
-            <nav class="content-index">
+            <button class="button button--content-index" onClick={toggleIndexExpanded}>
-              <ul class="nodash">
+              <Show when={!indexExpanded()}>
-                <li>
+                <Icon name="content-index-control" />
-                  <a href="#terms-of-use">Пользовательское соглашение</a>
+              </Show>
-                </li>
+              <Show when={indexExpanded()}>
-                <li>
+                <Icon name="content-index-control-expanded" class={'expanded'} />
-                  <a href="#definitions">Определения</a>
+              </Show>
-                </li>
+            </button>
-                <li>
+
-                  <a href="#copyright">Авторские права</a>
+            <Show when={indexExpanded()}>
-                </li>
+              <nav class="content-index">
-                <li>
+                <h4>Оглавление</h4>
-                  <a href="#rules">Правила поведения</a>
+
-                </li>
+                <ul class="nodash">
-                <li>
+                  <li>
-                  <a href="#privacy-policy">Политика конфиденциальности</a>
+                    <a href="#terms-of-use">Пользовательское соглашение</a>
-                </li>
+                  </li>
-                <li>
+                  <li>
-                  <a href="#feedback">Обратная связь</a>
+                    <a href="#definitions">Определения</a>
-                </li>
+                  </li>
-              </ul>
+                  <li>
-            </nav>
+                    <a href="#copyright">Авторские права</a>
+                  </li>
+                  <li>
+                    <a href="#rules">Правила поведения</a>
+                  </li>
+                  <li>
+                    <a href="#privacy-policy">Политика конфиденциальности</a>
+                  </li>
+                  <li>
+                    <a href="#feedback">Обратная связь</a>
+                  </li>
+                </ul>
+              </nav>
+            </Show>
           </div>
 
-          <div class="col-md-8">
+          <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1 id="terms-of-use">
               <span class="wrapped">Пользовательское соглашение</span>
             </h1>
 
-            <div class="col-lg-10 offset-md-1">
+            <p>
-              <p>
+              Дискурс&nbsp;&mdash; это сообщество творческих людей, объединенных идеей делать интересный
-                Дискурс&nbsp;&mdash; это сообщество творческих людей, объединенных идеей делать интересный
+              журнал для всех желающих. Авторы Дискурса сообща посредством прямого голосования определяют
-                журнал для всех желающих. Авторы Дискурса сообща посредством прямого голосования определяют
+              содержание журнала.
-                содержание журнала.
+            </p>
-              </p>
+            <p>Для того, чтобы Дискурс работал без помех, разработаны настоящие Правила.</p>
-              <p>Для того, чтобы Дискурс работал без помех, разработаны настоящие Правила.</p>
+            <h3 id="definitions">Определения</h3>
-              <h3 id="definitions">Определения</h3>
+            <p>
-              <p>
+              <strong>Сайт</strong>&nbsp;&mdash; портал discours.io
-                <strong>Сайт</strong>&nbsp;&mdash; портал discours.io
+            </p>
-              </p>
+            <p>
-              <p>
+              <strong>Пользователь</strong>&nbsp;&mdash; лицо, пользующееся Сайтом, либо юридическое лицо,
-                <strong>Пользователь</strong>&nbsp;&mdash; лицо, пользующееся Сайтом, либо юридическое лицо,
+              обладающее правами на&nbsp;интеллектуальную собственность.
-                обладающее правами на&nbsp;интеллектуальную собственность.
+            </p>
-              </p>
+            <p>
-              <p>
+              <strong>Публикация контента</strong>&nbsp;&mdash; размещение Пользователем посредством Сайта
-                <strong>Публикация контента</strong>&nbsp;&mdash; размещение Пользователем посредством Сайта
+              объектов авторских прав и&nbsp;другой информации для других пользователей.
-                объектов авторских прав и&nbsp;другой информации для других пользователей.
+            </p>
-              </p>
+            <p>
-              <p>
+              <strong>Издательство</strong>&nbsp;&mdash; администрация сайта, которая занимается технической
-                <strong>Издательство</strong>&nbsp;&mdash; администрация сайта, которая занимается
+              и&nbsp;издательской деятельностью для обеспечения функционирования Сайта и&nbsp;Альманаха.
-                технической и&nbsp;издательской деятельностью для обеспечения функционирования Сайта
+              Издательство не&nbsp;вмешивается в&nbsp;принятие редакционных решений авторским сообществом.
-                и&nbsp;Альманаха. Издательство не&nbsp;вмешивается в&nbsp;принятие редакционных решений
+            </p>
-                авторским сообществом.
+            <p>
-              </p>
+              <strong>Альманах &laquo;Дискурс&raquo;</strong> (свидетельство о&nbsp;регистрации СМИ: ПИ
-              <p>
+              &#8470; ФС77-63947 от&nbsp;18.12.15)&nbsp;&mdash; печатное периодическое издание, которое
-                <strong>Альманах &laquo;Дискурс&raquo;</strong> (свидетельство о&nbsp;регистрации СМИ: ПИ
+              выходит раз в&nbsp;год и&nbsp;состоит из&nbsp;лучших публикаций на&nbsp;Сайте за&nbsp;это
-                &#8470; ФС77-63947 от&nbsp;18.12.15)&nbsp;&mdash; печатное периодическое издание, которое
+              время.
-                выходит раз в&nbsp;год и&nbsp;состоит из&nbsp;лучших публикаций на&nbsp;Сайте за&nbsp;это
+            </p>
-                время.
+            <h3 id="copyright">Авторские права</h3>
-              </p>
+            <ol>
-              <h3 id="copyright">Авторские права</h3>
+              <li>
-              <ol>
+                <p>
-                <li>
+                  Вся информация на&nbsp;сайте (включая тексты, изображения, видеоматериалы, аудиозаписи,
-                  <p>
+                  программный код, дизайн сайта и&nbsp;т.д.) является объектом интеллектуальной
-                    Вся информация на&nbsp;сайте (включая тексты, изображения, видеоматериалы, аудиозаписи,
+                  собственности ее&nbsp;правообладателей и&nbsp;охраняется законодательством РФ.
-                    программный код, дизайн сайта и&nbsp;т.д.) является объектом интеллектуальной
+                </p>
-                    собственности ее&nbsp;правообладателей и&nbsp;охраняется законодательством РФ.
+              </li>
-                  </p>
+              <li>
-                </li>
+                <p>
-                <li>
+                  Публикуя контент на&nbsp;сайте, Пользователь на&nbsp;безвозмездной основе предоставляет
-                  <p>
+                  Издательству право на&nbsp;воспроизведение, распространение, перевод, редактирование
-                    Публикуя контент на&nbsp;сайте, Пользователь на&nbsp;безвозмездной основе предоставляет
+                  контента. Данное право предоставляется Издательству на&nbsp;весь срок действия авторских
-                    Издательству право на&nbsp;воспроизведение, распространение, перевод, редактирование
+                  прав Пользователя.
-                    контента. Данное право предоставляется Издательству на&nbsp;весь срок действия авторских
+                </p>
-                    прав Пользователя.
+              </li>
-                  </p>
+              <li>
-                </li>
+                <p>
-                <li>
+                  Пользователь предоставляет Издательству право редактировать контент, в&nbsp;том числе
-                  <p>
+                  вносить в&nbsp;него изменения, сокращения и&nbsp;дополнения, снабжать его иллюстрациями
-                    Пользователь предоставляет Издательству право редактировать контент, в&nbsp;том числе
+                  и&nbsp;пояснениями, исправлять ошибки и&nbsp;уточнять фактические сведения, при условии,
-                    вносить в&nbsp;него изменения, сокращения и&nbsp;дополнения, снабжать его иллюстрациями
+                  что этим не&nbsp;искажается авторский замысел.
-                    и&nbsp;пояснениями, исправлять ошибки и&nbsp;уточнять фактические сведения, при условии,
+                </p>
-                    что этим не&nbsp;искажается авторский замысел.
+              </li>
-                  </p>
+              <li>
-                </li>
+                <p class="ng-binding">
-                <li>
+                  Обнародование контента осуществляется Издательством в&nbsp;соответствии с&nbsp;условиями
-                  <p class="ng-binding">
+                  лицензии{' '}
-                    Обнародование контента осуществляется Издательством в&nbsp;соответствии с&nbsp;условиями
+                  <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.ru" target="_blank">
-                    лицензии{' '}
+                    Creative Commons BY-NC-ND 4.0
-                    <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.ru" target="_blank">
+                  </a>
-                      Creative Commons BY-NC-ND 4.0
+                  . Все материалы сайта предназначены исключительно для личного некоммерческого
-                    </a>
+                  использования. Права на&nbsp;дизайн и&nbsp;программный код сайта принадлежат Издательству.
-                    . Все материалы сайта предназначены исключительно для личного некоммерческого
+                </p>
-                    использования. Права на&nbsp;дизайн и&nbsp;программный код сайта принадлежат
+              </li>
-                    Издательству.
+              <li>
-                  </p>
+                <p class="ng-binding">
-                </li>
+                  Все аудиовизуальные произведения являются собственностью своих авторов
-                <li>
+                  и&nbsp;правообладателей и&nbsp;используются только в&nbsp;образовательных
-                  <p class="ng-binding">
+                  и&nbsp;информационных целях. Если вы&nbsp;являетесь собственником того или иного
-                    Все аудиовизуальные произведения являются собственностью своих авторов
+                  произведения и&nbsp;не&nbsp;согласны с&nbsp;его размещением на&nbsp;сайте, пожалуйста,
-                    и&nbsp;правообладателей и&nbsp;используются только в&nbsp;образовательных
+                  напишите на&nbsp;
-                    и&nbsp;информационных целях. Если вы&nbsp;являетесь собственником того или иного
+                  <a href="mailto:welcome@discours.io" target="_blank">
-                    произведения и&nbsp;не&nbsp;согласны с&nbsp;его размещением на&nbsp;сайте, пожалуйста,
+                    welcome@discours.io
-                    напишите на&nbsp;
+                  </a>
-                    <a href="mailto:welcome@discours.io" target="_blank">
+                  .
-                      welcome@discours.io
+                </p>
-                    </a>
+              </li>
-                    .
+              <li>
-                  </p>
+                <p>
-                </li>
+                  Цитирование, распространение, доведение до&nbsp;всеобщего сведения материалов Cайта
-                <li>
+                  приветствуется. При использовании материалов сайта необходимо указать имя автора
-                  <p>
+                  и&nbsp;активную ссылку на&nbsp;материал на&nbsp;Сайте.
-                    Цитирование, распространение, доведение до&nbsp;всеобщего сведения материалов Cайта
+                </p>
-                    приветствуется. При использовании материалов сайта необходимо указать имя автора
+              </li>
-                    и&nbsp;активную ссылку на&nbsp;материал на&nbsp;Сайте.
+            </ol>
-                  </p>
+            <h3 id="rules">Правила поведения</h3>
-                </li>
+            <ol>
-              </ol>
+              <li>
-              <h3 id="rules">Правила поведения</h3>
+                <p>
-              <ol>
+                  Находясь на&nbsp;Сайте, Пользователь подтверждает свое совершеннолетие, правоспособность,
-                <li>
+                  а&nbsp;также согласие с&nbsp;настоящими Правилами и&nbsp;политикой конфиденциальности
-                  <p>
+                  и&nbsp;готовность нести полную ответственность за&nbsp;их соблюдение.
-                    Находясь на&nbsp;Сайте, Пользователь подтверждает свое совершеннолетие,
+                </p>
-                    правоспособность, а&nbsp;также согласие с&nbsp;настоящими Правилами и&nbsp;политикой
+              </li>
-                    конфиденциальности и&nbsp;готовность нести полную ответственность за&nbsp;их соблюдение.
+              <li>
-                  </p>
+                <h4>На&nbsp;сайте запрещено:</h4>
-                </li>
+                <ul>
-                <li>
+                  <li>
-                  <h4>На&nbsp;сайте запрещено:</h4>
+                    Публиковать контент, авторские права на&nbsp;который принадлежат третьим лицам, без
-                  <ul>
+                    согласия этих лиц. Если авторские права на контент принадлежат нескольким лицам,
-                    <li>
+                    то&nbsp;его публикация предполагает согласие их&nbsp;всех.
-                      Публиковать контент, авторские права на&nbsp;который принадлежат третьим лицам, без
+                  </li>
-                      согласия этих лиц. Если авторские права на контент принадлежат нескольким лицам,
+                  <li>Размещать коммерческую и&nbsp;политическую рекламу.</li>
-                      то&nbsp;его публикация предполагает согласие их&nbsp;всех.
+                  <li>
-                    </li>
+                    Целенаправленно препятствовать нормальному функционированию сообщества и&nbsp;сайта
-                    <li>Размещать коммерческую и&nbsp;политическую рекламу.</li>
+                    discours.io
-                    <li>
+                  </li>
-                      Целенаправленно препятствовать нормальному функционированию сообщества и&nbsp;сайта
+                  <li>Выдавать себя за&nbsp;другого человека и&nbsp;представляться его именем.</li>
-                      discours.io
+                  <li>
-                    </li>
+                    Размещать информацию, которая не&nbsp;соответствует целям создания Сайта, ущемляет
-                    <li>Выдавать себя за&nbsp;другого человека и&nbsp;представляться его именем.</li>
+                    интересы других пользователей или третьих лиц, нарушает законы Российской Федерации.
-                    <li>
+                  </li>
-                      Размещать информацию, которая не&nbsp;соответствует целям создания Сайта, ущемляет
+                </ul>
-                      интересы других пользователей или третьих лиц, нарушает законы Российской Федерации.
+              </li>
-                    </li>
+              <li>
-                  </ul>
+                <p>
-                </li>
+                  Пользователь несет всю ответственность за&nbsp;содержание публикуемого контента
-                <li>
+                  и&nbsp;свое взаимодействие с&nbsp;другими пользователями, и&nbsp;обязуется возместить все
-                  <p>
+                  расходы в&nbsp;случае предъявления каких-либо претензий третьими лицами. Издательство
-                    Пользователь несет всю ответственность за&nbsp;содержание публикуемого контента
+                  не&nbsp;несет ответственности за&nbsp;содержание публикуемой пользователями информации,
-                    и&nbsp;свое взаимодействие с&nbsp;другими пользователями, и&nbsp;обязуется возместить
+                  в&nbsp;том числе за&nbsp;размещенные на&nbsp;сайте комментарии. Переписка между
-                    все расходы в&nbsp;случае предъявления каких-либо претензий третьими лицами.
+                  Пользователем и&nbsp;Издательством считается юридически значимой. Настоящие Правила могут
-                    Издательство не&nbsp;несет ответственности за&nbsp;содержание публикуемой пользователями
+                  быть изменены Издательством, изменения вступают в&nbsp;силу с&nbsp;момента публикации
-                    информации, в&nbsp;том числе за&nbsp;размещенные на&nbsp;сайте комментарии. Переписка
+                  на&nbsp;Сайте.
-                    между Пользователем и&nbsp;Издательством считается юридически значимой. Настоящие
+                </p>
-                    Правила могут быть изменены Издательством, изменения вступают в&nbsp;силу с&nbsp;момента
+              </li>
-                    публикации на&nbsp;Сайте.
+              <li>
-                  </p>
+                <p>
-                </li>
+                  Если Пользователь очевидно и&nbsp;целенаправленно нарушает правила, Издательство может
-                <li>
+                  и&nbsp;принять в&nbsp;отношении автора следующие меры: вынести предупреждение
-                  <p>
+                  и&nbsp;обязать автора устранить допущенное нарушение, удалить контент, нарушающий правила,
-                    Если Пользователь очевидно и&nbsp;целенаправленно нарушает правила, Издательство может
+                  заблокировать или удалить аккаунт нарушителя.
-                    и&nbsp;принять в&nbsp;отношении автора следующие меры: вынести предупреждение
+                </p>
-                    и&nbsp;обязать автора устранить допущенное нарушение, удалить контент, нарушающий
+              </li>
-                    правила, заблокировать или удалить аккаунт нарушителя.
+            </ol>
-                  </p>
+            <h3 id="privacy-policy">Политика конфиденциальности</h3>
-                </li>
+            <ol>
-              </ol>
+              <li>
-              <h3 id="privacy-policy">Политика конфиденциальности</h3>
+                <p>Сайт может собирать у&nbsp;пользователей следующие данные:</p>
-              <ol>
+                <ul>
-                <li>
+                  <li>
-                  <p>Сайт может собирать у&nbsp;пользователей следующие данные:</p>
+                    <p>
-                  <ul>
+                      Данные, которые пользователи сообщают о&nbsp;себе сами при подаче заявки, регистрации,
-                    <li>
+                      авторизации или заполнения профиля, в&nbsp;том числе ФИО и&nbsp;контактную информацию.
-                      <p>
+                      Конфиденциальные данные, такие как идентификатор и&nbsp;электронный адрес,
-                        Данные, которые пользователи сообщают о&nbsp;себе сами при подаче заявки,
+                      используются для идентификации пользователя. Данные профиля, размещённые публично
-                        регистрации, авторизации или заполнения профиля, в&nbsp;том числе ФИО
+                      по&nbsp;желанию пользователя, которое выражается фактом их&nbsp;предоставления,
-                        и&nbsp;контактную информацию. Конфиденциальные данные, такие как идентификатор
+                      используется для демонстрации другим пользователям той информации о&nbsp;себе, которую
-                        и&nbsp;электронный адрес, используются для идентификации пользователя. Данные
+                      пользователь готов предоставить.
-                        профиля, размещённые публично по&nbsp;желанию пользователя, которое выражается
+                    </p>
-                        фактом их&nbsp;предоставления, используется для демонстрации другим пользователям
+                  </li>
-                        той информации о&nbsp;себе, которую пользователь готов предоставить.
+                  <li>
-                      </p>
+                    <p>
-                    </li>
+                      Данные, собранные автоматическим путем, такие, как cookie-файлы. Эти
-                    <li>
+                      неперсонализированные данные могут использоваться для сбора статистики
-                      <p>
+                      и&nbsp;улучшения работы сайта.
-                        Данные, собранные автоматическим путем, такие, как cookie-файлы. Эти
+                    </p>
-                        неперсонализированные данные могут использоваться для сбора статистики
+                  </li>
-                        и&nbsp;улучшения работы сайта.
+                </ul>
-                      </p>
+              </li>
-                    </li>
+              <li>
-                  </ul>
+                <p>
-                </li>
+                  Издательство обеспечивает конфиденциальность персональных данных и&nbsp;применяет все
-                <li>
+                  необходимые организационные и&nbsp;технические меры по&nbsp;их защите.
-                  <p>
+                </p>
-                    Издательство обеспечивает конфиденциальность персональных данных и&nbsp;применяет все
+              </li>
-                    необходимые организационные и&nbsp;технические меры по&nbsp;их защите.
+              <li>
-                  </p>
+                <p class="ng-binding">
-                </li>
+                  По&nbsp;желанию пользователя Издательство готово удалить любую информацию о&nbsp;нем,
-                <li>
+                  собранную автоматическим путем. Для этого следует написать на&nbsp;адрес электронной почты{' '}
-                  <p class="ng-binding">
+                  <a href="mailto:welcome@discours.io" target="_blank">
-                    По&nbsp;желанию пользователя Издательство готово удалить любую информацию о&nbsp;нем,
+                    welcome@discours.io
-                    собранную автоматическим путем. Для этого следует написать на&nbsp;адрес электронной
+                  </a>
-                    почты{' '}
+                  .
-                    <a href="mailto:welcome@discours.io" target="_blank">
+                </p>
-                      welcome@discours.io
+              </li>
-                    </a>
+              <li>
-                    .
+                <p>
-                  </p>
+                  Если в&nbsp;информации, предоставляемой Издательству Пользователем, содержатся
-                </li>
+                  персональные данные последнего, то&nbsp;фактом их&nbsp;предоставления он соглашается
-                <li>
+                  на&nbsp;их&nbsp;обработку любым способом, не&nbsp;запрещенным законодательством РФ.
-                  <p>
+                </p>
-                    Если в&nbsp;информации, предоставляемой Издательству Пользователем, содержатся
+                <p class="ng-binding">
-                    персональные данные последнего, то&nbsp;фактом их&nbsp;предоставления он соглашается
+                  Общедоступные видео на&nbsp;сайте могут транслироваться с&nbsp;YouTube и&nbsp;регулируются{' '}
-                    на&nbsp;их&nbsp;обработку любым способом, не&nbsp;запрещенным законодательством РФ.
+                  <a href="https://policies.google.com/privacy" target="_blank">
-                  </p>
+                    политикой конфиденциальности Google
-                  <p class="ng-binding">
+                  </a>
-                    Общедоступные видео на&nbsp;сайте могут транслироваться с&nbsp;YouTube
+                  . Загрузка видео на&nbsp;сайт также означает согласие с&nbsp;
-                    и&nbsp;регулируются{' '}
+                  <a href="https://www.youtube.com/t/terms" target="_blank">
-                    <a href="https://policies.google.com/privacy" target="_blank">
+                    Условиями использования YouTube
-                      политикой конфиденциальности Google
+                  </a>
-                    </a>
+                  .
-                    . Загрузка видео на&nbsp;сайт также означает согласие с&nbsp;
+                </p>
-                    <a href="https://www.youtube.com/t/terms" target="_blank">
+              </li>
-                      Условиями использования YouTube
+              <li>
-                    </a>
+                <p>
-                    .
+                  Данные, которые мы&nbsp;получаем от&nbsp;вас, мы&nbsp;используем только
-                  </p>
+                  в&nbsp;соответствии с&nbsp;принципами обработки данных, указанными в&nbsp;этом документе.
-                </li>
+                </p>
-                <li>
+              </li>
-                  <p>
+            </ol>
-                    Данные, которые мы&nbsp;получаем от&nbsp;вас, мы&nbsp;используем только
+            <h3 id="feedback">Обратная связь</h3>
-                    в&nbsp;соответствии с&nbsp;принципами обработки данных, указанными в&nbsp;этом
+            <p class="ng-binding">
-                    документе.
+              Любые вопросы и&nbsp;предложения по&nbsp;поводу функционирования сайта можно направить
-                  </p>
+              по&nbsp;электронной почте{' '}
-                </li>
+              <a href="mailto:welcome@discours.io" target="_blank">
-              </ol>
+                welcome@discours.io
-              <h3 id="feedback">Обратная связь</h3>
+              </a>{' '}
-              <p class="ng-binding">
+              или через форму <a href="/feedback-idea">&laquo;предложить идею&raquo;</a>.
-                Любые вопросы и&nbsp;предложения по&nbsp;поводу функционирования сайта можно направить
+            </p>
-                по&nbsp;электронной почте{' '}
-                <a href="mailto:welcome@discours.io" target="_blank">
-                  welcome@discours.io
-                </a>{' '}
-                или через форму <a href="/feedback-idea">&laquo;предложить идею&raquo;</a>.
-              </p>
-            </div>
           </div>
         </div>
       </article>

src/components/Pages/about/ThanksPage.tsx

@@ -12,12 +12,10 @@ export const ThanksPage = () => {
 
       <article class="container container--static-page">
         <div class="row">
-          <div class="col-md-8 offset-md-2">
+          <div class="col-md-6 col-xl-7 shift-content order-md-first">
             <h1>
               <span class="wrapped">{title}</span>
             </h1>
-          </div>
-          <div class="col-md-8 col-lg-6 offset-md-3">
             {/*
                 <h3><b>Команда</b></h3>
                   <p>

src/components/Root.tsx

@@ -2,12 +2,11 @@
 // import 'solid-devtools'
 
 import { MODALS, setLocale, showModal } from '../stores/ui'
-import { Component, createEffect, createMemo, onMount } from 'solid-js'
+import { Component, createEffect, createMemo } from 'solid-js'
 import { Routes, useRouter } from '../stores/router'
 import { Dynamic, isServer } from 'solid-js/web'
-import { getLogger } from '../utils/logger'
 
-import type { PageProps } from './types'
+import type { PageProps, RootSearchParams } from './types'
 
 import { HomePage } from './Pages/HomePage'
 import { AllTopicsPage } from './Pages/AllTopicsPage'
@@ -30,7 +29,7 @@ import { TermsOfUsePage } from './Pages/about/TermsOfUsePage'
 import { ThanksPage } from './Pages/about/ThanksPage'
 import { CreatePage } from './Pages/CreatePage'
 import { ConnectPage } from './Pages/ConnectPage'
-import { renewSession } from '../stores/auth'
+import { SessionProvider } from '../context/session'
 
 // TODO: lazy load
 // const HomePage = lazy(() => import('./Pages/HomePage'))
@@ -52,13 +51,6 @@ import { renewSession } from '../stores/auth'
 // const ThanksPage = lazy(() => import('./Pages/about/ThanksPage'))
 // const CreatePage = lazy(() => import('./Pages/about/CreatePage'))
 
-const log = getLogger('root')
-
-type RootSearchParams = {
-  modal: string
-  lang: string
-}
-
 const pagesMap: Record<keyof Routes, Component<PageProps>> = {
   connect: ConnectPage,
   create: CreatePage,
@@ -92,10 +84,6 @@ export const Root = (props: PageProps) => {
     }
   })
 
-  onMount(() => {
-    renewSession()
-  })
-
   const pageComponent = createMemo(() => {
     const result = pagesMap[page().route]
 
@@ -114,5 +102,9 @@ export const Root = (props: PageProps) => {
     })
   }
 
-  return <Dynamic component={pageComponent()} {...props} />
+  return (
+    <SessionProvider>
+      <Dynamic component={pageComponent()} {...props} />
+    </SessionProvider>
+  )
 }

src/components/Topic/Card.module.scss

@@ -3,16 +3,8 @@
   margin-top: 3.2rem;
 
   .stats & {
-    @include media-breakpoint-down(sm) {
-      margin-left: 0;
-    }
-
     .topicDetailsItem {
       margin-bottom: 1.2rem;
-
-      @include media-breakpoint-up(md) {
-        margin-bottom: 3.2rem;
-      }
     }
   }
 }
@@ -33,9 +25,9 @@
 
 .topicTitle {
   font-weight: bold;
-  @include font-size(1.7rem);
+  @include font-size(2.2rem);
 
-  margin-bottom: 0.8rem;
+  margin-bottom: 1.2rem;
 }
 
 .topicAvatar {
@@ -56,10 +48,10 @@
 }
 
 .topicDescription {
-  @include font-size(1.5rem);
+  @include font-size(1.6rem);
 
   color: #696969;
-  margin: 0 0 0.8rem;
+  margin: 0 0 1.6rem;
 
   &.compact {
     font-size: medium;
@@ -85,6 +77,8 @@
 }
 
 .topicDetailsItem {
+  @include font-size(1.5rem);
+
   margin-right: 1.6rem;
   white-space: nowrap;
 
@@ -104,3 +98,9 @@
     float: right;
   }
 }
+
+.controlContainer {
+  @include media-breakpoint-up(md) {
+    text-align: right;
+  }
+}