wip

2025-03-03 10:55:45 +01:00 · 2025-03-03 10:55:45 +01:00 · d9619193cb
commit d9619193cb
parent 22e1074eda
8 changed files with 195 additions and 78 deletions
--- a/assets/app.css
+++ b/assets/app.css
@ -49,6 +49,20 @@ body > header {
    border: 3px solid #000;
 }

+.landing {
+    margin: 0;
+    width: auto;
+    max-width: none;
+}
+
+.home-h1 {
+    height: 85vh;
+    display: flex;
+    place-items: center;
+    text-align: center;
+    margin: 0;
+}
+
 body > header > div {
    grid-area: banner;
    padding: 0.5em;
@ -61,6 +75,11 @@ body > header > strong {
    display: flex;
    place-items: center;
    border-right: 3px solid #000;
+
+    > a {
+        text-decoration: none;
+        color: inherit;
+    }
 }

@media (max-width: 700px) {
@ -199,6 +218,21 @@ pre {
    border: 0;
 }

+.source {
+    font-size: small;
+    background-color: #eee;
+    color: #888;
+    padding: 0.5em;
+    margin-top: 1rem;
+}
+
+blockquote {
+    font-style: italic;
+    border-left: 6px solid #aaa;
+    margin-left: 0;
+    padding-left: 1.5em;
+}
+
 .breadcrumbs {
    > .trail > span::after {
        content: "/";
@ -210,6 +244,11 @@ pre {
    }
 }

+h3.note {
+    font-size: 1.5em;
+    font-weight: normal;
+}
+
 .head {
    background: #ff7c14;
    border: 10px solid #c0430d;
@ -331,7 +370,7 @@ body > footer {
    }
 }

-.bookmarks {
+.bookmarks, .notes {
    display: flex;
    flex-direction: column;
    gap: 4em;
@ -340,10 +379,11 @@ body > footer {
 .bookmark {
    h3 {
        font-weight: normal;
-        font-size: 1.5em;
+        font-size: 1.25em;
        line-height: 1.33;
        margin-top: 0;
-        margin-bottom: 0.25em;
+        font-weight: bold;
+        margin-bottom: 1rem;
    }

    footer {
@ -357,6 +397,25 @@ body > footer {
    }
 }

+.bookmark-date {
+    font-size: 1rem;
+    background-color: #000;
+    color: #fff;
+    padding: 0.5em;
+    position: absolute;
+    top: -6px;
+    right: -6px;
+}
+
+#leaflet {
+    aspect-ratio: 5 / 4;
+}
+
+figure {
+    padding: 0;
+    margin: 2em 0;
+}
+
 .article {
    img {
        max-width: 100%;
@ -413,3 +472,88 @@ body > footer {
        transform: scale(0.8);
    }
 }
+
+.links {
+    display: flex;
+    flex-direction: column;
+    gap: 3em;
+}
+
+.line {
+    margin-top: 1rem;
+    display: flex;
+    align-items: end;
+    justify-content: space-between;
+}
+
+.permalink {
+    border: 4px solid blue;
+    padding: 0.5em;
+    text-decoration: none;
+}
+
+.events {
+    display: flex;
+    flex-direction: column;
+    gap: 4em;
+}
+
+.event {
+    display: grid;
+    grid-template-areas: "heading poster" "text poster";
+    grid-template-columns: 1fr 25%;
+    grid-template-rows: auto 1fr;
+    gap: 1em;
+
+    > img {
+        grid-area: poster;
+        max-width: 100%;
+    }
+
+    > div {
+        grid-area: text;
+
+        :first-child {
+            margin-top: 0;
+        }
+    }
+
+    > h3 {
+        font-size: 1.5em;
+        text-wrap: balance;
+        grid-area: heading;
+        margin: 0;
+    }
+
+    &:nth-child(even) {
+    grid-template-areas: "poster heading" "poster text";
+    grid-template-columns: 25% 1fr;
+    }
+}
+
+.home-section {
+    padding: 1em 0;
+    background: var(--bg);
+
+    &.articles-color {
+        --bg: #FF7C14;
+    }
+
+    &.events-color {
+        --bg: #C0430D;
+    }
+
+    > * {
+        display: block;
+        width: 40rem;
+        margin: 1em auto;
+    }
+}
+
+.home-articles {
+    display: flex;
+    gap: 1.5rem;
+    font-size: 1.5em;
+    margin-bottom: 3rem;
+}
+
--- a/lib/mse25_web/components/layouts/app.html.heex
+++ b/lib/mse25_web/components/layouts/app.html.heex
@ -1,7 +1,9 @@
 <a href="#content" class="skiplink">Hoppa till innehållet</a>

 <header>
-  <strong>madr.se</strong>
+  <strong>
+  <a href="/" rel="home">madr.se</a>
+  </strong>
  <nav>
    <ul>
      <li>
@ -44,12 +46,12 @@
    </ul>
  </nav>
  <div>
-    <dl>
-      <dt>18 apr</dt>
-      <dd>Behemoth</dd>
-      <dt>5 jun</dt>
-      <dd>Sweden Rock Festival</dd>
-    </dl>
+    <!-- <dl> -->
+      <!-- <dt>18 apr</dt> -->
+      <!-- <dd>Behemoth</dd> -->
+      <!-- <dt>5 jun</dt> -->
+      <!-- <dd>Sweden Rock Festival</dd> -->
+    <!-- </dl> -->
  </div>
 </header>

--- a/lib/mse25_web/controllers/item_html/event.html.heex
+++ b/lib/mse25_web/controllers/item_html/event.html.heex
@ -1,4 +1,4 @@
-<article class="event" vocab="https://schema.org/" typeof="Event Review">
+<article class="event card" vocab="https://schema.org/" typeof="Event Review">
  <h1 property="name"><%= @heading %></h1>

  <ul>
--- a/lib/mse25_web/controllers/page_html/articles.html.heex
+++ b/lib/mse25_web/controllers/page_html/articles.html.heex
@ -30,7 +30,7 @@
 <div class="cards">
  <%= for {year, articles} <- @articles do %>
    <section class="card" id={"y" <> year}>
-      <h2 class="sticky vert"><%= year %></h2>
+      <h2 class="bookmark-date"><%= year %></h2>
      <div class="articles">
        <%= for article <- articles do %>
          <article class="article" vocab="https://schema.org/" typeof="Article">
--- a/lib/mse25_web/controllers/page_html/events.html.heex
+++ b/lib/mse25_web/controllers/page_html/events.html.heex
@ -1,5 +1,5 @@
+<div class="head">
 <h1><%= @page_title %></h1>
-
 <%= raw(@contents) %>
 <section id="map">
  <h2>Geografisk utspridning</h2>
@ -29,15 +29,18 @@
    <button>Sök</button>
  </p>
 </form>
+</div>
+<div class="bookmarks">
 <%= for {year, events} <- @events do %>
-  <section id={"y" <> year}>
-    <h2 class="sticky"><%= year %></h2>
+  <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">
-          <h2>
+          <h3>
            <a property="name" href={"/" <> event["slug"]}><%= event["title"] %></a>
-          </h2>
+          </h3>
+          <div>
          <p property="description"><%= event["lead"] %></p>
          <%= if hilights?(event) do %>
            <p>
@ -54,6 +57,7 @@
              Förband: <%= event["bands"] |> Enum.drop(1) |> rdfa_bandlist() |> raw %>
            </p>
          <% end %>
+          </div>
          <%= if event["poster"] do %>
            <img
              property="thumbnail"
@ -68,3 +72,4 @@
    </div>
  </section>
 <% end %>
+</div>
--- a/lib/mse25_web/controllers/page_html/home.html.heex
+++ b/lib/mse25_web/controllers/page_html/home.html.heex
@ -1,27 +1,22 @@
 <main class="landing">
-  <img src={~p"/images/aey.svg"} width="120" alt="Anders Englöf Ytterström" />
-  <h1 class="home-h1">Anders Englöf Ytterström</h1>
-  <ul class="tree">
-    <li class="article">
-      <span></span>
+<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="home-section articles-color">
+    <div class="home-articles">
      <a href={"/" <> @recent_article["slug"]}>
        <%= @recent_article["title"] %>
+        <small><time><%= @recent_article["pubDate"] %></time></small>
      </a>
-      <small><time><%= @recent_article["pubDate"] %></time></small>
-    </li>
-    <li class="article">
-      <span></span>
      <a href={"/" <> @older_article["slug"]}>
        <%= @older_article["title"] %>
+        <small><time><%= @older_article["pubDate"] %></time></small>
      </a>
-      <small><time><%= @older_article["pubDate"] %></time></small>
-    </li>
-    <li class="page">
-      <span></span>
+</div>
      <a href="/webblogg" class="list-link">Alla Webbloggens inlägg</a>
-    </li>
+</div>
+  <div class="home-section events-color">
+    <div class="home-articles">
    <%= for event <- @recent_event do %>
-      <li class="events">
        <%= if event["poster"] do %>
          <img
            src={"https://n.madr.se/assets/" <> event["poster"] <> "?key=thumbnail"}
@ -29,90 +24,55 @@
            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">
        <%= 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>
+  </div>
      <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>.ics</small>
-    </li>
-    <li class="feed links">
-      <span></span>
+  </div>
      <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">
-      <span></span>
      <a href="/prenumerera.xml" class="feed-link">Prenumerera</a>
      <small>.rss</small>
-    </li>
-    <li class="">
-      <span></span>
      <a clasS="feed-link" href={~p"/aey.vcf"}>
        Kontakt
      </a>
      <small>.vcf</small>
-    </li>
-  </ul>
  <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>
--- a/lib/mse25_web/controllers/page_html/links.html.heex
+++ b/lib/mse25_web/controllers/page_html/links.html.heex
@ -1,11 +1,13 @@
+<div class="head">
 <h1>Delningar</h1>
 <p>
  Länkar som är värda att uppmärksammas och lämna åsikt om.
 </p>
+</div>
+<div class="cards">
 <%= for {date, links} <- @links do %>
-  <section id={"d" <> date}>
-    <div class="links">
-      <h2>
+  <section class="card" id={"d" <> date}>
+      <h2 class="bookmark-date">
        <%= date
        |> Date.from_iso8601!()
        |> Calendar.strftime(
@ -46,20 +48,24 @@
        )
        |> String.replace(~r/ 0/, " ") %>
      </h2>
+    <div class="bookmarks">
      <%= for link <- links do %>
        <article vocab="https://schema.org/" typeof="WebContent Review" class="bookmark">
          <h3>
            <span property="name"><%= link["title"] %></span>
-            <a class="permalink" href={"/" <> link["slug"]} title="Permalänk">#</a>
          </h3>
          <div property="reviewBody">
            <%= link["contents"] |> Earmark.as_html!() |> raw %>
          </div>
+          <div class="line">
          <div class="source">
            Källa: <a href={link["source"]} rel="external"><%= link["h1"] %></a>
          </div>
+            <a class="permalink" href={"/" <> link["slug"]} title="Permalänk">#</a>
+          </div>
        </article>
      <% end %>
    </div>
  </section>
 <% end %>
+</div>
--- a/lib/mse25_web/controllers/page_html/notes.html.heex
+++ b/lib/mse25_web/controllers/page_html/notes.html.heex
@ -1,12 +1,12 @@
 <div class="head">
  <h1>Anteckningar</h1>
  <p>Blandade tankar, oftast på engelska. Replikerat på Mastodon.</p>
-  <p><a href="atom.xml">Prenumerera via Atom</a></p>
+  <!-- <p><a href="atom.xml">Prenumerera via Atom</a></p> -->
 </div>
 <div class="cards">
  <%= for {date, links} <- @notes do %>
    <section class="card" id={"d" <> date}>
-      <h2>
+      <h2 class="bookmark-date">
        <%= date
        |> Date.from_iso8601!()
        |> Calendar.strftime(
@ -47,18 +47,18 @@
        )
        |> String.replace(~r/ 0/, " ") %>
      </h2>
-      <div class="bookmarks">
+      <div class="notes">
        <%= for link <- links do %>
          <article vocab="https://schema.org/" typeof="WebContent Review" class="bookmark">
            <h3 class="note">
              <div property="reviewBody">
-                <%= link["contents"] |> Earmark.as_html!() |> raw %>
+                <%= link["contents"] |> Earmark.as_html!(breaks: true) |> raw %>
              </div>
            </h3>
            <footer class="note">
              <p>
                Posted on
-                <a class="permalink" href={"/notes/" <> to_string(link["id"])} title="Permalänk">
+                <a class="permalinks" href={"/notes/" <> to_string(link["id"])} title="Permalänk">
                  <%= fancy_timestamp(link["date_created"]) %>
                </a>
                at