From cc0a10394077e49218bbc4d49bd1f0f3d2005dcd Mon Sep 17 00:00:00 2001
From: to7m <ThomasHoweMain@gmail.com>
Date: Mon, 5 Aug 2024 13:59:48 +0100
Subject: [PATCH] introduced grid layout

---
 public_html/style.css     | 9 +++++++++
 public_html/style.css.map | 2 +-
 scss/body/_aside.scss     | 7 ++++++-
 scss/body/_index.scss     | 8 ++++++++
 4 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/public_html/style.css b/public_html/style.css
index 61cc9cd..72e06b2 100644
--- a/public_html/style.css
+++ b/public_html/style.css
@@ -65,6 +65,11 @@ ol, ul {
   font-style: normal;
   font-display: block;
 }
+aside {
+  grid-area: aside;
+  align-self: start;
+}
+
 @media handheld, print, projection, screen, tv {
   .social-media-name {
     display: none;
@@ -115,6 +120,10 @@ ol, ul {
 
 body {
   background-color: rgb(255, 255, 255);
+  display: grid;
+  grid-template-rows: 100vh auto auto;
+  grid-template-columns: 200px 1fr;
+  grid-template-areas: "aside header" "aside main" "aside footer";
   font-family: arial;
   font-size: 1rem;
   font-weight: normal;
diff --git a/public_html/style.css.map b/public_html/style.css.map
index f625fb3..8fe32ca 100644
--- a/public_html/style.css.map
+++ b/public_html/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/_reset.scss","../scss/text/_icon.scss","../scss/_accessibility.scss","../scss/body/_aside.scss","../scss/body/_index.scss","../scss/_colours.scss","../scss/text/_sizes.scss"],"names":[],"mappings":"AAAA;AAEA;AACI;AAAA;EAEA;;;AAGJ;AACI;EACA;EACA;EACA;;;AAGJ;AACI;AAAA;AAAA;EAGA;AAEA;EACA;EACA;;;AAGJ;AACI;EACA;;;AAGJ;AACI;EACA;;;AAIJ;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;ACzDJ;EACI;EACA;EACA,KACI;EAIJ;EACA;EACA;;ACZA;ECGJ;IDFQ;;;;AAKJ;ECFJ;IDGQ;;;;ADkFJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AANJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AANJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AANJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AG1FR;EACI,kBCNI;ECGJ,aAJa;EAKb,WAM4C;EAL5C,aAHsE;EAItE;EFGA,OCVI","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/_reset.scss","../scss/text/_icon.scss","../scss/body/_aside.scss","../scss/_accessibility.scss","../scss/body/_index.scss","../scss/_colours.scss","../scss/text/_sizes.scss"],"names":[],"mappings":"AAAA;AAEA;AACI;AAAA;EAEA;;;AAGJ;AACI;EACA;EACA;EACA;;;AAGJ;AACI;AAAA;AAAA;EAGA;AAEA;EACA;EACA;;;AAGJ;AACI;EACA;;;AAGJ;AACI;EACA;;;AAIJ;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;ACzDJ;EACI;EACA;EACA,KACI;EAIJ;EACA;EACA;;ACTJ;EACI;EAEA;;;ACNA;EDSJ;ICRQ;;;;AAKJ;EDIJ;ICHQ;;;;AFkFJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AANJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AANJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AANJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AG1FR;EACI,kBCNI;EDQJ;EACA;EACA;EACA,qBACI;EETJ,aAJa;EAKb,WAM4C;EAL5C,aAHsE;EAItE;EFWA,OClBI","file":"style.css"}
\ No newline at end of file
diff --git a/scss/body/_aside.scss b/scss/body/_aside.scss
index a98160e..341de8d 100644
--- a/scss/body/_aside.scss
+++ b/scss/body/_aside.scss
@@ -2,6 +2,12 @@
 @use "text";
 
 
+aside {
+    grid-area: aside;
+
+    align-self: start;
+}
+
 .social-media-name { @include accessibility.non-bitmap-media-only; }
 .social-media-logo { @include accessibility.bitmap-media-only; }
 
@@ -9,4 +15,3 @@
 #instagram .social-media-logo { @include text.prepend_icon("instagram") }
 #x .social-media-logo { @include text.prepend_icon("x") }
 #linkedin .social-media-logo { @include text.prepend_icon("linkedin2") }
-
diff --git a/scss/body/_index.scss b/scss/body/_index.scss
index 06f158b..cb29ce0 100644
--- a/scss/body/_index.scss
+++ b/scss/body/_index.scss
@@ -7,6 +7,14 @@
 body {
     background-color: colours.$white;
 
+    display: grid;
+    grid-template-rows: 100vh auto auto;
+    grid-template-columns: 200px 1fr;
+    grid-template-areas:
+        "aside header"
+        "aside main"
+        "aside footer";
+
     @include text.normal_text_sizes;
     color: colours.$black;
 }