vrifox/website
vrifox/website
1
0
Fork 0
Code Issues 3 Pull requests Activity

improve sidebar

Browse source
This commit is contained in:
Vri 🌈 2023-03-16 21:50:11 +01:00
parent ded81045f5
commit 9c92048ba8
Signed by: vrifox
GPG key ID: D40098E5B60B2197
4 changed files with 21 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/icons/blog.svg
View file

@ -1 +1 @@
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com" stroke="inherit" fill="inherit"><g transform="rotate(45, 180, 240)"><path d="M 250 375 C 194.772 375 150 319.036 150 250 L 150 100 C 150 44.772 194.772 0 250 0 C 305.228 0 350 44.772 350 100 L 350 250 C 350 319.036 305.228 375 250 375 Z"/><path style="stroke-linecap: round;" d="M 250.001 150 L 250 500.03" transform="matrix(1, -0.000003, 0.000003, 1, -0.000975, 0.00075)"/><path style="stroke-linecap: round;" d="M 249.992 180.713 L 249.991 320.712" transform="matrix(0.707105, -0.707109, 0.707109, 0.707105, -153.556825, 270.705963)" bx:origin="0.286467 0.999998"/><path style="stroke-linecap: round;" d="M 249.99 110.004 L 249.989 250.003" transform="matrix(0.707105, -0.707109, 0.707109, 0.707105, -103.558456, 249.994221)" bx:origin="0.286467 0.999998"/></g></svg> <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com" stroke="inherit" fill="inherit"><g transform="rotate(45, 210, 230)"><path d="M 250 375 C 194.772 375 150 319.036 150 250 L 150 100 C 150 44.772 194.772 0 250 0 C 305.228 0 350 44.772 350 100 L 350 250 C 350 319.036 305.228 375 250 375 Z"/><path style="stroke-linecap: round;" d="M 250.001 150 L 250 500.03" transform="matrix(1, -0.000003, 0.000003, 1, -0.000975, 0.00075)"/><path style="stroke-linecap: round;" d="M 249.992 180.713 L 249.991 320.712" transform="matrix(0.707105, -0.707109, 0.707109, 0.707105, -153.556825, 270.705963)" bx:origin="0.286467 0.999998"/><path style="stroke-linecap: round;" d="M 249.99 110.004 L 249.989 250.003" transform="matrix(0.707105, -0.707109, 0.707109, 0.707105, -103.558456, 249.994221)" bx:origin="0.286467 0.999998"/></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 863 B

After

Width:  |  Height:  |  Size: 863 B

2
assets/icons/home.svg
View file

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 500 500" stroke="inherit" fill="inherit" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 500 500" stroke="inherit" fill="inherit" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="425" cy="75" rx="45" ry="45"/> <ellipse cx="425" cy="60" rx="45" ry="45"/>
<ellipse cx="75" cy="100" rx="25" ry="25"/> <ellipse cx="75" cy="100" rx="25" ry="25"/>
<path style="stroke-linecap: round;" d="M 150 490 L 350 490"/> <path style="stroke-linecap: round;" d="M 150 490 L 350 490"/>
<path d="M 377.5 260 C 377.5 279.926 361.96 296.221 342.339 297.428 C 346.417 278.349 350 261.52 350 250 C 350 240.649 349.126 231.735 347.54 223.258 C 364.637 226.748 377.5 241.872 377.5 260 Z M 347.54 223.258 C 332.172 141.086 250 100 250 100 C 250 99.999 150 149.988 150 250 C 150 300 212.5 450 100 450 L 400 450 C 309.572 450 328.716 361.158 342.339 297.428 M 277.663 300 C 277.663 315.278 265.278 327.663 250 327.663 C 234.722 327.663 222.337 315.278 222.337 300 C 222.337 284.722 234.722 272.337 250 272.337 C 265.278 272.337 277.663 284.722 277.663 300 Z M 277.663 212.5 C 277.663 227.778 265.278 240.163 250 240.163 C 234.722 240.163 222.337 227.778 222.337 212.5 C 222.337 197.222 234.722 184.837 250 184.837 C 265.278 184.837 277.663 197.222 277.663 212.5 Z M 222.337 387.5 C 222.337 372.222 234.722 359.837 250 359.837 C 265.278 359.837 277.663 372.222 277.663 387.5 C 277.663 402.746 277.7 450 277.7 450 L 222.3 450 C 222.3 450 222.337 402.746 222.337 387.5 Z"/> <path d="M 377.5 260 C 377.5 279.926 361.96 296.221 342.339 297.428 C 346.417 278.349 350 261.52 350 250 C 350 240.649 349.126 231.735 347.54 223.258 C 364.637 226.748 377.5 241.872 377.5 260 Z M 347.54 223.258 C 332.172 141.086 250 100 250 100 C 250 99.999 150 149.988 150 250 C 150 300 212.5 450 100 450 L 400 450 C 309.572 450 328.716 361.158 342.339 297.428 M 277.663 300 C 277.663 315.278 265.278 327.663 250 327.663 C 234.722 327.663 222.337 315.278 222.337 300 C 222.337 284.722 234.722 272.337 250 272.337 C 265.278 272.337 277.663 284.722 277.663 300 Z M 277.663 212.5 C 277.663 227.778 265.278 240.163 250 240.163 C 234.722 240.163 222.337 227.778 222.337 212.5 C 222.337 197.222 234.722 184.837 250 184.837 C 265.278 184.837 277.663 197.222 277.663 212.5 Z M 222.337 387.5 C 222.337 372.222 234.722 359.837 250 359.837 C 265.278 359.837 277.663 372.222 277.663 387.5 C 277.663 402.746 277.7 450 277.7 450 L 222.3 450 C 222.3 450 222.337 402.746 222.337 387.5 Z"/>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

29
assets/scss/partials/sidebar.scss
View file

@ -34,28 +34,31 @@
&::before { &::before {
content: attr(data-title); content: attr(data-title);
left: 100%; left: calc(100% + 0.5rem);
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
background-color: var(--sidebar-accent-2); background-color: var(--sidebar-accent-3);
color: var(--text-accent-900); color: var(--text-accent-900);
padding: 0.2rem 0.5rem; padding: 0.2rem 0.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
pointer-events: none; pointer-events: none;
opacity: 0%; opacity: 0%;
transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;
z-index: 201;
} }
&::after { &::after {
content: ""; content: "";
transform: translate(-100%, -50%); transform: translate(-50%, -50%) rotate(45deg);
border-left: 0.5rem solid transparent; transform-origin: center;
border-top: 0.5rem solid transparent; background-color: var(--sidebar-accent-3);
border-bottom: 0.5rem solid transparent;
border-right: 0.7rem solid var(--sidebar-accent-2);
top: 50%; top: 50%;
height: 1.2rem;
width: 1.2rem;
z-index: 200;
border-radius: 0 0 0 0.5rem;
position: absolute; position: absolute;
left: 100%; left: calc(100% + 0.5rem);
pointer-events: none; pointer-events: none;
opacity: 0%; opacity: 0%;
transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;
@ -97,7 +100,6 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
padding: 0.4rem; padding: 0.4rem;
border-radius: 2rem 2rem 0 0;
border: 1px solid var(--sidebar-border); border: 1px solid var(--sidebar-border);
border-bottom: 0; border-bottom: 0;
} }
@ -117,18 +119,21 @@
margin: 0.5em 0; margin: 0.5em 0;
position: relative; position: relative;
letter-spacing: 0.025rem; letter-spacing: 0.025rem;
overflow: hidden;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: background-color 0.2s linear; transition: background-color 0.2s linear;
overflow: hidden;
@media (max-width: 1140px) { @media (max-width: 1140px) {
margin: 0 0.5rem; margin: 0 0.5rem;
} }
a { a {
display: block; overflow: visible;
padding: 3rem; display: flex;
align-items: center;
width: 100%;
height: 100%;
} }
&::after { &::after {
background-color: var(--sidebar-accent-1); background-color: var(--sidebar-accent-1);

4
layouts/partials/sidebar.html
View file

@ -12,9 +12,9 @@
<ul> <ul>
{{- range .Site.Menus.main }} {{- range .Site.Menus.main }}
{{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} {{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}
<li class="active"><a href="{{ .URL }}">{{ partial "helpers/icons" .Identifier }}</a></li> <li class="active"><a class="hint-text" href="{{ .URL }}" data-title="{{ i18n .Identifier | default .Name }}">{{ partial "helpers/icons" .Identifier }}</a></li>
{{ else }} {{ else }}
<li><a href="{{ .URL }}">{{ partial "helpers/icons" .Identifier }}</a></li> <li><a class="hint-text" href="{{ .URL }}" data-title="{{ i18n .Identifier | default .Name }}">{{ partial "helpers/icons" .Identifier }}</a></li>
{{ end }} {{ end }}
{{- end }} {{- end }}
</ul> </ul>