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

Compare commits

base: raghnarok:d35fec4c78101c4303b85f7b99fb6e5c251387da
Branches Tags
raghnarok:master
raghnarok:v1.0.0
..
compare: raghnarok:e545015e6d2246c480577727441467b5ffd8263e
Branches Tags
raghnarok:master
raghnarok:v1.0.0

2 commits
d35fec4c78 ... e545015e6d

Author SHA1 Message Date
Gregory Trolliet
e545015e6d [THEME] Make more block size relatives 2021-03-13 13:45:04 +01:00
Gregory Trolliet
d9949cb954 [THEME] Make hamburger button size relative 2021-03-13 11:40:24 +01:00
2 changed files with 17 additions and 25 deletions
Show stats Expand all files Collapse all files

38
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;
} }
@ -238,23 +239,20 @@ a:focus {
padding: 0; padding: 0;
} }
#avatar img { #avatar img {
max-width: 120px; width: 20vw;
min-width: 120px;
max-width: 200px;
border-radius: 40%; border-radius: 40%;
background-color: var(--avatar-background); background-color: var(--avatar-background);
} }
@media only screen and (min-width: 768px) {
#avatar img {
max-width: 200px;
}
}
#social .social-element { #social .social-element {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
height: 32px; height: 2em;
margin-top: 1em; margin-top: 1em;
} }
#social .social-element a { #social .social-element a {
height: 24px; height: 1.5em;
display: inline-block; display: inline-block;
margin-left: 1em; margin-left: 1em;
margin-right: 1em; margin-right: 1em;
@ -268,7 +266,7 @@ a:focus {
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
#social .social-element a { #social .social-element a {
height: 32px; height: 2em;
} }
} }
@ -461,14 +459,6 @@ a:focus {
font-size: 0.8rem; font-size: 0.8rem;
margin: 2rem 0; margin: 2rem 0;
} }
.article-footer .spacer {
display: inline-block;
width: 1em;
height: 1px;
margin: 0 .5em;
background-color: var(--font-color);
vertical-align: middle;
}
.article-footer .footer-return { .article-footer .footer-return {
margin-bottom: 1em; margin-bottom: 1em;
width: 100%; width: 100%;
@ -554,9 +544,9 @@ a:focus {
max-width: 30%; max-width: 30%;
} }
.article-body figure.logo img { .article-body figure.logo img {
width: 100px; width: 10vw;
max-width: 100px; max-width: 100px;
min-width: auto; min-width: 40px;
vertical-align: bottom; vertical-align: bottom;
padding: 0; padding: 0;
} }

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