Styling

1 files changed, 325 insertions, 0 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);
+}