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;
}
.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;
}

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>
<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>

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>
<ul>

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

@ -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">

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

@ -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>

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

@ -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"] %>
</a>
<small><time><%= @recent_article["pubDate"] %></time></small>
</li>
<li class="article">
<span></span>
</a>
<a href={"/" <> @older_article["slug"]}>
<%= @older_article["title"] %>
</a>
<small><time><%= @older_article["pubDate"] %></time></small>
</li>
<li class="page">
<span></span>
</a>
</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>

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

@ -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>

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

@ -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