balki/no-js-hugo-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Hamburger menu is now shown under the header

Browse Source 
I think this looks nicer.
This commit is contained in:
Steven Engler 2024-03-30 01:38:05 -04:00
parent 115c5fa213
commit 241902516a
3 changed files with 54 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
static/css/styles.css
View File

@ -315,8 +315,8 @@ blockquote {
--label-padding: 0.3em; --label-padding: 0.3em;
position: absolute; position: absolute;
top: calc(-1 * var(--label-padding)); top: calc(var(--document-margin) - var(--label-padding));
right: calc(-1 * var(--label-padding)); right: calc(var(--document-margin) - var(--label-padding));
display: flex; display: flex;
} }
@ -360,13 +360,16 @@ body {
background-color: lightgray; background-color: lightgray;
background-size: cover; background-size: cover;
background-position: bottom; background-position: bottom;
display: inline-block;
z-index: 1; /* this prevents images with css filters from appearing above the header when in portrait mode */
width: 100%; width: 100%;
/* header must be above the overlay */
/* this also prevents images with css filters from appearing above the header when in portrait mode */
z-index: 3;
/* z-index doesn't apply to the default 'static' position */
position: relative;
} }
.header-content { .header-content {
margin: var(--document-margin); padding: var(--document-margin);
position: relative; /* so that "position: absolute" works for the menu label */ position: relative; /* so that "position: absolute" works for the menu label */
} }
@ -521,48 +524,58 @@ body {
} }
.show-hide-menu-input:checked ~ .main .links { .show-hide-menu-input:checked ~ .main .links {
visibility: visible; display: inherit;
opacity: 1;
right: 0;
transition: all 0.3s;
} }
.show-hide-menu-input:checked ~ .overlay { .show-hide-menu-input:checked ~ .overlay {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
transition: opacity 0.3s; }
/* prevent scrolling the main body; must be on html element and not body for iOS */
html:has(.show-hide-menu-input:checked) {
overflow: hidden;
height: 100%;
/* prevent scrolling (of everything) on iOS */
/* any element with 'overflow-y: scroll' will allow the body to scroll for some reason */
/* use 'pan-zoom' to allow users to zoom if they need to, even though it makes scrolling weird */
touch-action: pan-zoom;
} }
.links { .links {
display: block; /* vertical padding between list items */
visibility: hidden; --entry-padding: 9pt;
opacity: 0;
overflow-y: scroll; display: none;
position: fixed; position: absolute;
top: 0; left: 0;
bottom: 0; right: 0;
right: -100px; /* start to the right for the transition */ padding-left: var(--document-margin);
min-width: 75%; padding-right: var(--document-margin);
z-index: 3; padding-top: calc(var(--document-margin) - var(--entry-padding));
padding-bottom: calc(var(--document-margin) - var(--entry-padding));
font-size: 100%;
background-color: rgb(247, 247, 247); background-color: rgb(247, 247, 247);
padding: 10pt; border-top: solid 1px;
margin: 0; border-bottom: solid 1px;
} }
.links li { .links li {
margin-right: 0; border-bottom: solid 1px;
border-bottom: solid 1px gray; /* override all previously set margins */
margin: 0;
}
.links li:last-child {
border-bottom: none;
} }
.links li > * { .links li > * {
box-sizing: border-box; /* make the links easily clickable */
width: 100%; width: 100%;
padding: 13px; padding-top: var(--entry-padding);
} padding-bottom: var(--entry-padding);
.links li:first-child {
border-top: solid 1px gray;
margin-top: 0px;
} }
.title a { .title a {

6
static/css/themes/dark.css
View File

@ -46,6 +46,10 @@ figure.color-adapting-image img {
background-image: url(../../images/header-bg-dark.jpg); background-image: url(../../images/header-bg-dark.jpg);
} }
.links, .links li {
border-color: #383838;
}
.main { .main {
background-color: rgb(14, 14, 14); background-color: rgb(14, 14, 14);
box-shadow: none; box-shadow: none;
@ -107,6 +111,6 @@ figure.color-adapting-image img {
@media only screen and (max-width: 400pt) { @media only screen and (max-width: 400pt) {
.links { .links {
background-color: rgb(30, 30, 30); background-color: rgb(23, 23, 23);
} }
} }

4
static/css/themes/light.css
View File

@ -39,6 +39,10 @@ blockquote {
background-image: url(../../images/header-bg-light.jpg); background-image: url(../../images/header-bg-light.jpg);
} }
.links, .links li {
border-color: rgb(211, 211, 211);
}
.main { .main {
background-color: white; background-color: white;
} }