summaryrefslogtreecommitdiff
path: root/public/css/variables
diff options
context:
space:
mode:
Diffstat (limited to 'public/css/variables')
-rw-r--r--public/css/variables/index copy.css8
-rw-r--r--public/css/variables/index.css2
-rw-r--r--public/css/variables/spacing.css28
-rw-r--r--public/css/variables/spacing.xl.css5
-rw-r--r--public/css/variables/spacing.xxl.css5
-rw-r--r--public/css/variables/typography.css15
-rw-r--r--public/css/variables/typography.lg.css3
-rw-r--r--public/css/variables/typography.md.css3
8 files changed, 41 insertions, 28 deletions
diff --git a/public/css/variables/index copy.css b/public/css/variables/index copy.css
new file mode 100644
index 0000000..101552d
--- /dev/null
+++ b/public/css/variables/index copy.css
@@ -0,0 +1,8 @@
+@import 'colours.css';
+@import 'spacing.css';
+@import 'spacing.md.css' (min-width: 48rem);
+@import 'spacing.lg.css' (min-width: 64rem);
+@import 'spacing.xl.css' (min-width: 96rem);
+@import 'spacing.xxl.css' (min-width: 120rem);
+@import 'typography.css';
+@import 'layout.css'; \ No newline at end of file
diff --git a/public/css/variables/index.css b/public/css/variables/index.css
index 44c8760..101552d 100644
--- a/public/css/variables/index.css
+++ b/public/css/variables/index.css
@@ -2,5 +2,7 @@
@import 'spacing.css';
@import 'spacing.md.css' (min-width: 48rem);
@import 'spacing.lg.css' (min-width: 64rem);
+@import 'spacing.xl.css' (min-width: 96rem);
+@import 'spacing.xxl.css' (min-width: 120rem);
@import 'typography.css';
@import 'layout.css'; \ No newline at end of file
diff --git a/public/css/variables/spacing.css b/public/css/variables/spacing.css
index c9dc726..9a683e0 100644
--- a/public/css/variables/spacing.css
+++ b/public/css/variables/spacing.css
@@ -1,26 +1,26 @@
:root {
- --margin-inline-md: calc(8 * var(--spacing-relative-eighth-rem));
- --margin-block-lg: calc(16 * var(--spacing-relative-eighth-rem));
- --margin-block-md: calc(10 * var(--spacing-relative-eighth-rem));
- --margin-block-sm: calc(5 * var(--spacing-relative-eighth-rem));
+ --margin-inline-md: calc(8 * 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(22 * var(--spacing-relative-eighth-rem));
- --padding-inline-md: calc(12 * var(--spacing-relative-eighth-rem));
- --padding-inline-sm: calc(3 * var(--spacing-relative-eighth-rem));
- --padding-block-lg: calc(12 * var(--spacing-relative-eighth-rem));
- --padding-block-md: calc(8 * var(--spacing-relative-eighth-rem));
- --padding-block-sm: calc(5 * var(--spacing-relative-eighth-rem));
+ --padding-inline-lg: calc(22 * var(--relative-eighth-rem));
+ --padding-inline-md: calc(12 * var(--relative-eighth-rem));
+ --padding-inline-sm: calc(3 * 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-start: calc(var(--grid-padding-start-relative-eighth-rem) * var(--spacing-relative-eighth-rem));
- --grid-column-width: calc(var(--grid-column-width-relative-eighth-rem) * var(--spacing-relative-eighth-rem));
- --grid-gutter-width: calc(var(--grid-gutter-width-relative-eighth-rem) * var(--spacing-relative-eighth-rem));
+ --grid-padding-start: calc(var(--grid-padding-start-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-start-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)
);
- --spacing-relative-eighth-rem: calc(
+ --relative-eighth-rem: calc(
var(--grid-total-width) / var(--grid-total-relative-eighth-rem-width)
);
diff --git a/public/css/variables/spacing.xl.css b/public/css/variables/spacing.xl.css
new file mode 100644
index 0000000..a726962
--- /dev/null
+++ b/public/css/variables/spacing.xl.css
@@ -0,0 +1,5 @@
+:root {
+ --grid-total-width: 80rem;
+ --grid-padding-start-relative-eighth-rem: 26;
+ --grid-column-count: 12;
+} \ No newline at end of file
diff --git a/public/css/variables/spacing.xxl.css b/public/css/variables/spacing.xxl.css
new file mode 100644
index 0000000..24812ff
--- /dev/null
+++ b/public/css/variables/spacing.xxl.css
@@ -0,0 +1,5 @@
+:root {
+ --grid-total-width: 100rem;
+ --grid-padding-start-relative-eighth-rem: 32;
+ --grid-column-count: 12;
+} \ No newline at end of file
diff --git a/public/css/variables/typography.css b/public/css/variables/typography.css
index 10e3126..38384ce 100644
--- a/public/css/variables/typography.css
+++ b/public/css/variables/typography.css
@@ -1,12 +1,11 @@
:root {
- --font-size-relative-px: 0.067rem;
- --font-size-0: calc(14 * var(--font-size-relative-px));
- --font-size-1: calc(18 * var(--font-size-relative-px));
- --font-size-2: calc(24 * var(--font-size-relative-px));
- --font-size-3: calc(32 * var(--font-size-relative-px));
- --font-size-4: calc(40 * var(--font-size-relative-px));
- --font-size-5: calc(52 * var(--font-size-relative-px));
- --font-size-6: calc(64 * var(--font-size-relative-px));
+ --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));
--font-serif: Alegreya, 'Goudy Old Style', Garamond, serif;
--font-sans-serif: 'Alegreya Sans', Lato, Calibri, 'sans-serif';
diff --git a/public/css/variables/typography.lg.css b/public/css/variables/typography.lg.css
deleted file mode 100644
index 6d1dfec..0000000
--- a/public/css/variables/typography.lg.css
+++ /dev/null
@@ -1,3 +0,0 @@
-:root {
- --font-size-relative-px: 0.09375rem;
-} \ No newline at end of file
diff --git a/public/css/variables/typography.md.css b/public/css/variables/typography.md.css
deleted file mode 100644
index ac94095..0000000
--- a/public/css/variables/typography.md.css
+++ /dev/null
@@ -1,3 +0,0 @@
-:root {
- --font-size-relative-px: 0.08333rem;
-} \ No newline at end of file