From d9619193cb4e3ce7fb32bc4cc2a6e5dd7187b28d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Anders=20Engl=C3=B6f=20Ytterstr=C3=B6m?= Date: Mon, 3 Mar 2025 10:55:45 +0100 Subject: [PATCH] wip --- assets/app.css | 150 +++++++++++++++++- .../components/layouts/app.html.heex | 16 +- .../controllers/item_html/event.html.heex | 2 +- .../controllers/page_html/articles.html.heex | 2 +- .../controllers/page_html/events.html.heex | 15 +- .../controllers/page_html/home.html.heex | 64 ++------ .../controllers/page_html/links.html.heex | 14 +- .../controllers/page_html/notes.html.heex | 10 +- 8 files changed, 195 insertions(+), 78 deletions(-) diff --git a/assets/app.css b/assets/app.css index 7cf81d9..8a9d381 100644 --- 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; +} + diff --git a/lib/mse25_web/components/layouts/app.html.heex b/lib/mse25_web/components/layouts/app.html.heex index 04b166b..3dce75b 100644 --- a/lib/mse25_web/components/layouts/app.html.heex +++ b/lib/mse25_web/components/layouts/app.html.heex @@ -1,7 +1,9 @@
- madr.se + + madr.se +
-
-
18 apr
-
Behemoth
-
5 jun
-
Sweden Rock Festival
-
+ + + + + +
diff --git a/lib/mse25_web/controllers/item_html/event.html.heex b/lib/mse25_web/controllers/item_html/event.html.heex index f84af3a..57f7b3d 100644 --- a/lib/mse25_web/controllers/item_html/event.html.heex +++ b/lib/mse25_web/controllers/item_html/event.html.heex @@ -1,4 +1,4 @@ -
+

<%= @heading %>

    diff --git a/lib/mse25_web/controllers/page_html/articles.html.heex b/lib/mse25_web/controllers/page_html/articles.html.heex index 0ab2cc6..f1c5e26 100644 --- a/lib/mse25_web/controllers/page_html/articles.html.heex +++ b/lib/mse25_web/controllers/page_html/articles.html.heex @@ -30,7 +30,7 @@
    <%= for {year, articles} <- @articles do %>
    year}> -

    <%= year %>

    +

    <%= year %>

    <%= for article <- articles do %>
    diff --git a/lib/mse25_web/controllers/page_html/events.html.heex b/lib/mse25_web/controllers/page_html/events.html.heex index e2def1e..a46f963 100644 --- a/lib/mse25_web/controllers/page_html/events.html.heex +++ b/lib/mse25_web/controllers/page_html/events.html.heex @@ -1,5 +1,5 @@ +

    <%= @page_title %>

    - <%= raw(@contents) %>

    Geografisk utspridning

    @@ -29,15 +29,18 @@

    +
    +
    <%= for {year, events} <- @events do %> -
    year}> -

    <%= year %>

    +
    year}> +

    <%= year %>

    <%= for event <- events do %>
    -

    +

    event["slug"]}><%= event["title"] %> -

    + +

    <%= event["lead"] %>

    <%= if hilights?(event) do %>

    @@ -54,6 +57,7 @@ Förband: <%= event["bands"] |> Enum.drop(1) |> rdfa_bandlist() |> raw %>

    <% end %> +
    <%= if event["poster"] do %>
    <% end %> +
    diff --git a/lib/mse25_web/controllers/page_html/home.html.heex b/lib/mse25_web/controllers/page_html/home.html.heex index 71057b8..995f4f1 100644 --- a/lib/mse25_web/controllers/page_html/home.html.heex +++ b/lib/mse25_web/controllers/page_html/home.html.heex @@ -1,27 +1,22 @@
    - Anders Englöf Ytterström -

    Anders Englöf Ytterström

    -
    Alla Webbloggens inlägg - +
    +
    +
    <%= for event <- @recent_event do %> -
  • <%= if event["poster"] do %> event["poster"] <> "?key=thumbnail"} @@ -29,90 +24,55 @@ loading="lazy" /> <% else %> - <% end %> <%= event["title"] %> -
    • <% end %> <%= for event <- @upcoming do %> -
  • <%= if event["poster"] do %> event["poster"] <> "?key=thumbnail"} alt="affisch" loading="lazy" /> - <% else %> - <% end %> <%= event["title"] %> -
    • <% end %> -
  • - +
    • Evenemangstidslinje - - -
  • - Kommande evenemang .ics -
    • -
  • - +
    • Delningar - - <%= for legend <- @brutal_legends do %> -
  • <%= if legend["cover"] do %> legend["cover"] <> "?key=thumbnail"} alt="skivomslag" loading="lazy" /> - <% else %> - <% end %> legend["purchase_year"] <> "/brutal-legend-" <> legend["externalId"]}> <%= legend["artist"] %> - <%= legend["album"] %> (<%= legend["year"] %>) - -
    • <% end %> -
  • - Vad jag gör - -
    • -
  • - Anders, 39, Hårdrockare - -
    • -
  • - Prenumerera .rss -
    • -
  • - Kontakt .vcf -
    • -
: diff --git a/lib/mse25_web/controllers/page_html/links.html.heex b/lib/mse25_web/controllers/page_html/links.html.heex index 98310e3..89b349d 100644 --- a/lib/mse25_web/controllers/page_html/links.html.heex +++ b/lib/mse25_web/controllers/page_html/links.html.heex @@ -1,11 +1,13 @@ +

Delningar

Länkar som är värda att uppmärksammas och lämna åsikt om.

+
+
<%= for {date, links} <- @links do %> -
date}> -
-

+
date}> +

<%= date |> Date.from_iso8601!() |> Calendar.strftime( @@ -46,20 +48,24 @@ ) |> String.replace(~r/ 0/, " ") %>

+
<%= for link <- links do %> <% end %>
<% end %> +

diff --git a/lib/mse25_web/controllers/page_html/notes.html.heex b/lib/mse25_web/controllers/page_html/notes.html.heex index cf55a90..fea6f6f 100644 --- a/lib/mse25_web/controllers/page_html/notes.html.heex +++ b/lib/mse25_web/controllers/page_html/notes.html.heex @@ -1,12 +1,12 @@

Anteckningar

Blandade tankar, oftast på engelska. Replikerat på Mastodon.

-

Prenumerera via Atom

+
<%= for {date, links} <- @notes do %>
date}> -

+

<%= date |> Date.from_iso8601!() |> Calendar.strftime( @@ -47,18 +47,18 @@ ) |> String.replace(~r/ 0/, " ") %>

-
+
<%= for link <- links do %>