Fixed footer style

src/components/Discours/Footer.module.scss

@@ -1,4 +1,4 @@
-.discours-footer {
+.discoursFooter {
   background: #000;
   color: rgb(255 255 255 / 64%);
   @include font-size(1.7rem);
@@ -34,21 +34,21 @@
     margin-top: 0.8rem;
   }
 
-  .wide-container {
+  .wideContainer {
     @include media-breakpoint-down(sm) {
       padding: 0 $container-padding-x;
     }
   }
 }
 
-.discours-footer__content {
+.discoursFooterContent {
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding-left: $grid-gutter-width;
 }
 
-.footer-copyright {
+.footerCopyright {
   border-top: 5px solid #404040;
   color: #696969;
   @include font-size(1.5rem);
@@ -56,7 +56,7 @@
   padding-top: 1.6rem;
 }
 
-.footer-copyright__social {
+.footerCopyrightSocial {
   display: flex;
 
   .icon {
@@ -75,12 +75,19 @@
   }
 }
 
-.social__item {
-  text-align: right;
+.socialItem {
+  margin-top: 1em;
+  text-align: center;
   width: 25%;
+
+  @include media-breakpoint-up(md) {
+    margin-top: 0;
+    margin-left: 0.3em;
+    text-align: right;
+  }
 }
 
-.social__item--vk {
+.socialItemvk {
   img {
     max-width: 25px;
   }

src/components/Discours/Footer.tsx

@@ -1,9 +1,10 @@
 import { createMemo, For } from 'solid-js'
-import './Footer.scss'
+import styles from './Footer.module.scss'
 import { Icon } from '../Nav/Icon'
 import Subscribe from './Subscribe'
 import { t } from '../../utils/intl'
 import { locale } from '../../stores/ui'
+import {clsx} from "clsx";
 
 export const Footer = () => {
   const locale_title = createMemo(() => (locale() === 'ru' ? 'English' : 'Русский'))
@@ -107,12 +108,12 @@ export const Footer = () => {
     }
   ]
   return (
-    <footer class="discours-footer">
-      <div class="wide-container">
+    <footer class={styles.discoursFooter}>
+      <div class={clsx('wide-container', styles.wideContainer)}>
         <div class="row">
           <For each={links()}>
             {({ header, items }) => (
-              <div class="col-md-3">
+              <div class="col-sm-4 col-md-3">
                 <h5>{t(header)}</h5>
                 <ul>
                   <For each={items}>
@@ -134,18 +135,18 @@ export const Footer = () => {
           </div>
         </div>
 
-        <div class="footer-copyright row">
-          <div class="col-md-10">
+        <div class={clsx(styles.footerCopyright, 'row')}>
+          <div class="col-md-9 col-lg-10">
             Независимый журнал с&nbsp;открытой горизонтальной редакцией о&nbsp;культуре, науке
             и&nbsp;обществе. Дискурс&nbsp;&copy; 2015&ndash;2022{' '}
             <a href="/about/terms-of-use">{t('Terms of use')}</a>
           </div>
-          <div class="footer-copyright__social col-md-2">
+          <div class={clsx(styles.footerCopyrightSocial, 'col-md-3 col-lg-2')}>
             <For each={[...SOCIAL]}>
               {(social) => (
-                <div class={`social__item social__item--${social.name}`}>
+                <div class={clsx(styles.socialItem, styles[`socialItem${social.name}`])}>
                   <a href={social.href}>
-                    <Icon name={`${social.name}-white`} />
+                    <Icon name={`${social.name}-white`} class={styles.icon} />
                   </a>
                 </div>
               )}

src/components/Discours/Subscribe.module.scss

@@ -1,7 +1,11 @@
-.subscribe-form {
+.subscribeForm {
   display: flex;
   width: 100%;
 
+  @include media-breakpoint-between(md, xl) {
+    flex-direction: column;
+  }
+
   input {
     background: none;
     border: none;
@@ -30,6 +34,7 @@
   }
 
   button {
+    margin-top: 0;
     padding-bottom: 0.8rem;
   }
 }

src/components/Discours/Subscribe.tsx

@@ -1,5 +1,5 @@
 import { createSignal, onMount } from 'solid-js'
-import './Subscribe.scss'
+import styles from './Subscribe.module.scss'
 import { t } from '../../utils/intl'
 
 export default () => {
@@ -8,12 +8,12 @@ export default () => {
   const subscribe = async () => {
     setTitle(t('...subscribing'))
     const r = await fetch(`/maillist?email=${emailElement?.value}`)
-    setTitle(r.ok ? t('You are subscribed') : t('Subscribe'))
+    setTitle(r.ok ? t('You are subscribed') : '')
   }
-  onMount(() => setTitle(t('Subscribe')))
+
   return (
-    <div class="subscribe-form">
-      <input type="email" name="email" ref={emailElement} placeholder="email" value={title()} />
+    <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()}>
         {t('Subscribe')}
       </button>

src/locales/ru.json

@@ -38,6 +38,7 @@
   "Favorite topics": "Избранные темы",
   "Feed settings": "Настройки ленты",
   "Feedback": "Обратная связь",
+  "Fill email": "Введите почту",
   "Follow": "Подписаться",
   "Follow the topic": "Подписаться на тему",
   "Forgot password?": "Забыли пароль?",

src/styles/app.scss

@@ -592,7 +592,7 @@ astro-island {
 
   @include media-breakpoint-up(md) {
     position: sticky;
-    top: 2rem;
+    top: 10rem;
   }
 
   ul ul {