Minor style fixes

src/components/Author/Card.module.scss

@@ -124,7 +124,6 @@
 .buttonSubscribe {
   align-items: center;
   aspect-ratio: 1/1;
-  background: #f6f6f6;
   border-radius: 100%;
   display: inline-flex;
   float: right;
@@ -139,7 +138,6 @@
 }
 
 .buttonWrite {
-  background: #f7f7f7;
   color: #000;
   display: inline-flex;
   transition: background-color 0.3s, color 0.3s;
@@ -193,7 +191,8 @@
   .buttonSubscribe {
     aspect-ratio: auto;
     background-color: #000;
-    border-radius: 2px;
+    border-color: #000;
+    border-radius: 0.8rem;
     float: none;
     padding-bottom: 0.6rem;
     padding-top: 0.6rem;

src/components/Author/Card.tsx

@@ -79,7 +79,7 @@ export const AuthorCard = (props: AuthorCardProps) => {
             </Show>
 
             <Show when={!props.compact}>
-              <button class={clsx(style.buttonWrite, style.button, 'button')}>
+              <button class={clsx(style.buttonWrite, style.button, 'button button--subscribe-topic')}>
                 <Icon name="edit" class={style.icon} />
                 {t('Write')}
               </button>

src/components/Author/Full.tsx

@@ -6,7 +6,7 @@ export const AuthorFull = (props: { author: Author }) => {
   return (
     <div class="container">
       <div class="row">
-        <div class="user-details">
+        <div class="col-md-8 offset-md-2 user-details">
           <AuthorCard author={props.author} compact={false} isAuthorPage={true} />
         </div>
       </div>

src/components/Discours/Footer.module.scss

@@ -54,6 +54,14 @@
   @include font-size(1.5rem);
 
   padding-top: 1.6rem;
+
+  a {
+    color: rgba(255, 255, 255, 0.7);
+
+    &:hover {
+      color: #fff;
+    }
+  }
 }
 
 .footerCopyrightSocial {

src/components/Discours/Footer.tsx

@@ -26,8 +26,8 @@ export const Footer = () => {
           slug: '/about/dogma'
         },
         {
-          title: 'Terms of use',
+          title: 'Principles',
-          slug: '/about/terms-of-use'
+          slug: '/about/principles'
         },
         {
           title: 'How to write an article',

src/components/Discours/Subscribe.module.scss

@@ -14,6 +14,9 @@
     font-family: inherit;
     @include font-size(2rem);
 
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
     padding: 0.2em 0.5em 0.3em 0;
     width: 100%;
 
@@ -33,8 +36,8 @@
     padding: 0 0.5em;
   }
 
-  button {
+  .button {
-    margin-top: 0;
+    border-radius: 0;
-    padding-bottom: 0.8rem;
+    margin: 0;
   }
 }

src/components/Discours/Subscribe.tsx

@@ -1,6 +1,7 @@
 import { createSignal, onMount } from 'solid-js'
 import styles from './Subscribe.module.scss'
 import { t } from '../../utils/intl'
+import { clsx } from 'clsx'
 
 export default () => {
   let emailElement: HTMLInputElement | undefined
@@ -14,7 +15,10 @@ export default () => {
   return (
     <div class={styles.subscribeForm}>
       <input type="email" name="email" ref={emailElement} placeholder={t('Fill email')} value={title()} />
-      <button class="button--light" onClick={() => emailElement?.value && subscribe()}>
+      <button
+        class={clsx(styles.button, 'button--light')}
+        onClick={() => emailElement?.value && subscribe()}
+      >
         {t('Subscribe')}
       </button>
     </div>

src/components/Pages/about/DiscussionRulesPage.tsx

@@ -5,14 +5,14 @@ export const DiscussionRulesPage = () => {
   const title = t('Discussion rules')
   return (
     <MainLayout>
-      <article class="container">
+      <article class="container container--static-page">
         <div class="row">
           <div class="col-md-8 offset-md-2">
             <h1>
-              <span class="wrapped">{title}</span>
+              <span class="wrapped" innerHTML={title} />
             </h1>
-          </div>
+
-          <div class="col-md-8 col-lg-6 offset-md-3">
+            <div class="col-lg-10 offset-md-1">
               <p>
                 Открытая редакция существует благодаря дружному сообществу авторов
                 и&nbsp;читателей&nbsp;&mdash; вдумчивых и&nbsp;сознательных людей, приверженных ценностям
@@ -30,9 +30,9 @@ export const DiscussionRulesPage = () => {
               <ol>
                 <li>
                   <p>
-                  Оскорбления, личные нападки, травля и&nbsp;угрозы. В&nbsp;любом виде. Конкретного человека
+                    Оскорбления, личные нападки, травля и&nbsp;угрозы. В&nbsp;любом виде. Конкретного
-                  или социальной группы&nbsp;&mdash; не&nbsp;суть. Агрессия, переход на&nbsp;личности
+                    человека или социальной группы&nbsp;&mdash; не&nbsp;суть. Агрессия, переход
-                  и&nbsp;токсичность едва&nbsp;ли способствуют плодотворному общению.
+                    на&nbsp;личности и&nbsp;токсичность едва&nbsp;ли способствуют плодотворному общению.
                   </p>
                 </li>
 
@@ -46,19 +46,19 @@ export const DiscussionRulesPage = () => {
                 <li>
                   <p>
                     Спам, реклама, фейкньюз, ссылки на&nbsp;пропагандистские СМИ, вбросы дезинформации,
-                  специально уводящий от&nbsp;темы флуд, провокации, разжигание конфликтов, намеренный срыв
+                    специально уводящий от&nbsp;темы флуд, провокации, разжигание конфликтов, намеренный
-                  дискуссий.
+                    срыв дискуссий.
                   </p>
                 </li>
 
                 <li>
                   <p>
                     Неаргументированная критика и&nbsp;комментарии вроде &laquo;отстой&raquo;, &laquo;зачем
-                  я&nbsp;это увидел/а&raquo;, &laquo;не&nbsp;читал, но&nbsp;осуждаю&raquo;, &laquo;либераху
+                    я&nbsp;это увидел/а&raquo;, &laquo;не&nbsp;читал, но&nbsp;осуждаю&raquo;,
-                  порвало&raquo;, &laquo;лол&raquo;, &laquo;скатились&raquo;, &laquo;первый нах&raquo;
+                    &laquo;либераху порвало&raquo;, &laquo;лол&raquo;, &laquo;скатились&raquo;,
-                  и&nbsp;тому подобные. Односложные реплики не&nbsp;подразумевают возможность обогащающего
+                    &laquo;первый нах&raquo; и&nbsp;тому подобные. Односложные реплики не&nbsp;подразумевают
-                  диалога, не&nbsp;продуктивны и&nbsp;никак не&nbsp;помогают авторам делать материалы лучше,
+                    возможность обогащающего диалога, не&nbsp;продуктивны и&nbsp;никак не&nbsp;помогают
-                  а&nbsp;читателям&nbsp;&mdash; разобраться.
+                    авторам делать материалы лучше, а&nbsp;читателям&nbsp;&mdash; разобраться.
                   </p>
                 </li>
               </ol>
@@ -114,6 +114,7 @@ export const DiscussionRulesPage = () => {
               </ol>
             </div>
           </div>
+        </div>
       </article>
     </MainLayout>
   )

src/components/Pages/about/DogmaPage.tsx

@@ -5,7 +5,7 @@ import { MainLayout } from '../../Layouts/MainLayout'
 export const DogmaPage = () => {
   return (
     <MainLayout>
-      <article class="container">
+      <article class="container container--static-page">
         <div class="row">
           <h4 class="col-md-8 offset-md-2">Редакционные принципы</h4>
           <div class="col-md-8 col-lg-6 offset-md-3">

src/components/Pages/about/GuidePage.tsx

@@ -14,7 +14,7 @@ export const GuidePage = () => {
       {/*<Meta property="og:image:width" content="1200" />*/}
       {/*<Meta property="og:image:height" content="630" />*/}
 
-      <article class="container">
+      <article class="container container--static-page">
         <div class="row">
           <div class="col-md-2">
             <nav class="content-index">

src/components/Pages/about/HelpPage.tsx

@@ -11,7 +11,7 @@ export const HelpPage = () => {
 
       {/*<Modal name="thank">Благодарим!</Modal>*/}
 
-      <article class="container discours-help">
+      <article class="container container--static-page discours-help">
         <div class="row">
           <div class="col-md-2">
             <nav class="content-index">

src/components/Pages/about/ManifestPage.tsx

@@ -15,7 +15,7 @@ export const ManifestPage = () => {
       <Modal name="subscribe">
         <Subscribe />
       </Modal>
-      <article class="container">
+      <article class="container container--static-page">
         <div class="row">
           <div class="col-md-2">
             <nav class="content-index">

src/components/Pages/about/PartnersPage.tsx

@@ -6,7 +6,7 @@ import { t } from '../../../utils/intl'
 export const PartnersPage = () => {
   return (
     <MainLayout>
-      <article class="container">
+      <article class="container container--static-page">
         <div class="row">
           <div class="col-md-8 offset-md-2">{t('Partners')}</div>
           <div class="col-md-8 col-lg-6 offset-md-3" />

src/components/Pages/about/PrinciplesPage.tsx

@@ -5,7 +5,7 @@ export const PrinciplesPage = () => {
   const title = t('Principles')
   return (
     <MainLayout>
-      <article class="container">
+      <article class="container container--static-page">
         <div class="row">
           <div class="col-md-8 offset-md-2">
             <h1>

src/components/Pages/about/ProjectsPage.tsx

@@ -6,7 +6,7 @@ import { t } from '../../../utils/intl'
 export const ProjectsPage = () => {
   return (
     <MainLayout>
-      <article class="container">
+      <article class="container container--static-page">
         <div class="row">
           <div class="col-md-8 offset-md-2">{t('Projects')}</div>
           <div class="col-md-8 col-lg-6 offset-md-3" />

src/components/Pages/about/TermsOfUsePage.tsx

@@ -9,7 +9,7 @@ export const TermsOfUsePage = () => {
       {/*<Meta name="keywords" content={`Discours.io, ${t('Terms of use')}, ${t('Terms of use', 'en')}`} />*/}
       {/*<Meta property="og:title" content={title} />*/}
       {/*<Meta property="og:description" content={title} />*/}
-      <article class="container">
+      <article class="container container--static-page">
         <div class="row">
           <div class="col-md-2">
             <nav class="content-index">

src/components/Pages/about/ThanksPage.tsx

@@ -10,7 +10,7 @@ export const ThanksPage = () => {
       {/*<Meta property="og:title" content={title} />*/}
       {/*<Meta property="og:description" content={title} />*/}
 
-      <article class="container">
+      <article class="container container--static-page">
         <div class="row">
           <div class="col-md-8 offset-md-2">
             <h1>

src/components/Topic/Card.tsx

@@ -1,5 +1,5 @@
 import { capitalize, plural } from '../../utils'
-import style from './Card.module.scss'
+import styles from './Card.module.scss'
 import { createMemo, Show } from 'solid-js'
 import type { Topic } from '../../graphql/types.gen'
 import { FollowingEntity } from '../../graphql/types.gen'
@@ -43,20 +43,20 @@ export const TopicCard = (props: TopicProps) => {
   }
   return (
     <div
-      class={style.topic}
+      class={styles.topic}
       classList={{
         row: !props.compact && !props.subscribeButtonBottom,
-        [style.topicInRow]: props.isTopicInRow
+        [styles.topicInRow]: props.isTopicInRow
       }}
     >
       <div classList={{ 'col-md-7': !props.compact && !props.subscribeButtonBottom }}>
         <Show when={props.topic.title}>
-          <div class={style.topicTitle}>
+          <div class={styles.topicTitle}>
             <a href={`/topic/${props.topic.slug}`}>{capitalize(props.topic.title || '')}</a>
           </div>
         </Show>
         <Show when={props.topic.pic}>
-          <div class={style.topicAvatar}>
+          <div class={styles.topicAvatar}>
             <a href={props.topic.slug}>
               <img src={props.topic.pic} alt={props.topic.title} />
             </a>
@@ -65,7 +65,7 @@ export const TopicCard = (props: TopicProps) => {
 
         <Show when={!props.compact && props.topic?.body}>
           <div
-            class={style.topicDescription}
+            class={styles.topicDescription}
             classList={{ 'topic-description--short': props.shortDescription }}
           >
             {props.topic.body}
@@ -73,9 +73,9 @@ export const TopicCard = (props: TopicProps) => {
         </Show>
 
         <Show when={props.topic?.stat}>
-          <div class={style.topicDetails}>
+          <div class={styles.topicDetails}>
             <Show when={!props.compact}>
-              <span class={style.topicDetailsTtem} classList={{ compact: props.compact }}>
+              <span class={styles.topicDetailsTtem} classList={{ compact: props.compact }}>
                 {props.topic.stat?.shouts +
                   ' ' +
                   t('post') +
@@ -84,7 +84,7 @@ export const TopicCard = (props: TopicProps) => {
                     locale() === 'ru' ? ['ов', '', 'а'] : ['s', '', 's']
                   )}
               </span>
-              <span class={style.topicDetailsTtem} classList={{ compact: props.compact }}>
+              <span class={styles.topicDetailsTtem} classList={{ compact: props.compact }}>
                 {props.topic.stat?.authors +
                   ' ' +
                   t('author') +
@@ -93,7 +93,7 @@ export const TopicCard = (props: TopicProps) => {
                     locale() === 'ru' ? ['ов', '', 'а'] : ['s', '', 's']
                   )}
               </span>
-              <span class={style.topicDetailsItem} classList={{ compact: props.compact }}>
+              <span class={styles.topicDetailsItem} classList={{ compact: props.compact }}>
                 {props.topic.stat?.followers +
                   ' ' +
                   t('follower') +
@@ -131,15 +131,15 @@ export const TopicCard = (props: TopicProps) => {
         <Show
           when={subscribed()}
           fallback={
-            <button onClick={() => subscribe(true)} class="button--light">
+            <button onClick={() => subscribe(true)} class="button--light button--subscribe-topic">
-              <Show when={props.iconButton}>{/*<Icon name={}/>*/}</Show>
+              <Show when={props.iconButton}>+</Show>
 
               <Show when={!props.iconButton}>+&nbsp;{t('Follow')}</Show>
             </button>
           }
         >
-          <button onClick={() => subscribe(false)} class="button--light">
+          <button onClick={() => subscribe(false)} class="button--light button--subscribe-topic">
-            <Show when={props.iconButton}>{/*<Icon name={}/>*/}</Show>
+            <Show when={props.iconButton}>-</Show>
 
             <Show when={!props.iconButton}>-&nbsp;{t('Unfollow')}</Show>
           </button>

src/locales/ru.json

@@ -26,7 +26,7 @@
   "Discours is an intellectual environment, a web space and tools that allows authors to collaborate with readers and come together to co-create publications and media projects": "Дискурс — это интеллектуальная среда, веб-пространство и инструменты, которые позволяют авторам сотрудничать с читателями и объединяться для совместного создания публикаций и медиапроектов",
   "Discours is created with our common effort": "Дискурс существует благодаря нашему общему вкладу",
   "Discussing": "Обсуждаемое",
-  "Discussion rules": "Правила сообществ самиздата в соцсетях",
+  "Discussion rules": "Правила сообществ самиздата в соцсетях",
   "Dogma": "Догма",
   "Edit": "Редактировать",
   "Email": "Почта",
@@ -99,7 +99,7 @@
   "Successfully authorized": "Авторизация успешна",
   "Suggest an idea": "Предложить идею",
   "Support us": "Помочь журналу",
-  "Terms of use": "Условия использования",
+  "Terms of use": "Правила сайта",
   "Thank you": "Благодарности",
   "To leave a comment please": "Чтобы оставить комментарий, необходимо",
   "Top authors": "Рейтинг авторов",

src/styles/app.scss

@@ -26,6 +26,7 @@ html {
   height: 100%;
   -webkit-font-smoothing: antialiased;
   overscroll-behavior-y: none;
+  overflow-y: scroll;
 }
 
 body {
@@ -69,10 +70,14 @@ section {
 
 h1,
 h2 {
+  line-height: 1.3;
+
   .wrapped {
     background: #000;
     color: #fff;
     padding: 0 0.15em;
+    box-decoration-break: clone;
+    -webkit-box-decoration-break: clone;
   }
 }
 
@@ -171,6 +176,7 @@ button {
 
 .button {
   background: #000;
+  box-sizing: border-box;
   color: #fff;
   font-size: 100%;
   font-weight: 500;
@@ -179,6 +185,7 @@ button {
 
   &:hover {
     color: #ccc;
+    opacity: 1;
   }
 
   &:active {
@@ -187,8 +194,10 @@ button {
 }
 
 .button--subscribe {
-  padding: 0.6rem 1.2rem;
+  background: #fff;
+  border: 2px solid #f6f6f6;
   font-size: 1.5rem;
+  padding: 0.6rem 1.2rem;
   transition: background-color 0.2s;
 
   img {
@@ -210,10 +219,23 @@ button {
   @include font-size(1.5rem);
 
   font-weight: 400;
+  height: auto;
   margin-top: 0.6rem;
   padding: 0.6rem 1.2rem 0.6rem 1rem;
 }
 
+.button--subscribe-topic {
+  background: #fff;
+  border: 2px solid #000;
+  border-radius: 0.8rem;
+
+  &:hover {
+    background: #000;
+    color: #fff;
+    opacity: 1;
+  }
+}
+
 form {
   .pretty-form__item {
     position: relative;
@@ -562,6 +584,10 @@ astro-island {
   }
 }
 
+.container--static-page {
+  padding-top: 1.5em;
+}
+
 .shift-content {
   @include media-breakpoint-up(md) {
     margin-left: 127px;