Update CSS and HTML

assets/app.css

@@ -55,12 +55,67 @@ body > header {
     max-width: none;
 }
 
-.home-h1 {
-    height: 85vh;
+.home-hero {
+    height: 90vh;
     display: flex;
-    place-items: center;
-    text-align: center;
+    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 {
+    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 {
@@ -533,14 +590,20 @@ figure {
 
 .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

@@ -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)
-    upcoming_events = Directus.get_events!(limit: 2, upcoming: true)
-    brutal_legends = Directus.get_albums!(limit: 1)
+    recent_event = Directus.get_events!(limit: 3)
+    upcoming_events = Directus.get_events!(limit: 3, upcoming: true)
+    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,25 +1,19 @@
 <div class="head">
-<h1><%= @page_title %></h1>
-<%= raw(@contents) %>
-<section id="map">
-  <h2>Geografisk utspridning</h2>
-  <figure>
-    <div id="leaflet" class="interactive-map"></div>
-  </figure>
-</section>
-<p>
+  <h1><%= @page_title %></h1>
+  <%= raw(@contents) %>
+  <p>
     <%= if @nosearch? do %>
       Gå direkt till:
     <% end %>
-</p>
-<ul class="months">
+  </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">
+  </ul>
+  <form method="get" action="/evenemang">
     <p>
       <%= if @nosearch? do %>
         Eller
@@ -28,10 +22,18 @@
       <input type="search" value={@q} name="q" id="q" size="7" />
       <button>Sök</button>
     </p>
-</form>
+  </form>
 </div>
+
+<section id="map">
+  <h2>Geografisk utspridning</h2>
+  <figure>
+    <div id="leaflet" class="interactive-map"></div>
+  </figure>
+</section>
+
 <div class="bookmarks">
-<%= for {year, events} <- @events do %>
+  <%= for {year, events} <- @events do %>
     <section class="card" id={"y" <> year}>
       <h2 class="sticky bookmark-date"><%= year %></h2>
       <div class="events">
@@ -71,5 +73,5 @@
         <% end %>
       </div>
     </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>
-  <h1 class="home-h1"><span>Anders Englöf Ytterström</span></h1>
+  <div class="uc">Under construction <a href="/2025/ombyggnation">Va?</a> 🚧🪏</div>
+  <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>
-</div>
+  </div>
   <div class="home-section events-color">
-    <div class="home-articles">
-    <%= for event <- @recent_event do %>
+    <h2>Evenemang</h2>
+
+    <h3>Kommande evenemang</h3>
+    <div class="home-events home-grid">
+      <%= for event <- @upcoming do %>
+        <article>
+          <a href={event["slug"]}>
             <%= if event["poster"] do %>
               <img
-            src={"https://n.madr.se/assets/" <> event["poster"] <> "?key=thumbnail"}
+                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 href={event["slug"]} title={event["lead"]}>
-          <%= event["title"] %>
           </a>
-        <small><time><%= event["started_at"] %></time></small>
+          <div class="event-meta">
+            <div><time><%= event["started_at"] %></time></div>
+            <div><%= event["title"] %></div>
+          </div>
+        </article>
       <% end %>
-    <%= for event <- @upcoming do %>
+    </div>
+
+    <h3>Besökta evenemang</h3>
+    <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=thumbnail"}
+                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 %>
-        <%= event["title"] %>
-        <small><time><%= event["started_at"] %></time></small>
-    <% end %>
-  </div>
-      <a href="/evenemang" class="list-link">Evenemangstidslinje</a>
-      <a href="/kommande-evenemang.ics" class="feed-link">Kommande evenemang</a>
-      <small>.ics</small>
-  </div>
-      <a href="/delningar" class="list-link">
-        Delningar
           </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.
+    </p>
+  </div>
+
+  <div class="home-section brutal-color">
+    <h2>Brütal legends</h2>
+    <div class="home-brutal home-grid brutal">
       <%= for legend <- @brutal_legends do %>
+        <article>
+          <a href={"/" <> legend["purchase_year"] <> "/brutal-legend-" <> legend["externalId"]}>
             <%= if legend["cover"] do %>
               <img
-            src={"https://n.madr.se/assets/" <> legend["cover"] <> "?key=thumbnail"}
+                class="cover-image"
+                src={"https://n.madr.se/assets/" <> legend["cover"] <> "?key=legend"}
                 alt="skivomslag"
                 loading="lazy"
               />
             <% end %>
-        <a href={"/" <> legend["purchase_year"] <> "/brutal-legend-" <> legend["externalId"]}>
-          <%= legend["artist"] %> - <%= legend["album"] %> (<%= legend["year"] %>)
           </a>
+        </article>
       <% end %>
-      <a href="/vad-jag-gor">
-        Vad jag gör
-      </a>
-      <a href="/om">
-        Anders, 39, Hårdrockare
-      </a>
-      <a href="/prenumerera.xml" class="feed-link">Prenumerera</a>
-      <small>.rss</small>
-      <a clasS="feed-link" href={~p"/aey.vcf"}>
-        Kontakt
-      </a>
-      <small>.vcf</small>
-  <form method="get" action="/sok" class="home-search">
+    </div>
+    <p>Dessa är de 8 senaste. <a href="/bl">Se alla skivorna</a></p>
+  </div>
+  <form method="get" action="/sok" class="home-section home-search">
+    <div>
       <label for="q">Sök innehåll</label>: <input size="9" type="search" id="q" name="q" />
       <button>Sök</button>
+    </div>
   </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,11 +1,11 @@
 <div class="head">
-<h1>Delningar</h1>
-<p>
+  <h1>Delningar</h1>
+  <p>
     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}>
       <h2 class="bookmark-date">
         <%= date
@@ -67,5 +67,5 @@
         <% end %>
       </div>
     </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