Add styling that improves readability

- article content with a max-width
- index and post index page now contain articles
- code sections are bordered, indented and padded
- figure captions are centered along with the images
- h2 margin is only removed on the post index page; page-link's
- main with extra space at the bottom to allow scolling past content
master
Raymon Zutekouw 1 year ago
parent 703de1a894
commit a798f58c7d
Signed by: raymon
GPG Key ID: 0E62222846283925
  1. 2
      client/gen.exs
  2. 25
      client/public/assets/styling/general.css
  3. 21
      client/public/index.lisp
  4. 7
      client/templates/post_index_page.lisp

@ -94,7 +94,7 @@ index_file =
|> Enum.sort_by(fn {d, _c} -> ((length months) * elem(Integer.parse(String.slice(d, 4..7)), 0)) + Enum.find_index(months, &(&1 == String.slice(d, 0..2))) end)
|> Enum.reverse()
|> Enum.map(fn {month, posts} -> "\n<h1>" <> month <> "</h1>\n" <> (posts |>
Enum.map(fn post -> "<h2>" <> (Map.get(post, :date) |> String.slice(0..6)) <>
Enum.map(fn post -> "<h2 class=\"post-link\">" <> (Map.get(post, :date) |> String.slice(0..6)) <>
" - <a href=\"" <> Map.get(post, :localpath) <> ".html\">" <> Map.get(post, :title) <> "</a></h2>"
end) |> Enum.join("\n")) end)
|> Enum.join("\n")

@ -17,6 +17,28 @@ nav {
border-bottom-right-radius: 5px;
}
main {
padding-bottom: 12em;
}
article {
max-width: 1000px;
margin: auto;
}
pre {
padding: 1em;
padding-left: 2em;
border: solid;
border-radius: 1em;
border-width: 1px;
border-color: var(--text-color);
}
.figure > p {
text-align: center;
}
.question {
font-style: italic;
}
@ -27,6 +49,9 @@ h1 {
h2 {
font-size: 1.25em;
}
.post-link {
margin: auto 0;
}

@ -22,14 +22,15 @@
(a :href "/" "Home") "|"
(a :href "/posts" "Posts") "|"
(a :href "/qa" "QA"))
(header
(h1 "Home"))
(p "Hi there, good to see you on my website.
My name is Raymon Zutekouw; Self-taught programmer by heart.")
(p "Building software and exploring the wide variety of tools (or making them) is my passion.
To see it in action, checkout the stuff I make on "
(a :href "https://github.com/Raymonzut" "GitHub."))
(article
(header
(h1 "Home"))
(p "Hi there, good to see you on my website.
My name is Raymon Zutekouw; Self-taught programmer by heart.")
(p "Building software and exploring the wide variety of tools (or making them) is my passion.
To see it in action, checkout the stuff I make on "
(a :href "https://github.com/Raymonzut" "GitHub."))
(p "The projects that may be useful to others are open source; for inspiring others and improving each others work.
That is why I am a huge fan of "
(a :href "https://www.gnu.org/philosophy/free-sw.en.html" "free software")))))
(p "The projects that may be useful to others are open source; for inspiring others and improving each others work.
That is why I am a huge fan of "
(a :href "https://www.gnu.org/philosophy/free-sw.en.html" "free software"))))))

@ -22,6 +22,7 @@
(a :href "/" "Home") "|"
(a :href "/posts" "Posts") "|"
(a :href "/qa" "QA"))
(header
(h1 "Post listing"))
"{{index}}")))
(article
(header
(h1 "Post listing"))
"{{index}}"))))

Loading…
Cancel
Save