aey/25
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
Anders Englöf Ytterström 2025-03-03 10:55:45 +01:00
parent 22e1074eda
commit d9619193cb
8 changed files with 195 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

150
assets/app.css
View file

@ -49,6 +49,20 @@ body > header {
border: 3px solid #000; 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 { body > header > div {
grid-area: banner; grid-area: banner;
padding: 0.5em; padding: 0.5em;
@ -61,6 +75,11 @@ body > header > strong {
display: flex; display: flex;
place-items: center; place-items: center;
border-right: 3px solid #000; border-right: 3px solid #000;
> a {
text-decoration: none;
color: inherit;
}
} }
@media (max-width: 700px) { @media (max-width: 700px) {
@ -199,6 +218,21 @@ pre {
border: 0; 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 { .breadcrumbs {
> .trail > span::after { > .trail > span::after {
content: "/"; content: "/";
@ -210,6 +244,11 @@ pre {
} }
} }
h3.note {
font-size: 1.5em;
font-weight: normal;
}
.head { .head {
background: #ff7c14; background: #ff7c14;
border: 10px solid #c0430d; border: 10px solid #c0430d;
@ -331,7 +370,7 @@ body > footer {
} }
} }
.bookmarks { .bookmarks, .notes {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4em; gap: 4em;
@ -340,10 +379,11 @@ body > footer {
.bookmark { .bookmark {
h3 { h3 {
font-weight: normal; font-weight: normal;
font-size: 1.5em; font-size: 1.25em;
line-height: 1.33; line-height: 1.33;
margin-top: 0; margin-top: 0;
margin-bottom: 0.25em; font-weight: bold;
margin-bottom: 1rem;
} }
footer { 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 { .article {
img { img {
max-width: 100%; max-width: 100%;
@ -413,3 +472,88 @@ body > footer {
transform: scale(0.8); 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;
}

16
lib/mse25_web/components/layouts/app.html.heex
View file

@ -1,7 +1,9 @@
<a href="#content" class="skiplink">Hoppa till innehållet</a> <a href="#content" class="skiplink">Hoppa till innehållet</a>
<header> <header>
<strong>madr.se</strong> <strong>
<a href="/" rel="home">madr.se</a>
</strong>
<nav> <nav>
<ul> <ul>
<li> <li>
@ -44,12 +46,12 @@
</ul> </ul>
</nav> </nav>
<div> <div>
<dl> <!-- <dl> -->
<dt>18 apr</dt> <!-- <dt>18 apr</dt> -->
<dd>Behemoth</dd> <!-- <dd>Behemoth</dd> -->
<dt>5 jun</dt> <!-- <dt>5 jun</dt> -->
<dd>Sweden Rock Festival</dd> <!-- <dd>Sweden Rock Festival</dd> -->
</dl> <!-- </dl> -->
</div> </div>
</header> </header>

2
lib/mse25_web/controllers/item_html/event.html.heex
View file

@ -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> <h1 property="name"><%= @heading %></h1>
<ul> <ul>

2
lib/mse25_web/controllers/page_html/articles.html.heex
View file

@ -30,7 +30,7 @@
<div class="cards"> <div class="cards">
<%= for {year, articles} <- @articles do %> <%= for {year, articles} <- @articles do %>
<section class="card" id={"y" <> year}> <section class="card" id={"y" <> year}>
<h2 class="sticky vert"><%= year %></h2> <h2 class="bookmark-date"><%= year %></h2>
<div class="articles"> <div class="articles">
<%= for article <- articles do %> <%= for article <- articles do %>
<article class="article" vocab="https://schema.org/" typeof="Article"> <article class="article" vocab="https://schema.org/" typeof="Article">

15
lib/mse25_web/controllers/page_html/events.html.heex
View file

@ -1,5 +1,5 @@
<div class="head">
<h1><%= @page_title %></h1> <h1><%= @page_title %></h1>
<%= raw(@contents) %> <%= raw(@contents) %>
<section id="map"> <section id="map">
<h2>Geografisk utspridning</h2> <h2>Geografisk utspridning</h2>
@ -29,15 +29,18 @@
<button>Sök</button> <button>Sök</button>
</p> </p>
</form> </form>
</div>
<div class="bookmarks">
<%= for {year, events} <- @events do %> <%= for {year, events} <- @events do %>
<section id={"y" <> year}> <section class="card" id={"y" <> year}>
<h2 class="sticky"><%= 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">
<h2> <h3>
<a property="name" href={"/" <> event["slug"]}><%= event["title"] %></a> <a property="name" href={"/" <> event["slug"]}><%= event["title"] %></a>
</h2> </h3>
<div>
<p property="description"><%= event["lead"] %></p> <p property="description"><%= event["lead"] %></p>
<%= if hilights?(event) do %> <%= if hilights?(event) do %>
<p> <p>
@ -54,6 +57,7 @@
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>
<%= if event["poster"] do %> <%= if event["poster"] do %>
<img <img
property="thumbnail" property="thumbnail"
@ -68,3 +72,4 @@
</div> </div>
</section> </section>
<% end %> <% end %>
</div>

64
lib/mse25_web/controllers/page_html/home.html.heex
View file

@ -1,27 +1,22 @@
<main class="landing"> <main class="landing">
<img src={~p"/images/aey.svg"} width="120" alt="Anders Englöf Ytterström" /> <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">Anders Englöf Ytterström</h1> <h1 class="home-h1"><span>Anders Englöf Ytterström</span></h1>
<ul class="tree"> <div class="home-section articles-color">
<li class="article"> <div class="home-articles">
<span></span>
<a href={"/" <> @recent_article["slug"]}> <a href={"/" <> @recent_article["slug"]}>
<%= @recent_article["title"] %> <%= @recent_article["title"] %>
<small><time><%= @recent_article["pubDate"] %></time></small>
</a> </a>
<small><time><%= @recent_article["pubDate"] %></time></small>
</li>
<li class="article">
<span></span>
<a href={"/" <> @older_article["slug"]}> <a href={"/" <> @older_article["slug"]}>
<%= @older_article["title"] %> <%= @older_article["title"] %>
<small><time><%= @older_article["pubDate"] %></time></small>
</a> </a>
<small><time><%= @older_article["pubDate"] %></time></small> </div>
</li>
<li class="page">
<span></span>
<a href="/webblogg" class="list-link">Alla Webbloggens inlägg</a> <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 %> <%= for event <- @recent_event do %>
<li class="events">
<%= if event["poster"] do %> <%= if event["poster"] do %>
<img <img
src={"https://n.madr.se/assets/" <> event["poster"] <> "?key=thumbnail"} src={"https://n.madr.se/assets/" <> event["poster"] <> "?key=thumbnail"}
@ -29,90 +24,55 @@
loading="lazy" loading="lazy"
/> />
<% else %> <% else %>
<span></span>
<% end %> <% end %>
<a href={event["slug"]} title={event["lead"]}> <a href={event["slug"]} title={event["lead"]}>
<%= event["title"] %> <%= event["title"] %>
</a> </a>
<small><time><%= event["started_at"] %></time></small> <small><time><%= event["started_at"] %></time></small>
</li>
<% end %> <% end %>
<%= for event <- @upcoming do %> <%= for event <- @upcoming do %>
<li class="events">
<%= if event["poster"] do %> <%= if event["poster"] do %>
<img <img
src={"https://n.madr.se/assets/" <> event["poster"] <> "?key=thumbnail"} src={"https://n.madr.se/assets/" <> event["poster"] <> "?key=thumbnail"}
alt="affisch" alt="affisch"
loading="lazy" loading="lazy"
/> />
<% else %>
<span></span>
<% end %> <% end %>
<%= event["title"] %> <%= event["title"] %>
<small><time><%= event["started_at"] %></time></small> <small><time><%= event["started_at"] %></time></small>
</li>
<% end %> <% end %>
<li class="feed events page"> </div>
<span></span>
<a href="/evenemang" class="list-link">Evenemangstidslinje</a> <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> <a href="/kommande-evenemang.ics" class="feed-link">Kommande evenemang</a>
<small>.ics</small> <small>.ics</small>
</li> </div>
<li class="feed links">
<span></span>
<a href="/delningar" class="list-link"> <a href="/delningar" class="list-link">
Delningar Delningar
</a> </a>
<span></span>
</li>
<%= for legend <- @brutal_legends do %> <%= for legend <- @brutal_legends do %>
<li class="album">
<%= if legend["cover"] do %> <%= if legend["cover"] do %>
<img <img
src={"https://n.madr.se/assets/" <> legend["cover"] <> "?key=thumbnail"} src={"https://n.madr.se/assets/" <> legend["cover"] <> "?key=thumbnail"}
alt="skivomslag" alt="skivomslag"
loading="lazy" loading="lazy"
/> />
<% else %>
<span></span>
<% end %> <% end %>
<a href={"/" <> legend["purchase_year"] <> "/brutal-legend-" <> legend["externalId"]}> <a href={"/" <> legend["purchase_year"] <> "/brutal-legend-" <> legend["externalId"]}>
<%= legend["artist"] %> - <%= legend["album"] %> (<%= legend["year"] %>) <%= legend["artist"] %> - <%= legend["album"] %> (<%= legend["year"] %>)
</a> </a>
<span></span>
</li>
<% end %> <% end %>
<li class="page">
<span></span>
<a href="/vad-jag-gor"> <a href="/vad-jag-gor">
Vad jag gör Vad jag gör
</a> </a>
<span></span>
</li>
<li class="page">
<span></span>
<a href="/om"> <a href="/om">
Anders, 39, Hårdrockare Anders, 39, Hårdrockare
</a> </a>
<span></span>
</li>
<li class="feed rss">
<span></span>
<a href="/prenumerera.xml" class="feed-link">Prenumerera</a> <a href="/prenumerera.xml" class="feed-link">Prenumerera</a>
<small>.rss</small> <small>.rss</small>
</li>
<li class="">
<span></span>
<a clasS="feed-link" href={~p"/aey.vcf"}> <a clasS="feed-link" href={~p"/aey.vcf"}>
Kontakt Kontakt
</a> </a>
<small>.vcf</small> <small>.vcf</small>
</li>
</ul>
<form method="get" action="/sok" class="home-search"> <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" /> <label for="q">Sök innehåll</label>: <input size="9" type="search" id="q" name="q" />
<button>Sök</button> <button>Sök</button>

14
lib/mse25_web/controllers/page_html/links.html.heex
View file

@ -1,11 +1,13 @@
<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 id={"d" <> date}> <section class="card" id={"d" <> date}>
<div class="links"> <h2 class="bookmark-date">
<h2>
<%= date <%= date
|> Date.from_iso8601!() |> Date.from_iso8601!()
|> Calendar.strftime( |> Calendar.strftime(
@ -46,20 +48,24 @@
) )
|> String.replace(~r/ 0/, " ") %> |> String.replace(~r/ 0/, " ") %>
</h2> </h2>
<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>
<a class="permalink" href={"/" <> link["slug"]} title="Permalänk">#</a>
</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="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>
</div>
</article> </article>
<% end %> <% end %>
</div> </div>
</section> </section>
<% end %> <% end %>
</div>

10
lib/mse25_web/controllers/page_html/notes.html.heex
View file

@ -1,12 +1,12 @@
<div class="head"> <div class="head">
<h1>Anteckningar</h1> <h1>Anteckningar</h1>
<p>Blandade tankar, oftast på engelska. Replikerat på Mastodon.</p> <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>
<div class="cards"> <div class="cards">
<%= for {date, links} <- @notes do %> <%= for {date, links} <- @notes do %>
<section class="card" id={"d" <> date}> <section class="card" id={"d" <> date}>
<h2> <h2 class="bookmark-date">
<%= date <%= date
|> Date.from_iso8601!() |> Date.from_iso8601!()
|> Calendar.strftime( |> Calendar.strftime(
@ -47,18 +47,18 @@
) )
|> String.replace(~r/ 0/, " ") %> |> String.replace(~r/ 0/, " ") %>
</h2> </h2>
<div class="bookmarks"> <div class="notes">
<%= 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 class="note"> <h3 class="note">
<div property="reviewBody"> <div property="reviewBody">
<%= link["contents"] |> Earmark.as_html!() |> raw %> <%= link["contents"] |> Earmark.as_html!(breaks: true) |> raw %>
</div> </div>
</h3> </h3>
<footer class="note"> <footer class="note">
<p> <p>
Posted on 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"]) %> <%= fancy_timestamp(link["date_created"]) %>
</a> </a>
at at