jakub/jakubb-hugo
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki 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

5
static/css/colors.css
View File

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

191
static/css/style.css
View File

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