From 6fb74111567ee1e184c365c79f793b6d12241f4c Mon Sep 17 00:00:00 2001 From: tiyn Date: Sat, 20 Apr 2024 23:41:39 +0200 Subject: [PATCH] made tabbing in css uniform --- src/static/css/dark.css | 66 +++++------ src/static/css/light.css | 71 ++++++------ src/static/css/style.css | 242 ++++++++++++++++++++------------------- 3 files changed, 190 insertions(+), 189 deletions(-) diff --git a/src/static/css/dark.css b/src/static/css/dark.css index 3b2752d..1b31744 100644 --- a/src/static/css/dark.css +++ b/src/static/css/dark.css @@ -1,88 +1,88 @@ @import 'style.css'; :root { - --bg0: rgb(29,32,33); - --color0: rgb(220,120,0); - --color1: rgb(280,180,0); - --error: rgb(255,0,0); - --footerbg0: rgb(29,32,33); - --link0: rgb(220, 120, 0); - --link1: rgb(255,255,255); - --menulink0: rgb(220, 120, 0); - --menulink1: rgb(255,255,255); - --menubg0: rgb(29,32,33); - --text0: rgb(235,219,178); - --text1: rgb(220, 120, 0); + --bg0: rgb(29,32,33); + --color0: rgb(220,120,0); + --color1: rgb(280,180,0); + --error: rgb(255,0,0); + --footerbg0: rgb(29,32,33); + --link0: rgb(220, 120, 0); + --link1: rgb(255,255,255); + --menulink0: rgb(220, 120, 0); + --menulink1: rgb(255,255,255); + --menubg0: rgb(29,32,33); + --text0: rgb(235,219,178); + --text1: rgb(220, 120, 0); } a { - color: var(--link0); - transition: var(--transtime); + color: var(--link0); + transition: var(--transtime); } a:hover { - color: var(--link1); + color: var(--link1); } body { - background: var(--bg0); + background: var(--bg0); } footer { - background: var(--footerbg0); - color: var(--text0); + background: var(--footerbg0); + color: var(--text0); } span { - color: var(--text1); + color: var(--text1); } .container { - color: var(--text0); + color: var(--text0); } .container h1, .container h2 { - color: var(--text1); + color: var(--text1); } .container .flash { - background-color: var(--error); + background-color: var(--error); } .hide-menu:hover, .main-menu a:hover, .main-menu-dropdown a:hover, .show-menu:hover { - color: var(--menulink1); + color: var(--menulink1); } .main-menu a, .main-menu-dropdown a { - color: var(--menulink0); + color: var(--menulink0); } .main-menu-dropdown { - background: var(--menubg0); - color: var(--menulink0); + background: var(--menubg0); + color: var(--menulink0); } @media screen and (max-width:800px) { - .main-menu { - background: var(--menubg0); - } + .main-menu { + background: var(--menubg0); + } } .entry { - background: var(--bg0); - border-left: 10px solid var(--color0); - color: var(--text0); + background: var(--bg0); + border-left: 10px solid var(--color0); + color: var(--text0); } .entry h1, .entry h2 { - color: var(--text1); + color: var(--text1); } diff --git a/src/static/css/light.css b/src/static/css/light.css index 2624dbb..570a188 100644 --- a/src/static/css/light.css +++ b/src/static/css/light.css @@ -1,96 +1,95 @@ @import 'style.css'; :root { - --bg0: rgb(255,255,255); - --color0: rgb(0,0,120); - --color1: rgb(0,0,200); - --error: rgb(255,0,0); - --footerbg0: rgb(192,192,192); - --link0: rgb(0,0,120); - --link1: rgb(192,192,192); - --menulink0: rgb(0,0,120); - --menulink1: rgb(255,255,255); - --menubg0: rgb(192,192,192); - --text0: rgb(0,0,0); - --text1: rgb(0,0,120); + --bg0: rgb(255,255,255); + --color0: rgb(0,0,120); + --color1: rgb(0,0,200); + --error: rgb(255,0,0); + --footerbg0: rgb(192,192,192); + --link0: rgb(0,0,120); + --link1: rgb(192,192,192); + --menulink0: rgb(0,0,120); + --menulink1: rgb(255,255,255); + --menubg0: rgb(192,192,192); + --text0: rgb(0,0,0); + --text1: rgb(0,0,120); } a { - color: var(--link0); - transition: var(--transtime); + color: var(--link0); + transition: var(--transtime); } a:hover { - color: var(--link1); + color: var(--link1); } body { - background: var(--bg0); + background: var(--bg0); } footer { - background: var(--footerbg0); - color: var(--text0); + background: var(--footerbg0); + color: var(--text0); } footer a { - color: var(--menulink0); + color: var(--menulink0); } footer a:hover { - color: var(--bg0); + color: var(--bg0); } span { - color: var(--text1); + color: var(--text1); } .container { - color: var(--text0); + color: var(--text0); } .container h1, .container h2 { - color: var(--text1); + color: var(--text1); } .container .flash { - background-color: var(--error); + background-color: var(--error); } .hide-menu:hover, .main-menu a:hover, .main-menu-dropdown a:hover, .show-menu:hover { - color: var(--menulink1); + color: var(--menulink1); } .main-menu a, .main-menu-dropdown a { - color: var(--menulink0); + color: var(--menulink0); } .main-menu-dropdown { - background: var(--menubg0); - color: var(--menulink0); + background: var(--menubg0); + color: var(--menulink0); } @media screen and (max-width:800px) { - - .main-menu { - background: var(--menubg0); - } + .main-menu { + background: var(--menubg0); + } } .entry { - background: var(--bg0); - border-left: 10px solid var(--color0); - color: var(--text0); + background: var(--bg0); + border-left: 10px solid var(--color0); + color: var(--text0); } .entry h1, .entry h2 { - color: var(--text1); + color: var(--text1); } form.search button[type=submit] { diff --git a/src/static/css/style.css b/src/static/css/style.css index 72966d5..efc6e5a 100644 --- a/src/static/css/style.css +++ b/src/static/css/style.css @@ -1,241 +1,243 @@ :root { - --error: rgb(255,0,0); - --transtime: 0.7s; + --error: rgb(255,0,0); + --transtime: 0.7s; } * { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } a { - text-decoration: none; - transition: var(--transtime); + text-decoration: none; + transition: var(--transtime); } a:hover { - cursor: pointer; + cursor: pointer; } body { - margin: 0; + margin: 0; } body, html { - font-family: sans-serif; - max-width: 100%; - overflow-x: hidden; + font-family: sans-serif; + max-width: 100%; + overflow-x: hidden; } footer { - height: 100px; - padding-top: 20px; + height: 100px; + padding-top: 20px; } footer .center { - text-align: center; + text-align: center; } .container { - min-height: 100%; - padding-bottom: 50px; - padding-left: 10%; - padding-right: 10%; - padding-top: 5%; + min-height: 100%; + padding-bottom: 50px; + padding-left: 10%; + padding-right: 10%; + padding-top: 5%; } .container .flash { - padding: 10px; - width: 400px; + padding: 10px; + width: 400px; } .hide-menu, .show-menu { - cursor: pointer; - display: none; - font-size: 30px; - transition: var(--transtime); + cursor: pointer; + display: none; + font-size: 30px; + transition: var(--transtime); } .important { - font-size: xx-large; - padding-left: 25vw; - padding-right: 25vw; - padding-top: 30vh; - text-align: left; + font-size: xx-large; + padding-left: 25vw; + padding-right: 25vw; + padding-top: 30vh; + text-align: left; } .important span { - font-weight: bold; + font-weight: bold; } .logo { - height: 80px; - padding-top: 10px; + height: 80px; + padding-top: 10px; } .main-menu-dropdown img { - float: left; + float: left; } + .main-menu-dropdown span, .main-menu-dropdown a { - float: left; - font-family: Georgia, serif; - font-size: 30px; - font-weight: bold; - line-height: 100px; - padding: 0 10px; - text-decoration: none; - text-transform: uppercase; - transition: 0.7s; + float: left; + font-family: Georgia, serif; + font-size: 30px; + font-weight: bold; + line-height: 100px; + padding: 0 10px; + text-decoration: none; + text-transform: uppercase; + transition: 0.7s; } .main-menu { - float: right; - font-family: Georgia, serif; - font-size: 30px; - font-weight: bold; - line-height: 100px; + float: right; + font-family: Georgia, serif; + font-size: 30px; + font-weight: bold; + line-height: 100px; } .main-menu a { - padding: 0 10px; - text-decoration: none; - text-transform: uppercase; - transition: 0.7s; + padding: 0 10px; + text-decoration: none; + text-transform: uppercase; + transition: 0.7s; } .main-menu-dropdown { - height: 100px; - padding: 0 20px; + height: 100px; + padding: 0 20px; } .show-menu { - float: right; - line-height: 100px; + float: right; + line-height: 100px; } #main-menu-check { - position: absolute; - visibility: hidden; - z-index: -1111; + position: absolute; + visibility: hidden; + z-index: -1111; } @media screen and (max-width:800px) { - .hide-menu { - position: absolute; - right: 40px; - top: 40px; - } - - .hide-menu, - .show-menu { - display: block; - } - - .main-menu { - height: 100vh; - line-height: normal; - padding: 80px 0; - position: fixed; - right: -100%; - text-align: center; - top: 0; - transition: var(--transtime); - width: 100%; - } - .main-menu a { - display: block; - padding: 20px; - } - - #main-menu-check:checked ~ .main-menu { - right: 0; - } + .hide-menu { + position: absolute; + right: 40px; + top: 40px; + } + + .hide-menu, + .show-menu { + display: block; + } + + .main-menu { + height: 100vh; + line-height: normal; + padding: 80px 0; + position: fixed; + right: -100%; + text-align: center; + top: 0; + transition: var(--transtime); + width: 100%; + } + + .main-menu a { + display: block; + padding: 20px; + } + + #main-menu-check:checked ~ .main-menu { + right: 0; + } } form { - margin-bottom: 40px; + margin-bottom: 40px; } .standalone { - max-height: 100%; + max-height: 100%; } .entry { - max-height: 100%; - /* border-radius: 0 10px 30px 0; */ - margin-bottom: 20px; - padding-left: 20px; + max-height: 100%; + /* border-radius: 0 10px 30px 0; */ + margin-bottom: 20px; + padding-left: 20px; } h1, h2 { - padding-top: 20px; - padding-bottom: 20px; + padding-top: 20px; + padding-bottom: 20px; } h3 { - padding-top: 10px; - padding-bottom: 10px; + padding-top: 10px; + padding-bottom: 10px; } .standalone h1:first-child { - padding-bottom: 0; + padding-bottom: 0; } .imprint h1:first-child { - padding-bottom: 20px; + padding-bottom: 20px; } .blog h1:first-child { - padding-bottom: 20px; + padding-bottom: 20px; } .entry h2:first-child { - padding-top: 0; - padding-bottom: 0; + padding-top: 0; + padding-bottom: 0; } .blogarchive h1:first-child { - padding-bottom: 0; + padding-bottom: 0; } .blogarchive h2:first-child { - padding-top: 0; - padding-bottom: 0; + padding-top: 0; + padding-bottom: 0; } .entry ul { - padding-left: 20; + padding-left: 20; } figure { - padding-top: 20px; - padding-bottom: 20px; + padding-top: 20px; + padding-bottom: 20px; } .entry figure:last-child { - padding-bottom:0 + padding-bottom:0 } ul { - padding-left:20px; + padding-left:20px; } ol { - padding-left:20px; + padding-left:20px; } code { - /* border-radius: 25px; */ - padding-left: 20px; - padding-right: 20px; - page-break-inside: avoid; - font-family: monospace; - white-space: pre; - display: inline-block + /* border-radius: 25px; */ + padding-left: 20px; + padding-right: 20px; + page-break-inside: avoid; + font-family: monospace; + white-space: pre; + display: inline-block } form.search input[type=text] {