Defines grid columns spacing

6 files changed, 54 insertions, 0 deletions

diff --git a/public/css/layout/grid.css b/public/css/layout/grid.css
new file mode 100644
index 0000000..b4bc240
--- /dev/null
+++ b/public/css/layout/grid.css
@@ -0,0 +1,36 @@
+:is(main, article, header, footer, nav) {
+  padding-inline-start: var(--grid-padding-start);
+  padding-inline-end: calc(
+    100vw - (var(--grid-padding-start) + (
+      var(--grid-column-width) * var(--grid-column-count) +
+      var(--grid-gutter-width) * (var(--grid-column-count) - 1)
+    ))
+  );
+}
+
+.grid-span-1 {
+  width: var(--grid-column-width);
+}
+
+.grid-span-2 {
+  width: calc(var(--grid-column-width) * 2 + var(--grid-gutter-width));
+}
+
+.grid-span-6 {
+  width: calc(
+    var(--grid-column-width) * min(6, var(--grid-column-count)) +
+    var(--grid-gutter-width) * min(5, (var(--grid-column-count) - 1))
+  );
+}
+
+.grid-span-full {
+  width: calc(
+    var(--grid-column-width) * var(--grid-column-count) +
+    var(--grid-gutter-width) * (var(--grid-column-count) - 1)
+  )
+}
+
+.grid-end-end {
+  margin-inline-start: auto;
+  margin-inline-end: 0;
+}
\ No newline at end of file
diff --git a/public/css/layout/index.css b/public/css/layout/index.css
index e69de29..08d6c13 100644
--- a/public/css/layout/index.css
+++ b/public/css/layout/index.css
@@ -0,0 +1 @@
+@import './grid.css';
\ No newline at end of file
diff --git a/public/css/variables/index.css b/public/css/variables/index.css
index a5c1a29..44c8760 100644
--- a/public/css/variables/index.css
+++ b/public/css/variables/index.css
@@ -1,4 +1,6 @@
 @import 'colours.css';
 @import 'spacing.css';
+@import 'spacing.md.css' (min-width: 48rem);
+@import 'spacing.lg.css' (min-width: 64rem);
 @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 0a55281..a259401 100644
--- a/public/css/variables/spacing.css
+++ b/public/css/variables/spacing.css
@@ -7,4 +7,9 @@
   --spacing-inline-md: 3rem;
   --spacing-inline-sm: 1.5rem;
   --spacing-inline-xs: 0.5rem;
+
+  --grid-padding-start: 2.25rem;
+  --grid-column-width: 6rem;
+  --grid-gutter-width: 0.5rem;
+  --grid-column-count: 4;
 }
diff --git a/public/css/variables/spacing.lg.css b/public/css/variables/spacing.lg.css
new file mode 100644
index 0000000..36b5023
--- /dev/null
+++ b/public/css/variables/spacing.lg.css
@@ -0,0 +1,5 @@
+:root {
+  --grid-column-count: 9;
+  --grid-column-width: 5.5rem;
+  --grid-padding-start: 5.25rem;
+}
\ No newline at end of file
diff --git a/public/css/variables/spacing.md.css b/public/css/variables/spacing.md.css
new file mode 100644
index 0000000..74b1328
--- /dev/null
+++ b/public/css/variables/spacing.md.css
@@ -0,0 +1,5 @@
+:root {
+  --grid-column-count: 7;
+  --grid-column-width: 5.5rem;
+  --grid-padding-start: 3.25rem;
+}
\ No newline at end of file