diff --git a/assets/app.css b/assets/app.css index 875ef8e..a760d9f 100644 --- a/assets/app.css +++ b/assets/app.css @@ -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 { diff --git a/lib/mse25_web/components/breadcrumbs.ex b/lib/mse25_web/components/breadcrumbs.ex new file mode 100644 index 0000000..d396b59 --- /dev/null +++ b/lib/mse25_web/components/breadcrumbs.ex @@ -0,0 +1,54 @@ +defmodule Mse25Web.Breadcrumbs do + use Mse25Web, :html + + def breadcrumbs_html(assigns) do + ~H""" +
+ Du är här: + + + + madr.se + + + + <%= for {index, {parent_slug, parent_name}} <- breadcrumbs(@trail) do %> + > + + + <%= parent_name %> + + + + <% end %> + +
+ """ + 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 diff --git a/lib/mse25_web/components/layouts.ex b/lib/mse25_web/components/layouts.ex index 5b68d48..204d005 100644 --- a/lib/mse25_web/components/layouts.ex +++ b/lib/mse25_web/components/layouts.ex @@ -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 diff --git a/lib/mse25_web/components/layouts/app.html.heex b/lib/mse25_web/components/layouts/app.html.heex index a463244..bcdd6ee 100644 --- a/lib/mse25_web/components/layouts/app.html.heex +++ b/lib/mse25_web/components/layouts/app.html.heex @@ -1,46 +1,61 @@ - +
+ +
-
- Du är här: - - - - madr.se - - - - <%= for {index, {parent_slug, parent_name}} <- breadcrumbs(@breadcrumbs) do %> - > - - - <%= parent_name %> - - - - <% end %> - -
<%= @inner_content %>
<%= if show_footer?(assigns) do %> -