improve sidebar

This commit is contained in:
Vri 🌈 2023-03-05 23:22:05 +01:00
parent f21b1e0c73
commit 774180db63
Signed by: vrifox
GPG key ID: D40098E5B60B2197
4 changed files with 44 additions and 52 deletions

View file

@ -4,56 +4,31 @@
#sidebar {
background: var(--sidebar-background);
border-top: 2px solid var(--vriish-rose);
display: flex;
flex-direction: column;
gap: 1em;
grid-area: sidebar;
margin-top: -2px;
max-height: 100vh;
padding: 1em;
position: sticky;
height: calc(100vh - 2rem);
padding: 0.5em;
position: fixed;
top: 0;
z-index: 1;
z-index: 2;
margin: 1rem;
border-radius: 2rem;
header {
text-align: center;
user-select: none;
#avatar {
border-radius: 500% 300% / 300% 500%;
width: calc(100% - 2em);
max-width: 200px;
max-width: 64px;
transition: .4s border-radius ease-in-out;
&:hover {
border-radius: 300% 500% / 500% 300%;
}
}
#name {
margin: 0;
font-weight: bold;
font-size: 1.8em;
}
#information {
margin: 0;
font-size: .8em;
#social-links {
list-style: none;
margin: 0;
padding: 0;
.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%);
}
}
}
}
}
}
#sidebar-menu {
user-select: none;
text-align: center;
ul {
list-style: none;
padding: 0;
@ -97,11 +72,28 @@
text-decoration: none;
}
}
aside {
bottom: 1em;
position: absolute;
left: 1em;
right: 1em;
#social-links {
text-align: center;
margin-top: auto;
ul {
list-style: none;
margin: 0;
padding: 0;
}
.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;
}

View file

@ -6,7 +6,7 @@
--text-2: hsl(210, 21%, 80%);
--text-secondary: hsl(210, 21%, 40%);
--sidebar-background: hsl(210, 21%, 10%);
--sidebar-background: hsla(210, 21%, 10%, 20%);
--vriish-rose: hsl(0, 100%, 75%);
--orange: hsl(25, 100%, 75%);

View file

@ -7,7 +7,7 @@ defaultContentLanguageInSubdir: true
params:
avatar: "2021_vrifox-avatar.png"
displayName: "Vri 🌈"
displayName: "Vri"
username: "@vrifox"
staticSiteGenerator: "Hugo"
staticSiteGeneratorLink: "https://gohugo.io/"

View file

@ -7,12 +7,6 @@
{{ $avatar := $avatar.Resize "200x webp" }}
<img id="avatar" alt="{{ $.Site.Params.displayName }}" src="{{ $avatar.RelPermalink }}" />
{{ end }}
<p id="name">{{ .Site.Params.displayName }}</p>
<div id="information">
<ul id="social-links">
<li><a rel="me" href="https://social.anoxinon.de/@vri">{{ partial "helpers/icons" "mastodon" }}</a></li>
</ul>
</div>
</header>
<section id="sidebar-menu">
<ul>
@ -25,7 +19,12 @@
{{- end }}
</ul>
</section>
<aside>
<section id="social-links">
<ul>
<li><a rel="me" href="https://social.anoxinon.de/@vri">{{ partial "helpers/icons" "mastodon" }}</a></li>
</ul>
</section>
<section id="localization">
{{- if .Site.IsMultiLingual }}
{{ $siteLanguages := .Site.Languages }}
{{ $pageLanguage := .Page.Lang }}
@ -47,4 +46,5 @@
</ul>
</div>
{{- end }}
</section>
</nav>