Merge pull request #20 from Sycamost/dev

Dev

19 files changed, 220 insertions, 0 deletions

diff --git a/scss/variables/colours.scss b/scss/variables/colours.scss
new file mode 100644
index 0000000..65dd421
--- /dev/null
+++ b/scss/variables/colours.scss
@@ -0,0 +1,21 @@
+:root {
+  --text-color: var(--color-primary-98);
+  --text-highlight-color: var(--color-primary-10);
+  --background-color: var(--color-primary-10);
+  --background-highlight-color: var(--color-primary-90);
+  --special-text-color: var(--color-secondary-90);
+  --special-text-highlight-color: var(--color-secondary-10);
+}
+
+:is(main, article) {
+  --text-color: var(--color-primary-10);
+  --text-highlight-color: var(--color-primary-90);
+  --background-color: var(--color-primary-98);
+  --background-highlight-color: var(--color-primary-10);
+  --special-text-color: var(--color-secondary-40);
+  --special-text-highlight-color: var(--color-secondary-90);
+}
+
+:is(main, article) > section:nth-child(even):not(:is(section, header) :is(section, header)) {
+    --background-color: var(--color-primary-95);
+}
diff --git a/scss/variables/index.lg.scss b/scss/variables/index.lg.scss
new file mode 100644
index 0000000..598c04f
--- /dev/null
+++ b/scss/variables/index.lg.scss
@@ -0,0 +1,2 @@
+@use 'spacing.lg' as *;
+
diff --git a/scss/variables/index.md.scss b/scss/variables/index.md.scss
new file mode 100644
index 0000000..b2bf6ac
--- /dev/null
+++ b/scss/variables/index.md.scss
@@ -0,0 +1,3 @@
+@use 'spacing.md' as *;
+@use 'typography.md' as *;
+
diff --git a/scss/variables/index.scss b/scss/variables/index.scss
new file mode 100644
index 0000000..57403d6
--- /dev/null
+++ b/scss/variables/index.scss
@@ -0,0 +1,5 @@
+@use 'colours' as *;
+@use 'palette' as *;
+@use 'spacing' as *;
+@use 'typography' as *;
+
diff --git a/scss/variables/index.sm.scss b/scss/variables/index.sm.scss
new file mode 100644
index 0000000..1ed077f
--- /dev/null
+++ b/scss/variables/index.sm.scss
@@ -0,0 +1,2 @@
+@use 'spacing.sm' as *;
+
diff --git a/scss/variables/index.xl.scss b/scss/variables/index.xl.scss
new file mode 100644
index 0000000..6e082d1
--- /dev/null
+++ b/scss/variables/index.xl.scss
@@ -0,0 +1,2 @@
+@use 'spacing.xl' as *;
+
diff --git a/scss/variables/index.xs.scss b/scss/variables/index.xs.scss
new file mode 100644
index 0000000..fd7abc2
--- /dev/null
+++ b/scss/variables/index.xs.scss
@@ -0,0 +1,3 @@
+@use 'spacing.xs' as *;
+@use 'typography.xs' as *;
+
diff --git a/scss/variables/index.xxl.scss b/scss/variables/index.xxl.scss
new file mode 100644
index 0000000..8d40b0c
--- /dev/null
+++ b/scss/variables/index.xxl.scss
@@ -0,0 +1,2 @@
+@use 'spacing.xxl' as *;
+
diff --git a/scss/variables/palette.scss b/scss/variables/palette.scss
new file mode 100644
index 0000000..f40bb89
--- /dev/null
+++ b/scss/variables/palette.scss
@@ -0,0 +1,35 @@
+:root {
+  --color-primary-0: #000000;
+  --color-primary-10: #190064;
+  --color-primary-20: #2d009d;
+  --color-primary-25: #381aa8;
+  --color-primary-30: #442bb3;
+  --color-primary-35: #503abf;
+  --color-primary-40: #5c48cc;
+  --color-primary-50: #7663e7;
+  --color-primary-60: #907eff;
+  --color-primary-70: #ac9fff;
+  --color-primary-80: #c8bfff;
+  --color-primary-90: #e5deff;
+  --color-primary-95: #f4eeff;
+  --color-primary-98: #fdf8ff;
+  --color-primary-99: #fffbff;
+  --color-primary-100: #ffffff;
+
+  --color-secondary-0: #000000;
+  --color-secondary-10: #00201e;
+  --color-secondary-20: #003733;
+  --color-secondary-25: #00433f;
+  --color-secondary-30: #00504b;
+  --color-secondary-35: #005d57;
+  --color-secondary-40: #006a64;
+  --color-secondary-50: #00867e;
+  --color-secondary-60: #00a299;
+  --color-secondary-70: #26bfb4;
+  --color-secondary-80: #50dbcf;
+  --color-secondary-90: #71f7ec;
+  --color-secondary-95: #b2fff6;
+  --color-secondary-98: #e4fffb;
+  --color-secondary-99: #f2fffc;
+  --color-secondary-100: #ffffff;
+}
\ No newline at end of file
diff --git a/scss/variables/spacing.lg.scss b/scss/variables/spacing.lg.scss
new file mode 100644
index 0000000..bc18bfd
--- /dev/null
+++ b/scss/variables/spacing.lg.scss
@@ -0,0 +1,6 @@
+:root {
+  --grid-total-width: 64rem;
+  --grid-padding-relative-eighth-rem: 20;
+  --grid-column-count: 12;
+  --grid-prose-column-count: 8;
+}
\ No newline at end of file
diff --git a/scss/variables/spacing.md.scss b/scss/variables/spacing.md.scss
new file mode 100644
index 0000000..0028e8a
--- /dev/null
+++ b/scss/variables/spacing.md.scss
@@ -0,0 +1,6 @@
+:root {
+  --grid-total-width: 48rem;
+  --grid-padding-relative-eighth-rem: 16;
+  --grid-column-count: 8;
+  --grid-prose-column-count: 8;
+}
\ No newline at end of file
diff --git a/scss/variables/spacing.scss b/scss/variables/spacing.scss
new file mode 100644
index 0000000..a4d1d91
--- /dev/null
+++ b/scss/variables/spacing.scss
@@ -0,0 +1,47 @@
+:root {
+  --margin-inline-md: calc(2 * var(--relative-eighth-rem));
+  --margin-block-lg: calc(16 * var(--relative-eighth-rem));
+  --margin-block-md: calc(10 * var(--relative-eighth-rem));
+  --margin-block-sm: calc(5 * var(--relative-eighth-rem));
+
+  --padding-inline-lg: calc(4 * var(--relative-eighth-rem));
+  --padding-inline-md: calc(2 * var(--relative-eighth-rem));
+  --padding-inline-sm: calc(1 * var(--relative-eighth-rem));
+  --padding-block-lg: calc(12 * var(--relative-eighth-rem));
+  --padding-block-md: calc(8 * var(--relative-eighth-rem));
+  --padding-block-sm: calc(5 * var(--relative-eighth-rem));
+
+  --grid-padding: calc(var(--grid-padding-relative-eighth-rem) * var(--relative-eighth-rem));
+  --grid-column-width: calc(var(--grid-column-width-relative-eighth-rem) * var(--relative-eighth-rem));
+  --grid-gutter-width: calc(var(--grid-gutter-width-relative-eighth-rem) * var(--relative-eighth-rem));
+  
+  --grid-total-relative-eighth-rem-width: calc(
+    var(--grid-padding-relative-eighth-rem) * 2 +
+    var(--grid-column-width-relative-eighth-rem) * var(--grid-column-count) + 
+    var(--grid-gutter-width-relative-eighth-rem) * (var(--grid-column-count) - 1)
+  );
+  --relative-eighth-rem: calc(
+    var(--grid-total-width) / var(--grid-total-relative-eighth-rem-width)
+  );
+  --width-prose: calc(
+    var(--grid-column-width) * var(--grid-prose-column-count) +
+    var(--grid-gutter-width) * (var(--grid-prose-column-count) - 1)
+  );
+
+  --grid-column-width-relative-eighth-rem: 32;
+  --grid-gutter-width-relative-eighth-rem: 4;
+
+  /***********************************************************
+   * Generally, we will use columns to keep things laid out  *
+   * nicely. However, on screens narrower than xs, this gets *
+   * pretty much impossible. So for those screens, we use a  *
+   * single-column layout taking up 100vw. In effect, this   *
+   * is just default CSS layout plus a wee bit padding. From *
+   * xs widewards, we use multiple columns on a fixed width. *
+   ***********************************************************/
+
+  --grid-total-width: 100vw;
+  --grid-padding-relative-eighth-rem: 8;
+  --grid-column-count: 1;
+  --grid-prose-column-count: 1;
+}
diff --git a/scss/variables/spacing.sm.scss b/scss/variables/spacing.sm.scss
new file mode 100644
index 0000000..7cdf26f
--- /dev/null
+++ b/scss/variables/spacing.sm.scss
@@ -0,0 +1,4 @@
+:root {
+  --grid-total-width: 30rem;
+  --grid-padding-relative-eighth-rem: 12;
+}
diff --git a/scss/variables/spacing.xl.scss b/scss/variables/spacing.xl.scss
new file mode 100644
index 0000000..fc8b1f3
--- /dev/null
+++ b/scss/variables/spacing.xl.scss
@@ -0,0 +1,10 @@
+:root {
+  --grid-total-width: 80rem;
+  --grid-padding-relative-eighth-rem: 26;
+  --grid-column-count: 12;
+  --grid-prose-column-count: 8;
+  --width-prose: calc(
+    var(--grid-column-width) * min(8, var(--grid-column-count)) +
+    var(--grid-gutter-width) * min(7, (var(--grid-column-count) - 1))
+  );
+}
\ No newline at end of file
diff --git a/scss/variables/spacing.xs.scss b/scss/variables/spacing.xs.scss
new file mode 100644
index 0000000..fb7c01a
--- /dev/null
+++ b/scss/variables/spacing.xs.scss
@@ -0,0 +1,6 @@
+:root {
+  --grid-total-width: 15rem;
+  --grid-padding-relative-eighth-rem: 8;
+  --grid-column-count: 4;
+  --grid-prose-column-count: 4;
+}
diff --git a/scss/variables/spacing.xxl.scss b/scss/variables/spacing.xxl.scss
new file mode 100644
index 0000000..17d2f66
--- /dev/null
+++ b/scss/variables/spacing.xxl.scss
@@ -0,0 +1,6 @@
+:root {
+  --grid-total-width: 100rem;
+  --grid-padding-relative-eighth-rem: 32;
+  --grid-column-count: 12;
+  --grid-prose-column-count: 8;
+}
\ No newline at end of file
diff --git a/scss/variables/typography.md.scss b/scss/variables/typography.md.scss
new file mode 100644
index 0000000..2c36d1d
--- /dev/null
+++ b/scss/variables/typography.md.scss
@@ -0,0 +1,9 @@
+:root {
+  --font-size-0: calc(7 * var(--relative-eighth-rem));
+  --font-size-1: calc(9 * var(--relative-eighth-rem));
+  --font-size-2: calc(12 * var(--relative-eighth-rem));
+  --font-size-3: calc(16 * var(--relative-eighth-rem));
+  --font-size-4: calc(20 * var(--relative-eighth-rem));
+  --font-size-5: calc(26 * var(--relative-eighth-rem));
+  --font-size-6: calc(32 * var(--relative-eighth-rem));
+}
\ No newline at end of file
diff --git a/scss/variables/typography.scss b/scss/variables/typography.scss
new file mode 100644
index 0000000..f8515fd
--- /dev/null
+++ b/scss/variables/typography.scss
@@ -0,0 +1,42 @@
+:root {
+  --font-size-0: calc(8 * var(--relative-eighth-rem));
+  --font-size-1: calc(8 * var(--relative-eighth-rem));
+  --font-size-2: calc(8 * var(--relative-eighth-rem));
+  --font-size-3: calc(8 * var(--relative-eighth-rem));
+  --font-size-4: calc(8 * var(--relative-eighth-rem));
+  --font-size-5: calc(8 * var(--relative-eighth-rem));
+  --font-size-6: calc(8 * var(--relative-eighth-rem));
+
+  --font-serif:
+    Alegreya,
+    -apple-system-ui-serif,
+    Iowan Old Style,
+    Apple Garamond,
+    Baskerville,
+    Sitka, "Sitka Display", "Sitka Heading", "Sitka Text",
+    Times New Roman,
+    Droid Serif,
+    Times,
+    Source Serif Pro,
+    serif,
+    Apple Color Emoji,
+    Segoe UI Emoji,
+    Segoe UI Symbol;
+
+  --font-sans-serif:
+    'Alegreya Sans',
+    Lato,
+    -apple-system,
+    BlinkMacSystemFont,
+    avenir next,
+    avenir,
+    segoe ui,
+    helvetica neue,
+    helvetica,
+    Cantarell,
+    Ubuntu,
+    roboto,
+    noto,
+    arial,
+    sans-serif
+}
\ No newline at end of file
diff --git a/scss/variables/typography.xs.scss b/scss/variables/typography.xs.scss
new file mode 100644
index 0000000..6375aad
--- /dev/null
+++ b/scss/variables/typography.xs.scss
@@ -0,0 +1,9 @@
+:root {
+  --font-size-0: calc(6 * var(--relative-eighth-rem));
+  --font-size-1: calc(8 * var(--relative-eighth-rem));
+  --font-size-2: calc(11 * var(--relative-eighth-rem));
+  --font-size-3: calc(14 * var(--relative-eighth-rem));
+  --font-size-4: calc(18 * var(--relative-eighth-rem));
+  --font-size-5: calc(23 * var(--relative-eighth-rem));
+  --font-size-6: calc(28 * var(--relative-eighth-rem));
+}
\ No newline at end of file