From 6c5eb39f9660fff4cf1c5752bde8a3f64c9bf5ad Mon Sep 17 00:00:00 2001 From: BodgeMaster <> Date: Tue, 7 Sep 2021 07:47:48 +0200 Subject: [PATCH] formatting --- threadr/style.css | 388 +++++++++++++++++++++++----------------------- 1 file changed, 195 insertions(+), 193 deletions(-) diff --git a/threadr/style.css b/threadr/style.css index e0c530f..10a0877 100644 --- a/threadr/style.css +++ b/threadr/style.css @@ -1,265 +1,267 @@ .container{ - display: grid; - grid-template-rows: 100px; - grid-template-columns: 1fr 3fr 1fr; - grid-gap: 10px; - grid-auto-rows: minmax(100px, auto); - padding: 25px 25px; + display: grid; + grid-template-rows: 100px; + grid-template-columns: 1fr 3fr 1fr; + grid-gap: 10px; + grid-auto-rows: minmax(100px, auto); + padding: 25px 25px; } .beige { - color: %COLOR_BEIGE%; + color: %COLOR_BEIGE%; } .orange { - color: %COLOR_ORANGE%; + color: %COLOR_ORANGE%; } .blue { - color: %COLOR_BLUE%; + color: %COLOR_BLUE%; } .pink { - color: %COLOR_PINK%; + color: %COLOR_PINK%; } .cyan { - color: %COLOR_CYAN%; + color: %COLOR_CYAN%; } .beige-b { - background-color: %COLOR_BEIGE%; + background-color: %COLOR_BEIGE%; } .orange-b { - background-color: %COLOR_ORANGE%; + background-color: %COLOR_ORANGE%; } .blue-b { - background-color: %COLOR_BLUE%; + background-color: %COLOR_BLUE%; } .pink-b { - background-color: %COLOR_PINK%; + background-color: %COLOR_PINK%; } .cyan-b { - background-color: %COLOR_CYAN%; + background-color: %COLOR_CYAN%; } div { - overflow: hidden; - text-overflow: clip; + overflow: hidden; + text-overflow: clip; } div.item-1 { - grid-column: 2 / 3; - grid-row: 1; + grid-column: 2 / 3; + grid-row: 1; } div.item-2 { - grid-column: 2 / 3; - grid-row: 2; + grid-column: 2 / 3; + grid-row: 2; } div.item-3 { - grid-column: 2 / 3; - grid-row: 3; + grid-column: 2 / 3; + grid-row: 3; } div.item-4 { - grid-column: 2 / 3; - grid-row: 4; + grid-column: 2 / 3; + grid-row: 4; } div.margin { - margin-top: 0px; - margin-bottom: 24px; - margin-left: 16px; - margin-right: 16px; + margin-top: 0px; + margin-bottom: 24px; + margin-left: 16px; + margin-right: 16px; } div.postcontent { - padding: 40px 0px 0px 0px; + padding: 40px 0px 0px 0px; } div.banner { - position: fixed; - left: 0; - bottom: 0; - width: 100%; - background-color: %COLOR_BLUE%; + position: fixed; + left: 0; + bottom: 0; + width: 100%; + background-color: %COLOR_BLUE%; } body { margin: 0px; background-color: %COLOR_BEIGE%; color: %COLOR_BLUE%; - font-size: 1em; + font-size: 1em; } p { - font-family: monospace; - color: %COLOR_BLUE%; + font-family: monospace; + color: %COLOR_BLUE%; } a { - font-family: monospace; - color: %COLOR_BLUE%; + font-family: monospace; + color: %COLOR_BLUE%; } i { - font-family: monospace; - color: %COLOR_BLUE%; + font-family: monospace; + color: %COLOR_BLUE%; } li { - font-family: monospace; - color: %COLOR_BLUE%; + font-family: monospace; + color: %COLOR_BLUE%; } input { - font-family: monospace; - width: 100%; - border-radius: 4px; - padding: 14px 20px; - margin: 8px 0; - background-color: %COLOR_BEIGE%; + font-family: monospace; + width: 100%; + border-radius: 4px; + padding: 14px 20px; + margin: 8px 0; + background-color: %COLOR_BEIGE%; } input[type=text], select { - color: %COLOR_BLUE%; - display: inline-block; - border: 1px solid %COLOR_BLUE%; - box-sizing: border-box; - box-shadow: inset 0px 8px 16px 0px rgba(0,0,0,0.2); + color: %COLOR_BLUE%; + display: inline-block; + border: 1px solid %COLOR_BLUE%; + box-sizing: border-box; + box-shadow: inset 0px 8px 16px 0px rgba(0,0,0,0.2); } input[type=password], select { - color: %COLOR_BLUE%; - display: inline-block; - border: 1px solid %COLOR_BLUE%; - box-sizing: border-box; - box-shadow: inset 0px 8px 16px 0px rgba(0,0,0,0.2); + color: %COLOR_BLUE%; + display: inline-block; + border: 1px solid %COLOR_BLUE%; + box-sizing: border-box; + box-shadow: inset 0px 8px 16px 0px rgba(0,0,0,0.2); } input[type=submit] { - background-color: %COLOR_BLUE%; - color: %COLOR_BEIGE%; - border: none; - cursor: pointer; + background-color: %COLOR_BLUE%; + color: %COLOR_BEIGE%; + border: none; + cursor: pointer; } input[type=submit]:hover { - background-color: %COLOR_CYAN%; + background-color: %COLOR_CYAN%; } textarea { - font-family: monospace; - width: 100%; - border-radius: 4px; - padding: 14px 20px; - margin: 8px 0; - background-color: %COLOR_BEIGE%; - color: %COLOR_BLUE%; - display: inline-block; - border: 1px solid %COLOR_BLUE%; - box-sizing: border-box; - box-shadow: inset 0px 8px 16px 0px rgba(0,0,0,0.2); + font-family: monospace; + width: 100%; + border-radius: 4px; + padding: 14px 20px; + margin: 8px 0; + background-color: %COLOR_BEIGE%; + color: %COLOR_BLUE%; + display: inline-block; + border: 1px solid %COLOR_BLUE%; + box-sizing: border-box; + box-shadow: inset 0px 8px 16px 0px rgba(0,0,0,0.2); } button { - font-family: monospace; - background-color: %COLOR_BLUE%; - color: white; - padding: 14px 20px; - margin: 8px 0; - width: 100%; - border: none; - border-radius: 4px; - cursor: pointer; + font-family: monospace; + background-color: %COLOR_BLUE%; + color: white; + padding: 14px 20px; + margin: 8px 0; + width: 100%; + border: none; + border-radius: 4px; + cursor: pointer; } button:hover { - background-color: %COLOR_CYAN%; + background-color: %COLOR_CYAN%; } h1, h2, h3, h4, h5, h6 { - font-family: monospace; - color: %COLOR_BLUE%; + font-family: monospace; + color: %COLOR_BLUE%; } time { - font-family: monospace; - color: %COLOR_BEIGE%; - float: right; + font-family: monospace; + color: %COLOR_BEIGE%; + float: right; } div.right { - float: right; + float: right; } div.round-border { - border: 1px solid %COLOR_BLUE%; - padding: 14px 20px; - margin: 8px 0; - border-radius: 5px; + border: 1px solid %COLOR_BLUE%; + padding: 14px 20px; + margin: 8px 0; + border-radius: 5px; } img { - max-width: 100%; + max-width: 100%; } img.available_space { - object-fit: contain; + object-fit: contain; } div.image_container { - border: 1px solid %COLOR_BLUE%; - padding: 0.5em 0.5em; - background-color: #f0f0f0; - border-radius: 5px; + border: 1px solid %COLOR_BLUE%; + padding: 0.5em 0.5em; + background-color: #f0f0f0; + border-radius: 5px; } p.image_container { - font-size: 0.8em; + font-size: 0.8em; } ul.topnav { - list-style-type: none; - margin: 0; - padding: 0; - position: fixed; - left: 0; - top: 0; - width: 100%; - overflow: hidden; - background-color: %COLOR_BLUE%; - box-shadow: 0 0.7em 1.2em 0 rgba(0,0,0,0.2); + list-style-type: none; + margin: 0; + padding: 0; + position: fixed; + left: 0; + top: 0; + width: 100%; + overflow: hidden; + background-color: %COLOR_BLUE%; + box-shadow: 0 0.7em 1.2em 0 rgba(0,0,0,0.2); } -ul.topnav li {float: left;} +ul.topnav li { + float: left; +} ul.topnav li a { - display: block; - text-align: center; - color: %COLOR_BEIGE%; - font-family: monospace; - font-size: 1em; - padding: 1.2em 1.3em; - text-decoration: none; + display: block; + text-align: center; + color: %COLOR_BEIGE%; + font-family: monospace; + font-size: 1em; + padding: 1.2em 1.3em; + text-decoration: none; } ul.topnav li a:hover:not(.active) { - background-color: %COLOR_CYAN%; + background-color: %COLOR_CYAN%; } ul.topnav li a.active { - background-color: %COLOR_PINK%; + background-color: %COLOR_PINK%; } ul.topnav li.right { - float: right; + float: right; } /*@media screen and (max-width: 600px) { @@ -268,121 +270,121 @@ ul.topnav li.right { }*/ ul.topnav img { - height: 2.55em; + height: 2.55em; } ul.topnav li a.icon { - display: block; - text-align: center; - color: %COLOR_BEIGE%; - font-family: monospace; - font-size: 1em; - text-decoration: none; - padding: 5.4px 9px; + display: block; + text-align: center; + color: %COLOR_BEIGE%; + font-family: monospace; + font-size: 1em; + text-decoration: none; + padding: 5.4px 9px; } /* invisible spacer under nav bar */ div.topnav { - height: 3em; + height: 3em; } ul.list { - list-style-type: none; - margin: 0; - padding: 0; - overflow: hidden; - background-color: %COLOR_BLUE%; + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + background-color: %COLOR_BLUE%; } ul.list li { - float: left; + float: left; } ul.list li a { - display: block; - text-align: center; - color: %COLOR_BEIGE%; - font-family: monospace; - font-size: 1em; - padding: 14px 16px; - text-decoration: none; + display: block; + text-align: center; + color: %COLOR_BEIGE%; + font-family: monospace; + font-size: 1em; + padding: 14px 16px; + text-decoration: none; } ul.list li a:hover:not(.active) { - background-color: %COLOR_CYAN%; + background-color: %COLOR_CYAN%; } ul.list li a.active { - background-color: %COLOR_PINK%; + background-color: %COLOR_PINK%; } .dropdown-content { - display: none; - position: fixed; - background-color: %COLOR_BLUE%; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - z-index: 1; + display: none; + position: fixed; + background-color: %COLOR_BLUE%; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; } .dropdown:hover .dropdown-content { - display: block; + display: block; } .dropdown { - float: left; - overflow: hidden; + float: left; + overflow: hidden; } .dropdown .dropbtn { - font-size: 1em; - border: none; - outline: none; - color: %COLOR_BEIGE%; - padding: 1.2em 1.3em; - background-color: inherit; - font-family: inherit; - margin: 0; + font-size: 1em; + border: none; + outline: none; + color: %COLOR_BEIGE%; + padding: 1.2em 1.3em; + background-color: inherit; + font-family: inherit; + margin: 0; } div.dropdown { - color: %COLOR_BEIGE%; - text-align: center; - font-family: monospace; - font-size: 1em; - text-decoration: none; + color: %COLOR_BEIGE%; + text-align: center; + font-family: monospace; + font-size: 1em; + text-decoration: none; } .dropdown:hover:not(.active) { - background-color: %COLOR_CYAN%; + background-color: %COLOR_CYAN%; } section { - margin-top: 0px; - margin-bottom: 24px; - margin-left: 16px; - margin-right: 16px; - border-radius: 5px; - border: 1px solid %COLOR_BLUE%; - background-color: %COLOR_ORANGE%; - padding: 14px 20px; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + margin-top: 0px; + margin-bottom: 24px; + margin-left: 16px; + margin-right: 16px; + border-radius: 5px; + border: 1px solid %COLOR_BLUE%; + background-color: %COLOR_ORANGE%; + padding: 14px 20px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } article { - border-radius: 5px; - border: 1px solid %COLOR_BLUE%; - background-color: %COLOR_BEIGE%; - padding: 14px 20px; - box-shadow: inset 0px 8px 16px 0px rgba(0,0,0,0.2); - overflow: hidden; + border-radius: 5px; + border: 1px solid %COLOR_BLUE%; + background-color: %COLOR_BEIGE%; + padding: 14px 20px; + box-shadow: inset 0px 8px 16px 0px rgba(0,0,0,0.2); + overflow: hidden; } header { - border-radius: 0px; - border: none; - background-color: %COLOR_BLUE%; - color: %COLOR_BEIGE%; - margin: -40px; - padding: 40px 40px 10px 40px; - box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2); + border-radius: 0px; + border: none; + background-color: %COLOR_BLUE%; + color: %COLOR_BEIGE%; + margin: -40px; + padding: 40px 40px 10px 40px; + box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2); }