Compare commits
1 commit
d9619193cb
...
65dd0847bf
| Author | SHA1 | Date | |
|---|---|---|---|
| 65dd0847bf |
9 changed files with 365 additions and 187 deletions
147
assets/app.css
147
assets/app.css
|
|
@ -55,14 +55,69 @@ body > header {
|
|||
max-width: none;
|
||||
}
|
||||
|
||||
.home-h1 {
|
||||
height: 85vh;
|
||||
.home-hero {
|
||||
height: 90vh;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background-color: #261603;
|
||||
color: #ff7c14;
|
||||
gap: 2rem;
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
width: 333px;
|
||||
border: 6px solid #000;
|
||||
}
|
||||
|
||||
> * {
|
||||
max-width: 50%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.c2a {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
|
||||
> a {
|
||||
--border-color: #C0430D;
|
||||
--c2a-color: #E1740D;
|
||||
border: 5px solid var(--border-color);
|
||||
padding: 0.75em 1.25em;
|
||||
text-transform: uppercase;
|
||||
background-color: var(--c2a-color);
|
||||
|
||||
&:nth-child(2) {
|
||||
--c2a-color: #E1740D;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
--c2a-color: #F05F00;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
--border-color: #E1740D;
|
||||
--c2a-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-h1 {
|
||||
margin: 0;
|
||||
font-size: 3em;
|
||||
text-wrap: pretty;
|
||||
|
||||
text-shadow: 0 0 60px #c0430d;
|
||||
}
|
||||
}
|
||||
|
||||
body > header > div {
|
||||
grid-area: banner;
|
||||
padding: 0.5em;
|
||||
|
|
@ -129,7 +184,7 @@ body > header > nav {
|
|||
|
||||
&.current {
|
||||
pointer-events: none;
|
||||
background-color: #C0430D;
|
||||
background-color: #c0430d;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
|
@ -370,7 +425,8 @@ body > footer {
|
|||
}
|
||||
}
|
||||
|
||||
.bookmarks, .notes {
|
||||
.bookmarks,
|
||||
.notes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4em;
|
||||
|
|
@ -409,6 +465,7 @@ body > footer {
|
|||
|
||||
#leaflet {
|
||||
aspect-ratio: 5 / 4;
|
||||
border: 10px solid #C0430D;
|
||||
}
|
||||
|
||||
figure {
|
||||
|
|
@ -533,14 +590,20 @@ figure {
|
|||
|
||||
.home-section {
|
||||
padding: 1em 0;
|
||||
background: var(--bg);
|
||||
background: var(--hs-bg);
|
||||
color: var(--hs-c);
|
||||
|
||||
&.articles-color {
|
||||
--bg: #FF7C14;
|
||||
--hs-bg: #ff7c14;
|
||||
}
|
||||
|
||||
&.events-color {
|
||||
--bg: #C0430D;
|
||||
--hs-bg: #c0430d;
|
||||
}
|
||||
|
||||
&.brutal-color {
|
||||
--hs-bg: #261603;
|
||||
--hs-c: #fff;
|
||||
}
|
||||
|
||||
> * {
|
||||
|
|
@ -557,3 +620,69 @@ figure {
|
|||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.poster-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 2 / 3;
|
||||
object-fit: cover;
|
||||
border: 6px solid var(--hg-bg);
|
||||
}
|
||||
|
||||
.uc {
|
||||
background-color: #000; color: #fff; padding: 0.5em 1em; position: absolute; right: 0; top: 0;
|
||||
}
|
||||
|
||||
.cover-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
object-fit: cover;
|
||||
border: 6px solid var(--hg-bg);
|
||||
}
|
||||
|
||||
.poster-placeholder {
|
||||
width: 100%;
|
||||
aspect-ratio: 4 / 5;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.home-grid {
|
||||
--hg-bg: #000;
|
||||
--hg-c: #fff;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 2em;
|
||||
margin-top: 4em;
|
||||
margin-bottom: 4em;
|
||||
|
||||
> * {
|
||||
display: flex; gap: 3px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
> *:focus-within,
|
||||
> *:hover {
|
||||
--hg-bg: #F05F00;
|
||||
--hg-c: #000;
|
||||
}
|
||||
|
||||
&.brutal {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.event-meta {
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
color: var(--hg-c);
|
||||
background-color: var(--hg-bg);
|
||||
padding: 6px;
|
||||
font-size: small;
|
||||
|
||||
time {
|
||||
color: #C0430D;
|
||||
}
|
||||
}
|
||||
|
||||
.home-search {
|
||||
padding: 3em 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ config :esbuild,
|
|||
version: "0.17.11",
|
||||
mse25: [
|
||||
args:
|
||||
~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/bl/* --external:/images/* --external:/*.{vcf,png,ico,pdf}),
|
||||
~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/bl/* --external:/images/* --external:/*.{vcf,png,ico,pdf,jpg}),
|
||||
cd: Path.expand("../assets", __DIR__),
|
||||
env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@
|
|||
</main>
|
||||
<%= if show_footer?(assigns) do %>
|
||||
<footer vocab="https://schema.org/" typeof="Person">
|
||||
<img src={~p"/images/mugshot.jpg"} property="image" alt="Anders, hösten 2021" />
|
||||
<img src={~p"/mugshot.jpg"} property="image" alt="Anders, hösten 2021" />
|
||||
<p>
|
||||
<a href="https://madr.se" property="url">madr.se</a>
|
||||
är hemsida åt <span property="name">Anders Englöf Ytterström</span>, en
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@ defmodule Mse25Web.PageController do
|
|||
|
||||
def home(conn, _params) do
|
||||
[most_recent_article, older_article] = Directus.get_articles!(limit: 2)
|
||||
recent_event = Directus.get_events!(limit: 1)
|
||||
upcoming_events = Directus.get_events!(limit: 2, upcoming: true)
|
||||
brutal_legends = Directus.get_albums!(limit: 1)
|
||||
recent_event = Directus.get_events!(limit: 3)
|
||||
upcoming_events = Directus.get_events!(limit: 3, upcoming: true)
|
||||
brutal_legends = Directus.get_albums!(limit: 8)
|
||||
|
||||
render(conn, :home,
|
||||
page_title: "Anders Englöf Ytterström",
|
||||
|
|
@ -142,4 +142,18 @@ defmodule Mse25Web.PageController do
|
|||
|> Map.to_list()
|
||||
|> Enum.sort(fn {a, _a}, {b, _b} -> b < a end)
|
||||
end
|
||||
|
||||
# redirect routes
|
||||
|
||||
def cv(conn, _params) do
|
||||
redirect(conn, to: ~p"/cv/anders-englof-ytterstrom.html")
|
||||
end
|
||||
|
||||
def brutal_legend(conn, _params) do
|
||||
redirect(conn, to: ~p"/bl/index.html")
|
||||
end
|
||||
|
||||
def mugshot(conn, _params) do
|
||||
redirect(conn, to: ~p"/images/mugshot.jpg")
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -1,12 +1,6 @@
|
|||
<div class="head">
|
||||
<h1><%= @page_title %></h1>
|
||||
<%= raw(@contents) %>
|
||||
<section id="map">
|
||||
<h2>Geografisk utspridning</h2>
|
||||
<figure>
|
||||
<div id="leaflet" class="interactive-map"></div>
|
||||
</figure>
|
||||
</section>
|
||||
<p>
|
||||
<%= if @nosearch? do %>
|
||||
Gå direkt till:
|
||||
|
|
@ -30,6 +24,14 @@
|
|||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<section id="map">
|
||||
<h2>Geografisk utspridning</h2>
|
||||
<figure>
|
||||
<div id="leaflet" class="interactive-map"></div>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<div class="bookmarks">
|
||||
<%= for {year, events} <- @events do %>
|
||||
<section class="card" id={"y" <> year}>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,27 @@
|
|||
<main class="landing">
|
||||
<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="uc">Under construction <a href="/2025/ombyggnation">Va?</a> 🚧</div>
|
||||
<div class="home-hero">
|
||||
<img src={~p"/mugshot.jpg"} alt="Anders, hösten 2021" />
|
||||
<h1 class="home-h1">Anders Englöf Ytterström</h1>
|
||||
<p>Webbutvecklare med 18 års erfarenhet, med särskilt intresse för tillgänglighet,
|
||||
containerteknik och webbstandarder. Hårdrockare och Linuxanvändare.</p>
|
||||
<div class="c2a">
|
||||
<a href="/cv">CV</a>
|
||||
<a href="/om">Om mig</a>
|
||||
<a href="https://github.com/madr" rel="external">Min Github</a>
|
||||
<a
|
||||
href="https://se.linkedin.com/in/anders-engl%C3%B6f-ytterstr%C3%B6m-0ba4452a2"
|
||||
rel="external"
|
||||
>
|
||||
Min LinkedIn
|
||||
</a>
|
||||
</div>
|
||||
<a href="/vad-jag-gor">
|
||||
Vad jag gör
|
||||
</a>
|
||||
</div>
|
||||
<div class="home-section articles-color">
|
||||
<h2>Blogginlägg</h2>
|
||||
<div class="home-articles">
|
||||
<a href={"/" <> @recent_article["slug"]}>
|
||||
<%= @recent_article["title"] %>
|
||||
|
|
@ -15,80 +35,89 @@
|
|||
<a href="/webblogg" class="list-link">Alla Webbloggens inlägg</a>
|
||||
</div>
|
||||
<div class="home-section events-color">
|
||||
<div class="home-articles">
|
||||
<%= for event <- @recent_event do %>
|
||||
<h2>Evenemang</h2>
|
||||
|
||||
<h3>Kommande evenemang</h3>
|
||||
<div class="home-events home-grid">
|
||||
<%= for event <- @upcoming do %>
|
||||
<article>
|
||||
<a href={event["slug"]}>
|
||||
<%= if event["poster"] do %>
|
||||
<img
|
||||
src={"https://n.madr.se/assets/" <> event["poster"] <> "?key=thumbnail"}
|
||||
src={"https://n.madr.se/assets/" <> event["poster"] <> "?key=poster"}
|
||||
alt="affisch"
|
||||
loading="lazy"
|
||||
class="poster-image"
|
||||
/>
|
||||
<% else %>
|
||||
<span class="poster-image poster-placeholder"></span>
|
||||
<% end %>
|
||||
<a href={event["slug"]} title={event["lead"]}>
|
||||
<%= event["title"] %>
|
||||
</a>
|
||||
<small><time><%= event["started_at"] %></time></small>
|
||||
<div class="event-meta">
|
||||
<div><time><%= event["started_at"] %></time></div>
|
||||
<div><%= event["title"] %></div>
|
||||
</div>
|
||||
</article>
|
||||
<% end %>
|
||||
<%= for event <- @upcoming do %>
|
||||
</div>
|
||||
|
||||
<h3>Besökta evenemang</h3>
|
||||
<div class="home-events home-grid">
|
||||
<%= for event <- @recent_event do %>
|
||||
<article>
|
||||
<a href={event["slug"]}>
|
||||
<%= if event["poster"] do %>
|
||||
<img
|
||||
src={"https://n.madr.se/assets/" <> event["poster"] <> "?key=thumbnail"}
|
||||
src={"https://n.madr.se/assets/" <> event["poster"] <> "?key=poster"}
|
||||
alt="affisch"
|
||||
loading="lazy"
|
||||
class="poster-image"
|
||||
/>
|
||||
<% else %>
|
||||
<span class="poster-image poster-placeholder"></span>
|
||||
<% end %>
|
||||
<%= event["title"] %>
|
||||
<small><time><%= event["started_at"] %></time></small>
|
||||
<% end %>
|
||||
</div>
|
||||
<a href="/evenemang" class="list-link">Evenemangstidslinje</a>
|
||||
<a href="/kommande-evenemang.ics" class="feed-link">Kommande evenemang</a>
|
||||
<small>.ics</small>
|
||||
</div>
|
||||
<a href="/delningar" class="list-link">
|
||||
Delningar
|
||||
</a>
|
||||
<div class="event-meta">
|
||||
<div><time><%= event["started_at"] %></time></div>
|
||||
<div><%= event["title"] %></div>
|
||||
</div>
|
||||
</article>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<p class="head">
|
||||
Se <a href="/evenemang" class="list-link">Evenemangstidslinje</a>
|
||||
för alla besökta evenemang.
|
||||
Vill du haka på? Prenumerera på
|
||||
<a href="/kommande-evenemang.ics" class="feed-link">Kommande evenemang</a>
|
||||
i din kalenderapp: kopiera länken och klistra in.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="home-section brutal-color">
|
||||
<h2>Brütal legends</h2>
|
||||
<div class="home-brutal home-grid brutal">
|
||||
<%= for legend <- @brutal_legends do %>
|
||||
<article>
|
||||
<a href={"/" <> legend["purchase_year"] <> "/brutal-legend-" <> legend["externalId"]}>
|
||||
<%= if legend["cover"] do %>
|
||||
<img
|
||||
src={"https://n.madr.se/assets/" <> legend["cover"] <> "?key=thumbnail"}
|
||||
class="cover-image"
|
||||
src={"https://n.madr.se/assets/" <> legend["cover"] <> "?key=legend"}
|
||||
alt="skivomslag"
|
||||
loading="lazy"
|
||||
/>
|
||||
<% end %>
|
||||
<a href={"/" <> legend["purchase_year"] <> "/brutal-legend-" <> legend["externalId"]}>
|
||||
<%= legend["artist"] %> - <%= legend["album"] %> (<%= legend["year"] %>)
|
||||
</a>
|
||||
</article>
|
||||
<% end %>
|
||||
<a href="/vad-jag-gor">
|
||||
Vad jag gör
|
||||
</a>
|
||||
<a href="/om">
|
||||
Anders, 39, Hårdrockare
|
||||
</a>
|
||||
<a href="/prenumerera.xml" class="feed-link">Prenumerera</a>
|
||||
<small>.rss</small>
|
||||
<a clasS="feed-link" href={~p"/aey.vcf"}>
|
||||
Kontakt
|
||||
</a>
|
||||
<small>.vcf</small>
|
||||
<form method="get" action="/sok" class="home-search">
|
||||
</div>
|
||||
<p>Dessa är de 8 senaste. <a href="/bl">Se alla skivorna</a></p>
|
||||
</div>
|
||||
<form method="get" action="/sok" class="home-section home-search">
|
||||
<div>
|
||||
<label for="q">Sök innehåll</label>: <input size="9" type="search" id="q" name="q" />
|
||||
<button>Sök</button>
|
||||
</div>
|
||||
</form>
|
||||
<ul class="profiles">
|
||||
<li><a href="/cv/anders-englof-ytterstrom.html">CV</a></li>
|
||||
<li><a href="https://github.com/madr">Github</a></li>
|
||||
<li>
|
||||
<a href="https://www.discogs.com/user/madrse/collection?limit=250&sort=artist&sort_order=asc&layout=big">
|
||||
Discogs
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/colophon">
|
||||
Kolofon
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -39,6 +39,10 @@ defmodule Mse25Web.Router do
|
|||
get "/events.json", FeedController, :events
|
||||
get "/kommande-evenemang.ics", FeedController, :calendar
|
||||
|
||||
get "/cv", PageController, :cv
|
||||
get "/bl", PageController, :brutal_legend
|
||||
get "/mugshot.jpg", PageController, :mugshot
|
||||
|
||||
get "/*path", ItemController, :index
|
||||
end
|
||||
|
||||
|
|
|
|||
BIN
priv/static/mugshot.jpg
Normal file
BIN
priv/static/mugshot.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Loading…
Add table
Reference in a new issue