wip rewrite of css - much cleaner even RN

This commit is contained in:
Jakub 2024-02-01 06:22:34 -05:00
parent fa031b36a9
commit 76dd32d8cf
3 changed files with 386 additions and 234 deletions

16
static/css/colors.css Normal file
View File

@ -0,0 +1,16 @@
:root {
--bg: #f9f5d7;
--fg: #3c3836;
--alt-bg: #d5c4a1;
--acc-1: #076678;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1d2021;
--fg: #ebdbb2;
--alt-bg: #504945;
--acc-1: #83a598;
}
}

261
static/css/old.css Normal file
View File

@ -0,0 +1,261 @@
body {
}
a {
}
.menu-entries a:hover,
.header .menu-btn:hover {
background-color: var(--alt-bg);
color: var(--acc-1);
}
.header .menu-btn:checked ~ .menu .logo {
background-color: var(--acc-1);
color: var(--alt-bg);
}
a.home-link{
display: none;
}
.logo img, .logo {
height: 24px;
}
.content {
overflow: none;
margin: auto 5% auto 5%;
word-wrap: break-word;
/* padding-bottom: 15%; */
/* display: inline-grid; */
/* max-width: 45rem; */
/* margin-bottom: 2rem; */
/* margin: 2rem auto; */
/* padding-top: 100px; */
}
/* Lists */
.post-snippet {
margin-bottom: 1rem;
}
.post-snippet h3 {
margin-bottom: 0.25rem;
}
/* header */
.header {
z-index: 3;
}
.header .menu {
/* /1* width: 100%; *1/ */
/* height: auto; */
/* overflow: hidden; */
/* background-color: #a89984; */
}
.header .logo {
/* float: left; */
}
/* menu */
.menu-entries {
/* display: none; */
}
.header .menu {
}
/* menu icon */
.logo {
cursor: pointer;
}
.header .menu-icon {
/* cursor: pointer; */
/* float: right; */
/* padding: 28px 20px; */
/* position: relative; */
/* user-select: none; */
}
/* menu btn */
.header .menu-btn {
display: none;
}
.menu .logo {
transition: 400ms;
}
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;
}
footer .buttons img {
/* margin: 5px; */
display: inline-block;
max-height: 25em;
max-width: 100%;
}
/* div.content, footer{ */
/* margin-left: 0; */
/* /1* height: 1000px; *1/ */
/* } */
/* @media screen and (max-width: 900px) { */
/* ul.menu { width: 100%; */
/* height: auto; */
/* position: relative; */
/* } */
/* ul.menu li a { */
/* padding: 15px; */
/* } */
/* div.content, footer {margin-left: 0;} */
/* } */
/* .menu a { */
/* padding: 20px 30px; */
/* } */
/* ul.menu li a { */
/* float: left; */
/* } */
/* .menu-entries { */
/* float: right; */
/* } */
/* .header .menu li .menu-entries{ */
/* clear: none; */
/* align-self: right; */
/* width: auto; */
/* max-height: none; */
/* } */
/* .header .menu-icon { */
/* display: none; */
/* } */
/* } */
@media screen and (max-width: 750px) {
.menu-entries {
text-align: center;
float: none;
display: none;
}
.logo {
/* clear: none; */
pointer-events: none;
}
.menu-icon {
cursor: pointer;
}
.menu {
overflow: auto;
}
.content {
margin: auto 5% auto 5%;
}
}
@media screen and (min-width: 1040px) {
/* ul.menu { */
.header {
top: 0;
width: 15%;
height: 100%;
position: fixed;
}
.menu {
height: 100%;
}
/* .header .logo { */
/* float: none; */
/* } */
/* .header .menu { */
/* clear: both; */
/* } */
.menu-entries{
float: none;
}
.menu-entries a:hover,
.header .menu-btn:hover {
color: #83a598;
background-color: #504945;
}
/* ul.menu li a { */
/* float: none; */
/* padding: 20px; */
/* } */
.content, footer {
/* margin: auto; */
padding: 1px 16px;
}
.header .menu li a {
display: block;
/* width: 100%; */
float: none;
}
.content {
margin: auto 5% auto 20%;
}
}
/* .logo { */
/* height: 28px; */
/* width: fit-content; */
/* } */
/* } */
/* .header .logo { */
/* display: block; */

View File

@ -1,205 +1,88 @@
/* modifying it for now. */ @import url('./colors.css'); /* Include colorscheme */
/* TODO clean and move all ugly code from old.css into this file */
/* @import url('./old.css'); */
a.home-link{
display: none;
}
.logo img, .logo {
height: 24px;
}
/* Global */
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
body { body{
background-color: #1d2021;
color: #ebdbb2;
font-size: 100%; font-size: 100%;
line-height: 1.5; line-height: 1.5;
} background-color: var(--bg);
a { color: var(--fg);
color: #83a598;
text-decoration: none;
} }
a{
text-decoration: none;
color: var(--acc-1);
}
/* Main Body */
.content { .content {
overflow: none;
margin: auto 5% auto 5%; margin: auto 5% auto 5%;
word-wrap: break-word;
/* padding-bottom: 15%; */
/* display: inline-grid; */
/* max-width: 45rem; */
/* margin-bottom: 2rem; */
/* margin: 2rem auto; */
/* padding-top: 100px; */
}
/* Lists */
.post-snippet {
margin-bottom: 1rem;
} }
.post-snippet h3 { .menu-entries {
margin-bottom: 0.25rem; /* display: block; */
} /* clear: both; */
/* transition: max-height .2s ease-out; */
}
/* header */ /* 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 {
background-color: #504945; /* Header */
/* width: 100%; */
/* /1* position: fixed; *1/ */ .header {
/* z-index: 3; */ width: 100%;
/* position: fixed; */
/* top: 0; */
background-color: var(--alt-bg);
/* z-index: 3; */
} }
.header .menu { .header .menu {
margin: 0; margin: 0;
/* position: relative; */
/* overflow: auto; */
padding: 0; padding: 0;
/* /1* width: 100%; *1/ */
/* height: auto; */
position: relative;
list-style: none; list-style: none;
/* overflow: hidden; */
overflow: auto;
/* background-color: #a89984; */
} }
.header .menu a {
.header .menu li a{ display: inline-block;
padding: 15px; padding: 20px;
display: block;
} }
.menu-entries a:hover, /* Menu */
.header .menu-btn:hover {
background-color: #83a598;
color: #504945;
}
.header .logo {
/* float: left; */
padding: 15px 20px;
}
/* menu */
.menu-entries {
display: block;
clear: both;
/* display: none; */
transition: max-height .2s ease-out;
}
.header .menu {
}
/* menu icon */
.logo {
cursor: pointer;
}
.header .menu-icon {
/* cursor: pointer; */
/* float: right; */
/* padding: 28px 20px; */
/* position: relative; */
/* user-select: none; */
}
/* menu btn */
.header .menu-btn { .header .menu-btn {
display: none; display: none;
} }
.menu .logo { @media screen and (max-width: 755px) {
transition: 400ms;
}
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;
}
footer .buttons img {
/* margin: 5px; */
display: inline-block;
max-height: 25em;
max-width: 100%;
}
/* div.content, footer{ */
/* margin-left: 0; */
/* /1* height: 1000px; *1/ */
/* } */
/* @media screen and (max-width: 900px) { */
/* ul.menu { width: 100%; */
/* height: auto; */
/* position: relative; */
/* } */
/* ul.menu li a { */
/* padding: 15px; */
/* } */
/* div.content, footer {margin-left: 0;} */
/* } */
/* .menu a { */
/* padding: 20px 30px; */
/* } */
/* ul.menu li a { */
/* float: left; */
/* } */
/* .menu-entries { */
/* float: right; */
/* } */
/* .header .menu li .menu-entries{ */
/* clear: none; */
/* align-self: right; */
/* width: auto; */
/* max-height: none; */
/* } */
/* .header .menu-icon { */
/* display: none; */
/* } */
/* } */
@media screen and (max-width: 750px) {
.header .menu-btn:checked ~ .menu li .menu-entries,
.menu li .menu-entries a.home-link {
display: block;
}
.menu-entries {
text-align: center;
float: none;
display: none;
}
.logo { .logo {
/* clear: none; */ /* clear: none; */
pointer-events: none; pointer-events: none;
@ -209,40 +92,52 @@ footer .buttons img {
cursor: pointer; cursor: pointer;
} }
.menu { /* .content { */
overflow: auto; /* 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 { .header .menu-btn:checked ~ .menu .logo, .menu li .menu-entries a:hover {
background-color:#83a598; background-color: var(--acc-1);
color: #504945; color: var(--alt-bg);
} transition: 400ms;
.content {
margin: auto 5% auto 5%;
}
} }
@media screen and (min-width: 750px) {
.menu-entries { .menu-entries {
float: right; text-align: center;
float: none;
display: none;
}
.menu-icon a.logo {
display: block;
}
} }
.header .menu li a { @media screen and (min-width: 755px) {
width: fit-content;
display: inline-block;
}
.menu-entries a { .menu-entries {
float: left; 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) {
/* ul.menu { */
.header { .header {
top: 0; top: 0;
width: 15%; width: 15%;
@ -250,57 +145,37 @@ footer .buttons img {
position: fixed; position: fixed;
} }
.menu { .menu {
height: 100%; width: 100%;
} padding: 0;
margin: 0;
/* .header .logo { */ }
/* float: none; */
/* } */ .header .menu a {
/* .header .menu { */ display: block;
/* clear: both; */ }
/* } */ .header .menu li a{
/* width: 100%; */
display: block;
/* padding: 15px; */
margin: 0;
}
.menu .menu-entries a:hover{
background-color: var(--acc-1);
color: var(--alt-bg);
transition: 400ms;
}
.menu-entries{ .menu-entries{
float: none; float: none;
} }
.menu-entries a:hover, .content {
.header .menu-btn:hover { margin: auto 5% auto 20%;
color: #83a598; }
background-color: #504945;
}
/* ul.menu li a { */
/* float: none; */
/* padding: 20px; */
/* } */
.content, footer { .content, footer {
/* margin: auto; */
padding: 1px 16px; padding: 1px 16px;
} }
.header .menu li a {
display: block;
/* width: 100%; */
float: none;
}
.content {
margin: auto 5% auto 20%;
} }
}
/* .logo { */
/* height: 28px; */
/* width: fit-content; */
/* } */
/* } */
/* .header .logo { */
/* display: block; */