chore(dev): add dev tools

ChtiJS · Dec 22, 2023 · 3b1e020 · 3b1e020
1 parent 529d97f
commit 3b1e020
Show file tree

Hide file tree

Showing 35 changed files with 398 additions and 149 deletions.
diff --git a/src/app/conferences/conferences.module.scss b/src/app/conferences/conferences.module.scss
@@ -1,4 +1,4 @@
-@import '../../variables.scss';
+@import '../../styles/variables.scss';
 
 .root {
   img {
@@ -12,7 +12,7 @@
     font-weight: bold;
   }
   input {
-    height: var(--vRythm);
+    height: var(--vRhythm);
     width: var(--block);
     padding: 0 calc(var(--gutter) / 2);
   }
@@ -30,22 +30,22 @@
   }
 }
 .entry_item {
-  padding: var(--vRythm) 0;
+  padding: var(--vRhythm) 0;
   border-bottom: var(--border) solid var(--dark);
 }
 .entry_item:first-child {
-  padding: 0 0 var(--vRythm) 0;
+  padding: 0 0 var(--vRhythm) 0;
 }
 .entry_item:last-child {
   border: none;
-  padding: var(--vRythm) 0 0 0;
+  padding: var(--vRhythm) 0 0 0;
 }
 .pagination {
   display: flex;
   gap: var(--gutter);
   align-items: center;
   justify-content: center;
-  padding: var(--vRythm) 0 0 0;
+  padding: var(--vRhythm) 0 0 0;
 }
 @media screen and (min-width: $CSS_BREAKPOINT_START_L) {
   .root {

diff --git a/src/app/layout.module.scss b/src/app/layout.module.scss
@@ -1,12 +1,12 @@
-@import '../variables.scss';
+@import '../styles/variables.scss';
 
 .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);
+    calc(var(--vRhythm) * 8) auto
+    auto minmax(calc(var(--vRhythm) * 2), auto);
   background: var(--tertiary);
 }
 .contents {

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,10 +1,11 @@
-import '../styles/globals.css';
+import '../styles/globals.scss';
 import styles from './layout.module.scss';
-import React from 'react';
+import { StrictMode, type ReactNode } from 'react';
+import { ORGANISATION_PRIMARY_COLOR } from '../utils/constants';
 import Menu from '../components/menu';
 import Header from '../components/header';
 import Footer from '../components/footer';
-import { ORGANISATION_PRIMARY_COLOR } from '../utils/constants';
+import GridSystem from '../components/_gridSystem';
 import type { Viewport } from 'next';
 
 export const viewport: Viewport = {
@@ -13,20 +14,32 @@ export const viewport: Viewport = {
   initialScale: 1,
 };
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="fr">
-      <body>
-        <div className={styles.root}>
-          <Menu />
-          <Header />
-          <div className={styles.contents}>{children}</div>
-          <Footer />
-        </div>
+      <body
+        className={
+          process.env.NODE_ENV === 'development' ? 'showScreenSizes' : ''
+        }
+      >
+        {process.env.NODE_ENV === 'development' ? <GridSystem /> : null}
+        {process.env.NODE_ENV === 'development' ? (
+          <StrictMode>
+            <div className={styles.root}>
+              <Menu />
+              <Header />
+              <div className={styles.contents}>{children}</div>
+              <Footer />
+            </div>
+          </StrictMode>
+        ) : (
+          <div className={styles.root}>
+            <Menu />
+            <Header />
+            <div className={styles.contents}>{children}</div>
+            <Footer />
+          </div>
+        )}
       </body>
     </html>
   );

diff --git a/src/components/_gridSystem.module.scss b/src/components/_gridSystem.module.scss
@@ -0,0 +1,66 @@
+.grid {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+.grid .vGrid,
+.grid .hGrid {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  pointer-events: none;
+  width: 100vw;
+  height: 100vh;
+  z-index: 99999;
+  opacity: 0.3;
+  display: none;
+}
+.grid:target .vGrid,
+.grid:target .hGrid {
+  display: flex;
+}
+.grid .vGrid {
+  flex-direction: row;
+  opacity: 0.3;
+  overflow: hidden;
+  overflow-x: scroll;
+}
+.grid .vGrid:target {
+  display: flex;
+}
+.grid .hGrid {
+  flex-direction: column;
+  opacity: 0.3;
+  overflow: hidden;
+}
+.grid .hGrid:target {
+  display: flex;
+}
+.grid .gutter {
+  width: var(--gutter);
+  flex: none;
+  background-color: #ccc;
+}
+.grid .column {
+  width: var(--column);
+  flex: none;
+  background-color: #ddd;
+}
+.grid .row {
+  width: 100vw;
+  height: var(--vRhythm);
+  flex: none;
+  background-color: #ccc;
+}
+.grid .row:nth-child(2n) {
+  background-color: #ddd;
+}
diff --git a/src/components/_gridSystem.tsx b/src/components/_gridSystem.tsx
@@ -0,0 +1,21 @@
+import styles from "./_gridSystem.module.scss";
+
+export default function GridSystem(): JSX.Element {
+  return (
+    <div className={styles.grid} id="gridSystem">
+      <div className={styles.vGrid} id="vGridSystem">
+        {new Array(30).fill("").map((_, index) => {
+          return [
+            <div key={`g${index}`} className={styles.gutter}></div>,
+            <div key={`c${index}`} className={styles.column}></div>,
+          ];
+        })}
+      </div>
+      <div className={styles.hGrid} id="hGridSystem">
+        {new Array(100).fill("").map((_, index) => {
+          return [<div key={`${index}`} className={styles.row}></div>];
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/a.module.scss b/src/components/a.module.scss
@@ -13,12 +13,12 @@
   gap: calc(var(--gutter) / 4);
   span.icon {
     display: flex;
-    height: var(--vRythm);
-    width: calc(var(--vRythm) * 0.55);
+    height: var(--vRhythm);
+    width: calc(var(--vRhythm) * 0.55);
     background: var(--primary);
     mask-repeat: no-repeat;
-    mask-size: calc(var(--vRythm) * 0.55);
-    -webkit-mask-size: calc(var(--vRythm) * 0.55);
+    mask-size: calc(var(--vRhythm) * 0.55);
+    -webkit-mask-size: calc(var(--vRhythm) * 0.55);
     mask-position: left bottom;
   }
 }

diff --git a/src/components/anchored.module.scss b/src/components/anchored.module.scss
@@ -5,12 +5,12 @@
 a.icon {
   display: none;
   width: var(--column);
-  height: var(--vRythm);
+  height: var(--vRhythm);
   background: var(--tertiary);
   mask-repeat: no-repeat;
   mask-position: left center;
-  -webkit-mask-size: calc(var(--vRythm) * 1);
-  mask-size: calc(var(--vRythm) * 1);
+  -webkit-mask-size: calc(var(--vRhythm) * 1);
+  mask-size: calc(var(--vRhythm) * 1);
 }
 
 .root:hover a.icon {

diff --git a/src/components/article.module.scss b/src/components/article.module.scss
@@ -1,5 +1,5 @@
 .root {
-  padding: var(--vRythm) 0;
+  padding: var(--vRhythm) 0;
 }
 .root:not(:last-child) {
   border-bottom: var(--border) solid var(--dark);

diff --git a/src/components/blockquote.module.scss b/src/components/blockquote.module.scss
@@ -2,7 +2,7 @@
   font-family: var(--writingFont);
   font-size: var(--greatFontSize);
   line-height: var(--greatLineHeight);
-  margin: 0 0 var(--vRythm) 0;
+  margin: 0 0 var(--vRhythm) 0;
   padding: 0 0 0 var(--gutter);
   border-left: var(--border) solid var(--green2);
 }
diff --git a/src/components/contentBlock.module.scss b/src/components/contentBlock.module.scss
@@ -1,18 +1,18 @@
-@import '../variables.scss';
+@import '../styles/variables.scss';
 
 .root {
   background-color: var(--light);
-  padding: calc(var(--vRythm) * 2) var(--gutter);
+  padding: calc(var(--vRhythm) * 2) var(--gutter);
 }
 
 @media screen and (min-width: $CSS_BREAKPOINT_START_L) {
   .root {
-    padding: calc(var(--vRythm) * 2) calc(var(--gutter) * 2);
+    padding: calc(var(--vRhythm) * 2) calc(var(--gutter) * 2);
   }
 }
 
 @media screen and (min-width: $CSS_BREAKPOINT_START_XL) {
   .root {
-    padding: calc(var(--vRythm) * 3) calc(var(--gutter) * 8);
+    padding: calc(var(--vRhythm) * 3) calc(var(--gutter) * 8);
   }
 }
diff --git a/src/components/footer.module.scss b/src/components/footer.module.scss
@@ -1,4 +1,4 @@
-@import '../variables.scss';
+@import '../styles/variables.scss';
 
 .footer {
   display: block;
@@ -9,7 +9,7 @@
   color: var(--light);
   margin: 0 auto;
   text-align: center;
-  line-height: var(--vRythm);
+  line-height: var(--vRhythm);
 }
 .a,
 .a:visited,

diff --git a/src/components/gallery.module.scss b/src/components/gallery.module.scss
@@ -1,15 +1,15 @@
-@import '../variables.scss';
+@import '../styles/variables.scss';
 
 .root {
   clear: both;
   background: var(--secondary);
-  padding: calc(var(--vRythm) / 2) calc(var(--gutter) / 2);
+  padding: calc(var(--vRhythm) / 2) calc(var(--gutter) / 2);
 }
 .root p {
   text-align: center;
-  padding: calc(var(--vRythm) / 2) calc(var(--gutter) / 2);
+  padding: calc(var(--vRhythm) / 2) calc(var(--gutter) / 2);
   margin: 0;
-  height: calc(var(--vRythm) * 22);
+  height: calc(var(--vRhythm) * 22);
   background: var(--light);
 }
 .root p img {
@@ -29,11 +29,11 @@
   display: block;
   list-style-type: none;
   text-align: center;
-  padding: calc(var(--vRythm) / 2) 0 0 calc(var(--gutter) / 2);
+  padding: calc(var(--vRhythm) / 2) 0 0 calc(var(--gutter) / 2);
 }
 .root ul li a {
   display: block;
-  height: calc(var(--vRythm) * 4);
+  height: calc(var(--vRhythm) * 4);
   width: calc(var(--column) * 2);
   background: var(--light);
 }
@@ -45,10 +45,10 @@
 }
 @media screen and (max-width: $CSS_BREAKPOINT_END_M) {
   .root p {
-    height: calc(var(--vRythm) * 12);
+    height: calc(var(--vRhythm) * 12);
   }
   .root ul li a {
-    height: calc(var(--vRythm) * 2);
+    height: calc(var(--vRhythm) * 2);
     width: calc(var(--column) * 1);
   }
 }
diff --git a/src/components/h1.module.scss b/src/components/h1.module.scss
@@ -4,6 +4,6 @@
   font-size: var(--giantFontSize);
   line-height: var(--giantLineHeight);
   font-weight: bold;
-  margin: 0 0 calc(var(--vRythm) * 2) 0;
+  margin: 0 0 calc(var(--vRhythm) * 2) 0;
   text-align: center;
 }
diff --git a/src/components/h2.module.scss b/src/components/h2.module.scss
@@ -4,5 +4,5 @@
   font-size: var(--greatFontSize);
   line-height: var(--greatLineHeight);
   font-weight: normal;
-  margin: var(--vRythm) 0 0 0;
+  margin: var(--vRhythm) 0 0 0;
 }
diff --git a/src/components/h3.module.scss b/src/components/h3.module.scss
@@ -4,5 +4,5 @@
   line-height: var(--bigLineHeight);
   text-decoration: underline;
   font-weight: normal;
-  margin: var(--vRythm) 0 0 0;
+  margin: var(--vRhythm) 0 0 0;
 }
diff --git a/src/components/h4.module.scss b/src/components/h4.module.scss
@@ -2,5 +2,5 @@
   font-family: var(--headingFont);
   font-size: var(--bigFontSize);
   line-height: var(--bigLineHeight);
-  margin: 0 0 var(--vRythm) 0;
+  margin: 0 0 var(--vRhythm) 0;
 }
diff --git a/src/components/h5.module.scss b/src/components/h5.module.scss
@@ -2,5 +2,5 @@
   font-family: var(--headingFont);
   font-size: var(--mediumFontSize);
   line-height: var(--mediumLineHeight);
-  margin: 0 0 var(--vRythm) 0;
+  margin: 0 0 var(--vRhythm) 0;
 }
diff --git a/src/components/h6.module.scss b/src/components/h6.module.scss
@@ -2,5 +2,5 @@
   font-family: var(--headingFont);
   font-size: var(--mediumFontSize);
   line-height: var(--mediumLineHeight);
-  margin: 0 0 var(--vRythm) 0;
+  margin: 0 0 var(--vRhythm) 0;
 }