From 161589fd3e869bb8773eb116e907b7317427f48f Mon Sep 17 00:00:00 2001 From: zaaarf Date: Mon, 25 Dec 2023 02:39:41 +0100 Subject: [PATCH] feat: responsive website --- sass/_code.scss | 2 +- sass/_header.scss | 50 +++++++++++++++++++++++++++++++++ sass/_home.scss | 34 ++++++++++++++-------- sass/_logo.scss | 64 +++++++++++++++++++++--------------------- sass/_main.scss | 48 +++++++++---------------------- sass/style.scss | 1 + templates/header.html | 12 ++++---- templates/index.html | 4 +-- templates/section.html | 2 +- 9 files changed, 131 insertions(+), 86 deletions(-) create mode 100644 sass/_header.scss diff --git a/sass/_code.scss b/sass/_code.scss index aa401f1..b06bf7b 100644 --- a/sass/_code.scss +++ b/sass/_code.scss @@ -5,7 +5,7 @@ pre { padding: 1rem; font-style: monospace; text-align: left; - white-space: pre-wrap; + overflow-x: scroll; } p code, diff --git a/sass/_header.scss b/sass/_header.scss new file mode 100644 index 0000000..df6eea6 --- /dev/null +++ b/sass/_header.scss @@ -0,0 +1,50 @@ +.navBar { + padding: 1rem 0 0 0; + gap: .4rem; + flex-wrap: wrap; + + .navBarRight { + float: right; + + a { + padding: 0; + } + } + + div.themeButton { + float: right; + padding: 0 0 0 1em; + + button { + cursor: pointer; + border: none; + background: transparent; + } + } +} + +.dark .themeButton.dark, +.themeButton.light { + display: none +} + +.dark .themeButton.light { + display: block +} + +@media (max-width: 650px) { + .navBar { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + + .navBarRight { + float: center; + } + + .themeButton { + float: center; + } + } +} diff --git a/sass/_home.scss b/sass/_home.scss index 492eb37..1a9649e 100644 --- a/sass/_home.scss +++ b/sass/_home.scss @@ -1,16 +1,27 @@ -div.home { - margin-top: 35%; - margin-bottom: 15%; - text-align: center; +div.homeContainer { + width: 100%; + height: 100%; + display: flex; - h1 { - margin: 0; - font-size: 4rem; - color: var(--fgColor); - background-color: var(--bgColor); + div.home { + margin: 35% auto; + text-align: center; - &::before { - content: none; + h1 { + margin: 0; + font-size: 4rem; + color: var(--fgColor); + background-color: var(--bgColor); + + &::before { + content: none; + } + } + } + + @media (max-width: 650px) { + div.home { + margin: auto auto; } } } @@ -19,3 +30,4 @@ a.socialIcon { padding: .2em .3em 0 .3em; font-size: 32px; } + diff --git a/sass/_logo.scss b/sass/_logo.scss index dcdfc48..f70245d 100644 --- a/sass/_logo.scss +++ b/sass/_logo.scss @@ -1,44 +1,44 @@ .logo { - display: flex; - align-items: center; - text-decoration: none; - font-weight: bold; - font-display: auto; - font-family: monospace, monospace; + display: flex; + align-items: center; + text-decoration: none; + font-weight: bold; + font-display: auto; + font-family: monospace, monospace; - img { - height: 44px; - } + img { + height: 44px; + } - &__mark { - margin-right: 5px; - } + &__mark { + margin-right: 5px; + } - &__text { - white-space: nowrap; - } + &__text { + white-space: nowrap; + } - &__cursor { - display: inline-block; - width: 10px; - height: 1.5rem; - background: var(--fgColor); - margin-left: 5px; - border-radius: 1px; - animation: cursor 1s infinite; - } + &__cursor { + display: inline-block; + width: 10px; + height: 1.5rem; + background: var(--fgColor); + margin-left: 5px; + border-radius: 1px; + animation: cursor 1s infinite; + } - @media (prefers-reduced-motion: reduce) { - &__cursor { - animation: none; - } - } + @media (prefers-reduced-motion: reduce) { + &__cursor { + animation: none; + } + } } @keyframes cursor { - 0% { opacity: 0; } - 50% { opacity: 1; } - 100% { opacity: 0; } + 0% { opacity: 0; } + 50% { opacity: 1; } + 100% { opacity: 0; } } diff --git a/sass/_main.scss b/sass/_main.scss index a95890a..2d67314 100644 --- a/sass/_main.scss +++ b/sass/_main.scss @@ -54,10 +54,6 @@ a { background-color: var(--linkColor); color: var(--bgColor); } - - span.contentDate { - color: var(--dateLinkColor); - } } ul { @@ -131,6 +127,7 @@ footer { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; + grid-template-columns: minmax(180px, 1fr); gap: 2rem; } @@ -149,36 +146,6 @@ footer { } } -.navBar { - padding: 1rem 0 0 0; - gap: .4rem; - flex-wrap: wrap; - - .navBarRight { - float: right; - - a { - padding: 0; - } - - .themeButton { - float: right; - cursor: pointer; - border: none; - background: transparent; - } - } -} - -.dark .themeButton.dark, -.themeButton.light { - display: none -} - -.dark .themeButton.light { - display: block -} - .tagsData { display: flex; flex-direction: column; @@ -190,6 +157,11 @@ footer { .titleList li { margin-bottom: .75rem; + text-align: left; + + span.contentDate { + color: var(--dateLinkColor); + } } .footnote-definition { @@ -244,6 +216,14 @@ div.toc { body { max-width: 100%; } + + footer { + text-align: center; + } + + a span.contentDate { + display: none; + } .wrapper { margin: 1rem; diff --git a/sass/style.scss b/sass/style.scss index 4917618..00fb4da 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -1,4 +1,5 @@ @import 'main'; +@import 'header'; @import 'home'; @import 'code'; @import 'table'; diff --git a/templates/header.html b/templates/header.html index 92830d7..20bb145 100644 --- a/templates/header.html +++ b/templates/header.html @@ -7,11 +7,7 @@ {% if config.extra.header_nav %} {% endif %} diff --git a/templates/index.html b/templates/index.html index d36a724..b633c54 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,7 +1,7 @@ {% extends "base.html" %} {% block content %} -
+
{% if config.extra.home_title %}

{{ config.extra.home_title }}

{% else %} @@ -13,7 +13,7 @@

{{ config.description }}

{% endif %} {% include "svg.html" %} -
+
{% if config.extra.home_subtitle_suffixes %}