Commit some in-progress layout work

dart-lang · Jan 20, 2025 · 0b1a573 · 0b1a573
1 parent 20d033d
commit 0b1a573
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 24 deletions.
diff --git a/src/_layouts/default.html b/src/_layouts/default.html
@@ -12,10 +12,12 @@
     {% render 'cookie-notice.html' %}
     {% render 'gtags.html' %}
     {% include 'page-header.html', obsolete:obsolete %}
-    {% include 'navigation-side.html' %}
     <main id="page-content">
+      {% include 'navigation-side.html' %}
       {% if toc != false -%}
+      {%- comment -%}
       {% include 'navigation-toc-side.html', tocContents:tocContents %}
+      {% endcomment %}
       {% endif -%}
       <article>
         <div class="content">

diff --git a/src/_sass/_site.scss b/src/_sass/_site.scss
@@ -41,6 +41,11 @@
 }
 
 #page-content {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  align-items: flex-start;
+  justify-content: space-between;
   min-height: calc(100vh);
 
   body.homepage & {
@@ -53,21 +58,27 @@
   }
 
   > article {
-    > .content {
-      max-width: 960px;
-      margin-left: auto;
-      margin-right: auto;
-      padding: $top-content-padding 1.5rem 1.5rem;
-    }
-
-    @media(min-width: 1024px) {
-      margin-left: 226px;
-    }
-
-    @media(min-width: 1200px) {
-      margin-right: 226px;
-    }
-  }
+    overflow-x: hidden;
+    margin: 1rem;
+    max-width: 56rem;
+  }
+
+  //> article {
+  //  > .content {
+  //    max-width: 960px;
+  //    margin-left: auto;
+  //    margin-right: auto;
+  //    padding: $top-content-padding 1.5rem 1.5rem;
+  //  }
+  //
+  //  @media(min-width: 1024px) {
+  //    margin-left: 226px;
+  //  }
+  //
+  //  @media(min-width: 1200px) {
+  //    margin-right: 226px;
+  //  }
+  //}
 }
 
 #site-content-title {

diff --git a/src/_sass/components/_sidebar.scss b/src/_sass/components/_sidebar.scss
@@ -3,23 +3,27 @@
 @use '../core/bootstrap';
 
 #sidenav {
-  font-family: $site-font-family-alt;
-  position: fixed;
+  position: sticky;
+  overflow-y: auto;
+
   top: $site-header-height;
-  bottom: 0;
-  left: 0;
-  width: 226px;
+  width: 15rem;
+  max-height: calc(100vh - $site-header-height);
+
+  font-family: $site-font-family-alt;
   border-right: 1px solid #d8d8d8;
-  overflow-x: hidden;
-  overflow-y: auto;
-  z-index: 1;
+  scrollbar-width: thin;
 
   .open_menu & {
     z-index: 10000;
     overflow-y: auto;
     overscroll-behavior: contain;
     pointer-events: auto;
   }
+
+  @media(max-width: 768px) {
+    display: none;
+  }
 }
 
 .site-sidebar {