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 }}
+
+
-- {{ partial "helpers/icons" "mastodon" }}
-
-