34mdh/hugo-theme
2
0
Fork 0
forked from jakub/jakubb-hugo
Code Pull Requests Activity

cleaned up css & added shadows

Browse Source
This commit is contained in:
worktop 2024-02-01 15:57:48 -05:00
parent 76dd32d8cf
commit 8a9005bd0e
2 changed files with 75 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
static/css/colors.css
View File

@ -3,6 +3,7 @@
--fg: #3c3836; --fg: #3c3836;
--alt-bg: #d5c4a1; --alt-bg: #d5c4a1;
--acc-1: #076678; --acc-1: #076678;
--shadow: #504945;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -11,6 +12,6 @@
--fg: #ebdbb2; --fg: #ebdbb2;
--alt-bg: #504945; --alt-bg: #504945;
--acc-1: #83a598; --acc-1: #83a598;
--shadow: #1d2021;
} }
} }

189
static/css/style.css
View File

@ -1,9 +1,6 @@
@import url('./colors.css'); /* Include colorscheme */ @import url('./colors.css'); /* Include colorscheme */
/* TODO clean and move all ugly code from old.css into this file */
/* @import url('./old.css'); */
/* Globals */
/* Global */
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -25,157 +22,113 @@ a{
/* Main Body */ /* Main Body */
.content { .content {
margin: auto 5% auto 5%; margin: 5em 5% auto 5%;
} }
/* Navigation Menu */
.menu-entries {
/* display: block; */
/* clear: both; */
/* transition: max-height .2s ease-out; */
}
/* Footer */
footer {
/* position: fixed; */
left: 0;
bottom: 0;
width: 100%;
text-align: center;
max-height: 15%;
padding-top; 10px;
padding-bottom: 10px;
}
footer .buttons {
margin-top: 5px;
}
/* Header */
.header { .header {
width: 100%; width: 100%;
/* position: fixed; */
/* top: 0; */
background-color: var(--alt-bg); background-color: var(--alt-bg);
/* z-index: 3; */ box-shadow: inset 0 -20px 20px -20px var(--shadow);
position: fixed;
top: 0;
} }
.header .menu { .menu-entries a:hover{
background-color: var(--acc-1);
color: var(--alt-bg);
transition: 400ms;
box-shadow: inset 0 -20px 20px -20px var(--shadow);
}
.menu {
margin: 0; margin: 0;
/* position: relative; */
/* overflow: auto; */
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
.menu-entries {
float: right;
}
.header .menu a { .menu-btn {
display: none;
}
.menu a {
display: inline-block; display: inline-block;
padding: 20px; padding: 20px;
} }
/* Menu */
.header .menu-btn {
display: none;
}
/* Footer */
footer {
/* position: fixed; */
width: 100%;
text-align: center;
padding-bottom: 14px;
}
@media screen and (max-width: 755px) { @media screen and (max-width: 755px) {
.logo { /* Mobile layout - logo now serves as toggle for rest of menu items */
/* clear: none; */
pointer-events: none;
}
.menu-icon { .logo {
cursor: pointer; pointer-events: none;
}
/* .content { */
/* margin: auto 5% auto 5%; */
/* } */
.header .menu-btn:checked ~ .menu li .menu-entries, .menu li .menu-entries a{
display: block;
} }
.header .menu-btn:checked ~ .menu .logo, .menu li .menu-entries a:hover { .menu-icon {
cursor: pointer;
}
.menu-entries {
text-align: center;
float: none;
display: none;
}
a.logo {
display: block;
}
.menu-btn:checked ~
.menu li .menu-entries,
.menu li .menu-entries a{
display: block;
}
.menu-btn:checked ~ .menu .logo, .menu-entries a:hover {
background-color: var(--acc-1); background-color: var(--acc-1);
color: var(--alt-bg); color: var(--alt-bg);
transition: 400ms; transition: 400ms;
}
.menu-entries {
text-align: center;
float: none;
display: none;
} }
.menu-icon a.logo {
display: block;
}
}
@media screen and (min-width: 755px) {
.menu-entries {
float: right;
}
.header .menu li a {
/* width: fit-content; */
/* padding:15px; */
/* display: inline-block; */
}
/* */
/* .menu-entries a { */
/* float: left; */
/* } */
} }
@media screen and (min-width: 1040px) { @media screen and (min-width: 1040px) {
.header { /* Wide window - links on a left sidebar */
top: 0; .header {
width: 15%; width: 15%;
height: 100%; height: 100%;
position: fixed; box-shadow: inset -22px 0 20px -20px var(--shadow);
}
.menu {
width: 100%;
padding: 0;
margin: 0;
} }
.header .menu a { .menu a {
display: block;
}
.header .menu li a{
/* width: 100%; */
display: block; display: block;
/* padding: 15px; */
margin: 0;
} }
.menu .menu-entries a:hover{ .menu-entries{
background-color: var(--acc-1); float: none;
color: var(--alt-bg);
transition: 400ms;
} }
.menu-entries{
float: none;
}
.content { .content {
margin: auto 5% auto 20%; margin: auto 5% auto 20%;
padding: 1px 16px;
} }
.content, footer { .menu-entries a:hover{
padding: 1px 16px; box-shadow: inset -22px 0 20px -20px var(--shadow);
} }
} }