raghnarok/hugo-snotra
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

[THEME] Make hamburger button size relative

Browse source
This commit is contained in:
Gregory Trolliet 2021-03-13 11:40:24 +01:00
parent d35fec4c78
commit d9949cb954
2 changed files with 9 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
static/css/style.css
View file

@ -115,7 +115,7 @@ a:focus {
} }
@media only screen and (min-width: 1000px) { @media only screen and (min-width: 1000px) {
#navigation .navigation-container { #navigation .navigation-container {
max-width: 900px; max-width: var(--content-width);
} }
} }
#navigation-title { #navigation-title {
@ -131,7 +131,7 @@ a:focus {
} }
#navigation .menu-button { #navigation .menu-button {
float: right; float: right;
position:relative; position: relative;
display: none; display: none;
width: 4em; width: 4em;
height: 4em; height: 4em;
@ -147,11 +147,12 @@ a:focus {
#navigation .menu-button .menu-button-image { #navigation .menu-button .menu-button-image {
display: inline-block; display: inline-block;
position: relative; position: relative;
height: 20px; height: 1.5em;
width: 24px; width: 1.5em;
top: 14px; top: 0.75em;
background-image: url(../svg/bars.svg); background-image: url(../svg/bars.svg);
background-size: contain; background-size: contain;
background-repeat: no-repeat;
margin: auto; margin: auto;
vertical-align: top; vertical-align: top;
} }

4
static/svg/bars.svg
View file

@ -1 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="13.333"><path d="M16 11.333v1.334a.671.671 0 01-.667.666H.667A.671.671 0 010 12.667v-1.334c0-.364.302-.666.667-.666h14.666c.365 0 .667.302.667.666zM16 6v1.333a.671.671 0 01-.667.667H.667A.671.671 0 010 7.333V6c0-.365.302-.667.667-.667h14.666c.365 0 .667.302.667.667zm0-5.333V2a.671.671 0 01-.667.667H.667A.671.671 0 010 2V.667C0 .302.302 0 .667 0h14.666c.365 0 .667.302.667.667z" fill="#efefef"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<path fill="#efefef" d="M16 13.6v1.6a.7.8 0 0 1-.7.8H.7a.7.8 0 0 1-.7-.8v-1.6c0-.4.3-.8.7-.8h14.6c.4 0 .7.4.7.8zm0-6.4v1.6a.7.8 0 0 1-.7.8H.7a.7.8 0 0 1-.7-.8V7.2c0-.4.3-.8.7-.8h14.6c.4 0 .7.4.7.8zm0-6.4v1.6a.7.8 0 0 1-.7.8H.7a.7.8 0 0 1-.7-.8V.8C0 .4.3 0 .7 0h14.6c.4 0 .7.4.7.8z"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 461 B

After

Width:  |  Height:  |  Size: 357 B