From 3b1e0205d45f114a7b87577d00d2ee2b24517614 Mon Sep 17 00:00:00 2001 From: Nicolas Froidure Date: Fri, 22 Dec 2023 10:58:37 +0100 Subject: [PATCH] chore(dev): add dev tools --- src/app/conferences/conferences.module.scss | 12 +- src/app/layout.module.scss | 6 +- src/app/layout.tsx | 43 ++++--- src/components/_gridSystem.module.scss | 66 +++++++++++ src/components/_gridSystem.tsx | 21 ++++ src/components/a.module.scss | 8 +- src/components/anchored.module.scss | 6 +- src/components/article.module.scss | 2 +- src/components/blockquote.module.scss | 2 +- src/components/contentBlock.module.scss | 8 +- src/components/footer.module.scss | 4 +- src/components/gallery.module.scss | 16 +-- src/components/h1.module.scss | 2 +- src/components/h2.module.scss | 2 +- src/components/h3.module.scss | 2 +- src/components/h4.module.scss | 2 +- src/components/h5.module.scss | 2 +- src/components/h6.module.scss | 2 +- src/components/header.module.scss | 10 +- src/components/hr.module.scss | 2 +- src/components/menu.module.scss | 4 +- src/components/ol.module.scss | 2 +- src/components/p.module.scss | 2 +- src/components/social.module.scss | 8 +- src/components/tootList.module.scss | 6 +- src/components/ul.module.scss | 2 +- src/contexts/grid.module.scss | 9 ++ src/contexts/grid.tsx | 57 ++++++++++ src/hooks/useCSSRemValue.ts | 7 ++ src/hooks/useCSSVar.ts | 25 ++++ src/styles/globals.css | 77 ------------- src/styles/globals.scss | 120 ++++++++++++++++++++ src/{ => styles}/variables.scss | 5 + src/utils/markdown.module.scss | 2 +- src/utils/metadata.tsx | 3 + 35 files changed, 398 insertions(+), 149 deletions(-) create mode 100644 src/components/_gridSystem.module.scss create mode 100644 src/components/_gridSystem.tsx create mode 100644 src/contexts/grid.module.scss create mode 100644 src/contexts/grid.tsx create mode 100644 src/hooks/useCSSRemValue.ts create mode 100644 src/hooks/useCSSVar.ts delete mode 100644 src/styles/globals.css create mode 100644 src/styles/globals.scss rename src/{ => styles}/variables.scss (71%) diff --git a/src/app/conferences/conferences.module.scss b/src/app/conferences/conferences.module.scss index a92d6425..1a146210 100644 --- 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 index 3a53b887..122c0352 100644 --- 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 index cae6a972..90882a59 100644 --- 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 ( - -
- -
-
{children}
-
-
+ + {process.env.NODE_ENV === 'development' ? : null} + {process.env.NODE_ENV === 'development' ? ( + +
+ +
+
{children}
+
+
+ + ) : ( +
+ +
+
{children}
+
+
+ )} ); diff --git a/src/components/_gridSystem.module.scss b/src/components/_gridSystem.module.scss new file mode 100644 index 00000000..9b65ad73 --- /dev/null +++ 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 new file mode 100644 index 00000000..c9155331 --- /dev/null +++ b/src/components/_gridSystem.tsx @@ -0,0 +1,21 @@ +import styles from "./_gridSystem.module.scss"; + +export default function GridSystem(): JSX.Element { + return ( +
+
+ {new Array(30).fill("").map((_, index) => { + return [ +
, +
, + ]; + })} +
+
+ {new Array(100).fill("").map((_, index) => { + return [
]; + })} +
+
+ ); +} diff --git a/src/components/a.module.scss b/src/components/a.module.scss index ed99817d..4bd9f484 100644 --- 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 index f19b02a7..eb363c07 100644 --- 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 index fdb00cd0..ef9682e3 100644 --- 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 index 34d6a3b9..cbc817f2 100644 --- 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 index c917025b..7d1390cd 100644 --- 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 index d38e0f68..e539b5af 100644 --- 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 index 3f6ac382..9a3549ac 100644 --- 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 index 664fffbc..e495a2e5 100644 --- 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 index b572c42a..73dc3cfc 100644 --- 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 index bb0d9672..a3eb0446 100644 --- 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 index 5642fe9e..0da5eec4 100644 --- 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 index 1b8a0d62..0d925072 100644 --- 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 index 1b8a0d62..0d925072 100644 --- 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; } diff --git a/src/components/header.module.scss b/src/components/header.module.scss index be881bee..9e0f8df1 100644 --- a/src/components/header.module.scss +++ b/src/components/header.module.scss @@ -1,4 +1,4 @@ -@import '../variables.scss'; +@import '../styles/variables.scss'; header.root { display: flex; @@ -9,14 +9,14 @@ header.root { .root h1 { display: block; margin: 0 auto; - width: calc(var(--vRythm) * 8); - height: calc(var(--vRythm) * 8); + width: calc(var(--vRhythm) * 8); + height: calc(var(--vRhythm) * 8); } .root a { display: block; - width: calc(var(--vRythm) * 8); - height: calc(var(--vRythm) * 8); + width: calc(var(--vRhythm) * 8); + height: calc(var(--vRhythm) * 8); background-image: url('/images/chtijs.svg'); background-size: contain; background-repeat: no-repeat; diff --git a/src/components/hr.module.scss b/src/components/hr.module.scss index ba9739dd..388fdd4a 100644 --- a/src/components/hr.module.scss +++ b/src/components/hr.module.scss @@ -1,4 +1,4 @@ .root { border-bottom: var(--border) solid var(--green2); - margin: 0 0 var(--vRythm) 0; + margin: 0 0 var(--vRhythm) 0; } diff --git a/src/components/menu.module.scss b/src/components/menu.module.scss index f0dacd89..85bd366a 100644 --- a/src/components/menu.module.scss +++ b/src/components/menu.module.scss @@ -1,4 +1,4 @@ -@import '../variables.scss'; +@import '../styles/variables.scss'; .nav { background-color: var(--light); @@ -29,7 +29,7 @@ } .nav span { display: block; - padding: calc(var(--vRythm) / 2) var(--gutter); + padding: calc(var(--vRhythm) / 2) var(--gutter); } @media screen and (max-width: $CSS_BREAKPOINT_END_S) { diff --git a/src/components/ol.module.scss b/src/components/ol.module.scss index 6833ebbb..5f23ed21 100644 --- a/src/components/ol.module.scss +++ b/src/components/ol.module.scss @@ -1,3 +1,3 @@ .root { - margin: 0 0 var(--vRythm) 0; + margin: 0 0 var(--vRhythm) 0; } diff --git a/src/components/p.module.scss b/src/components/p.module.scss index 6833ebbb..5f23ed21 100644 --- a/src/components/p.module.scss +++ b/src/components/p.module.scss @@ -1,3 +1,3 @@ .root { - margin: 0 0 var(--vRythm) 0; + margin: 0 0 var(--vRhythm) 0; } diff --git a/src/components/social.module.scss b/src/components/social.module.scss index d2307f29..c5872440 100644 --- a/src/components/social.module.scss +++ b/src/components/social.module.scss @@ -18,13 +18,13 @@ } a { display: block; - width: var(--vRythm); - height: var(--vRythm); + width: var(--vRhythm); + height: var(--vRhythm); 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-size: calc(var(--vRhythm) * 1); + -webkit-mask-size: calc(var(--vRhythm) * 1); mask-image: url('/images/icons/twitter.svg'); } li.feed a { diff --git a/src/components/tootList.module.scss b/src/components/tootList.module.scss index 26ea7e1d..ad01cb88 100644 --- a/src/components/tootList.module.scss +++ b/src/components/tootList.module.scss @@ -1,5 +1,5 @@ .root { - margin: 0 0 var(--vRythm) 0; + margin: 0 0 var(--vRhythm) 0; } .toot :global(a) { @@ -15,7 +15,7 @@ } .tootList { - margin-top: var(--vRythm); + margin-top: var(--vRhythm); display: flex; flex-direction: row; gap: var(--gutter); @@ -27,5 +27,5 @@ border-width: var(--borderSize); border-radius: var(--borderRadius); width: var(--block); - padding: calc(var(--vRythm) / 2) calc(var(--gutter) / 2); + padding: calc(var(--vRhythm) / 2) calc(var(--gutter) / 2); } diff --git a/src/components/ul.module.scss b/src/components/ul.module.scss index 6833ebbb..5f23ed21 100644 --- a/src/components/ul.module.scss +++ b/src/components/ul.module.scss @@ -1,3 +1,3 @@ .root { - margin: 0 0 var(--vRythm) 0; + margin: 0 0 var(--vRhythm) 0; } diff --git a/src/contexts/grid.module.scss b/src/contexts/grid.module.scss new file mode 100644 index 00000000..b8e5c4e0 --- /dev/null +++ b/src/contexts/grid.module.scss @@ -0,0 +1,9 @@ +@import "../../styles/variables.scss"; + +:export { + vGrid: $CSS_GRID_V; + vRhythmRatio: $CSS_V_RYTHM_RATIO; + hGrid: $CSS_GRID_H; + columnRatio: $CSS_COLUMN_RATIO; + gutterRatio: $CSS_GUTTER_RATIO; +} diff --git a/src/contexts/grid.tsx b/src/contexts/grid.tsx new file mode 100644 index 00000000..2675b130 --- /dev/null +++ b/src/contexts/grid.tsx @@ -0,0 +1,57 @@ +"use client"; + +import { type ReactNode, createContext } from "react"; +import useCSSVar from "../hooks/useCSSVar"; +import styles from "./grid.module.scss"; + +const DEFAULT_GRID_H = parseFloat(styles.hGrid.replace("rem", "")); +const DEFAULT_GRID_V = parseFloat(styles.vGrid.replace("rem", "")); +const DEFAULT_V_RHYTHM_RATIO = parseFloat(styles.vRhythmRatio); +const DEFAULT_COLUMN_RATIO = parseFloat(styles.columnRatio); +const DEFAULT_GUTTER_RATIO = parseFloat(styles.gutterRatio); + +export const GridContext = createContext({ + vGrid: DEFAULT_GRID_H, + hGrid: DEFAULT_GRID_V, + vRhythmRatio: DEFAULT_V_RHYTHM_RATIO, + columnRatio: DEFAULT_COLUMN_RATIO, + gutterRatio: DEFAULT_GUTTER_RATIO, +}); + +export default function ProvideGridContext({ + children, +}: { + children: ReactNode; +}): ReactNode { + const vGrid = useCSSVar("number", "--vGrid", DEFAULT_GRID_V); + const hGrid = useCSSVar("number", "--hGrid", DEFAULT_GRID_H); + const vRhythmRatio = useCSSVar( + "number", + "--vRhythmRatio", + DEFAULT_V_RHYTHM_RATIO + ); + const gutterRatio = useCSSVar( + "number", + "--gutterRatio", + DEFAULT_COLUMN_RATIO + ); + const columnRatio = useCSSVar( + "number", + "--columnRatio", + DEFAULT_GUTTER_RATIO + ); + + return ( + + {children} + + ); +} diff --git a/src/hooks/useCSSRemValue.ts b/src/hooks/useCSSRemValue.ts new file mode 100644 index 00000000..f4f4890b --- /dev/null +++ b/src/hooks/useCSSRemValue.ts @@ -0,0 +1,7 @@ +export default function useCSSRemValue(fallbackSize = 16): number { + if (typeof navigator === "undefined") { + return fallbackSize; + } + + return parseFloat(getComputedStyle(document.documentElement).fontSize); +} diff --git a/src/hooks/useCSSVar.ts b/src/hooks/useCSSVar.ts new file mode 100644 index 00000000..3c7b28e6 --- /dev/null +++ b/src/hooks/useCSSVar.ts @@ -0,0 +1,25 @@ +export default function useCSSVar( + type: T, + name: string, + fallback: T extends "number" ? number : string +): T extends "number" ? number : string { + if (typeof navigator === "undefined") { + return fallback; + } + + const cssValue = getComputedStyle(document.documentElement).getPropertyValue( + name + ); + + if (type === "string") { + return cssValue as unknown as T extends "number" ? number : string; + } + + const numberValue = parseFloat(cssValue); + + if (!Number.isFinite(numberValue)) { + return fallback; + } + + return numberValue as unknown as T extends "number" ? number : string; +} diff --git a/src/styles/globals.css b/src/styles/globals.css deleted file mode 100644 index 75c4b75d..00000000 --- a/src/styles/globals.css +++ /dev/null @@ -1,77 +0,0 @@ -:root { - --dark: #747471; - --grey: #c6c6c6; - --light: #fff; - - --primary: #f2c80a; - --secondary: #262626; - --tertiary: #747471; - --quaternary: #8c7718; - --quinary: #4d4d4c; - --senary: #bfa011; - - --success: #5b8e7d; - --warning: #d78a2e; - --danger: #bc4b51; - - /* Atomic values */ - --hGrid: 0.55rem; - --gutter: calc(var(--hGrid) * 3); - --column: calc(var(--hGrid) * 8); - --block: calc(var(--column) * 3 + var(--gutter) * 2); - --vGrid: 0.1875rem; - --vRythm: calc(8 * var(--vGrid)); - --border: calc(var(--vGrid) / 2); - --borderRadius: calc(var(--hGrid)); - --shadowX: calc(var(--vGrid) * 2); - --shadowY: calc(var(--hGrid) * 1); - --shadowBlur: calc(var(--vGrid) * 8); - - /* Animations */ - --baseAnimationRate: 0.3s; - - /* Fonts */ - --writingFont: 'Open sans', 'Helvetica', 'Arial', sans-serif; - --contentFont: 'Open sans', 'Helvetica', 'Arial', sans-serif; - --headingFont: 'Georgia', 'Times', serif; - - /* Font sizes */ - --smallFontSize: calc(5 * var(--vGrid)); - --smallLineHeight: var(--vRythm); - --smallFontWeight: 300; - - --mediumFontSize: calc(6 * var(--vGrid)); - --mediumLineHeight: var(--vRythm); - --mediumFontWeight: 400; - - --bigFontSize: calc(8 * var(--vGrid)); - --bigLineHeight: calc(2 * var(--vRythm)); - --bigFontWeight: 700; - - --greatFontSize: calc(10 * var(--vGrid)); - --greatLineHeight: calc(2 * var(--vRythm)); - --greatFontWeight: 800; - - --giantFontSize: calc(12 * var(--vGrid)); - --giantLineHeight: calc(3 * var(--vRythm)); - --giantFontWeight: 800; -} - -html, -body, -#__next { - height: 100%; - margin: 0; - padding: 0; - font-size: var(--mediumFontSize); - line-height: var(--mediumLineHeight); - font-family: var(--contentFont); -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - padding: 0; -} diff --git a/src/styles/globals.scss b/src/styles/globals.scss new file mode 100644 index 00000000..0c278721 --- /dev/null +++ b/src/styles/globals.scss @@ -0,0 +1,120 @@ +@import './variables.scss'; + +:root { + --dark: #747471; + --grey: #c6c6c6; + --light: #fff; + + --primary: #f2c80a; + --secondary: #262626; + --tertiary: #747471; + --quaternary: #8c7718; + --quinary: #4d4d4c; + --senary: #bfa011; + + --success: #5b8e7d; + --warning: #d78a2e; + --danger: #bc4b51; + + /* Atomic values */ + --hGrid: #{$CSS_GRID_H}; + --gutterRatio: #{$CSS_GUTTER_RATIO}; + --gutter: calc(var(--hGrid) * var(--gutterRatio)); + --columnRatio: #{$CSS_COLUMN_RATIO}; + --column: calc(var(--hGrid) * var(--columnRatio)); + --block: calc(var(--column) * 3 + var(--gutter) * 2); + --vGrid: #{$CSS_GRID_V}; + --vRhythmRatio: #{$CSS_V_RYTHM_RATIO}; + --vRhythm: calc(var(--vGrid) * var(--vRhythmRatio)); + --border: calc(var(--vGrid) / 2); + --borderRadius: calc(var(--hGrid)); + --shadowX: calc(var(--vGrid) * 2); + --shadowY: calc(var(--hGrid) * 1); + --shadowBlur: calc(var(--vGrid) * 8); + + /* Animations */ + --baseAnimationRate: 0.3s; + + /* Fonts */ + --writingFont: 'Open sans', 'Helvetica', 'Arial', sans-serif; + --contentFont: 'Open sans', 'Helvetica', 'Arial', sans-serif; + --headingFont: 'Georgia', 'Times', serif; + + /* Font sizes */ + --smallFontSize: calc(5 * var(--vGrid)); + --smallLineHeight: var(--vRhythm); + --smallFontWeight: 300; + + --mediumFontSize: calc(6 * var(--vGrid)); + --mediumLineHeight: var(--vRhythm); + --mediumFontWeight: 400; + + --bigFontSize: calc(8 * var(--vGrid)); + --bigLineHeight: calc(2 * var(--vRhythm)); + --bigFontWeight: 700; + + --greatFontSize: calc(10 * var(--vGrid)); + --greatLineHeight: calc(2 * var(--vRhythm)); + --greatFontWeight: 800; + + --giantFontSize: calc(12 * var(--vGrid)); + --giantLineHeight: calc(3 * var(--vRhythm)); + --giantFontWeight: 800; +} + +html, +body, +#__next { + height: 100%; + margin: 0; + padding: 0; + font-size: var(--mediumFontSize); + line-height: var(--mediumLineHeight); + font-family: var(--contentFont); +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body.showScreenSizes::after { + position: fixed; + bottom: 0; + right: 0; + pointer-events: none; + line-height: var(--giantLineHeight); + font-size: var(--giantFontSize); + font-weight: bold; + color: var(--dark); + text-shadow: var(--border) var(--border) 0 var(--light); + opacity: 0.5; + padding: calc(var(--vRhythm) / 2) var(--gutter); +} + +@media screen and (max-width: $CSS_BREAKPOINT_END_S) { + body.showScreenSizes::after { + content: 'S'; + } +} + +@media screen and (min-width: $CSS_BREAKPOINT_START_M) and (max-width: $CSS_BREAKPOINT_END_M) { + body.showScreenSizes::after { + content: 'M'; + } +} + +@media screen and (min-width: $CSS_BREAKPOINT_START_L) and (max-width: $CSS_BREAKPOINT_END_L) { + body.showScreenSizes::after { + content: 'L'; + } +} + +@media screen and (min-width: $CSS_BREAKPOINT_START_XL) { + body.showScreenSizes::after { + content: 'XL'; + } +} diff --git a/src/variables.scss b/src/styles/variables.scss similarity index 71% rename from src/variables.scss rename to src/styles/variables.scss index 470d5f0b..269df838 100644 --- a/src/variables.scss +++ b/src/styles/variables.scss @@ -6,3 +6,8 @@ $CSS_BREAKPOINT_END_M: 1049px; $CSS_BREAKPOINT_START_L: 1050px; $CSS_BREAKPOINT_END_L: 1399px; $CSS_BREAKPOINT_START_XL: 1400px; +$CSS_GRID_V: 0.1875rem; +$CSS_GRID_H: 0.55rem; +$CSS_V_RYTHM_RATIO: 8; +$CSS_COLUMN_RATIO: 8; +$CSS_GUTTER_RATIO: 3; diff --git a/src/utils/markdown.module.scss b/src/utils/markdown.module.scss index 6e011bdc..e71265e7 100644 --- a/src/utils/markdown.module.scss +++ b/src/utils/markdown.module.scss @@ -1,4 +1,4 @@ -@import '../variables.scss'; +@import '../styles/variables.scss'; .root { display: block; diff --git a/src/utils/metadata.tsx b/src/utils/metadata.tsx index a1e0465b..2b98a913 100644 --- a/src/utils/metadata.tsx +++ b/src/utils/metadata.tsx @@ -85,5 +85,8 @@ export default async function buildMetadata({ site: `@${TWITTER_ACCOUNT}`, creator: `@${TWITTER_ACCOUNT}`, }, + metadataBase: new URL( + publicRuntimeConfig.baseURL + publicRuntimeConfig.basePath + ), }; }