diff options
Diffstat (limited to 'scss/variables')
| -rw-r--r-- | scss/variables/colours.scss | 21 | ||||
| -rw-r--r-- | scss/variables/index.lg.scss | 2 | ||||
| -rw-r--r-- | scss/variables/index.md.scss | 3 | ||||
| -rw-r--r-- | scss/variables/index.scss | 5 | ||||
| -rw-r--r-- | scss/variables/index.sm.scss | 2 | ||||
| -rw-r--r-- | scss/variables/index.xl.scss | 2 | ||||
| -rw-r--r-- | scss/variables/index.xs.scss | 3 | ||||
| -rw-r--r-- | scss/variables/index.xxl.scss | 2 | ||||
| -rw-r--r-- | scss/variables/palette.scss | 35 | ||||
| -rw-r--r-- | scss/variables/spacing.lg.scss | 6 | ||||
| -rw-r--r-- | scss/variables/spacing.md.scss | 6 | ||||
| -rw-r--r-- | scss/variables/spacing.scss | 47 | ||||
| -rw-r--r-- | scss/variables/spacing.sm.scss | 4 | ||||
| -rw-r--r-- | scss/variables/spacing.xl.scss | 10 | ||||
| -rw-r--r-- | scss/variables/spacing.xs.scss | 6 | ||||
| -rw-r--r-- | scss/variables/spacing.xxl.scss | 6 | ||||
| -rw-r--r-- | scss/variables/typography.md.scss | 9 | ||||
| -rw-r--r-- | scss/variables/typography.scss | 42 | ||||
| -rw-r--r-- | scss/variables/typography.xs.scss | 9 |
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 |