wip rewrite of css - much cleaner even RN
This commit is contained in:
Jakub
parent
fa031b36a9
commit
76dd32d8cf
16
static/css/colors.css
Normal file
16
static/css/colors.css
Normal 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
261
static/css/old.css
Normal 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; */
|
||||||
@ -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; */
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user