abandoned grid from template areas idea

to7m · Aug 12, 2024 · 6b9dbee · 6b9dbee
1 parent a251bab
commit 6b9dbee
Show file tree

Hide file tree

Showing 13 changed files with 192 additions and 56 deletions.
diff --git a/public_html/about-me.html b/public_html/about-me.html
@@ -12,6 +12,7 @@
   <aside>
     <a href="index.html" id="home-link"><img src="logo.png" alt="Thomas Howe logo"></a>
     <nav><ul id="nav-links">
+      <li><a href="index.html" id="nav-links__home-link">Home</a></li>
       <li><a href="about-me.html#main">About Me</a></li>
       <li><a href="index.html#project-previews">My Portfolio</a></li>
       <li><a href="coding-examples.html#main">Coding Examples</a></li>

diff --git a/public_html/coding-examples.html b/public_html/coding-examples.html
@@ -12,6 +12,7 @@
   <aside>
     <a href="index.html" id="home-link"><img src="logo.png" alt="Thomas Howe logo"></a>
     <nav><ul id="nav-links">
+      <li><a href="index.html" id="nav-links__home-link">Home</a></li>
       <li><a href="about-me.html#main">About Me</a></li>
       <li><a href="index.html#project-previews">My Portfolio</a></li>
       <li><a href="coding-examples.html#main">Coding Examples</a></li>

diff --git a/public_html/index.html b/public_html/index.html
@@ -10,13 +10,28 @@
 
 <body>
   <aside>
-    <a href="index.html" id="home-link"><img src="logo.png" alt="Thomas Howe logo"></a>
     <nav><ul id="nav-links">
+      <li><a href="index.html" id="home">
+        <span>Home</span>
+        <img src="logo.png" alt="Thomas Howe - Web Developer logo">
+      </a></li>
+      <hr id="home--break">
+
       <li><a href="about-me.html#main">About Me</a></li>
+      <hr id="about-me--break">
+
       <li><a href="index.html#project-previews">My Portfolio</a></li>
+      <hr id="my-portfolio--break">
+
       <li><a href="coding-examples.html#main">Coding Examples</a></li>
+      <hr id="coding-examples-break">
+
       <li><a href="scs-scheme.html#main">SCS Scheme</a></li>
+      <hr id="scs-scheme--break">
+
       <li><a href="index.html#contact">Contact Me</a></li>
+      <hr id="contact-me--break">
+
       <li><ul id="nav-links__socials">
         <li><a href="#" id="facebook">
           <span class="social-media-name">Facebook page</span>
@@ -35,6 +50,7 @@
           <span class="social-media-logo"></span>
         </a></li>
       </ul></li>
+      <hr id="socials--break">
     </ul></nav>
   </aside>
   <div id="all-except-aside">

diff --git a/public_html/scs-scheme.html b/public_html/scs-scheme.html
@@ -12,6 +12,7 @@
   <aside>
     <a href="index.html" id="home-link"><img src="logo.png" alt="Thomas Howe logo"></a>
     <nav><ul id="nav-links">
+      <li><a href="index.html" id="nav-links__home-link">Home</a></li>
       <li><a href="about-me.html#main">About Me</a></li>
       <li><a href="index.html#project-previews">My Portfolio</a></li>
       <li><a href="coding-examples.html#main">Coding Examples</a></li>

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/_reset.scss b/scss/_reset.scss
@@ -57,6 +57,11 @@ body {
     text-align: center;
 }
 
+hr {
+    width: 100%;
+    border: none;
+}
+
 ol, ul {
     list-style-type: none;
 }

diff --git a/scss/html/_aside.scss b/scss/html/_aside.scss
@@ -1,32 +1,41 @@
 @use "accessibility";
+@use "layout";
 @use "text";
 @use "colours";
 
 
-#home-link {
-    display: block;
-    height: 160px;
+aside > nav {
+    display: contents;
+}
+
+#nav-links {
     width: 100%;
-    border-bottom: 3px solid colours.$blue;
+    display: grid;
 
-    img {
-        height: 100%;
-        width: 100%;
-        padding: 30px;
-        object-fit: contain;
-    }
+    @include layout.grid_from_template_areas(3, "hello there");
 }
 
-aside > nav { padding: 30px 10px; }
+#home {
+    width: 100%;
 
-#nav-links {
-    display: flex;
-    flex-direction: column;
+    img { display: none; }
 
-    > li { display: contents; }
+    @include layout.short_breakpoint {
+        span { display: none; }
+        img { display: block; }
+    }
 }
 
-#nav-links > li > a {
+#home img {
+    height: 160px;
+    width: 100%;
+    padding: 30px;
+    border-bottom: 3px solid colours.$blue;
+    object-fit: contain;
+}
+
+
+#home span, #nav-links > li > a {
     margin: 12px 0px;
     border-bottom: 2px solid transparent;
 
@@ -39,13 +48,19 @@ aside > nav { padding: 30px 10px; }
     padding: 12px 0px;
     display: flex;
     color: colours.$blue;
+
+    a { margin: 2px 4px 6px 4px; }
 }
 
 .social-media-name { @include accessibility.non-bitmap-media-only; }
 .social-media-logo {
     @include accessibility.bitmap-media-only;
 
-    padding: 8px;
+    padding: 6px 4px 2px 4px;
+
+    &:hover {
+        border-bottom: 2px solid colours.$blue;
+    }
 }
 
 #facebook .social-media-logo { @include text.prepend_icon("facebook") }

diff --git a/scss/html/_index.scss b/scss/html/_index.scss
@@ -1,5 +1,6 @@
-@use "../colours";
-@use "../text";
+@use "layout";
+@use "text";
+@use "colours";
 
 @use "aside";
 @use "header";
@@ -10,9 +11,17 @@ body {
     background-color: colours.$white;
 
     display: grid;
-    grid-template-rows: 100vh;
-    grid-template-columns: 200px 1fr;
-    grid-template-areas: "aside all-except-aside";
+
+    grid-template-rows: auto auto;
+    grid-template-columns: 1fr;
+    grid-template-areas:
+        "aside"
+        "all-except-aside";
+    @include layout.split_panes_breakpoint {
+        grid-template-rows: 100vh;
+        grid-template-columns: 200px 1fr;
+        grid-template-areas: "aside all-except-aside";
+    }
     justify-content: start;
 
     @include text.normal_text_sizes;
@@ -21,12 +30,15 @@ body {
 
 aside {
     grid-area: aside;
-    height: 100%;
     width: 100%;
-    border-right: 3px solid colours.$blue;
-    overflow-y: auto;
     display: flex;
     flex-direction: column;
+
+    @include layout.split_panes_breakpoint {
+        height: 100%;
+        border-right: 3px solid colours.$blue;
+        overflow-y: auto;
+    }
 }
 
 #all-except-aside {