scroll guides menu independently

benharri · benharri · commit 95804f8aed78 · 2021-09-29T12:18:57.000-04:00
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>
 

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,6 @@ aside {`
`10`	`10`	`flex-direction: column;`
`11`	`11`	`justify-content: flex-start;`
`12`	`12`	`min-width: 30ch;`
`13`		`- overflow-y: auto;`
`14`	`13`	`}`
`15`	`14`
`16`	`15`	`aside .title {`
`@@ -67,5 +66,6 @@ aside details a {`
`67`	`66`	`border-inline-end: 1px solid var(--c-border);`
`68`	`67`	`width: max-content;`
`69`	`68`	`height: 100%;`
	`69`	`+ overflow-y: scroll;`
`70`	`70`	`}`
`71`	`71`	`}`