feat(styles): migrate layout and social

ChtiJS · Dec 5, 2023 · 8689304 · 8689304
1 parent f6ff9c6
commit 8689304
Show file tree

Hide file tree

Showing 8 changed files with 166 additions and 91 deletions.
diff --git a/public/images/icons/mastodon.svg b/public/images/icons/mastodon.svg
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import Social from './social';
 import {
   CSS_BREAKPOINT_END_S,
   CSS_BREAKPOINT_START_M,
@@ -14,6 +15,7 @@ const Footer = () => {
           <Link href="/mentions-legales" legacyBehavior>
             <a>Mentions légales</a>
           </Link>
+          <Social></Social>
         </p>
       </footer>
       <style jsx>{`

diff --git a/src/components/social.module.scss b/src/components/social.module.scss
@@ -0,0 +1,42 @@
+.root {
+  nav {
+    padding: 0 0 0 var(--gutter);
+    margin: 0;
+  }
+  ul {
+    display: flex;
+    justify-content: center;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+  }
+  li {
+    display: block;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+  }
+  a {
+    display: block;
+    width: var(--vRythm);
+    height: var(--vRythm);
+    background: var(--light);
+    mask-repeat: no-repeat;
+    mask-position: center bottom;
+    mask-size: calc(var(--vRythm) * 1);
+    -webkit-mask-size: calc(var(--vRythm) * 1);
+    mask-image: url('/images/icons/twitter.svg');
+  }
+  li.feed a {
+    mask-image: url('/images/icons/feed.svg');
+  }
+  li.twitter a {
+    mask-image: url('/images/icons/twitter.svg');
+  }
+  li.mastodon a {
+    mask-image: url('/images/icons/mastodon.svg');
+  }
+  span {
+    display: none;
+  }
+}
diff --git a/src/components/social.tsx b/src/components/social.tsx
@@ -1,11 +1,15 @@
-import { TWITTER_ACCOUNT } from '../utils/constants';
-import { publicRuntimeConfig } from '../utils/config';
+import {
+  TWITTER_ACCOUNT,
+  MASTODON_SERVER,
+  MASTODON_ACCOUNT,
+} from '../utils/constants';
+import styles from './social.module.scss';
 
 export default function Social(): JSX.Element {
   return (
-    <nav>
+    <nav className={styles.root}>
       <ul>
-        <li className="twitter">
+        <li className={`${styles.twitter}${styles.twitter}`}>
           <a
             href={`https://twitter.com/${TWITTER_ACCOUNT}`}
             title="Suivre notre groupe sur Twitter"
@@ -15,52 +19,26 @@ export default function Social(): JSX.Element {
             <span>Twitter</span>
           </a>
         </li>
-        <li className="feed">
+        <li className={styles.mastodon}>
+          <a
+            href={`https://${MASTODON_SERVER}/@${MASTODON_ACCOUNT}`}
+            title="Suivre notre groupe sur Twitter"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <span>Mastodon</span>
+          </a>
+        </li>
+        <li className={styles.feed}>
           <a
             href="/blog.atom"
             title="S'abonner aux mises à jour"
             target="_blank"
           >
-            <span>Flux de syncdication</span>
+            <span>Flux de syndication</span>
           </a>
         </li>
       </ul>
-      <style jsx>{`
-        nav {
-          padding: 0 0 0 var(--gutter);
-          margin: 0;
-        }
-        ul {
-          display: flex;
-          justify-content: center;
-          list-style-type: none;
-          padding: 0;
-          margin: 0;
-        }
-        li {
-          display: block;
-          list-style-type: none;
-          padding: 0;
-          margin: 0;
-        }
-        a {
-          display: block;
-          width: var(--vRythm);
-          height: var(--vRythm);
-          background: var(--light);
-          mask-repeat: no-repeat;
-          mask-position: center bottom;
-          mask-size: calc(var(--vRythm) * 1);
-          -webkit-mask-size: calc(var(--vRythm) * 1);
-          mask-image: url('${publicRuntimeConfig.basePath}/images/icons/twitter.svg');
-        }
-        li.feed a {
-          mask-image: url('${publicRuntimeConfig.basePath}/images/icons/feed.svg');
-        }
-        span {
-          display: none;
-        }
-      `}</style>
     </nav>
   );
 }
diff --git a/src/layouts/main.module.scss b/src/layouts/main.module.scss
@@ -0,0 +1,42 @@
+@import "./variables";
+
+.root {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: var(--block) 1fr;
+  grid-template-rows:
+    calc(var(--vRythm) * 8) auto
+    auto minmax(calc(var(--vRythm) * 2), auto);
+  background: var(--tertiary);
+}
+.contents {
+  overflow: auto;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  align-content: flex-end;
+  background: var(--light);
+}
+.contents :first-child {
+  flex: 1;
+}
+@media screen and (max-width: $CSS_BREAKPOINT_END_S) {
+  .contents {
+    grid-column-start: 1;
+    grid-column-end: 3;
+    grid-row-start: 3;
+    grid-row-end: 4;
+  }
+}
+@media screen and (min-width: $CSS_BREAKPOINT_START_M) {
+  .root {
+    height: 100vh;
+  }
+  .contents {
+    grid-column-start: 2;
+    grid-column-end: 3;
+    grid-row-start: 1;
+    grid-row-end: 4;
+  }
+}
diff --git a/src/layouts/main.tsx b/src/layouts/main.tsx
@@ -1,13 +1,10 @@
 import React from 'react';
-import {
-  CSS_BREAKPOINT_END_S,
-  CSS_BREAKPOINT_START_M,
-  ORGANISATION_NAME,
-} from '../utils/constants';
+import { ORGANISATION_NAME } from '../utils/constants';
 import Meta from '../components/meta';
 import Menu from '../components/menu';
 import Header from '../components/header';
 import Footer from '../components/footer';
+import styles from './main.module.scss';
 import type { ReactNode } from 'react';
 
 type Props = {
@@ -19,7 +16,7 @@ type Props = {
 
 const Layout = ({ children, title, description = '', image = '' }: Props) => {
   return (
-    <div className="root">
+    <div className={styles.root}>
       <Meta
         name={ORGANISATION_NAME}
         title={title}
@@ -28,50 +25,8 @@ const Layout = ({ children, title, description = '', image = '' }: Props) => {
       />
       <Menu />
       <Header />
-      <div className="contents">{children}</div>
+      <div className={styles.content}>{children}</div>
       <Footer />
-      <style jsx>{`
-        .root {
-          min-height: 100vh;
-          display: grid;
-          grid-template-columns: var(--block) 1fr;
-          grid-template-rows:
-            calc(var(--vRythm) * 8) auto
-            auto minmax(calc(var(--vRythm) * 2), auto);
-          background: var(--tertiary);
-        }
-        .contents {
-          overflow: auto;
-          height: 100%;
-          display: flex;
-          flex-direction: column;
-          align-items: stretch;
-          align-content: flex-end;
-          background: var(--light);
-        }
-        .contents :first-child {
-          flex: 1;
-        }
-        @media screen and (max-width: ${CSS_BREAKPOINT_END_S}) {
-          .contents {
-            grid-column-start: 1;
-            grid-column-end: 3;
-            grid-row-start: 3;
-            grid-row-end: 4;
-          }
-        }
-        @media screen and (min-width: ${CSS_BREAKPOINT_START_M}) {
-          .root {
-            height: 100vh;
-          }
-          .contents {
-            grid-column-start: 2;
-            grid-column-end: 3;
-            grid-row-start: 1;
-            grid-row-end: 4;
-          }
-        }
-      `}</style>
     </div>
   );
 };

diff --git a/src/layouts/variables.scss b/src/layouts/variables.scss
@@ -0,0 +1,8 @@
+// Sadly, breakpoints can't currently use CSS var() / calc()
+// so let's use those constants
+$CSS_BREAKPOINT_END_S: 749px;
+$CSS_BREAKPOINT_START_M: 750px;
+$CSS_BREAKPOINT_END_M: 1049px;
+$CSS_BREAKPOINT_START_L: 1050px;
+$CSS_BREAKPOINT_END_L: 1399px;
+$CSS_BREAKPOINT_START_XL: 1400px;
diff --git a/src/utils/constants.tsx b/src/utils/constants.tsx
@@ -6,6 +6,7 @@ export const DOMAIN_NAME = 'chtijs.francejs.org';
 export const TWITTER_ACCOUNT = 'chtijs';
 export const MASTODON_ACCOUNT_ID = "111449166761360064";
 export const MASTODON_SERVER = "piaille.fr";
+export const MASTODON_ACCOUNT = "chtijs";
 
 // Sadly, breakpoints can't currently use CSS var() / calc()
 // so let's use those constants