Merge pull request #3 from lowlighter/feat-aside-for-small-screen

feat: aside customization for simple layout
lowlighter · May 22, 2024 · dd44e3b · dd44e3b
2 parents a329e3d + b6356dd
commit dd44e3b
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 2 deletions.
diff --git a/app/mod.html b/app/mod.html
@@ -32,7 +32,7 @@ <h1 class="success">matcha.css</h1>
         </menu>
       </nav>
     </header>
-    <aside>
+    <aside data-expandable="☰ Quick navigation">
       <nav><!-- Auto-generated by build --></nav>
     </aside>
     <main>

diff --git a/styles/@istanbul-coverage/mod.css b/styles/@istanbul-coverage/mod.css
@@ -1,6 +1,6 @@
 /* Global */
 body {
-  background: var(--bg-default);
+  background-color: var(--bg-default);
   color: var(--default);
 }
 .quiet {

diff --git a/styles/@layouts/mod.css b/styles/@layouts/mod.css
@@ -5,6 +5,7 @@ body.layout-simple {
   column-gap: 1.5rem;
   grid-template-areas:
   "header"
+  "aside1"
   "main"
   "footer";
   grid-template-rows: auto 1fr auto;
@@ -67,6 +68,33 @@ body.layout-simple > aside > nav:only-child {
   margin: 0;
 }
 
+body.layout-simple > aside:nth-of-type(1)[data-expandable] {
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+  grid-area: aside1;
+  max-height: var(--ly-aside-size-small);
+  display: block;
+  overflow: hidden;
+}
+
+body.layout-simple > aside:nth-of-type(1)[data-expandable]::before {
+  content: attr(data-expandable);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: var(--ly-aside-size-small);
+  cursor: pointer;
+}
+
+body.layout-simple > aside:nth-of-type(1)[data-expandable]:hover,
+body.layout-simple > aside:nth-of-type(1)[data-expandable][data-expand] {
+  max-height: none;
+}
+
+body.layout-simple > aside:nth-of-type(1)[data-expandable]:hover::before {
+  color: var(--accent);
+}
+
 body.layout-simple > aside > nav:only-child > ul {
   height: 100%;
 }
@@ -76,6 +104,17 @@ body.layout-simple > aside a {
 }
 
 @media (min-width: 960px) {
+  body.layout-simple > aside:nth-of-type(1)[data-expandable]::before {
+    display: none;
+  }
+
+  body.layout-simple > aside:nth-of-type(1)[data-expandable] {
+    margin-left: 0;
+    margin-right: 0;
+    max-height: none;
+    overflow: unset;
+  }
+
   body.layout-simple:has(> aside:nth-of-type(1)) {
     padding-left: 0;
     grid-template-areas:

diff --git a/styles/@layouts/simple.html b/styles/@layouts/simple.html
@@ -61,6 +61,11 @@ <h2 id="layouts-simple">
     </article>
     <template><!-- -brand margins from being trimmed --></template>
   </div>
+  <p class="flash accent">
+    The <code data-hl="css">@media (default)</code> will hide <code data-hl="css">aside:nth-of-type(1)</code> on small screens, but it can be made visible again by adding a <code data-hl="html">data-expand</code> attribute.
+    To make it collapsible, use a <code data-hl="html">data-expandable</code> attribute instead.
+    The latter accepts a value to customize the text (e.g. <code>☰ Menu</code>).
+  </p>
 </section>
 <style>
   .layout-header, .layout-footer, .layout-main, .layout-aside1, .layout-aside2 {

diff --git a/styles/@root/mod.css b/styles/@root/mod.css
@@ -10,6 +10,7 @@
   /* Layouts*/
   --ct-width: 1024px;
   --ly-header-size: 3.5rem;
+  --ly-aside-size-small: 2.5rem;
   --ly-brand: #e6edf3;
   --ly-bg-brand: #010409;