From 804159352fc6d932bc40a444fb85119fb303a127 Mon Sep 17 00:00:00 2001 From: vrifox Date: Thu, 9 Mar 2023 18:16:35 +0100 Subject: [PATCH] update --- assets/scss/home.scss | 3 + assets/scss/partials/sidebar.scss | 131 ++++++++++++------------------ config/_default/languages.yaml | 4 + layouts/partials/sidebar.html | 36 ++++---- 4 files changed, 77 insertions(+), 97 deletions(-) diff --git a/assets/scss/home.scss b/assets/scss/home.scss index 1be1398..8530aab 100644 --- a/assets/scss/home.scss +++ b/assets/scss/home.scss @@ -21,6 +21,9 @@ height: 100vh; color: var(--vriish-gradient-text); mask: var(--vriish-waves); + @media (max-width: 1040px) { + height: 90vh; + } h1 { letter-spacing: 0.5rem; font-size: 7rem; diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss index ce15797..9d89591 100644 --- a/assets/scss/partials/sidebar.scss +++ b/assets/scss/partials/sidebar.scss @@ -6,6 +6,7 @@ background: var(--sidebar-background); display: flex; flex-direction: column; + justify-content: space-between; gap: 1em; height: calc(100vh - 1rem); padding: 0.25rem; @@ -23,11 +24,13 @@ bottom: 0; border-radius: 2rem 2rem 0 0; flex-direction: row; - width: calc(100vw - 1rem); + width: 100vw; height: 5rem; - margin: 0 0.5rem; + margin: 0; overflow-y: hidden; overflow-x: scroll; + border: 1px solid var(--sidebar-border); + border-bottom: 0; } header { text-align: center; @@ -56,10 +59,10 @@ } } li { - border-radius: 0.5em; + border-radius: 0.5rem; margin: 0.5em 0; position: relative; - letter-spacing: .025em; + letter-spacing: .025rem; overflow: hidden; aspect-ratio: 1 / 1; display: flex; @@ -71,8 +74,7 @@ } a { display: block; - padding: .25em .5em; - line-height: 4rem; + padding: 0.25em 0.5em; } &::after { background-color: var(--sidebar-accent-1); @@ -86,7 +88,11 @@ z-index: -1; opacity: 1; opacity: 0.5; - transition: left 0.5s ease-out, opacity 0.5s ease-out, background-color 0.2s linear; + transition: left 0.5s ease-out, opacity 0.5s ease-out, background-color 0.2s linear, top 0.5s ease-out; + @media (max-width: 1040px) { + left: 0; + top: 100%; + } } &.active { background-color: var(--sidebar-accent-1); @@ -101,6 +107,9 @@ &::after { left: 0; opacity: 1; + @media (max-width: 1040px) { + top: 0; + } } } &:active { @@ -113,83 +122,51 @@ text-decoration: none; } } - #social-links { - text-align: center; - margin-top: auto; - ul { - list-style: none; - margin: 0; - padding: 0; + aside { + @media (max-width: 1040px) { + display: flex; + flex-direction: row; + align-items: center; } - .icon { - height: 2em; - transition: color 0.2s linear; - &.mastodon-icon { - color: hsl(239.6, 100%, 69.4%); - &:hover { - color: hsl(251.5, 58.9%, 51.4%); - } - } - } - } - #localization { - bottom: 0.5em; - text-align: center; - @media (max-width: 920px) { - position: initial; - } - #language-select { - position: relative; - pointer-events: none; - &:hover { - #languages { - bottom: 2em; - opacity: 100%; - pointer-events: all; - * { - pointer-events: all; - } - } - } - #language-icon { - text-decoration: none; - padding: 1em; - margin: -1em; - pointer-events: all; - } - #languages { - background-color: var(--background); - border-radius: .5em; + #social-links { + text-align: center; + align-items: center; + display: flex; + justify-content: center; + ul { + list-style: none; margin: 0; padding: 0; - user-select: none; - position: absolute; - bottom: 1em; - opacity: 0%; - transition: bottom .5s, opacity .5s; - li { - list-style: none; - overflow: hidden; - padding: .25em .5em; - position: relative; - transition: background .5s; - border-radius: .5em; - margin: .2em; - &:not(:last-of-type) { - margin-bottom: .5em; - } - &.active { - background: var(--vriish-gradient); - } + } + .icon { + height: 2em; + transition: color 0.2s ease-in-out; + &.mastodon-icon { + color: hsl(239.6, 100%, 69.4%); &:hover { - background: var(--vriish-gradient); - } - a { - text-decoration: none; - display: block; + color: hsl(251.5, 58.9%, 51.4%); } } } } + #languages { + text-align: center; + transition: background-color 0.2s ease-in-out; + border-radius: 0.5rem 0.5rem 1.85rem 0.5rem; + &:hover { + background-color: var(--sidebar-accent-1); + } + &:active { + background-color: var(--sidebar-accent-2); + } + #language { + display: block; + text-decoration: none; + width: 100%; + height: 100%; + padding: 0.5rem 1rem; + pointer-events: all; + } + } } } \ No newline at end of file diff --git a/config/_default/languages.yaml b/config/_default/languages.yaml index e7c1f7e..e6cea38 100644 --- a/config/_default/languages.yaml +++ b/config/_default/languages.yaml @@ -1,6 +1,10 @@ de: languageName: Deutsch + params: + languageFlag: 🇩🇪 weight: 1 en: languageName: English + params: + languageFlag: 🇬🇧 weight: 2 \ No newline at end of file diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html index 2abc7a3..777c79d 100644 --- a/layouts/partials/sidebar.html +++ b/layouts/partials/sidebar.html @@ -19,32 +19,28 @@ {{- end }} - -
- {{- if .Site.IsMultiLingual }} - {{ $siteLanguages := .Site.Languages }} - {{ $pageLanguage := .Page.Lang }} -
- 🌐 - -
- {{- end }} -
+ {{- end }} + +