Merge pull request #38 from ptitfred/blog/responsive-layout

Second step of improving responsive layout
ptitfred · Jan 23, 2024 · 227acdd · 227acdd
2 parents 0c5dd5b + e1f2738
commit 227acdd
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 19 deletions.
diff --git a/website/sass/blog.scss b/website/sass/blog.scss
@@ -5,15 +5,15 @@ body {
 }
 
 article.blog-post {
-  --header-offset: 4rem;
+  --header-offset: 6rem;
   --toc-width: 30ch;
 
   display: grid;
-  grid-template-columns: [full-start] 1fr [left-gutter-start wide-header-start wide-start title-start] 1em [left-gutter-end header-start content-start] calc(min(65ch, 100%)) [title-end content-end right-gutter-start] 1em [wide-end wide-header-end header-end right-gutter-end] 1fr [full-end];
+  grid-template-columns: [full-start] 1fr [left-gutter-start wide-header-start wide-start title-start] 1em [left-gutter-end header-start content-start] calc(min(65ch, calc(100% - 2em))) [title-end content-end right-gutter-start] 1em [wide-end wide-header-end header-end right-gutter-end] 1fr [full-end];
   grid-column-gap: 1em;
 
   &.with-toc {
-    grid-template-columns: [full-start] 1fr [left-gutter-start wide-header-start wide-start title-start] 1em [left-gutter-end header-start content-start] calc(min(65ch, 100%)) [title-end content-end right-gutter-start] 1em [right-gutter-end wide-end side-panel-start] var(--toc-width) [start-panel-end wide-header-end header-end] 1fr [full-end];
+    grid-template-columns: [full-start] 1fr [left-gutter-start wide-header-start wide-start title-start] 1em [left-gutter-end header-start content-start] calc(min(65ch, calc(100% - var(--toc-width) - 2em))) [title-end content-end right-gutter-start] 1em [right-gutter-end wide-end side-panel-start] var(--toc-width) [start-panel-end wide-header-end header-end] 1fr [full-end];
     grid-template-rows: repeat(4, max-content) [main-start] repeat(1000, max-content) [main-end];
   }
 
@@ -111,16 +111,46 @@ article.blog-post {
   }
 
   hgroup {
-    h1, p {
+    h1 {
       margin: 0;
+      grid-column: content;
+      display: inline-flex;
+      justify-content: space-between;
+      a {
+        font-size: 12px;
+        svg {
+          height: 16px;
+          width: 16px;
+          fill: #ccc;
+          padding-top: 8px;
+        }
+      }
     }
+    display: grid;
+    grid-template-columns: subgrid;
 
-    grid-column: content;
-    display: flex;
-    flex-wrap: wrap;
+    grid-column: wide;
     gap: 8px;
     justify-content: space-between;
     align-items: baseline;
+
+    position:sticky;
+    top: 3rem; // var(--header-offset);
+    background: #131116;
+    z-index: 10;
+    padding-bottom: 8px;
+    margin-bottom: 8px;
+  }
+
+  hgroup::after {
+    content: "";
+    background: linear-gradient(#131116, #13111600);
+    z-index: 20;
+    position: absolute;
+    bottom: 0;
+    margin-bottom: -8px;
+    height: 8px;
+    width: 100%;
   }
 
   nav {
@@ -132,7 +162,7 @@ article.blog-post {
 
     position: sticky;
     top: -24px;
-    background: linear-gradient(#131116, #131116 80%, #13111600);
+    background: #131116; // linear-gradient(#131116, #131116 80%, #13111600);
 
     svg.icon {
       width: 16px;
@@ -185,18 +215,14 @@ article.blog-post {
     &.with-toc {
       grid-template-columns: revert;
       grid-template-rows: unset;
-      grid-template-columns: 1fr [full-start] 1em [left-gutter-start wide-header-start wide-start title-start left-gutter-end header-start content-start] calc(min(65ch, 100%)) [title-end content-end right-gutter-start wide-end wide-header-end header-end right-gutter-end] 1em [full-end] 1fr;
+      grid-template-columns: 1fr [full-start] 1em [left-gutter-start wide-header-start wide-start title-start left-gutter-end header-start content-start] calc(min(65ch, calc(100% - 2em))) [title-end content-end right-gutter-start wide-end wide-header-end header-end right-gutter-end] 1em [full-end] 1fr;
     }
     > .toc {
       grid-column: content;
       grid-row: unset;
       max-width: unset;
     }
 
-    hgroup {
-      flex-direction: column;
-    }
-
     nav {
       display: flex;
       gap: 1rem;

diff --git a/website/templates/page.html b/website/templates/page.html
@@ -69,23 +69,34 @@
         {% set ancestor = get_section(path=ancestor_path) %}
         <li><a href="{{ ancestor.permalink }}">{{ ancestor.title }}</a></li>
         {% endfor %}
-        <li><a href="{{ page.permalink }}#">{{page.title}}</a></li>
       </ul>
     </nav>
     <hgroup>
-      <h1 class="title">{{ page.title }}</h1>
-      <p class="timestamp">{{ page.date }}</p>
+      <h1 class="title">{{ page.title }}
+        <a href="#">
+          <svg class=icon version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+             width="400.004px" height="400.004px" viewBox="0 0 400.004 400.004"
+             xml:space="preserve">
+            <g transform="rotate(90 200 200)">
+              <path d="M382.688,182.686H59.116l77.209-77.214c6.764-6.76,6.764-17.726,0-24.485c-6.764-6.764-17.73-6.764-24.484,0L5.073,187.757
+                c-6.764,6.76-6.764,17.727,0,24.485l106.768,106.775c3.381,3.383,7.812,5.072,12.242,5.072c4.43,0,8.861-1.689,12.242-5.072
+                c6.764-6.76,6.764-17.726,0-24.484l-77.209-77.218h323.572c9.562,0,17.316-7.753,17.316-17.315
+                C400.004,190.438,392.251,182.686,382.688,182.686z"/>
+            </g>
+          </svg>
+        </a></h1>
     </hgroup>
     {% if page.description %}
     <div class="description">
       {{ page.description | markdown(inline=true) | safe }}
     </div>
     {% endif %}
-    {% if page.reading_time > 1 %}
     <div class="reading-time">
-      {{ page.reading_time }} minutes
+      Initially published on {{ page.date }}
+      {% if page.reading_time > 1 %}
+        - around {{ page.reading_time }} minutes to read
+      {% endif %}
     </div>
-    {% endif %}
     {% if page.toc %}
       <div class="toc">
         <div>