diff options
| -rw-r--r-- | _includes/banner.liquid | 1 | ||||
| -rw-r--r-- | _includes/language_select_button.liquid | 4 | ||||
| -rw-r--r-- | assets/css/styles.css | 129 |
3 files changed, 132 insertions, 2 deletions
diff --git a/_includes/banner.liquid b/_includes/banner.liquid index e7794a4..2dc05e9 100644 --- a/_includes/banner.liquid +++ b/_includes/banner.liquid @@ -30,6 +30,7 @@ <path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/> </svg> </a> + {% include language_select_button.liquid %} <a href="https://git.silosneeded.com/cgit/blog.git" class="button is-link"> {{ site.data[site.active_lang].strings.global.source_code }} </a> diff --git a/_includes/language_select_button.liquid b/_includes/language_select_button.liquid index 696dab3..28140fa 100644 --- a/_includes/language_select_button.liquid +++ b/_includes/language_select_button.liquid @@ -1,6 +1,6 @@ -<div class="dropdown is-up mr-2"> +<div class="dropdown is-down mr-2"> <div class="dropdown-trigger"> - <button class="button is-primary has-text-white" aria-haspopup="true" id="language-select-button" aria-controls="language-selection"> + <button class="button is-link" aria-haspopup="true" id="language-select-button" aria-controls="language-selection"> <span>{{ site.data[site.active_lang].strings.global.language }}</span> <span class="icon is-small"> <i class="bi bi-chevron-up"></i> diff --git a/assets/css/styles.css b/assets/css/styles.css index d8939fd..1a8e3a1 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -126,6 +126,135 @@ } } +@media(prefers-color-scheme: dark) { + :root { + --bulma-primary-h: 213deg; + --bulma-primary-s: 17%; + --bulma-info-h: 286deg; + --bulma-info-s: 66%; + --bulma-info-l: 35%; + --bulma-body-color: #EBEBEB; + } + + body { + background: #2F2F37; + } + + .navigation { + align-items: center; + display: flex; + flex-grow: 0; + flex-shrink: 0; + line-height: 1.5; + padding: .5rem .75rem; + position: relative; + color: #F4FAFF; + } + + .navigation:hover { + color: #43AA8B; + } + + .svg-icon:hover { + fill: #43AA8B; + } + + .is-info-button { + color: #F4FAFF; + } + + a.svg { + position: relative; + display: inline-block; + } + + a.svg:after { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left:0; + } + + .rss-icon { + width: 100%; + max-width: 8rem; + height: auto; + } + + .svg-icon-body { + width: .8rem; + height: .8rem; + fill: #EBEBEB; + } + + .post-summary { + border-bottom: 1px solid #56667A; + } + + .footer-content { + color: #F4FAFF !important; + } + + .caption { + color: #E0E0E0; + } + + a.footer-url { + color: #F4FAFF; + } + + a.footer-url:hover { + color: #43AA8B; + } + + a.index-post-title { + color: #F5F5F5; + } + + a.index-post-title:hover { + color: #2191FB; + } + + a.archive-post-title { + color: #F5F5F5; + } + + a.archive-post-title:hover { + color: #2191FB; + } + + footer { + background: #56667A !important; + } + + p { + color: #F5F5F5; + } + + a { + color: #2191FB; + } + + h1 { + color: #2191FB !important; + } + + h2 { + color: #AB4967 !important; + } + + li { + color: #F5F5F5; + font-size: 1.2rem; + } + + li::marker { + color: #2191FB; + } +} + .page-title { font-size: var(--bulma-size-3); } |