Ship version 1

assets/app.css

@@ -37,6 +37,7 @@ This is to avoid redeclarating CSS rules.
     --panel-bg-color: hsla(0 0 50% / 0.16);
     --monospace-color: springgreen;
     --monospace-color-inline: seagreen;
+    --a-color: gold;
 
     /* typography, mobile first */
     --base-font-size: 1.33em;
@@ -85,6 +86,10 @@ body {
     }
 }
 
+a {
+    color: var(--a-color);
+}
+
 input,
 button {
     font-size: 1.2em;
@@ -263,6 +268,11 @@ nature of this site. As a general rule though, classes are the most
 versatile.
 */
 
+.home-search,
+.profiles {
+    font-size: var(--tree-font-size);
+}
+
 .sr-only {
     position: absolute;
     left: -999em;
@@ -320,13 +330,16 @@ versatile.
     font-size: var(--tree-font-size);
 
     > li {
-        display: flex;
+        text-align: center;
+        display: grid;
+        grid-template-columns: 50px 1fr auto;
         align-items: center;
         margin: 0;
         gap: 0.5em;
-        padding: 1.33em 0.5em;
+        padding: 0.75em;
-        background-color: rgba(128, 128, 128, 0.16);
+        min-height: 50px;
-        border-left: 6px solid var(--tree-item-accent-color);
+        background-color: rgba(128, 128, 128, 0.1);
+        border: 1px solid rgba(192, 192, 192, 0.1);
 
         &:focus-within {
             background-color: rgba(128, 128, 128, 0.25);
@@ -523,6 +536,7 @@ Color theme, reduced motion
     :root {
         --color: #000;
         --bgcolor: #fff;
+        --a-color: blue;
     }
 }
 

config/config.exs

@@ -26,7 +26,7 @@ config :esbuild,
   version: "0.17.11",
   mse25: [
     args:
-      ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/* --external:/css/*),
+      ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/bl/* --external:/images/* --external:/*.{vcf,png,ico,pdf}),
     cd: Path.expand("../assets", __DIR__),
     env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
   ]

lib/mse25_web/controllers/page_html/home.html.heex

@@ -3,93 +3,122 @@
   <h1 class="home-h1">Anders Englöf Ytterström</h1>
   <ul class="tree">
     <li class="article">
+      <span></span>
       <a href={"/" <> @recent_article["slug"]}>
         <%= @recent_article["title"] %>
       </a>
-      <small>(<time><%= @recent_article["pubDate"] %></time>)</small>
+      <small><time><%= @recent_article["pubDate"] %></time></small>
     </li>
     <li class="article">
+      <span></span>
       <a href={"/" <> @older_article["slug"]}>
         <%= @older_article["title"] %>
       </a>
-      <small>(<time><%= @older_article["pubDate"] %></time>)</small>
+      <small><time><%= @older_article["pubDate"] %></time></small>
     </li>
     <li class="page">
+      <span></span>
       <a href="/webblogg" class="list-link">Alla Webbloggens inlägg</a>
     </li>
     <%= for event <- @recent_event do %>
       <li class="events">
-        <a href={event["slug"]} title={event["lead"]}>
-          <%= event["title"] %> (<%= event["started_at"] %>)
-        </a>
         <%= if event["poster"] do %>
           <img
             src={"https://n.madr.se/assets/" <> event["poster"] <> "?key=thumbnail"}
             alt="affisch"
             loading="lazy"
           />
+        <% else %>
+          <span></span>
         <% end %>
+        <a href={event["slug"]} title={event["lead"]}>
+          <%= event["title"] %>
+        </a>
+        <small><time><%= event["started_at"] %></time></small>
       </li>
     <% end %>
     <%= for event <- @upcoming do %>
       <li class="events">
-        <a href={event["slug"]} title={event["lead"]}>
-          <%= event["title"] %> (<%= event["started_at"] %>)
-        </a>
         <%= if event["poster"] do %>
           <img
             src={"https://n.madr.se/assets/" <> event["poster"] <> "?key=thumbnail"}
             alt="affisch"
             loading="lazy"
           />
+        <% else %>
+          <span></span>
         <% end %>
+        <%= event["title"] %>
+        <small><time><%= event["started_at"] %></time></small>
       </li>
     <% end %>
     <li class="feed events page">
+      <span></span>
       <a href="/evenemang" class="list-link">Evenemangstidslinje</a>
+      <span></span>
     </li>
     <li class="feed events ics">
+      <span></span>
       <a href="/kommande-evenemang.ics" class="feed-link">Kommande evenemang</a>
-      <small>(vcalendar)</small>
+      <small>.ics</small>
     </li>
     <li class="feed links">
+      <span></span>
       <a href="/delningar" class="list-link">
         Delningar
       </a>
+      <span></span>
     </li>
     <%= for legend <- @brutal_legends do %>
       <li class="album">
+        <%= if legend["cover"] do %>
+          <img
+            src={"https://n.madr.se/assets/" <> legend["cover"] <> "?key=thumbnail"}
+            alt="skivomslag"
+            loading="lazy"
+          />
+        <% else %>
+          <span></span>
+        <% end %>
         <a href={"/" <> legend["purchase_year"] <> "/brutal-legend-" <> legend["externalId"]}>
           <%= legend["artist"] %> - <%= legend["album"] %> (<%= legend["year"] %>)
         </a>
+        <span></span>
       </li>
     <% end %>
     <li class="page">
+      <span></span>
       <a href="/vad-jag-gor">
         Vad jag gör
       </a>
+      <span></span>
     </li>
     <li class="page">
+      <span></span>
       <a href="/om">
         Anders, 39, Hårdrockare
       </a>
+      <span></span>
     </li>
     <li class="feed rss">
-      <a href="/prenumerera.xml" class="feed-link">Prenumerera</a> <small>(RSS 2.0)</small>
+      <span></span>
+      <a href="/prenumerera.xml" class="feed-link">Prenumerera</a>
+      <small>.rss</small>
     </li>
     <li class="">
-      <a clasS="feed-link" href="aey.vcard">
+      <span></span>
+      <a clasS="feed-link" href={~p"/andersy.vcf"}>
         Kontakt
       </a>
-      <small>(vcard)</small>
+      <small>.vcf</small>
     </li>
   </ul>
-  <form method="get" action="/sok">
+  <form method="get" action="/sok" class="home-search">
     <label for="q">Sök innehåll</label>: <input size="9" type="search" id="q" name="q" />
     <button>Sök</button>
   </form>
   <ul class="profiles">
-    <li><a href="/cv.html">CV</a></li>
+    <li><a href={~p"/andersy.vcf"}>CV</a></li>
     <li><a href="https://github.com/madr">Github</a></li>
     <li>
       <a href="https://www.discogs.com/user/madrse/collection?limit=250&sort=artist&sort_order=asc&layout=big">