Styling

13 files changed, 341 insertions, 18 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index e69de29..ce74245 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -0,0 +1,325 @@
+/* VARIABLES with default LIGHT MODE */
+:root {
+    --bg-main: #fffff0;
+    --bg-special: #f4e3b2;
+    --border-radius: 50px;
+    --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
+    --font-size-default: 1rem;
+    --font-size-large: 2rem;
+    --font-size-smaller: 0.9rem;
+    --gap-default: 1rem;
+    --line-height-default: 1.5;
+    --line-height-larger: 2;
+    --link-color: #996100;
+    --link-hover: #704100;
+    --margin-padding-Y-default: 1rem 0;
+    --margin-padding-Y-big: 2rem 0;
+    --margin-padding-Y-small: 0.5rem 0;
+    --text-color: #1e1e1e;
+}
+
+/* BASICS */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    font-family: var(--font-family);
+    font-size: var(--font-size-default);
+    scroll-behavior: smooth;
+
+    & .theme-toggle .icon-moon {
+        display: block;
+    }
+
+    & .theme-toggle .icon-sun {
+        display: none;
+    }
+
+    /* DARK MODE */
+    &[data-theme="dark"] {
+        --bg-main: #0a234a; /* #031636 */
+        --bg-special: #173d5a;
+        --link-color: #4fc3f7;
+        --link-hover: #039be5;
+        --text-color: #e0e0e0;
+
+        & .theme-toggle .icon-moon {
+            display: none;
+        }
+
+        & .theme-toggle .icon-sun {
+            display: block;
+        }
+    }
+}
+
+body {
+    background-color: var(--bg-main);
+    color: var(--text-color);
+    display: grid;
+    grid-template-rows: auto auto 1fr auto; /* Ensure header & navmenu at top, main taking up main space, footer at bottom */
+    line-height: var(--line-height-default);
+    min-height: 100vh;
+}
+
+main {
+    margin: 3rem;
+
+    @media (max-width: 768px) {
+        margin: 1rem;
+    }
+}
+
+a {
+    color: var(--link-color);
+    font-weight: bold;
+
+    &:hover {
+        color: var(--link-hover);
+        text-decoration: none;
+    }
+}
+
+blockquote {
+    line-height: 3;
+}
+
+h1 {
+    margin-bottom: 1rem;
+}
+
+h2, h3, h4, h5, h6 {
+    margin-bottom: 0.5rem;
+}
+
+header {
+    margin: var(--margin-padding-Y-default);
+}
+
+hr {
+    color: var(--text-color);
+}
+
+ul {
+    list-style: none;
+}
+
+section {
+    margin: var(--margin-padding-Y-default);
+}
+
+time {
+    font-style: italic;
+}
+
+::selection {
+    background-color: var(--link-color);
+    color: var(--bg-main);
+}
+
+/* Code block */
+.highlight {
+    margin: 1rem;
+    width: fit-content;
+
+    & code {
+        white-space: wrap;
+    }
+
+    & > pre {
+        padding: 0.5rem;
+    }
+}
+
+/* HEADER */
+.site__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    padding: var(--margin-padding-Y-default);
+}
+
+.site-selections,
+.site-selections * {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--gap-default);
+}
+
+.site-title {
+    color: inherit !important;
+    font-size: var(--font-size-large);
+    font-weight: bold;
+    text-decoration: none;
+}
+
+/* Flag Icon */
+.language-select__language-item img {
+    height: 2rem;
+}
+
+.theme-toggle {
+    background-color: var(--text-color);
+    border: none;
+    border-radius: var(--border-radius);
+    color: var(--bg-main);
+    cursor: pointer;
+    padding: 0.2rem;
+}
+
+.theme-toggle svg {
+    display: none;
+}
+
+/* SITE NAVMENU */
+.header__navigation {
+    background-color: var(--bg-special);
+    padding: var(--margin-padding-Y-small);
+}
+
+.header__navigation-list {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    @media (max-width: 768px) {
+        flex-direction: column;
+    }
+}
+
+.header__navigation-link--active {
+    color: var(--text-color);
+    text-decoration: none;
+}
+
+/* FOOTER */
+.site__footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    @media (max-width: 768px) {
+        flex-direction: column;
+        gap: var(--gap-default);
+    }
+}
+
+.follow-me-list {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--gap-default);
+
+    @media (max-width: 768px) {
+        flex-direction: column;
+    }
+}
+
+/* Footer Icons */
+.follow-me-item img {
+    height: 2rem;
+}
+
+/* POST CARD */
+.post-card {
+    margin-bottom: 1rem;
+}
+
+.post-card__header {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    justify-content: center;
+    gap: 0.5rem;
+    margin: var(--margin-padding-Y-small);
+}
+
+.post-card__tags-list {
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    gap: var(--gap-default);
+    margin: var(--margin-padding-Y-default);
+
+    @media (max-width: 768px) {
+        flex-direction: column;
+        align-items: start;
+    }
+}
+
+.post-card__tags-item {
+    background-color: var(--bg-special);
+    border-radius: var(--border-radius);
+    color: #fff;
+    font-size: var(--font-size-smaller);
+    padding: 0.1rem 0.4rem;
+}
+
+/* PAGES */
+.article__navigation-list {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 3rem;
+
+    @media (max-width: 768px) {
+        margin: 0;
+    }
+}
+
+.article__tags {
+    margin: var(--margin-padding-Y-big);
+}
+
+.article__tags-list {
+    display: flex;
+    gap: var(--gap-default);
+
+    @media (max-width: 768px) {
+        flex-direction: column;
+    }
+}
+
+.article__tags-link {
+    font-weight: normal;
+}
+
+.tags-index__list {
+    line-height: var(--line-height-larger);
+}
+
+.search-form__input {
+    font-size: var(--font-size-default);
+    border: 1px solid var(--bg-special);
+    border-radius: 5px;
+    padding: 0.2rem;
+}
+
+.search-form__reset {
+    background-color: var(--bg-special);
+    border: none;
+    border-radius: var(--border-radius);
+    color: var(--text-color);
+    font-size: var(--font-size-default);
+    font-weight: bold;
+    padding: 0.2rem 0.5rem;
+}
+
+.search-input {
+    width: 30vw;
+
+    @media (max-width: 768px) {
+        width: 100vw;
+    }
+}
+
+.search-results__count {
+    font-weight: bold;
+    margin: var(--margin-padding-Y-default);
+}
diff --git a/assets/js/main.js b/assets/js/main.js
index 08cfcf5..dfb6d75 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -18,8 +18,6 @@
 
             rootHtml.setAttribute("data-theme", theme);
             toggleThemeBtn.setAttribute("aria-label", label);
-            toggleThemeBtn.querySelector(".icon-moon").style.display = isDarkMode ? "none" : "block";
-            toggleThemeBtn.querySelector(".icon-sun").style.display = isDarkMode ? "block" : "none";
         }
 
         // Apply initial theme
@@ -76,7 +74,7 @@
                 link.href = post.url;
                 link.tile = post.title;
 
-                const date = li.querySelector(".post-card__date");
+                const date = li.querySelector(".post-card__publish-date");
                 date.textContent = new Date(post.date).toLocaleDateString();
                 date.setAttribute("datetime", post.date);
 
diff --git a/layouts/_default/search.html b/layouts/_default/search.html
index 569cc9a..7ddaba2 100644
--- a/layouts/_default/search.html
+++ b/layouts/_default/search.html
@@ -18,7 +18,7 @@
 
     <section class="search-page__container" aria-label="{{ lang.Translate "search.label" | default "Search all posts" }}">
         <form id="search-form" class="search-form" role="search" autocomplete="off">
-            <label for="search-input" class="search-form__label">
+            <label for="search-input" class="search-form__label" hidden>
                 {{ lang.Translate "search.label" | default "Search all posts" }}
             </label>
             <div class="search-form__input-wrapper">
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 9b66758..a0a30b2 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -15,7 +15,6 @@
                     <img
                         src="{{ .icon }}"
                         class="icon icon-{{ lower .name }}"
-                        style="max-height: 32px"
                         alt="{{ .name }}"
                         aria-hidden="true"
                     />
@@ -32,7 +31,6 @@
                     <img
                         src="/rss.svg"
                         class="icon icon-rss"
-                        style="max-height: 32px"
                         alt="RSS Feed"
                         aria-hidden="true"
                     />
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 0f3cfce..f38b6f2 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -7,6 +7,8 @@
         {{- end }}
     </a>
 
+    <div class="site-selections">
     {{- partial "select-theme.html" . }}
     {{- partial "select-language.html" . }}
+    </div>
 </header>
diff --git a/layouts/partials/list/post-card.html b/layouts/partials/list/post-card.html
index 12eada4..75be9ce 100644
--- a/layouts/partials/list/post-card.html
+++ b/layouts/partials/list/post-card.html
@@ -7,7 +7,7 @@
             </a>
         </h3>
         <div class="post-card__meta">
-            <time datetime="{{ $post.Date.Format "2006-01-02T15:04:05Z07:00" }}" class="post-card__date">
+            <time datetime="{{ $post.Date.Format "2006-01-02T15:04:05Z07:00" }}" class="post-card__publish-date">
                 {{ $post.Date | time.Format ":date_medium" }}
             </time>
             {{- with $post.ReadingTime }}
@@ -41,5 +41,6 @@
                 {{- end }}
             </ul>
         </footer>
+        <hr />
     {{- end }}
 </article>
diff --git a/layouts/partials/select-language.html b/layouts/partials/select-language.html
index 752b605..6efcc61 100644
--- a/layouts/partials/select-language.html
+++ b/layouts/partials/select-language.html
@@ -9,15 +9,15 @@ These variables - together with the explicit naming of `.` context variables in
 {{- if gt (len site.Languages) 1 }}
 {{- $activeLang := .Lang }}
 {{- $allTranslationsForPage := .Translations }}
-    <div class="language-select" style="background-color: yellow;">
-        <ul>
+    <div class="language-select">
+        <ul class="language-select__language-list">
         {{- range site.Languages }}
             {{- $currLangSlice := . }}
             {{- if ne $currLangSlice.Lang $activeLang }}
                 {{- $targetPage := index (where site.Home.Translations "Lang" $currLangSlice.Lang) 0 }}
                 {{- $translatedPage := index (where $allTranslationsForPage "Lang" $currLangSlice.Lang) 0 }}
                 {{- if $translatedPage }}{{- $targetPage = $translatedPage }}{{- end }}
-                <li>
+                <li class="language-select__language-item">
                     <a
                         href="{{ $targetPage.RelPermalink }}"
                         hreflang="{{ $targetPage.Lang }}"
@@ -26,7 +26,6 @@ These variables - together with the explicit naming of `.` context variables in
                         <img
                             src="/flags/{{ $targetPage.Lang }}.svg"
                             class="icon icon-flag"
-                            style="max-height: 32px"
                             alt="{{ $targetPage.LinkTitle }} ({{ or $targetPage.Language.LanguageName $targetPage.Lang }})"
                             aria-hidden="true"
                         />
diff --git a/layouts/partials/select-theme.html b/layouts/partials/select-theme.html
index e9114cc..443e056 100644
--- a/layouts/partials/select-theme.html
+++ b/layouts/partials/select-theme.html
@@ -6,7 +6,7 @@
     data-label-dark="{{ lang.Translate "theme.toggle_dark" }}"
     data-label-light="{{ lang.Translate "theme.toggle_light" }}"
 >
-        <svg class="icon icon-moon" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 16 16" aria-hidden="true" style="display: none;">
+        <svg class="icon icon-moon" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 16 16" aria-hidden="true">
             <path fill="currentColor" d="M6 .278a.768.768 0 0 1 .08.858a7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277c.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316a.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71C0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"></path>
         </svg>
         <svg class="icon icon-sun" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 16 16" aria-hidden="true">
diff --git a/layouts/partials/single/next-prev.html b/layouts/partials/single/next-prev.html
index c938990..1c0b462 100644
--- a/layouts/partials/single/next-prev.html
+++ b/layouts/partials/single/next-prev.html
@@ -5,7 +5,7 @@
             <li class="post__navigation-prev">
                 <a href="{{ .RelPermalink }}" class="post__navigation-link" rel="prev">
                     <span class="post__navigation-label">
-                        {{ lang.Translate "post.previous" | default "Previous post:" }}
+                        &larr; {{ lang.Translate "post.previous" | default "Previous post:" }}
                     </span>
                     <span class="post__navigation-title">
                         {{ .Title }}
@@ -21,7 +21,7 @@
                         {{ lang.Translate "post.next" | default "Next post:" }}
                     </span>
                     <span class="post__navigation-title">
-                        {{ .Title }}
+                        &rarr; {{ .Title }}
                     </span>
                 </a>
             </li>
diff --git a/layouts/partials/single/tags.html b/layouts/partials/single/tags.html
index f9c8105..0451c2e 100644
--- a/layouts/partials/single/tags.html
+++ b/layouts/partials/single/tags.html
@@ -8,7 +8,7 @@
         {{- range . }}
             <li class="post__tags-item">
                 <a href="{{ .RelPermalink }}" class="post__tags-link" rel="tag">
-                    {{ .Title }}
+                    #{{ .Title }}
                 </a>
             </li>
         {{- end }}
diff --git a/layouts/tags/term.html b/layouts/tags/term.html
index 1e0dba7..d3d8b6a 100644
--- a/layouts/tags/term.html
+++ b/layouts/tags/term.html
@@ -34,7 +34,7 @@
     <footer class="tag-page__footer">
         <nav class="tag-page__navigation" aria-label="{{ lang.Translate "tags.navigation" | default "Tag navigation" }}">
             <a href="{{ .Parent.RelPermalink }}" class="tag-page__list-all-link">
-                ← {{ lang.Translate "tags.all_tags" | default "All tags" }}
+                &larr; {{ lang.Translate "tags.all_tags" | default "All tags" }}
             </a>
         </nav>
     </footer>
diff --git a/static/flags/de.svg b/static/flags/de.svg
index 9fc1a16..b1e8de1 100644
--- a/static/flags/de.svg
+++ b/static/flags/de.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Source: SVG Repo, https://www.svgrepo.com/svg/405490/flag-for-flag-germany -->
-<svg width="800px" height="800px" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--twemoji" preserveAspectRatio="xMidYMid meet">
+<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--twemoji" preserveAspectRatio="xMidYMid meet">
     <path fill="#FFCD05" d="M0 27a4 4 0 0 0 4 4h28a4 4 0 0 0 4-4v-4H0v4z"></path>
     <path fill="#ED1F24" d="M0 14h36v9H0z"></path>
     <path fill="#141414" d="M32 5H4a4 4 0 0 0-4 4v5h36V9a4 4 0 0 0-4-4z"></path>
diff --git a/static/flags/en.svg b/static/flags/en.svg
index 0ea496a..f5e0332 100644
--- a/static/flags/en.svg
+++ b/static/flags/en.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Source: SVG Repo, https://www.svgrepo.com/svg/508511/flag-gb -->
-<svg width="800px" height="800px" viewBox="0 -4 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 -4 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_503_2952)">
         <rect width="28" height="20" rx="2" fill="white"/>
         <mask id="mask0_503_2952" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="28" height="20">