wip

assets/app.css

@@ -20,29 +20,78 @@ button {
     font-size: 1.25em;
 }
 
-body > header {
-    background-color: #c0430d;
-    margin-bottom: 3em;
+dl {
+    display: flex;
+    margin: 0;
+    justify-content: flex-end;
+    align-items: center;
 }
 
-body > header > img {
-    padding: 2em;
+dt {
+    color: #888;
+    padding-right: 0.25em;
+    font-size: 0.75em;
+    text-transform: uppercase;
+}
+
+dd {
+    margin-left: 0;
+    margin-right: 1em;
+}
+
+body > header {
+    margin-bottom: 3em;
+    background: #f1f1f1;
+    display: grid;
+    grid-template-rows: 1fr 1fr;
+    grid-template-columns: auto 1fr;
+    grid-template-areas: "name nav" "name banner";
+    border: 3px solid #000;
+}
+
+body > header > div {
+    grid-area: banner;
+    padding: 0.5em;
+}
+
+body > header > strong {
+    grid-area: name;
+    font-size: 2.66em;
+    padding: 0.66rem;
+    display: flex;
+    place-items: center;
+    border-right: 3px solid #000;
+}
+
+@media (max-width: 700px) {
+    body > header {
+        grid-template-rows: auto auto;
+    }
+    body > header > strong {
+        writing-mode: vertical-rl;
+        text-orientation: mixed;
+        padding: 0.33rem 0;
+    }
+
+    body > header > nav > ul {
+        flex-direction: column;
+        width: 100%;
+    }
 }
 
 body > header > nav {
+    grid-area: nav;
     display: flex;
-    justify-content: flex-end;
-    padding-right: 1em;
-    border-bottom: 6px solid #261603;
+    align-items: center;
+    border-bottom: 3px solid #000;
 
     > ul {
         list-style: none;
         margin: 0;
         padding: 0;
         display: flex;
-        gap: 0.5em;
+        gap: 0.1em;
         border-left-width: 0;
-        transform: translateY(6px);
     }
 
     a {
@@ -50,10 +99,8 @@ body > header > nav {
         text-decoration: none;
         color: #261603;
         line-height: 1;
-        padding: 1em;
+        padding: 0.5rem;
         display: block;
-        background-color: #f05f00;
-        border: 3px solid #261603;
 
         &:hover,
         &:focus {
@@ -63,7 +110,8 @@ body > header > nav {
 
         &.current {
             pointer-events: none;
-            background-color: #fff;
+            background-color: #C0430D;
+            color: #fff;
         }
     }
 }
@@ -119,6 +167,12 @@ main {
     }
 }
 
+@media (max-width: 400px) {
+    .card {
+        padding: 0.5em;
+    }
+}
+
 pre {
     padding: 0.5em;
     background-color: #1e2025;
@@ -230,7 +284,7 @@ pre {
 }
 
 body > footer {
-    width: 30em;
+    max-width: 30em;
     margin: 7em auto;
     display: flex;
     align-items: center;
@@ -264,6 +318,19 @@ body > footer {
     }
 }
 
+@media (max-width: 400px) {
+    body > footer {
+        gap: 10px;
+        margin: 2em 0.5em 0;
+        font-size: small;
+
+        img {
+            width: 60px;
+            height: 60px;
+        }
+    }
+}
+
 .bookmarks {
     display: flex;
     flex-direction: column;

lib/mse25_web/components/layouts/app.html.heex

@@ -1,6 +1,7 @@
 <a href="#content" class="skiplink">Hoppa till innehållet</a>
 
 <header>
+  <strong>madr.se</strong>
   <nav>
     <ul>
       <li>
@@ -42,6 +43,14 @@
       </li>
     </ul>
   </nav>
+  <div>
+    <dl>
+      <dt>18 apr</dt>
+      <dd>Behemoth</dd>
+      <dt>5 jun</dt>
+      <dd>Sweden Rock Festival</dd>
+    </dl>
+  </div>
 </header>
 
 <main id="content">