This commit is contained in:
Anders Englöf Ytterström 2025-02-16 14:43:32 +01:00
parent 7265184fc5
commit fec237bc34
11 changed files with 308 additions and 125 deletions

View file

@ -1,13 +1,6 @@
body {
background: #222;
background: #e1740d;
margin: 0;
background-image: linear-gradient(
175deg,
#212223,
#222 350px,
#302928 345px,
#282828
);
font-family:
system-ui,
-apple-system,
@ -22,6 +15,59 @@ body {
sans-serif;
}
input,
button {
font-size: 1.25em;
}
body > header {
background-color: #c0430d;
margin-bottom: 3em;
}
body > header > img {
padding: 2em;
}
body > header > nav {
display: flex;
justify-content: flex-end;
padding-right: 1em;
border-bottom: 6px solid #261603;
> ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 0.5em;
border-left-width: 0;
transform: translateY(6px);
}
a {
font-weight: bold;
text-decoration: none;
color: #261603;
line-height: 1;
padding: 1em;
display: block;
background-color: #f05f00;
border: 3px solid #261603;
&:hover,
&:focus {
background-color: #261603;
color: #ff7c14;
}
&.current {
pointer-events: none;
background-color: #fff;
}
}
}
h1 {
font-size: 1.75em;
letter-spacing: -0.066em;
@ -42,22 +88,22 @@ h4 {
}
main {
margin: 0 0 0 13em;
max-width: 37em;
margin: 2em auto;
max-width: 40em;
}
.cards {
display: flex;
flex-direction: column;
gap: 1.33em;
gap: 4em;
}
.card {
position: relative;
background-color: #fff;
border: 2px solid #444;
border: 6px solid #261603;
padding: 3em;
border-radius: 9px;
box-shadow: 0 0 5px #000;
box-sizing: border-box;
:first-child {
margin-top: 0;
@ -100,45 +146,50 @@ pre {
}
.breadcrumbs {
border-radius: 8px 8px 0 0;
padding: 1em;
> .trail > span::after {
content: "/";
}
background: #080808;
background-image: linear-gradient(
#080808 0,
#080808 50%,
#161616 50%,
#080808 100%
);
color: #fff;
color: #bbb;
a {
color: #fff;
color: #777;
}
}
.head {
color: #fff;
background-color: #345;
background: #ff7c14;
border: 10px solid #c0430d;
position: relative;
padding: 0.5em;
margin: 3em 0 7em;
font-size: 1.25em;
padding: 1em 2em;
border-radius: 0 0 8px 8px;
margin-bottom: 1.5em;
:first-child {
margin-top: 0;
}
a {
color: #fff;
:last-child {
margin-bottom: 0;
}
&::after {
display: block;
width: 10px;
height: 40px;
content: "";
background: #c0430d;
position: absolute;
left: 50%;
transform: translateX(-10px) translateY(100%);
bottom: -10px;
}
}
.skiplink {
position: absolute;
top: -1.75em;
top: -2em;
left: 1em;
background-color: #ff0;
color: #000;
@ -151,31 +202,6 @@ pre {
}
}
nav {
display: flex;
margin: 2em 0 1em;
> ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 1.5em;
background: #111;
padding: 0.33em 1.5em 0.25em;
border-radius: 0 1.33em 1.33em 0;
border: 2px solid #333;
border-left-width: 0;
padding-left: 13em;
}
a {
text-decoration: none;
color: #fff;
line-height: 1;
}
}
.anders {
img {
position: fixed;
@ -203,10 +229,110 @@ nav {
}
}
body > footer {
width: 30em;
margin: 7em auto;
display: flex;
align-items: center;
gap: 2em;
img {
width: 100px;
height: 100px;
aspect-ratio: 1 / 1;
border: 6px solid #c0430d;
border-radius: 8px;
}
p {
background: #ff7c14;
border: 6px solid #c0430d;
border-radius: 8px;
padding: 0.5em;
position: relative;
&::before {
content: "";
display: block;
background: #c0430d;
width: 12px;
height: 6px;
position: absolute;
top: 45%;
left: -16px;
}
}
}
.bookmarks {
display: flex;
flex-direction: column;
gap: 2em;
gap: 4em;
}
.bookmark {
h3 {
font-weight: normal;
font-size: 1.5em;
line-height: 1.33;
margin-top: 0;
margin-bottom: 0.25em;
}
footer {
text-align: right;
font-size: 1em;
color: #888;
a {
color: #444;
}
}
}
.article {
img {
max-width: 100%;
display: block;
}
margin: 2.8em 0;
h3 {
margin: 0;
font-size: 1.4em;
line-height: 1.33;
}
ul {
padding-left: 1em;
margin: 2em;
}
li + li {
margin-top: 0.5em;
}
footer {
margin-top: 3em;
font-size: 0.75em;
font-style: italic;
}
h2 {
margin-top: 3rem;
}
}
.vert {
position: absolute;
left: calc(-6px - 2.1em);
top: 1em;
background: #fff;
padding: 0.25em;
border: 2px solid #261603;
border-top: 0;
margin: 0;
transform: rotate(90deg);
}
@keyframes burst {

View file

@ -0,0 +1,54 @@
defmodule Mse25Web.Breadcrumbs do
use Mse25Web, :html
def breadcrumbs_html(assigns) do
~H"""
<div class="breadcrumbs">
<span class="sr-only">Du är här:</span>
<span class="trail" itemscope itemtype="https://schema.org/BreadcrumbList">
<span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a href="/" rel="home">
<span itemprop="name">madr.se</span>
</a>
<meta itemprop="position" content="1" />
</span>
<%= for {index, {parent_slug, parent_name}} <- breadcrumbs(@trail) do %>
<span class="sr-only">&gt;</span>
<span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a href={parent_slug}>
<span itemprop="name"><%= parent_name %></span>
</a>
<meta itemprop="position" content={index} />
</span>
<% end %>
</span>
</div>
"""
end
defp breadcrumbs(nodes) do
breadcrumbs([], "", 1, nodes)
end
defp breadcrumbs(seen, _path, _index, []) do
Enum.reverse(seen)
end
defp breadcrumbs(seen, path, index, [{slug, name} | nodes]) do
breadcrumbs(
[{index + 1, {path <> "/" <> to_string(slug), name}} | seen],
path <> "/" <> to_string(slug),
index + 1,
nodes
)
end
defp breadcrumbs(seen, path, index, [{slug, name, custom_prefix} | nodes]) do
breadcrumbs(
[{index + 1, {custom_prefix <> "/" <> to_string(slug), name}} | seen],
path <> "/" <> to_string(slug),
index + 1,
nodes
)
end
end

View file

@ -78,32 +78,6 @@ defmodule Mse25Web.Layouts do
"""
end
def breadcrumbs(nodes) do
breadcrumbs([], "", 1, nodes)
end
def breadcrumbs(seen, _path, _index, []) do
Enum.reverse(seen)
end
def breadcrumbs(seen, path, index, [{slug, name} | nodes]) do
breadcrumbs(
[{index + 1, {path <> "/" <> to_string(slug), name}} | seen],
path <> "/" <> to_string(slug),
index + 1,
nodes
)
end
def breadcrumbs(seen, path, index, [{slug, name, custom_prefix} | nodes]) do
breadcrumbs(
[{index + 1, {custom_prefix <> "/" <> to_string(slug), name}} | seen],
path <> "/" <> to_string(slug),
index + 1,
nodes
)
end
def show_interactive_event_map?(assigns) do
Map.has_key?(assigns, :events)
end
@ -111,4 +85,12 @@ defmodule Mse25Web.Layouts do
def show_footer?(%{heading: "Kolofon"}), do: false
def show_footer?(%{}), do: true
def current?(_key, []) do
false
end
def current?(k, path) do
Enum.member?(path, k)
end
end

View file

@ -1,46 +1,61 @@
<a href="#content" class="skiplink">Hoppa till innehållet</a>
<nav>
<ul>
<li><a href="/webblogg">Webblogg</a></li>
<li><a href="/delningar">Länkar</a></li>
<li><a href="/anteckningar">Anteckningar</a></li>
<li><a href="/evenemang">Evenemang</a></li>
<li><a href="/om">Om</a></li>
</ul>
</nav>
<header>
<nav>
<ul>
<li>
<a
class={if current?("webblogg", @conn.path_info), do: "current", else: ""}
href="/webblogg"
>
Webblogg
</a>
</li>
<li>
<a
class={if current?("delningar", @conn.path_info), do: "current", else: ""}
href="/delningar"
>
Länkar
</a>
</li>
<li>
<a
class={if current?("anteckningar", @conn.path_info), do: "current", else: ""}
href="/anteckningar"
>
Anteckningar
</a>
</li>
<li>
<a
class={if current?("evenemang", @conn.path_info), do: "current", else: ""}
href="/evenemang"
>
Evenemang
</a>
</li>
<li>
<a class={if current?("om", @conn.path_info), do: "current", else: ""} href="/om">
Om
</a>
</li>
</ul>
</nav>
</header>
<main id="content">
<div class="breadcrumbs">
<span class="sr-only">Du är här:</span>
<span class="trail" itemscope itemtype="https://schema.org/BreadcrumbList">
<span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a href="/" rel="home">
<span itemprop="name">madr.se</span>
</a>
<meta itemprop="position" content="1" />
</span>
<%= for {index, {parent_slug, parent_name}} <- breadcrumbs(@breadcrumbs) do %>
<span class="sr-only">&gt;</span>
<span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a href={parent_slug}>
<span itemprop="name"><%= parent_name %></span>
</a>
<meta itemprop="position" content={index} />
</span>
<% end %>
</span>
</div>
<%= @inner_content %>
</main>
<%= if show_footer?(assigns) do %>
<footer>
<p vocab="https://schema.org/" typeof="Person">
<footer vocab="https://schema.org/" typeof="Person">
<img src={~p"/images/mugshot.jpg"} property="image" alt="Anders, hösten 2021" />
<p>
<a href="https://madr.se" property="url">madr.se</a>
är <span property="name">Anders Englöf Ytterström</span>s hemsida. Anders är <span property="jobTitle">webbutvecklare</span>, linuxentusiast, ljudtekniker och hårdrockare, bosatt i <span
property="address"
typeof="PostalAddress"
><span property="addressLocality">Borlänge</span> (<span property="addressRegion">Dalarna</span>)</span>.
är hemsida åt <span property="name">Anders Englöf Ytterström</span>, en
<span property="jobTitle">webbutvecklare</span>
och <span property="skills">hårdrockare</span>
från <span property="address" typeof="PostalAddress"><span property="addressLocality">Borlänge</span>, <span property="addressRegion">Dalarna</span></span>.
Läs <a href="/colophon">kolofonen</a>.
</p>
</footer>

View file

@ -1,6 +1,7 @@
defmodule Mse25Web.ItemHTML do
use Mse25Web, :html
import Mse25.EventHelpers
import Mse25Web.Breadcrumbs
embed_templates "item_html/*"

View file

@ -1,4 +1,5 @@
<article class="collapsed article card" vocab="https://schema.org/" typeof="Article">
<%= breadcrumbs_html(%{:trail => @breadcrumbs}) %>
<h1 property="name"><%= @heading %></h1>
<div property="articleBody">

View file

@ -1,6 +1,7 @@
defmodule Mse25Web.PageHTML do
use Mse25Web, :html
import Mse25.EventHelpers
import Mse25Web.Breadcrumbs
embed_templates "page_html/*"

View file

@ -1,4 +1,5 @@
<div class="head">
<%= breadcrumbs_html(%{:trail => @breadcrumbs}) %>
<h1>
<%= @page_title %>
</h1>
@ -29,14 +30,14 @@
<div class="cards">
<%= for {year, articles} <- @articles do %>
<section class="card" id={"y" <> year}>
<h2 class="sticky"><%= year %></h2>
<h2 class="sticky vert"><%= year %></h2>
<div class="articles">
<%= for article <- articles do %>
<article class="article" vocab="https://schema.org/" typeof="Article">
<h2 property="name">
<a href={"/" <> article["slug"]}><%= article["title"] %></a>
</h2>
<time><%= article["pubDate"] %></time>
<h3 property="name">
<a href={"/" <> article["slug"]}><%= article["title"] %></a>
</h3>
</article>
<% end %>
</div>

View file

@ -1,6 +1,7 @@
<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>
</div>
<div class="cards">
<%= for {date, links} <- @notes do %>
@ -49,12 +50,12 @@
<div class="bookmarks">
<%= for link <- links do %>
<article vocab="https://schema.org/" typeof="WebContent Review" class="bookmark">
<h3>
<h3 class="note">
<div property="reviewBody">
<%= link["contents"] |> Earmark.as_html!() |> raw %>
</div>
</h3>
<footer>
<footer class="note">
<p>
Posted on
<a class="permalink" href={"/notes/" <> to_string(link["id"])} title="Permalänk">

View file

@ -0,0 +1 @@
<svg width="436.4" height="238" viewBox="0 0 115.5 63" xmlns="http://www.w3.org/2000/svg"><path style="stroke-width:.18255" d="m119.8 51.6 1.7-1.4-.2-.3-.5.4-.4-.4v-7.4l.7-1-.3-.1-.4.3-.2.3-1.6-1.3-2.7 2q0-.9-.2-1.2l-.9-.8-.2.2-1.5.8-.7.4-.6.4-.6.4q-.6.6-.9 1.3l-.3 2h-.7l-.5.3-.4.4-.3.5.3.2q.4-.5.8-.5.6 0 1 .7.5.7.5 1.5t-.3 1.2q-.3.4-1.1.5-.8 0-1.1.4-.4.4-.4 1.2v.2h.4q0-.7.8-.7h.4l.8.1q2.2 0 2.2-2.6v-3h2v2.1q0 .7-.2 1h-.2v.4l.8.7.8.8 2.5-2.3-.2-.2-.6.5v-3l.9-1.1h-.9V42l.4-.3 1 .9v6.6q0 1.1.2 1.5.2.4 1 .9zm-3.8-5h1v3.2l-.4.2q-.4 0-.5-.3l-.1-1.3zm1-1.1h-1V43l1-.8zm-2.6-1.9v1.9h-1.3l-.7.9v-2q0-1.2.3-1.7.2-.4 1-1 .5.4.6.7l.1 1.2zm-3.6 7.4h-.4q.7-.3 1-.8l.1-1.8v-3q0-1.4.2-1.9 0-.4.7-.9-.3.6-.3 1.8V49q0 1.2-.2 1.6-.3.4-1 .4zm19.5.6 1.8-1.5-.3-.3q-.4.4-.6.4-.2 0-.3-.3v-.3l-.1-.7-.3-5.4V43q0-.8.2-1.2l.4-.4.6-.4-.2-.3-.4.2-.3.2-.3.3-.5.4h-.1q-1.7-1.2-3.4-1.2-1.6 0-2.8 1.2-1.2 1-1.2 2.6 0 1 .6 1.7.5.9 1.4 1.5l-1 1.6-.8 1.1-.1.6q0 .3.2.5.1.2.3.2.4 0 .4-.4l-.1-.4-.2-.4.1-.2.3-.1q.8 0 3 1.5l2.6-2v.4l.3 1 .8.6zm-5.6-3.7h4.5v1.2l-1.5 1.2-3.6-1.5zm3.7-5.3.3.2.3.2.1 3.8h-3.6zM126 44q.4 0 1 .3l-2.2 3q-1.7-1-1.7-2.6 0-1.1 1-1.9.8-.8 2.1-.8 1 0 2 .5l-.5.7-1.2-.2q-1.3 0-1.8 1.5l.2.1q.5-.6 1.1-.6zm15 7.7 2.3-1.6v-.4q0-3.4-.3-5-.5-1.8-1.4-2.5-1-.6-2.9-.6h-3l-.7.1h-1.4q-.4-.2-.6-.7h-.2v.2q0 1 .5 1.5t1.9.5h1.8q-1.3.6-1.7 1.3-.4.7-.4 2.2v.3l-.7-.2q-1 0-1.6 1.1l.2.2q.4-.4.8-.4t.8.4q.3.4.3.9 0 .6-.4 1l-.5.6-.8.7h-.2l.2.3.8-.5.8-.5q1.1-1 1.5-1.6.3-.6.3-2v-2.7l.2-.3.3-.4q.1-.2.4-.3l.5-.2-.2.5-.2.5v3.6l-.1.5v.3l-.2.3q-.6 1-2 1.9l-1.6 1h-.3l.3.4q1-.6 1.9-.8.9-.3 2-.3 1.7 0 3.7.6zm-2-2h-.1v-1.2q.7-.5 1.4-.5t1.5.5v1.8l-.3-.1-1.2-.3-1.2-.1zm1.4-2q-.7 0-1.5.4v-1.9q.7.5 1.4.5.5 0 1.3-.5l.1 1.2v.7q-.7-.5-1.3-.5zm-.2-1.4q-.5 0-1.3-.5V43h.2q1.4.2 1.9.8.5.5.6 2-.7.5-1.4.5zm-2-3.3h.3v6.7q-1 0-1.8.3.6-.6.8-1.2.2-.5.2-1.6v-2.5l.1-.7.5-1zm13 8.6 1.8-1.7-.3-.2-.7.7q-.3-.3-1.2-.6v-3l.3-.2q1 .2 1.6.9.6.7 1 2l.4 1.4.7.7 1.7-1.5-.3-.2-.5.5q-.5-.4-.8-1.3l-.2-.8q-.6-1.9-2.2-2.7l2.3-1.5-2.3-3.3-2.8 2q0-1-.6-1.5t-1.5-.5q-1.2 0-2 1v.2q.6-.3 1.1-.3.8 0 1.1.4.4.4.4 1.4v.3l-2.8 1.9v.2q1.4.4 2.1 1.3.7.9.7 2.1v.1q-1.9.2-3.2 2 1.5-.7 3.1-.7 1.7 0 3.1 1zm-4.6-6.3 1.6-1.1v2.3q-.6-.7-1.6-1.2zm3.9 4.4-.5-.2h-.3V43l.8-.6zm2.9-5-2.6 1.7v-4l.7-.5zM70 95.8l6.7-5.7-1-1q-1.5 1.3-2.1 1.3-1 0-1.3-1L72 88l-.1-2.6-1-20v-2.2q0-3 .8-4.5.5-.7 1.4-1.5.9-.8 2.3-1.6l-.7-1-1.6.9-1.2.7-1.2 1-1.6 1.5-.4.3h-.1Q62 54.6 56 54.6t-10.5 4.3Q41 63 41 68.6q0 3.5 2 6.7 1.9 3 5.5 5.4L44.2 87q-2 2.8-2.5 4-.5 1-.5 2.4 0 1 .6 1.7t1.4.7q1.5 0 1.5-1.3 0-.7-.6-1.7t-.6-1.4q0-.5.4-.8.4-.5 1-.5 3 0 11.5 6l9.8-8 .1 1.6q.2 2.5.9 3.7.6 1.1 2.9 2.6zM49.3 82H66v4.5L60.5 91 47 85.2zm13.8-20 1 .8 1 .9.6 14.1H52.1Zm-9 4.8q1.5 0 3.3 1.2l-8 11.5q-6.2-4.3-6.2-10 0-4.2 3.4-7 3.3-3 8.3-3 4 0 7.1 1.9l-1.7 2.4q-2.4-.6-4.4-.6-4.8 0-7 5.5l1 .5q2-2.4 4.2-2.4zM99.9 90V72.4l9.6.4 3.1-5.5-6.8-.2 8.3-8.4-.3-.8h-1.5q-4.3 0-10.8-3.2L90 64v13.6q0 2.4-.4 3.2-.3.8-1.7 2.1-3.3-4.6-3.3-10.5 0-8.4 8.5-14l-.6-1q-12.7 6.7-12.7 18.4 0 8.2 5.4 14 5.4 5.7 13.2 5.7 5.2 0 9.4-2.6 4.3-2.6 7.4-7.7l-.5-.5q-7 5.2-14 5.2zm8.4-27-8.4 8.4V59.8q3.6 2.2 8.4 3zm-12.8-1.2 3.1-2.5v30.5q-6.3-1-10.1-5.8l3.2-2.7q2.7-2.2 3.2-3.4.6-1.2.6-4zm23.7-4.7.6 1q1.3-.7 2.2-.7 3 0 4.2 2.2 1.3 2.1 1.3 7.1v2.2q-3-1.9-5-1.9-1.5 0-3.2 1l.2.9h.9q3 0 5 2.1 2 2.2 2 5.7v1.2q-2.9-2.3-5.9-2.3-1 0-2 .3v.8q1.8.1 3.3.9 1.5.7 2.5 2 1 1.2 1.6 3 .6 1.7.6 3.7v1q-4.2 0-6.9 2.2T118 95q0 3.4 2.6 5.8 2.5 2.3 6.3 2.3t10.9-3.8q3.2-1.8 4.5-1.8 1.3 0 1.3.9l-.2.6q-.9 1.1-.9 2 0 1.2.8 2 .7.7 1.7.7 2.7 0 2.7-2.9 0-2.2-2.2-3.7-2-1.5-5.2-1.5-2.2 0-4.8.8l-1.7.6-3 1q-4 1.5-5.9 1.5-1.1 0-2.1-.4-1-.3-1.7-1t-1.1-1.6q-.4-1-.4-2 0-2.8 2.5-4.3 2.5-1.6 7-1.6l4.4.1 4.4.1q9.5 0 14-4.3 4.6-4.4 4.6-13.6 0-6.2-3.2-10.2-3.2-4-8.3-4-4 0-11.2 4.1l-.7.5q-1.2-6.5-7.7-6.5-3.4 0-6 2.3zm16.5 30.2H133V63.1l2.7-1.7zm2 0h-.7V79q2.9-2.4 6.2-2.4 3.5 0 6.7 2.8-2.6 8-12.1 8zm5.4-12.1q-3.1 0-6.1 2.2v-8q2.9 2.3 6.4 2.3 1.9 0 3.4-.6l1.6-.8 1.8-1.4q.4 2 .4 4.3 0 2.7-.4 4.7-3.4-2.7-7-2.7zm.2-4.8h-1.6q-.8-.2-1.5-.6-.8-.3-1.6-.9l-1.6-1.3v-6.8q2.5-1 4.2-1 3 0 5.4 2.1 2.4 2.2 3.2 5.7-2.8 2.8-6.5 2.8z" transform="translate(-41 -40.6)"/></svg>

After

Width:  |  Height:  |  Size: 4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB