tiyn/beaker-blog
1
0
Fork 0
mirror of https://github.com/tiyn/beaker-blog.git synced 2025-10-31 10:51:16 +01:00
Code Issues Projects Releases Wiki Activity

made tabbing in css uniform

Browse Source
This commit is contained in:
tiyn
2024-04-20 23:41:39 +02:00
parent 0ff2bffc99
commit 6fb7411156
3 changed files with 187 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/static/css/dark.css
View File

@@ -1,88 +1,88 @@
@import 'style.css'; @import 'style.css';
:root { :root {
--bg0: rgb(29,32,33); --bg0: rgb(29,32,33);
--color0: rgb(220,120,0); --color0: rgb(220,120,0);
--color1: rgb(280,180,0); --color1: rgb(280,180,0);
--error: rgb(255,0,0); --error: rgb(255,0,0);
--footerbg0: rgb(29,32,33); --footerbg0: rgb(29,32,33);
--link0: rgb(220, 120, 0); --link0: rgb(220, 120, 0);
--link1: rgb(255,255,255); --link1: rgb(255,255,255);
--menulink0: rgb(220, 120, 0); --menulink0: rgb(220, 120, 0);
--menulink1: rgb(255,255,255); --menulink1: rgb(255,255,255);
--menubg0: rgb(29,32,33); --menubg0: rgb(29,32,33);
--text0: rgb(235,219,178); --text0: rgb(235,219,178);
--text1: rgb(220, 120, 0); --text1: rgb(220, 120, 0);
} }
a { a {
color: var(--link0); color: var(--link0);
transition: var(--transtime); transition: var(--transtime);
} }
a:hover { a:hover {
color: var(--link1); color: var(--link1);
} }
body { body {
background: var(--bg0); background: var(--bg0);
} }
footer { footer {
background: var(--footerbg0); background: var(--footerbg0);
color: var(--text0); color: var(--text0);
} }
span { span {
color: var(--text1); color: var(--text1);
} }
.container { .container {
color: var(--text0); color: var(--text0);
} }
.container h1, .container h1,
.container h2 { .container h2 {
color: var(--text1); color: var(--text1);
} }
.container .flash { .container .flash {
background-color: var(--error); background-color: var(--error);
} }
.hide-menu:hover, .hide-menu:hover,
.main-menu a:hover, .main-menu a:hover,
.main-menu-dropdown a:hover, .main-menu-dropdown a:hover,
.show-menu:hover { .show-menu:hover {
color: var(--menulink1); color: var(--menulink1);
} }
.main-menu a, .main-menu a,
.main-menu-dropdown a { .main-menu-dropdown a {
color: var(--menulink0); color: var(--menulink0);
} }
.main-menu-dropdown { .main-menu-dropdown {
background: var(--menubg0); background: var(--menubg0);
color: var(--menulink0); color: var(--menulink0);
} }
@media screen and (max-width:800px) { @media screen and (max-width:800px) {
.main-menu { .main-menu {
background: var(--menubg0); background: var(--menubg0);
} }
} }
.entry { .entry {
background: var(--bg0); background: var(--bg0);
border-left: 10px solid var(--color0); border-left: 10px solid var(--color0);
color: var(--text0); color: var(--text0);
} }
.entry h1, .entry h1,
.entry h2 { .entry h2 {
color: var(--text1); color: var(--text1);
} }

71
src/static/css/light.css
View File

@@ -1,96 +1,95 @@
@import 'style.css'; @import 'style.css';
:root { :root {
--bg0: rgb(255,255,255); --bg0: rgb(255,255,255);
--color0: rgb(0,0,120); --color0: rgb(0,0,120);
--color1: rgb(0,0,200); --color1: rgb(0,0,200);
--error: rgb(255,0,0); --error: rgb(255,0,0);
--footerbg0: rgb(192,192,192); --footerbg0: rgb(192,192,192);
--link0: rgb(0,0,120); --link0: rgb(0,0,120);
--link1: rgb(192,192,192); --link1: rgb(192,192,192);
--menulink0: rgb(0,0,120); --menulink0: rgb(0,0,120);
--menulink1: rgb(255,255,255); --menulink1: rgb(255,255,255);
--menubg0: rgb(192,192,192); --menubg0: rgb(192,192,192);
--text0: rgb(0,0,0); --text0: rgb(0,0,0);
--text1: rgb(0,0,120); --text1: rgb(0,0,120);
} }
a { a {
color: var(--link0); color: var(--link0);
transition: var(--transtime); transition: var(--transtime);
} }
a:hover { a:hover {
color: var(--link1); color: var(--link1);
} }
body { body {
background: var(--bg0); background: var(--bg0);
} }
footer { footer {
background: var(--footerbg0); background: var(--footerbg0);
color: var(--text0); color: var(--text0);
} }
footer a { footer a {
color: var(--menulink0); color: var(--menulink0);
} }
footer a:hover { footer a:hover {
color: var(--bg0); color: var(--bg0);
} }
span { span {
color: var(--text1); color: var(--text1);
} }
.container { .container {
color: var(--text0); color: var(--text0);
} }
.container h1, .container h1,
.container h2 { .container h2 {
color: var(--text1); color: var(--text1);
} }
.container .flash { .container .flash {
background-color: var(--error); background-color: var(--error);
} }
.hide-menu:hover, .hide-menu:hover,
.main-menu a:hover, .main-menu a:hover,
.main-menu-dropdown a:hover, .main-menu-dropdown a:hover,
.show-menu:hover { .show-menu:hover {
color: var(--menulink1); color: var(--menulink1);
} }
.main-menu a, .main-menu a,
.main-menu-dropdown a { .main-menu-dropdown a {
color: var(--menulink0); color: var(--menulink0);
} }
.main-menu-dropdown { .main-menu-dropdown {
background: var(--menubg0); background: var(--menubg0);
color: var(--menulink0); color: var(--menulink0);
} }
@media screen and (max-width:800px) { @media screen and (max-width:800px) {
.main-menu {
.main-menu { background: var(--menubg0);
background: var(--menubg0); }
}
} }
.entry { .entry {
background: var(--bg0); background: var(--bg0);
border-left: 10px solid var(--color0); border-left: 10px solid var(--color0);
color: var(--text0); color: var(--text0);
} }
.entry h1, .entry h1,
.entry h2 { .entry h2 {
color: var(--text1); color: var(--text1);
} }
form.search button[type=submit] { form.search button[type=submit] {

236
src/static/css/style.css
View File

@@ -1,241 +1,243 @@
:root { :root {
--error: rgb(255,0,0); --error: rgb(255,0,0);
--transtime: 0.7s; --transtime: 0.7s;
} }
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
a { a {
text-decoration: none; text-decoration: none;
transition: var(--transtime); transition: var(--transtime);
} }
a:hover { a:hover {
cursor: pointer; cursor: pointer;
} }
body { body {
margin: 0; margin: 0;
} }
body, body,
html { html {
font-family: sans-serif; font-family: sans-serif;
max-width: 100%; max-width: 100%;
overflow-x: hidden; overflow-x: hidden;
} }
footer { footer {
height: 100px; height: 100px;
padding-top: 20px; padding-top: 20px;
} }
footer .center { footer .center {
text-align: center; text-align: center;
} }
.container { .container {
min-height: 100%; min-height: 100%;
padding-bottom: 50px; padding-bottom: 50px;
padding-left: 10%; padding-left: 10%;
padding-right: 10%; padding-right: 10%;
padding-top: 5%; padding-top: 5%;
} }
.container .flash { .container .flash {
padding: 10px; padding: 10px;
width: 400px; width: 400px;
} }
.hide-menu, .hide-menu,
.show-menu { .show-menu {
cursor: pointer; cursor: pointer;
display: none; display: none;
font-size: 30px; font-size: 30px;
transition: var(--transtime); transition: var(--transtime);
} }
.important { .important {
font-size: xx-large; font-size: xx-large;
padding-left: 25vw; padding-left: 25vw;
padding-right: 25vw; padding-right: 25vw;
padding-top: 30vh; padding-top: 30vh;
text-align: left; text-align: left;
} }
.important span { .important span {
font-weight: bold; font-weight: bold;
} }
.logo { .logo {
height: 80px; height: 80px;
padding-top: 10px; padding-top: 10px;
} }
.main-menu-dropdown img { .main-menu-dropdown img {
float: left; float: left;
} }
.main-menu-dropdown span, .main-menu-dropdown span,
.main-menu-dropdown a { .main-menu-dropdown a {
float: left; float: left;
font-family: Georgia, serif; font-family: Georgia, serif;
font-size: 30px; font-size: 30px;
font-weight: bold; font-weight: bold;
line-height: 100px; line-height: 100px;
padding: 0 10px; padding: 0 10px;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
transition: 0.7s; transition: 0.7s;
} }
.main-menu { .main-menu {
float: right; float: right;
font-family: Georgia, serif; font-family: Georgia, serif;
font-size: 30px; font-size: 30px;
font-weight: bold; font-weight: bold;
line-height: 100px; line-height: 100px;
} }
.main-menu a { .main-menu a {
padding: 0 10px; padding: 0 10px;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
transition: 0.7s; transition: 0.7s;
} }
.main-menu-dropdown { .main-menu-dropdown {
height: 100px; height: 100px;
padding: 0 20px; padding: 0 20px;
} }
.show-menu { .show-menu {
float: right; float: right;
line-height: 100px; line-height: 100px;
} }
#main-menu-check { #main-menu-check {
position: absolute; position: absolute;
visibility: hidden; visibility: hidden;
z-index: -1111; z-index: -1111;
} }
@media screen and (max-width:800px) { @media screen and (max-width:800px) {
.hide-menu { .hide-menu {
position: absolute; position: absolute;
right: 40px; right: 40px;
top: 40px; top: 40px;
} }
.hide-menu, .hide-menu,
.show-menu { .show-menu {
display: block; display: block;
} }
.main-menu { .main-menu {
height: 100vh; height: 100vh;
line-height: normal; line-height: normal;
padding: 80px 0; padding: 80px 0;
position: fixed; position: fixed;
right: -100%; right: -100%;
text-align: center; text-align: center;
top: 0; top: 0;
transition: var(--transtime); transition: var(--transtime);
width: 100%; width: 100%;
} }
.main-menu a {
display: block;
padding: 20px;
}
#main-menu-check:checked ~ .main-menu { .main-menu a {
right: 0; display: block;
} padding: 20px;
}
#main-menu-check:checked ~ .main-menu {
right: 0;
}
} }
form { form {
margin-bottom: 40px; margin-bottom: 40px;
} }
.standalone { .standalone {
max-height: 100%; max-height: 100%;
} }
.entry { .entry {
max-height: 100%; max-height: 100%;
/* border-radius: 0 10px 30px 0; */ /* border-radius: 0 10px 30px 0; */
margin-bottom: 20px; margin-bottom: 20px;
padding-left: 20px; padding-left: 20px;
} }
h1, h2 { h1, h2 {
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
} }
h3 { h3 {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
} }
.standalone h1:first-child { .standalone h1:first-child {
padding-bottom: 0; padding-bottom: 0;
} }
.imprint h1:first-child { .imprint h1:first-child {
padding-bottom: 20px; padding-bottom: 20px;
} }
.blog h1:first-child { .blog h1:first-child {
padding-bottom: 20px; padding-bottom: 20px;
} }
.entry h2:first-child { .entry h2:first-child {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
.blogarchive h1:first-child { .blogarchive h1:first-child {
padding-bottom: 0; padding-bottom: 0;
} }
.blogarchive h2:first-child { .blogarchive h2:first-child {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
.entry ul { .entry ul {
padding-left: 20; padding-left: 20;
} }
figure { figure {
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
} }
.entry figure:last-child { .entry figure:last-child {
padding-bottom:0 padding-bottom:0
} }
ul { ul {
padding-left:20px; padding-left:20px;
} }
ol { ol {
padding-left:20px; padding-left:20px;
} }
code { code {
/* border-radius: 25px; */ /* border-radius: 25px; */
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
page-break-inside: avoid; page-break-inside: avoid;
font-family: monospace; font-family: monospace;
white-space: pre; white-space: pre;
display: inline-block display: inline-block
} }
form.search input[type=text] { form.search input[type=text] {