diff options
Diffstat (limited to 'assets/css/main.css')
| -rw-r--r-- | assets/css/main.css | 348 |
1 files changed, 2 insertions, 346 deletions
diff --git a/assets/css/main.css b/assets/css/main.css index a17c9b3..c693221 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -25,7 +25,7 @@ --text-color: #1e1e1e; } -/* BASICS */ +/* BASE SETTINGS */ *, *::before, *::after { @@ -51,7 +51,7 @@ html { &[data-theme="dark"] { --bg-main: #0a234a; --bg-special: #1e4a73; - --glow: rgba(79, 195, 247, 0.24); + --glow: rgba(79, 195, 247, 0.24); --link-color: #4fc3f7; --link-hover: #039be5; --shadow-default: 0 2px 6px rgba(224, 224, 224, 0.15); @@ -220,347 +220,3 @@ p > code { width: fit-content; } -/* HEADER */ -.site__header { - display: flex; - align-items: center; - justify-content: space-around; - margin-bottom: var(--gap-medium); -} - -.site-selections, -.site-selections * { - display: flex; - align-items: center; - justify-content: center; - gap: var(--gap-medium); -} - -.site-title { - color: inherit !important; - font-size: var(--font-size-h1); - 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-max); - color: var(--bg-main); - cursor: pointer; - padding: 0.2rem; -} - -.theme-toggle svg { - display: none; -} - -/* SITE NAVMENU */ -.header__navigation { - background-color: var(--bg-special); - border-radius: var(--border-radius-default); - padding: var(--margin-padding-Y-small); -} - -.header__navigation-list { - display: flex; - align-items: center; - justify-content: space-evenly; - - @media (max-width: 768px) { - /* Grid items stretch to at least 100px or take up full width */ - display: grid; - grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); - justify-items: center; - gap: var(--gap-medium) var(--gap-small); - } -} - -.header__navigation-link--active { - color: var(--text-color); - text-decoration: none; -} - -/* FOOTER */ -.site__footer { - display: flex; - align-items: center; - justify-content: space-around; - margin-top: var(--gap-medium); - - @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-medium); - - @media (max-width: 768px) { - flex-wrap: wrap; - } -} - -/* Footer Icons */ -.follow-me-item img { - object-fit: contain; - height: 2rem; - width: 2rem; -} - -/* POST CARD */ -.post-card { - border: 3px solid var(--bg-special); - border-radius: var(--border-radius-default); - margin: 0 auto 1.5rem; - padding: 0 var(--gap-default); - width: 90%; - - & .post-card__title { - font-size: var(--font-size-default); - margin-top: var(--gap-default); - } - - & .post-card__meta { - display: flex; - align-items: center; - gap: var(--gap-small); - } - - & .post-card__meta, - .post-card__summary { - font-size: var(--font-size-small); - } - - & .post-card__meta-info { - margin-bottom: 0; - } - - @media (max-width: 768px) { - padding: 0 var(--gap-small); - } -} - -.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) !important; - - @media (max-width: 768px) { - flex-direction: column; - align-items: start; - } -} - -.post-card__tags-item { - background-color: var(--bg-special); - border-radius: var(--border-radius-max); - color: var(--text-color); - font-size: var(--font-size-small); - padding: 0.1rem 0.4rem; -} - -.post-card__section-badge { - background-color: var(--link-color); - border-radius: var(--border-radius-max); - color: var(--bg-main); - font-size: var(--font-size-small); - padding: 0.1rem 0.4rem; -} - -/* PAGES Content */ -.page-not-found { - text-align: center; -} - -/* Homepage */ -.homepage__header { - text-align: center; -} - -.homepage__header-image { - border: 4px solid var(--bg-special); - border-radius: var(--border-radius-max); - display: block; - margin: 1rem auto; - max-width: 150px; - max-height: 150px; -} - -/* Article */ -.post { - position: relative; /* Needed for post__scroll-top */ -} - -.post__content ol > li, -.post__content ul > li { - margin-bottom: var(--gap-small); -} - -.post__header { - margin-bottom: var(--gap-large); -} - -.post__navigation > hr { - height: 2px; - margin-bottom: var(--gap-large); -} - -.post__navigation-list { - display: flex; - align-items: center; - justify-content: space-between; - margin: 0 1rem !important; - - @media (max-width: 768px) { - flex-direction: column; - gap: var(--gap-default); - margin: 0 !important; - } -} - -.post__scroll-top { - background-color: var(--bg-special); - border-radius: var(--border-radius-max); - box-shadow: var(--shadow-default); - cursor: pointer; - display: inline-flex; - align-items: center; - justify-content: center; - height: 2.5rem; - width: 2.5rem; - position: absolute; - bottom: 6rem; - right: 0; - z-index: 1000; - - & svg { - height: 2rem; - width: 2rem; - padding-bottom: 0.2rem; - } - - /* Arrow up */ - & svg > path { - stroke: var(--text-color); - - &:hover { - stroke: var(--bg-main); - } - } - - &:hover { - background-color: var(--link-hover); - } -} - -.post__tags { - margin: var(--margin-padding-Y-big); -} - -.post__tags-heading { - font-weight: bold; -} - -.post__tags-list { - display: flex; - gap: var(--gap-default); - - @media (max-width: 768px) { - flex-direction: column; - } -} - -.post__tags-link { - font-weight: normal; -} - -/* List navigation */ -.pagination { - display: flex; - align-items: center; - justify-content: space-between; -} - -.recent-posts__view-all-link, -.tag-page__view-all-link { - display: block; - margin: 0 auto; - width: max-content; -} - -.tags-index__list > li { - margin-bottom: var(--gap-small); -} - -/* Search */ -.search-form__input { - font-size: var(--font-size-default); - border: 1px solid var(--bg-special); - border-radius: var(--border-radius-minimal); - margin-right: var(--gap-small); - padding: 0.2rem; - height: var(--font-size-h1); - width: 50%; - - &:focus { - border-color: var(--link-color); - box-shadow: var(--glow); - outline: none; - } - - @media (max-width: 768px) { - width: 90%; - } -} - -.search-form__reset { - background-color: var(--bg-special); - border: none; - border-radius: var(--border-radius-max); - box-shadow: var(--shadow-default); - color: var(--text-color); - font-size: var(--font-size-default); - font-weight: bold; - padding: 0.1rem 0.5rem 0.3rem 0.5rem; - - &:hover { - background-color: var(--link-hover); - color: var(--bg-main); - cursor: pointer; - } -} - -.search-input { - width: 30vw; - - @media (max-width: 768px) { - width: 100vw; - } -} - -.search-results__count { - font-weight: bold; - margin: var(--margin-padding-Y-default); -} |
