introduced grid layout

to7m · Aug 5, 2024 · cc0a103 · cc0a103
1 parent aa69c1b
commit cc0a103
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 2 deletions.
diff --git a/public_html/style.css b/public_html/style.css
diff --git a/public_html/style.css.map b/public_html/style.css.map
diff --git a/scss/body/_aside.scss b/scss/body/_aside.scss
@@ -2,11 +2,16 @@
 @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; }
 
 #facebook .social-media-logo { @include text.prepend_icon("facebook") }
 #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
@@ -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;
 }