Update CSS and HTML

assets/app.css

@@ -55,12 +55,67 @@ body > header {
     max-width: none;
 }
 
-.home-h1 {
+.home-hero {
-    height: 85vh;
+    height: 90vh;
     display: flex;
-    place-items: center;
+    align-items: center;
-    text-align: 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 {
     margin: 0;
+    font-size: 3em;
+    text-wrap: pretty;
+
+        text-shadow: 0 0 60px #c0430d;
+    }
 }
 
 body > header > div {
@@ -129,7 +184,7 @@ body > header > nav {
 
         &.current {
             pointer-events: none;
-            background-color: #C0430D;
+            background-color: #c0430d;
             color: #fff;
         }
     }
@@ -370,7 +425,8 @@ body > footer {
     }
 }
 
-.bookmarks, .notes {
+.bookmarks,
+.notes {
     display: flex;
     flex-direction: column;
     gap: 4em;
@@ -409,6 +465,7 @@ body > footer {
 
 #leaflet {
     aspect-ratio: 5 / 4;
+    border: 10px solid #C0430D;
 }
 
 figure {
@@ -526,21 +583,27 @@ 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(--bg);
+    background: var(--hs-bg);
+    color: var(--hs-c);
 
     &.articles-color {
-        --bg: #FF7C14;
+        --hs-bg: #ff7c14;
     }
 
     &.events-color {
-        --bg: #C0430D;
+        --hs-bg: #c0430d;
+    }
+
+    &.brutal-color {
+        --hs-bg: #261603;
+        --hs-c: #fff;
     }
 
     > * {
@@ -557,3 +620,69 @@ 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}),
+      ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/bl/* --external:/images/* --external:/*.{vcf,png,ico,pdf,jpg}),
     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"/images/mugshot.jpg"} property="image" alt="Anders, hösten 2021" />
+    <img src={~p"/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: 1)
+    recent_event = Directus.get_events!(limit: 3)
-    upcoming_events = Directus.get_events!(limit: 2, upcoming: true)
+    upcoming_events = Directus.get_events!(limit: 3, upcoming: true)
-    brutal_legends = Directus.get_albums!(limit: 1)
+    brutal_legends = Directus.get_albums!(limit: 8)
 
     render(conn, :home,
       page_title: "Anders Englöf Ytterström",
@@ -142,4 +142,18 @@ 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,75 +1,77 @@
 <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>
+
-  <%= 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>
 <div class="bookmarks">
-<%= for {year, events} <- @events do %>
+  <%= for {year, events} <- @events do %>
-  <section class="card" id={"y" <> year}>
+    <section class="card" id={"y" <> year}>
-    <h2 class="sticky bookmark-date"><%= year %></h2>
+      <h2 class="sticky bookmark-date"><%= year %></h2>
-    <div class="events">
+      <div class="events">
-      <%= for event <- events do %>
+        <%= for event <- events do %>
-        <article class="event" vocab="https://schema.org/" typeof="Event">
+          <article class="event" vocab="https://schema.org/" typeof="Event">
-          <h3>
+            <h3>
-            <a property="name" href={"/" <> event["slug"]}><%= event["title"] %></a>
+              <a property="name" href={"/" <> event["slug"]}><%= event["title"] %></a>
-          </h3>
+            </h3>
-          <div>
+            <div>
-          <p property="description"><%= event["lead"] %></p>
+              <p property="description"><%= event["lead"] %></p>
-          <%= if hilights?(event) do %>
+              <%= if hilights?(event) do %>
-            <p>
+                <p>
-              Personliga höjdpunkter: <%= rdfa_bandlist(event["bands"]) |> raw %>
+                  Personliga höjdpunkter: <%= rdfa_bandlist(event["bands"]) |> raw %>
-            </p>
+                </p>
-          <% end %>
+              <% end %>
-          <%= if missed?(event) do %>
+              <%= if missed?(event) do %>
-            <p>
+                <p>
-              Band jag missade: <%= bandlist(event["mia"]) %>
+                  Band jag missade: <%= bandlist(event["mia"]) %>
-            </p>
+                </p>
-          <% end %>
+              <% end %>
-          <%= if opening_acts?(event) do %>
+              <%= if opening_acts?(event) do %>
-            <p>
+                <p>
-              Förband: <%= event["bands"] |> Enum.drop(1) |> rdfa_bandlist() |> raw %>
+                  Förband: <%= event["bands"] |> Enum.drop(1) |> rdfa_bandlist() |> raw %>
-            </p>
+                </p>
-          <% end %>
+              <% end %>
-          </div>
+            </div>
-          <%= if event["poster"] do %>
+            <%= if event["poster"] do %>
-            <img
+              <img
-              property="thumbnail"
+                property="thumbnail"
-              loading="lazy"
+                loading="lazy"
-              src={"https://n.madr.se/assets/" <> event["poster"] <> "?key=poster"}
+                src={"https://n.madr.se/assets/" <> event["poster"] <> "?key=poster"}
-              alt="affisch"
+                alt="affisch"
-              width="150"
+                width="150"
-            />
+              />
-          <% end %>
+            <% end %>
-        </article>
+          </article>
-      <% end %>
+        <% end %>
-    </div>
+      </div>
-  </section>
+    </section>
-<% end %>
+  <% end %>
 </div>

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

@@ -1,7 +1,27 @@
 <main class="landing">
-<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="uc">Under construction <a href="/2025/ombyggnation">Va?</a> 🚧🪏</div>
-  <h1 class="home-h1"><span>Anders Englöf Ytterström</span></h1>
+  <div class="home-hero">
+    <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"] %>
@@ -11,84 +31,93 @@
         <%= @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">
-    <div class="home-articles">
+    <h2>Evenemang</h2>
-    <%= for event <- @recent_event do %>
+
-        <%= if event["poster"] do %>
+    <h3>Kommande evenemang</h3>
-          <img
+    <div class="home-events home-grid">
-            src={"https://n.madr.se/assets/" <> event["poster"] <> "?key=thumbnail"}
+      <%= for event <- @upcoming do %>
-            alt="affisch"
+        <article>
-            loading="lazy"
+          <a href={event["slug"]}>
-          />
+            <%= if event["poster"] do %>
-        <% else %>
+              <img
-        <% end %>
+                src={"https://n.madr.se/assets/" <> event["poster"] <> "?key=poster"}
-        <a href={event["slug"]} title={event["lead"]}>
+                alt="affisch"
-          <%= event["title"] %>
+                loading="lazy"
-        </a>
+                class="poster-image"
-        <small><time><%= event["started_at"] %></time></small>
+              />
-    <% end %>
+            <% else %>
-    <%= for event <- @upcoming do %>
+              <span class="poster-image poster-placeholder"></span>
-        <%= if event["poster"] do %>
+            <% end %>
-          <img
+          </a>
-            src={"https://n.madr.se/assets/" <> event["poster"] <> "?key=thumbnail"}
+          <div class="event-meta">
-            alt="affisch"
+            <div><time><%= event["started_at"] %></time></div>
-            loading="lazy"
+            <div><%= event["title"] %></div>
-          />
+          </div>
-        <% end %>
+        </article>
-        <%= event["title"] %>
+      <% end %>
-        <small><time><%= event["started_at"] %></time></small>
+    </div>
-    <% end %>
+
-  </div>
+    <h3>Besökta evenemang</h3>
-      <a href="/evenemang" class="list-link">Evenemangstidslinje</a>
+    <div class="home-events home-grid">
+      <%= 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>
-      <small>.ics</small>
+      i din kalenderapp: kopiera länken och klistra in.
+    </p>
   </div>
-      <a href="/delningar" class="list-link">
+
-        Delningar
+  <div class="home-section brutal-color">
-      </a>
+    <h2>Brütal legends</h2>
-    <%= for legend <- @brutal_legends do %>
+    <div class="home-brutal home-grid brutal">
-        <%= if legend["cover"] do %>
+      <%= for legend <- @brutal_legends do %>
-          <img
+        <article>
-            src={"https://n.madr.se/assets/" <> legend["cover"] <> "?key=thumbnail"}
+          <a href={"/" <> legend["purchase_year"] <> "/brutal-legend-" <> legend["externalId"]}>
-            alt="skivomslag"
+            <%= if legend["cover"] do %>
-            loading="lazy"
+              <img
-          />
+                class="cover-image"
-        <% end %>
+                src={"https://n.madr.se/assets/" <> legend["cover"] <> "?key=legend"}
-        <a href={"/" <> legend["purchase_year"] <> "/brutal-legend-" <> legend["externalId"]}>
+                alt="skivomslag"
-          <%= legend["artist"] %> - <%= legend["album"] %> (<%= legend["year"] %>)
+                loading="lazy"
-        </a>
+              />
-    <% end %>
+            <% end %>
-      <a href="/vad-jag-gor">
+          </a>
-        Vad jag gör
+        </article>
-      </a>
+      <% end %>
-      <a href="/om">
+    </div>
-        Anders, 39, Hårdrockare
+    <p>Dessa är de 8 senaste. <a href="/bl">Se alla skivorna</a></p>
-      </a>
+  </div>
-      <a href="/prenumerera.xml" class="feed-link">Prenumerera</a>
+  <form method="get" action="/sok" class="home-section home-search">
-      <small>.rss</small>
+    <div>
-      <a clasS="feed-link" href={~p"/aey.vcf"}>
+      <label for="q">Sök innehåll</label>: <input size="9" type="search" id="q" name="q" />
-        Kontakt
+      <button>Sök</button>
-      </a>
+    </div>
-      <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,6 +39,10 @@ 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