wip

assets/app.css

@@ -55,67 +55,12 @@ body > header {
     max-width: none;
 }
 
-.home-hero {
-    height: 90vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    background-color: #261603;
-    color: #ff7c14;
-    gap: 2rem;
-
-    img {
-        border-radius: 50%;
-        width: 333px;
-        border: 6px solid #000;
-    }
-
-    > * {
-        max-width: 50%;
-        margin: 0;
-    }
-
-    > a {
-        color: #fff;
-    }
-}
-
-.c2a {
-    display: flex;
-    gap: 1em;
-
-    > a {
-        --border-color: #C0430D;
-        --c2a-color: #E1740D;
-        border: 5px solid var(--border-color);
-        padding: 0.75em 1.25em;
-        text-transform: uppercase;
-        background-color: var(--c2a-color);
-
-        &:nth-child(2) {
-            --c2a-color: #E1740D;
-        }
-
-        &:nth-child(3) {
-            --c2a-color: #F05F00;
-        }
-
-        &:hover,
-        &:focus {
-            --border-color: #E1740D;
-            --c2a-color: #fff;
-        }
-    }
-}
-
 .home-h1 {
+    height: 85vh;
+    display: flex;
+    place-items: center;
+    text-align: center;
     margin: 0;
-    font-size: 3em;
-    text-wrap: pretty;
-
-        text-shadow: 0 0 60px #c0430d;
-    }
 }
 
 body > header > div {
@@ -184,7 +129,7 @@ body > header > nav {
 
         &.current {
             pointer-events: none;
-            background-color: #c0430d;
+            background-color: #C0430D;
             color: #fff;
         }
     }
@@ -425,8 +370,7 @@ body > footer {
     }
 }
 
-.bookmarks,
+.bookmarks, .notes {
-.notes {
     display: flex;
     flex-direction: column;
     gap: 4em;
@@ -465,7 +409,6 @@ body > footer {
 
 #leaflet {
     aspect-ratio: 5 / 4;
-    border: 10px solid #C0430D;
 }
 
 figure {
@@ -583,27 +526,21 @@ figure {
     }
 
     &:nth-child(even) {
-        grid-template-areas: "poster heading" "poster text";
+    grid-template-areas: "poster heading" "poster text";
-        grid-template-columns: 25% 1fr;
+    grid-template-columns: 25% 1fr;
     }
 }
 
 .home-section {
     padding: 1em 0;
-    background: var(--hs-bg);
+    background: var(--bg);
-    color: var(--hs-c);
 
     &.articles-color {
-        --hs-bg: #ff7c14;
+        --bg: #FF7C14;
     }
 
     &.events-color {
-        --hs-bg: #c0430d;
+        --bg: #C0430D;
-    }
-
-    &.brutal-color {
-        --hs-bg: #261603;
-        --hs-c: #fff;
     }
 
     > * {
@@ -620,69 +557,3 @@ figure {
     margin-bottom: 3rem;
 }
 
-.poster-image {
-    width: 100%;
-    aspect-ratio: 2 / 3;
-    object-fit: cover;
-    border: 6px solid var(--hg-bg);
-}
-
-.uc {
-    background-color: #000; color: #fff; padding: 0.5em 1em; position: absolute; right: 0; top: 0;
-}
-
-.cover-image {
-    width: 100%;
-    aspect-ratio: 1 / 1;
-    object-fit: cover;
-    border: 6px solid var(--hg-bg);
-}
-
-.poster-placeholder {
-    width: 100%;
-    aspect-ratio: 4 / 5;
-    background-color: rgba(255, 255, 255, 0.2);
-    display: inline-block;
-}
-
-.home-grid {
-    --hg-bg: #000;
-    --hg-c: #fff;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    gap: 2em;
-    margin-top: 4em;
-    margin-bottom: 4em;
-
-    > * {
-        display: flex; gap: 3px;
-        align-items: flex-start;
-    }
-
-    > *:focus-within,
-    > *:hover {
-        --hg-bg: #F05F00;
-        --hg-c: #000;
-    }
-
-    &.brutal {
-        grid-template-columns: 1fr 1fr 1fr 1fr;
-    }
-}
-
-.event-meta {
-    writing-mode: vertical-rl;
-    text-orientation: mixed;
-    color: var(--hg-c);
-    background-color: var(--hg-bg);
-    padding: 6px;
-    font-size: small;
-
-    time {
-        color: #C0430D;
-    }
-}
-
-.home-search {
-    padding: 3em 0;
-}

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:/bl/* --external:/images/* --external:/*.{vcf,png,ico,pdf,jpg}),
+      ~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/components/layouts/app.html.heex

@@ -2,7 +2,7 @@
 
 <header>
   <strong>
-    <a href="/" rel="home">madr.se</a>
+  <a href="/" rel="home">madr.se</a>
   </strong>
   <nav>
     <ul>
@@ -60,7 +60,7 @@
 </main>
 <%= if show_footer?(assigns) do %>
   <footer vocab="https://schema.org/" typeof="Person">
-    <img src={~p"/mugshot.jpg"} property="image" alt="Anders, hösten 2021" />
+    <img src={~p"/images/mugshot.jpg"} property="image" alt="Anders, hösten 2021" />
     <p>
       <a href="https://madr.se" property="url">madr.se</a>
       är hemsida åt <span property="name">Anders Englöf Ytterström</span>, en

lib/mse25_web/controllers/page_controller.ex

@@ -8,9 +8,9 @@ defmodule Mse25Web.PageController do
 
   def home(conn, _params) do
     [most_recent_article, older_article] = Directus.get_articles!(limit: 2)
-    recent_event = Directus.get_events!(limit: 3)
+    recent_event = Directus.get_events!(limit: 1)
-    upcoming_events = Directus.get_events!(limit: 3, upcoming: true)
+    upcoming_events = Directus.get_events!(limit: 2, upcoming: true)
-    brutal_legends = Directus.get_albums!(limit: 8)
+    brutal_legends = Directus.get_albums!(limit: 1)
 
     render(conn, :home,
       page_title: "Anders Englöf Ytterström",
@@ -142,18 +142,4 @@ defmodule Mse25Web.PageController do
     |> Map.to_list()
     |> Enum.sort(fn {a, _a}, {b, _b} -> b < a end)
   end
-
-  # redirect routes
-
-  def cv(conn, _params) do
-    redirect(conn, to: ~p"/cv/anders-englof-ytterstrom.html")
-  end
-
-  def brutal_legend(conn, _params) do
-    redirect(conn, to: ~p"/bl/index.html")
-  end
-
-  def mugshot(conn, _params) do
-    redirect(conn, to: ~p"/images/mugshot.jpg")
-  end
 end

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

@@ -1,77 +1,75 @@
 <div class="head">
-  <h1><%= @page_title %></h1>
+<h1><%= @page_title %></h1>
-  <%= raw(@contents) %>
+<%= raw(@contents) %>
-  <p>
-    <%= if @nosearch? do %>
-      Gå direkt till:
-    <% end %>
-  </p>
-  <ul class="months">
-    <%= for {year, events} <- @events do %>
-      <li>
-        <a href={"#y" <> year}><%= year %></a> (<%= Enum.count(events) %>)
-      </li>
-    <% end %>
-  </ul>
-  <form method="get" action="/evenemang">
-    <p>
-      <%= if @nosearch? do %>
-        Eller
-      <% end %>
-      <label for="q">sök innehåll</label>:
-      <input type="search" value={@q} name="q" id="q" size="7" />
-      <button>Sök</button>
-    </p>
-  </form>
-</div>
-
 <section id="map">
   <h2>Geografisk utspridning</h2>
   <figure>
     <div id="leaflet" class="interactive-map"></div>
   </figure>
 </section>
-
+<p>
-<div class="bookmarks">
+  <%= if @nosearch? do %>
-  <%= for {year, events} <- @events do %>
+    Gå direkt till:
-    <section class="card" id={"y" <> year}>
-      <h2 class="sticky bookmark-date"><%= year %></h2>
-      <div class="events">
-        <%= for event <- events do %>
-          <article class="event" vocab="https://schema.org/" typeof="Event">
-            <h3>
-              <a property="name" href={"/" <> event["slug"]}><%= event["title"] %></a>
-            </h3>
-            <div>
-              <p property="description"><%= event["lead"] %></p>
-              <%= if hilights?(event) do %>
-                <p>
-                  Personliga höjdpunkter: <%= rdfa_bandlist(event["bands"]) |> raw %>
-                </p>
-              <% end %>
-              <%= if missed?(event) do %>
-                <p>
-                  Band jag missade: <%= bandlist(event["mia"]) %>
-                </p>
-              <% end %>
-              <%= if opening_acts?(event) do %>
-                <p>
-                  Förband: <%= event["bands"] |> Enum.drop(1) |> rdfa_bandlist() |> raw %>
-                </p>
-              <% end %>
-            </div>
-            <%= if event["poster"] do %>
-              <img
-                property="thumbnail"
-                loading="lazy"
-                src={"https://n.madr.se/assets/" <> event["poster"] <> "?key=poster"}
-                alt="affisch"
-                width="150"
-              />
-            <% end %>
-          </article>
-        <% end %>
-      </div>
-    </section>
   <% end %>
+</p>
+<ul class="months">
+  <%= for {year, events} <- @events do %>
+    <li>
+      <a href={"#y" <> year}><%= year %></a> (<%= Enum.count(events) %>)
+    </li>
+  <% end %>
+</ul>
+<form method="get" action="/evenemang">
+  <p>
+    <%= if @nosearch? do %>
+      Eller
+    <% end %>
+    <label for="q">sök innehåll</label>:
+    <input type="search" value={@q} name="q" id="q" size="7" />
+    <button>Sök</button>
+  </p>
+</form>
+</div>
+<div class="bookmarks">
+<%= for {year, events} <- @events do %>
+  <section class="card" id={"y" <> year}>
+    <h2 class="sticky bookmark-date"><%= year %></h2>
+    <div class="events">
+      <%= for event <- events do %>
+        <article class="event" vocab="https://schema.org/" typeof="Event">
+          <h3>
+            <a property="name" href={"/" <> event["slug"]}><%= event["title"] %></a>
+          </h3>
+          <div>
+          <p property="description"><%= event["lead"] %></p>
+          <%= if hilights?(event) do %>
+            <p>
+              Personliga höjdpunkter: <%= rdfa_bandlist(event["bands"]) |> raw %>
+            </p>
+          <% end %>
+          <%= if missed?(event) do %>
+            <p>
+              Band jag missade: <%= bandlist(event["mia"]) %>
+            </p>
+          <% end %>
+          <%= if opening_acts?(event) do %>
+            <p>
+              Förband: <%= event["bands"] |> Enum.drop(1) |> rdfa_bandlist() |> raw %>
+            </p>
+          <% end %>
+          </div>
+          <%= if event["poster"] do %>
+            <img
+              property="thumbnail"
+              loading="lazy"
+              src={"https://n.madr.se/assets/" <> event["poster"] <> "?key=poster"}
+              alt="affisch"
+              width="150"
+            />
+          <% end %>
+        </article>
+      <% end %>
+    </div>
+  </section>
+<% end %>
 </div>

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

@@ -1,27 +1,7 @@
 <main class="landing">
-  <div class="uc">Under construction <a href="/2025/ombyggnation">Va?</a> 🚧🪏</div>
+<div style="background-color: #000; color: #fff; padding: 0.5em 1em; position: absolute; right: 0; top: 0;">Under construction <a href="/2025/ombyggnation">Va?</a> 🚧🪏</div>
-  <div class="home-hero">
+  <h1 class="home-h1"><span>Anders Englöf Ytterström</span></h1>
-    <img src={~p"/mugshot.jpg"} alt="Anders, hösten 2021" />
-    <h1 class="home-h1">Anders Englöf Ytterström</h1>
-    <p>Webbutvecklare med 18 års erfarenhet, med särskilt intresse för tillgänglighet,
-      containerteknik och webbstandarder. Hårdrockare och Linuxanvändare.</p>
-    <div class="c2a">
-      <a href="/cv">CV</a>
-      <a href="/om">Om mig</a>
-      <a href="https://github.com/madr" rel="external">Min Github</a>
-      <a
-        href="https://se.linkedin.com/in/anders-engl%C3%B6f-ytterstr%C3%B6m-0ba4452a2"
-        rel="external"
-      >
-        Min LinkedIn
-      </a>
-    </div>
-    <a href="/vad-jag-gor">
-      Vad jag gör
-    </a>
-  </div>
   <div class="home-section articles-color">
-    <h2>Blogginlägg</h2>
     <div class="home-articles">
       <a href={"/" <> @recent_article["slug"]}>
         <%= @recent_article["title"] %>
@@ -31,93 +11,84 @@
         <%= @older_article["title"] %>
         <small><time><%= @older_article["pubDate"] %></time></small>
       </a>
-    </div>
+</div>
-    <a href="/webblogg" class="list-link">Alla Webbloggens inlägg</a>
+      <a href="/webblogg" class="list-link">Alla Webbloggens inlägg</a>
-  </div>
+</div>
   <div class="home-section events-color">
-    <h2>Evenemang</h2>
+    <div class="home-articles">
-
+    <%= for event <- @recent_event do %>
-    <h3>Kommande evenemang</h3>
+        <%= if event["poster"] do %>
-    <div class="home-events home-grid">
+          <img
-      <%= for event <- @upcoming do %>
+            src={"https://n.madr.se/assets/" <> event["poster"] <> "?key=thumbnail"}
-        <article>
+            alt="affisch"
-          <a href={event["slug"]}>
+            loading="lazy"
-            <%= if event["poster"] do %>
+          />
-              <img
+        <% else %>
-                src={"https://n.madr.se/assets/" <> event["poster"] <> "?key=poster"}
+        <% end %>
-                alt="affisch"
+        <a href={event["slug"]} title={event["lead"]}>
-                loading="lazy"
+          <%= event["title"] %>
-                class="poster-image"
+        </a>
-              />
+        <small><time><%= event["started_at"] %></time></small>
-            <% else %>
+    <% end %>
-              <span class="poster-image poster-placeholder"></span>
+    <%= for event <- @upcoming do %>
-            <% end %>
+        <%= if event["poster"] do %>
-          </a>
+          <img
-          <div class="event-meta">
+            src={"https://n.madr.se/assets/" <> event["poster"] <> "?key=thumbnail"}
-            <div><time><%= event["started_at"] %></time></div>
+            alt="affisch"
-            <div><%= event["title"] %></div>
+            loading="lazy"
-          </div>
+          />
-        </article>
+        <% end %>
-      <% end %>
+        <%= event["title"] %>
-    </div>
+        <small><time><%= event["started_at"] %></time></small>
-
+    <% end %>
-    <h3>Besökta evenemang</h3>
+  </div>
-    <div class="home-events home-grid">
+      <a href="/evenemang" class="list-link">Evenemangstidslinje</a>
-      <%= for event <- @recent_event do %>
-        <article>
-          <a href={event["slug"]}>
-            <%= if event["poster"] do %>
-              <img
-                src={"https://n.madr.se/assets/" <> event["poster"] <> "?key=poster"}
-                alt="affisch"
-                loading="lazy"
-                class="poster-image"
-              />
-            <% else %>
-              <span class="poster-image poster-placeholder"></span>
-            <% end %>
-          </a>
-          <div class="event-meta">
-            <div><time><%= event["started_at"] %></time></div>
-            <div><%= event["title"] %></div>
-          </div>
-        </article>
-      <% end %>
-    </div>
-
-    <p class="head">
-      Se <a href="/evenemang" class="list-link">Evenemangstidslinje</a>
-      för alla besökta evenemang.
-      Vill du haka på? Prenumerera på
       <a href="/kommande-evenemang.ics" class="feed-link">Kommande evenemang</a>
-      i din kalenderapp: kopiera länken och klistra in.
+      <small>.ics</small>
-    </p>
   </div>
-
+      <a href="/delningar" class="list-link">
-  <div class="home-section brutal-color">
+        Delningar
-    <h2>Brütal legends</h2>
+      </a>
-    <div class="home-brutal home-grid brutal">
+    <%= for legend <- @brutal_legends do %>
-      <%= for legend <- @brutal_legends do %>
+        <%= if legend["cover"] do %>
-        <article>
+          <img
-          <a href={"/" <> legend["purchase_year"] <> "/brutal-legend-" <> legend["externalId"]}>
+            src={"https://n.madr.se/assets/" <> legend["cover"] <> "?key=thumbnail"}
-            <%= if legend["cover"] do %>
+            alt="skivomslag"
-              <img
+            loading="lazy"
-                class="cover-image"
+          />
-                src={"https://n.madr.se/assets/" <> legend["cover"] <> "?key=legend"}
+        <% end %>
-                alt="skivomslag"
+        <a href={"/" <> legend["purchase_year"] <> "/brutal-legend-" <> legend["externalId"]}>
-                loading="lazy"
+          <%= legend["artist"] %> - <%= legend["album"] %> (<%= legend["year"] %>)
-              />
+        </a>
-            <% end %>
+    <% end %>
-          </a>
+      <a href="/vad-jag-gor">
-        </article>
+        Vad jag gör
-      <% end %>
+      </a>
-    </div>
+      <a href="/om">
-    <p>Dessa är de 8 senaste. <a href="/bl">Se alla skivorna</a></p>
+        Anders, 39, Hårdrockare
-  </div>
+      </a>
-  <form method="get" action="/sok" class="home-section home-search">
+      <a href="/prenumerera.xml" class="feed-link">Prenumerera</a>
-    <div>
+      <small>.rss</small>
-      <label for="q">Sök innehåll</label>: <input size="9" type="search" id="q" name="q" />
+      <a clasS="feed-link" href={~p"/aey.vcf"}>
-      <button>Sök</button>
+        Kontakt
-    </div>
+      </a>
+      <small>.vcf</small>
+  <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/anders-englof-ytterstrom.html">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">
+        Discogs
+      </a>
+    </li>
+    <li>
+      <a href="/colophon">
+        Kolofon
+      </a>
+    </li>
+  </ul>
 </main>

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

@@ -1,12 +1,12 @@
 <div class="head">
-  <h1>Delningar</h1>
+<h1>Delningar</h1>
-  <p>
+<p>
-    Länkar som är värda att uppmärksammas och lämna åsikt om.
+  Länkar som är värda att uppmärksammas och lämna åsikt om.
-  </p>
+</p>
 </div>
 <div class="cards">
-  <%= for {date, links} <- @links do %>
+<%= for {date, links} <- @links do %>
-    <section class="card" id={"d" <> date}>
+  <section class="card" id={"d" <> date}>
       <h2 class="bookmark-date">
         <%= date
         |> Date.from_iso8601!()
@@ -48,24 +48,24 @@
         )
         |> String.replace(~r/ 0/, " ") %>
       </h2>
-      <div class="bookmarks">
+    <div class="bookmarks">
-        <%= for link <- links do %>
+      <%= for link <- links do %>
-          <article vocab="https://schema.org/" typeof="WebContent Review" class="bookmark">
+        <article vocab="https://schema.org/" typeof="WebContent Review" class="bookmark">
-            <h3>
+          <h3>
-              <span property="name"><%= link["title"] %></span>
+            <span property="name"><%= link["title"] %></span>
-            </h3>
+          </h3>
-            <div property="reviewBody">
+          <div property="reviewBody">
-              <%= link["contents"] |> Earmark.as_html!() |> raw %>
+            <%= link["contents"] |> Earmark.as_html!() |> raw %>
-            </div>
+          </div>
-            <div class="line">
+          <div class="line">
-              <div class="source">
+          <div class="source">
-                Källa: <a href={link["source"]} rel="external"><%= link["h1"] %></a>
+            Källa: <a href={link["source"]} rel="external"><%= link["h1"] %></a>
-              </div>
+          </div>
-              <a class="permalink" href={"/" <> link["slug"]} title="Permalänk">#</a>
+            <a class="permalink" href={"/" <> link["slug"]} title="Permalänk">#</a>
-            </div>
+          </div>
-          </article>
+        </article>
-        <% end %>
+      <% end %>
-      </div>
+    </div>
-    </section>
+  </section>
-  <% end %>
+<% end %>
 </div>

lib/mse25_web/router.ex

@@ -39,10 +39,6 @@ defmodule Mse25Web.Router do
     get "/events.json", FeedController, :events
     get "/kommande-evenemang.ics", FeedController, :calendar
 
-    get "/cv", PageController, :cv
-    get "/bl", PageController, :brutal_legend
-    get "/mugshot.jpg", PageController, :mugshot
-
     get "/*path", ItemController, :index
   end