use icons instead of text; closes #6
This commit is contained in:
parent
a7f4906c1e
commit
b601113ed2
GPG key ID:
D40098E5B60B2197
4 changed files with 61 additions and 38 deletions
1
assets/icons/blog.svg
Normal file
1
assets/icons/blog.svg
Normal file
|
|
@ -0,0 +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>
|
||||
|
After Width: | Height: | Size: 863 B |
10
assets/icons/home.svg
Normal file
10
assets/icons/home.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" stroke="inherit" fill="inherit">
|
||||
<path d="M 150 250 C 150 149.988 250 99.999 250 100 C 250 100 350 150 350 250 C 350 300 282.5 450 400 450 L 100 450 C 212.5 450 150 300 150 250 Z" style="stroke-linejoin: round;"/>
|
||||
<ellipse cx="250" cy="212.5" rx="27.663" ry="27.663"/>
|
||||
<ellipse cx="250" cy="300" rx="27.663" ry="27.663"/>
|
||||
<path d="M 241.825 470.695 C 241.875 470.695 241.912 423.473 241.912 408.195 C 241.912 392.917 254.297 380.532 269.575 380.532 C 284.853 380.532 297.238 392.917 297.238 408.195 C 297.238 423.473 297.275 470.695 297.275 470.695" transform="matrix(1, 0, 0, 1, -19.574531, -20.694907)"/>
|
||||
<ellipse cx="425" cy="75" rx="45" ry="45"/>
|
||||
<ellipse cx="75" cy="100" rx="25" ry="25"/>
|
||||
<path d="M 345.061 226.897 C 363.01 226.897 377.561 243.686 377.561 264.397 C 377.561 285.107 363.01 301.897 345.061 301.897" transform="matrix(0.990268, 0.139173, -0.139173, 0.990268, 40.313177, -47.711651)"/>
|
||||
<path style="stroke-linecap: round;" d="M 150 462.5 L 350 462.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1 KiB |
|
|
@ -28,40 +28,42 @@
|
|||
background-color: transparent;
|
||||
}
|
||||
|
||||
a.hint-text {
|
||||
position: relative;
|
||||
a {
|
||||
&.hint-text {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: attr(data-title);
|
||||
left: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: var(--sidebar-accent-2);
|
||||
color: var(--text-accent-900);
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
pointer-events: none;
|
||||
opacity: 0%;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
transform: translate(-100%, -50%);
|
||||
border-left: 0.5rem solid transparent;
|
||||
border-top: 0.5rem solid transparent;
|
||||
border-bottom: 0.5rem solid transparent;
|
||||
border-right: 0.7rem solid var(--sidebar-accent-2);
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
pointer-events: none;
|
||||
opacity: 0%;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
&:hover {
|
||||
&::before, &::after {
|
||||
opacity: 100%;
|
||||
&::before {
|
||||
content: attr(data-title);
|
||||
left: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: var(--sidebar-accent-2);
|
||||
color: var(--text-accent-900);
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 0.5rem;
|
||||
pointer-events: none;
|
||||
opacity: 0%;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
transform: translate(-100%, -50%);
|
||||
border-left: 0.5rem solid transparent;
|
||||
border-top: 0.5rem solid transparent;
|
||||
border-bottom: 0.5rem solid transparent;
|
||||
border-right: 0.7rem solid var(--sidebar-accent-2);
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
pointer-events: none;
|
||||
opacity: 0%;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
&:hover {
|
||||
&::before, &::after {
|
||||
opacity: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -172,6 +174,16 @@
|
|||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
place-content: center;
|
||||
|
||||
svg {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
fill: transparent;
|
||||
stroke: var(--text-accent-300);
|
||||
stroke-width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
aside {
|
||||
|
|
|
|||
|
|
@ -11,11 +11,11 @@
|
|||
<section id="sidebar-menu">
|
||||
<ul>
|
||||
{{- range .Site.Menus.main }}
|
||||
{{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}
|
||||
<li class="active"><a href="{{ .URL }}">{{ i18n .Identifier | default .Name }}</a></li>
|
||||
{{ else }}
|
||||
<li><a href="{{ .URL }}">{{ i18n .Identifier | default .Name }}</a></li>
|
||||
{{ end }}
|
||||
{{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}
|
||||
<li class="active"><a href="{{ .URL }}">{{ partial "helpers/icons" .Identifier }}</a></li>
|
||||
{{ else }}
|
||||
<li><a href="{{ .URL }}">{{ partial "helpers/icons" .Identifier }}</a></li>
|
||||
{{ end }}
|
||||
{{- end }}
|
||||
</ul>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in a new issue