make tldr responsive

Author: paul-ooi

src/_includes/layouts/tldr.njk

@@ -1,5 +1,5 @@
 <aside class="tldr" aria-labelledby='tldr'>
   <div class="tldr__background" role='presentation'></div>
   <h2 id="tldr" class="tldr__heading"><abbr title="Too long didn't read" class="tldr__abbr">TLDR</abbr></h2>
-  <p>{{ tldr | safe }}</p>
+  <p class="tldr__desc">{{ tldr | safe }}</p>
 </aside>

src/scss/_posts.scss

@@ -22,12 +22,12 @@ p > code {
     margin-block-start: 0.75em;
     line-height: 1;
 
-    & + p {
+    & + p:not(p.tldr__desc) {
       margin-block-start: 0.5rem;
     }
   }
 
-  p {
+  p:not(p.tldr__desc) {
     margin-inline-start: 1rem;
   }
 }
@@ -102,7 +102,10 @@ p > code {
 /* TLDR */
 .tldr {
   display: grid;
-  grid-template-columns: 1fr auto;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr auto;
+  grid-template-areas: 'tldr-heading'
+  'tldr-desc';
   align-items: center;
   margin-block-end: 3rem;
   outline: 4px solid var(--accent-2);
@@ -112,7 +115,7 @@ p > code {
   &__background {
     background-color: var(--accent-2);
     display: block;
-    grid-column: 1 / 2;
+    grid-column: 1 / -1;
     grid-row: 1/-1;
     position: absolute;
     top: 0;
@@ -122,18 +125,26 @@ p > code {
     z-index: -1;
   }
 
-  &__heading {
+  h2.tldr__heading {
     color: var(--white);
-    grid-column: 1 / 2;
-    grid-row: 1 / 2;
-    padding-inline: 1rem;
+    grid-area: tldr-heading;
+    padding: 0.4rem 0.6rem;
     margin: 0;
   }
 
-  p {
-    grid-column: 2 / 3;
-    grid-row: 1 / 2;
-    margin: 1rem;
-    padding: 0;
+  &__desc {
+    grid-area: tldr-desc;
+    margin: 0.2rem;
+    padding: 0.625rem;
+    background-color: var(--white);
+  }
+}
+
+@media screen and (min-width: $sm) {
+  .tldr {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    grid-template-columns: auto;
+    grid-template-areas: 'tldr-heading tldr-desc';
   }
 }