scroll guides menu independently

Libera-Chat · Sep 29, 2021 · 95804f8 · 95804f8
1 parent 3c67d8d
commit 95804f8
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/_includes/inline-aside-style.css b/_includes/inline-aside-style.css
@@ -10,7 +10,6 @@ aside {
   flex-direction: column;
   justify-content: flex-start;
   min-width: 30ch;
-  overflow-y: auto;
 }
 
 aside .title {
@@ -67,5 +66,6 @@ aside details a {
     border-inline-end: 1px solid var(--c-border);
     width: max-content;
     height: 100%;
+    overflow-y: scroll;
   }
 }
diff --git a/_includes/inline-style.css b/_includes/inline-style.css
@@ -76,8 +76,9 @@ main *, .hero * {
 
 body {
   background-color: var(--c-bg);
-  min-height: 100vh;
+  height: 100vh;
   display: grid;
+  overflow-y: scroll;
   grid-template-rows: var(--header-height) min-content auto auto min-content;
   grid-template-columns: 1fr;
   grid-template-areas: "header" "hero" "main" "aside" "footer";
@@ -142,6 +143,7 @@ main :is(h2, h3, h4, h5, h6) a:hover::before {
 
 @media screen and (min-width: 800px) {
   body {
+    overflow-y: hidden;
     grid-template-columns: min-content 8fr;
     grid-template-rows: 4rem min-content auto min-content;
     grid-template-areas: "header header" "hero hero" "aside main" "footer footer";
@@ -328,6 +330,10 @@ header nav details a {
     border-block-end: 1px solid var(--c-border);
     padding: 1rem;
   }
+
+  main {
+    overflow-y: scroll;
+  }
 }
 
 main {
@@ -379,6 +385,10 @@ footer div a:not([rel*=license]), footer div .copyright {
 }
 
 @media screen and (min-width: 800px) {
+  footer {
+    position: sticky;
+  }
+
   footer div {
     line-height: 1.5;
   }

diff --git a/_layouts/home.html b/_layouts/home.html
@@ -2,12 +2,12 @@
 <html lang="en">
 {%- include head.html with_hero=true -%}
 
-<body>
+<body style="overflow-y: scroll;">
   {%- include nav.html -%}
 
   {%- include hero.html -%}
 
-  <main id="main">
+  <main id="main" style="overflow-y: visible;">
     {%- include article.html article=site.posts.first -%}
   </main>