From 051a5213b39720215fe35ce359c5ddd0251249dc Mon Sep 17 00:00:00 2001 From: dabikers' admin Date: Wed, 24 Apr 2024 01:35:04 -0500 Subject: Give the site a face lift --- css/base.css | 236 +++++++++++++++++++++++++++++++++++++---------------------- 1 file changed, 149 insertions(+), 87 deletions(-) (limited to 'css/base.css') diff --git a/css/base.css b/css/base.css index 1ec9ff3..df8506e 100644 --- a/css/base.css +++ b/css/base.css @@ -19,154 +19,216 @@ /* */ :root { - --theight: fit-content; - --bheight: fit-content; /* min-content This feels hackey but it works & stops overflow */ + --bgcolor: #232627; + --fgcolor: rgb(255, 255, 255); - --cblack: #000000; - --cwhite: #ffffff; - --cgray: #232627; /* Nicer gray than previously */ + --tb_bgcolor: black; + --tb_fgcolor: white; + --tb_height: fit-content; + --tb_padding: 1vw; - /* Color palate for the site */ - --cebony: #2e2920; - --ctaupe: #e9e6e2; - --corange: #f9c070; - --ctan: #8e4c30; + --padding_sides: 3vw; + --padding_updown: 2vw; + + --linkcolor: #f9c070; } * { - padding: 0; - margin: 0; + margin: 0; + padding: 0; } body { - background-color: var(--cgray); - color: var(--ctaupe); - font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: var(--bgcolor); + color: var(--fgcolor); + + font-family: Verdana, Geneva, Tahoma, sans-serif; } li { - list-style-type: '- '; + list-style: ""; } -ul { - padding-top: 1vw; - padding-bottom: 1vw; - padding-left: 2vw; - padding-right: 2vw; -} /* Looks good for the links */ - a { - color: var(--corange); + color: var(--linkcolor); } .vertcontain { display: flex; flex-flow: column nowrap; - justify-content: space-around; align-content: center; } -#content { - padding: 1vw; - margin: 1vw; - margin-bottom: 5vw; /* Not knowing about this was fucking annoying */ +.side-by-side { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; +} - overflow: auto; - overflow-wrap: break-word; +.centered { + flex-flow: column nowrap; + justify-content: center; + align-items: center; } -#top-bar { - padding: 0.5vw; +.blockedout { + display: inline-block; + width: 100%; +} - /* Floats h1 and ul/li side by side */ - display: flex; - flex-flow: row nowrap; - justify-content: space-between; - align-items: center; - align-content: center; +.indented { + text-indent: 4ch each-line; +} - height: var(--theight); +a.bracketed::before { + content: "["; +} +a.bracketed::after { + content: "]"; +} + +a.nodec { + text-decoration: none; +} + +a.nocolor { + color:inherit; +} + +#top-bar { + display:flex; + justify-content: center; + align-items: center; + + background-color: var(--tb_bgcolor); + color: var(--tb_fgcolor); - background-color: var(--cblack); - color: var(--cwhite); + padding: var(--tb_padding); + height: var(--tb_height); - position: -webkit-sticky; + position: -webkit-sticky; position: sticky; top: 0; - font-family: 'zai_courier_polski_1941Rg', 'Courier New', Courier, monospace; + font-family: 'zai_courier_polski_1941Rg'; } #top-bar h1 { - text-align: left; - font-size: 5vw; + font-family: inherit; + font-size: max(5vw, 5ch); } #top-bar a { - color: inherit; - text-decoration: none; + color: inherit; + text-decoration: none; } -#top-bar li { - list-style: none; - display: inline; - float: none; +input { + display: none; } -#top-bar li a::before { - content: "["; + +label { + cursor: pointer; + font-weight: bold; + font-family: 'zai_courier_polski_1941Rg'; + font-size: max(2.5vw, 3ch); } -#top-bar li a::after { - content: "]"; + +.dropdown { + position: relative; + display: inline-block; + width: fit-content; } -#bottom-bar { - padding: 0.5vw; - height: var(--bheight); - width: 100%; +.drophold { + background-color: inherit; + color: inherit; + + border: none; +} - position: fixed; - bottom: 0; +.dropdown-content { + display: none; + position: absolute; + z-index: 1; - background-color: var(--cblack); - color: var(--cwhite); + width: 100%; + overflow: auto; - list-style-type: none; + background-color: var(--tb_bgcolor); + color: var(--tb_fgcolor); +} - font-family: 'zai_courier_polski_1941Rg', 'Courier New', Courier, monospace; - text-align: center; +.drophold:checked~.dropdown-content { + display: block; +} - /* overflow: auto; Idk why this is "overflowing" but this should be a good enough fix fow now */ - overflow: auto; +.dropdown-content a:hover { + font-style: italic; } -#bottom-flex { - display: flex; - justify-content: center; - align-items: center; +.dropdown-content a::before { + content: "["; } -#bottom-bar a { - color: inherit; - text-decoration: none; - font-weight: bold; +.dropdown-content a::after { + content: "]"; } -/* Surround links with square brackets in the footer */ -#bottom-bar a::before { - content: "["; +.dropdown-content li { + text-align: center; +} + +.spacer { + width: 50%; + height: 50%; } -#bottom-bar a::after { - content: "]"; + +#ddnav { + width: 35%; + text-align: center; + + font-family: inherit; } -#bottom-bar ul { - padding: 0; +#content { + padding-left: var(--padding_sides); + padding-right: var(--padding_sides); + + padding-top: var(--padding_updown); + padding-bottom: var(--padding_updown); + + margin-bottom: 5vw; /* I should find a better way than just setting a static number */ +} + +#bottom-bar { + padding: 0.75ch; + height: fit-content; + width: 100%; + + position: fixed; + bottom: 0; + + color: var(--tb_fgcolor); + background-color: var(--tb_bgcolor); + + font-family: 'zai_courier_polski_1941Rg', 'Courier New', Courier, monospace; + text-align: center; +} + +#bottom-bar a { + color: inherit; + text-decoration: none; +} + +#bottom-bar a::before { + content: "[" } -#bottom-bar li { - display: inline; - float: none; +#bottom-bar a:after { + content: "]" } #copyrightnotice { -- cgit v1.2.3