diff --git a/assets/app.css b/assets/app.css index dcc6d00..55bb4fb 100644 --- a/assets/app.css +++ b/assets/app.css @@ -7,7 +7,7 @@ html { color: var(--color); background-color: var(--bgcolor); - background-image: linear-gradient(#000, #201 50%); + background-image: linear-gradient(#000, #201 333px); font: normal small/1.5 apple-system, system-ui, @@ -21,6 +21,7 @@ html { body { margin: 0; + min-height: 100vh; } h1, @@ -42,8 +43,11 @@ h3 { } main { + background-color: #000; margin: 0 auto; - max-width: 33em; + max-width: 40em; + box-sizing: border-box; + padding: 3em; } .flx { @@ -59,17 +63,31 @@ main { margin: 1em auto; display: flex; flex-direction: column; - gap: 0.75em; + gap: 0.5em; > * { - padding: 1em 2em; + padding: 0.5em 1em; border-radius: 5px; background-color: rgba(128, 128, 128, 0.1); + + &:focus-within { + background-color: rgba(128, 128, 128, 0.25); + } } > :nth-child(even) { text-align: right; } + + a { + color: #fff; + text-decoration: none; + + &:hover, + &:focus { + text-decoration: underline; + } + } } .landing { @@ -78,12 +96,100 @@ main { flex-direction: column; justify-content: center; align-items: center; - background-color: #000; padding: 3em; box-sizing: border-box; + gap: 3em; } -a { - color: #fff; - text-decoration: none; +.breadcrumbs { + list-style: none; + padding-left: 0; + + > li { + display: inline; + + &:after { + content: " /"; + } + } +} + +.article { + font-size: large; + box-sizing: border-box; + + > pre { + margin: 2em 0; + background-color: #022; + overflow-y: auto; + padding: 0.33em; + box-shadow: 4px 4px 0 #333; + position: relative; + line-height: 1.2; + font-size: 0.8em; + + > button { + position: absolute; + top: 0.25em; + right: 0.25em; + } + } + + > footer { + font-style: italic; + text-align: right; + font-size: 0.8em; + } +} + +code { + font-family: "JetBrains mono", monaco, menlo, meslo, "Courier New", Courier, + monospace; +} + +.sticky { + position: sticky; + top: 0; +} + +section { + position: relative; +} + +.months { + grid-auto-flow: column; + display: grid; + list-style: none; + grid-template-rows: repeat(6, 1fr); + gap: 0.5em; + padding-left: 0; + margin: 3em 0; +} + +section > h2 { + background: #000; + padding: 1em 0; +} + +.articles { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3em; + grid-auto-rows: 1fr; + + > * { + display: flex; + flex-direction: column; + justify-content: flex-end; + border-top: 6px solid red; + + &:focus-within { + background-color: #333; + } + } + + date { + border-top: 1px solid crimson; + padding: 0.25em 0.5em; + } } diff --git a/lib/mse25_web/components/layouts/app.html.heex b/lib/mse25_web/components/layouts/app.html.heex index a4f3d66..7ffbd85 100644 --- a/lib/mse25_web/components/layouts/app.html.heex +++ b/lib/mse25_web/components/layouts/app.html.heex @@ -1,32 +1,17 @@ -madr
-|> Hårdrock
-|> Programmering
-|> Ljudteknik
-|> Åsikter - - - -
- -
- - - -<%= @inner_content %> - +
+ <%= @inner_content %> +
+ diff --git a/lib/mse25_web/components/layouts/root.html.heex b/lib/mse25_web/components/layouts/root.html.heex index 6614630..bdb8948 100644 --- a/lib/mse25_web/components/layouts/root.html.heex +++ b/lib/mse25_web/components/layouts/root.html.heex @@ -4,9 +4,7 @@ - <.live_title suffix=" · Phoenix Framework"> - <%= assigns[:page_title] || "Mse25" %> - + <%= assigns[:page_title] || "Anders Englöf Ytterström" %> diff --git a/lib/mse25_web/controllers/page_controller.ex b/lib/mse25_web/controllers/page_controller.ex index 5456de5..daa30e9 100644 --- a/lib/mse25_web/controllers/page_controller.ex +++ b/lib/mse25_web/controllers/page_controller.ex @@ -1,7 +1,6 @@ defmodule Mse25Web.PageController do use Mse25Web, :controller - alias Logger.Backends.Console alias Mse25.Directus def home(conn, _params) do @@ -10,6 +9,7 @@ defmodule Mse25Web.PageController do upcoming_events = Directus.get_events!(limit: 1, upcoming: true) render(conn, :home, + page_title: "Anders Englöf Ytterström @ madr.se", layout: false, recent_article: most_recent_article, older_article: older_article, @@ -17,4 +17,20 @@ defmodule Mse25Web.PageController do upcoming: upcoming_events ) end + + def articles(conn, _params) do + articles = Directus.get_articles!(limit: 9999) |> group_annually + + render(conn, :articles, + page_title: "Webblogg", + articles: articles + ) + end + + defp group_annually(items) do + items + |> Enum.group_by(fn %{"slug" => slug} -> String.slice(slug, 0..3) end) + |> Map.to_list() + |> Enum.sort(fn {a, _a}, {b, _b} -> b < a end) + end end diff --git a/lib/mse25_web/controllers/page_html/articles.html.heex b/lib/mse25_web/controllers/page_html/articles.html.heex new file mode 100644 index 0000000..1c7b60f --- /dev/null +++ b/lib/mse25_web/controllers/page_html/articles.html.heex @@ -0,0 +1,36 @@ +
+
    +
  1. + + madr.se + + +
    2. +
+

Webblogg

+

+ Inlägg skrivna sedan 2006. Gå direkt till: +

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

<%= year %>

+
+ <%= for article <- articles do %> + + <% end %> +
+
+ <% end %> +
diff --git a/lib/mse25_web/router.ex b/lib/mse25_web/router.ex index bc0203d..062178a 100644 --- a/lib/mse25_web/router.ex +++ b/lib/mse25_web/router.ex @@ -23,11 +23,9 @@ defmodule Mse25Web.Router do # get "/kommande-evenemang.ics", EventController, :calendar # get "/event-map.js", EventController, :interactive_map - # get "/webblogg", ArticleController, :index - # get "/webblogg/prenumerera.xml", ArticleController, :feed + get "/webblogg", PageController, :articles # get "/delningar", ShareController, :index - # get "/delningar/prenumerera.xml", ShareController, :feed # get "/:year", TimelineController, :annual # get "/prenumerera.xml", TimelineController, :feed