forked from jakub/jakubb-hugo
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 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #1d2021;
|
||||
color: #ebdbb2;
|
||||
body{
|
||||
font-size: 100%;
|
||||
line-height: 1.5;
|
||||
}
|
||||
a {
|
||||
color: #83a598;
|
||||
text-decoration: none;
|
||||
background-color: var(--bg);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
color: var(--acc-1);
|
||||
}
|
||||
|
||||
|
||||
/* Main Body */
|
||||
|
||||
.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;
|
||||
}
|
||||
.menu-entries {
|
||||
/* 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;
|
||||
/* width: 100%; */
|
||||
/* /1* position: fixed; *1/ */
|
||||
/* z-index: 3; */
|
||||
|
||||
/* Header */
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
/* position: fixed; */
|
||||
/* top: 0; */
|
||||
background-color: var(--alt-bg);
|
||||
/* z-index: 3; */
|
||||
|
||||
}
|
||||
|
||||
.header .menu {
|
||||
margin: 0;
|
||||
/* position: relative; */
|
||||
/* overflow: auto; */
|
||||
padding: 0;
|
||||
/* /1* width: 100%; *1/ */
|
||||
/* height: auto; */
|
||||
position: relative;
|
||||
list-style: none;
|
||||
/* overflow: hidden; */
|
||||
overflow: auto;
|
||||
/* background-color: #a89984; */
|
||||
}
|
||||
|
||||
|
||||
.header .menu li a{
|
||||
padding: 15px;
|
||||
display: block;
|
||||
.header .menu a {
|
||||
display: inline-block;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.menu-entries a:hover,
|
||||
.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 */
|
||||
|
||||
/* Menu */
|
||||
.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) {
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 755px) {
|
||||
.logo {
|
||||
/* clear: none; */
|
||||
pointer-events: none;
|
||||
@ -209,40 +92,52 @@ footer .buttons img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu {
|
||||
overflow: auto;
|
||||
/* .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 {
|
||||
background-color:#83a598;
|
||||
color: #504945;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: auto 5% auto 5%;
|
||||
}
|
||||
.header .menu-btn:checked ~ .menu .logo, .menu li .menu-entries a:hover {
|
||||
background-color: var(--acc-1);
|
||||
color: var(--alt-bg);
|
||||
transition: 400ms;
|
||||
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px) {
|
||||
|
||||
.menu-entries {
|
||||
float: right;
|
||||
.menu-entries {
|
||||
text-align: center;
|
||||
float: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-icon a.logo {
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.header .menu li a {
|
||||
width: fit-content;
|
||||
display: inline-block;
|
||||
}
|
||||
@media screen and (min-width: 755px) {
|
||||
|
||||
.menu-entries a {
|
||||
float: left;
|
||||
}
|
||||
.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) {
|
||||
/* ul.menu { */
|
||||
.header {
|
||||
top: 0;
|
||||
width: 15%;
|
||||
@ -250,57 +145,37 @@ footer .buttons img {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.menu {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* .header .logo { */
|
||||
/* float: none; */
|
||||
/* } */
|
||||
/* .header .menu { */
|
||||
/* clear: both; */
|
||||
/* } */
|
||||
.menu {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header .menu a {
|
||||
display: block;
|
||||
}
|
||||
.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{
|
||||
float: none;
|
||||
}
|
||||
|
||||
.menu-entries a:hover,
|
||||
.header .menu-btn:hover {
|
||||
color: #83a598;
|
||||
background-color: #504945;
|
||||
}
|
||||
.content {
|
||||
margin: auto 5% auto 20%;
|
||||
}
|
||||
|
||||
/* 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; */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user