From 76dd32d8cfc3af2ebc7342a59cce68595d82fdd9 Mon Sep 17 00:00:00 2001 From: Jakub Date: Thu, 1 Feb 2024 06:22:34 -0500 Subject: [PATCH] wip rewrite of css - much cleaner even RN --- static/css/colors.css | 16 ++ static/css/old.css | 261 ++++++++++++++++++++++++++++++++ static/css/style.css | 343 ++++++++++++++---------------------------- 3 files changed, 386 insertions(+), 234 deletions(-) create mode 100644 static/css/colors.css create mode 100644 static/css/old.css diff --git a/static/css/colors.css b/static/css/colors.css new file mode 100644 index 0000000..c394233 --- /dev/null +++ b/static/css/colors.css @@ -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; + } +} + diff --git a/static/css/old.css b/static/css/old.css new file mode 100644 index 0000000..eec4294 --- /dev/null +++ b/static/css/old.css @@ -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; */ diff --git a/static/css/style.css b/static/css/style.css index babd094..6e6ad62 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -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; */