diff --git a/threadr/style.css b/threadr/style.css index cb8333a..ef5f3b8 100644 --- a/threadr/style.css +++ b/threadr/style.css @@ -1,113 +1,124 @@ -/* optimized for desktop users */ -/*@media only screen and (min-width: 1280px) {*/ - .container{ - display: grid; - grid-template-rows: 100px; - grid-template-columns: 1fr 3fr 1fr; - grid-gap: 10px; - grid-auto-rows: minmax(100px, auto); - padding: 10px; - } - div { - overflow: hidden; - text-overflow: clip; - } - div.item-1 { - grid-column: 2 / 3; - grid-row: 1; - } - div.item-2 { - grid-column: 2 / 3; - grid-row: 2; - } - div.item-3 { - grid-column: 2 / 3; - grid-row: 3; - } - div.item-4 { - grid-column: 2 / 3; - grid-row: 4; - } - body { - font-size: 1em; - } - p { - font-family: monospace; - color: #001858; - } - a { - font-family: monospace; - color: #001858; - } - i { - font-family: monospace; - color: #001858; - } - li { - font-family: monospace; - color: #001858; - } - input { - font-family: monospace; - } - button { - font-family: monospace; - width: 100%; - background-color: #001858; - color: white; - padding: 14px 20px; - margin: 8px 0; - border: none; - border-radius: 4px; - cursor: pointer; - } +.container{ + display: grid; + grid-template-rows: 100px; + grid-template-columns: 1fr 3fr 1fr; + grid-gap: 10px; + grid-auto-rows: minmax(100px, auto); + padding: 10px; +} + +div { + overflow: hidden; + text-overflow: clip; +} + +div.item-1 { + grid-column: 2 / 3; + grid-row: 1; +} + +div.item-2 { + grid-column: 2 / 3; + grid-row: 2; +} + +div.item-3 { + grid-column: 2 / 3; + grid-row: 3; +} + +div.item-4 { + grid-column: 2 / 3; + grid-row: 4; +} + +body { + font-size: 1em; +} + +p { + font-family: monospace; + color: #001858; +} + +a { + font-family: monospace; + color: #001858; +} + +i { + font-family: monospace; + color: #001858; +} + +li { + font-family: monospace; + color: #001858; +} + +input { + font-family: monospace; + width: 100%; + border-radius: 4px; + padding: 14px 20px; + margin: 8px 0; +} + +input[type=text], select { + color: #8bd3dd; + display: inline-block; + border: 1px solid #001858; + box-sizing: border-box; +} + +input[type=password], select { + color: #8bd3dd; + display: inline-block; + border: 1px solid #001858; + box-sizing: border-box; +} + +input[type=submit] { + background-color: #001858; + color: #fef6e4; + border: none; + cursor: pointer; +} + +input[type=submit]:hover { + background-color: #8bd3dd; +} + +button { + font-family: monospace; + width: 100%; + background-color: #001858; + color: white; + padding: 14px 20px; + margin: 8px 0; + border: none; + border-radius: 4px; + cursor: pointer; +} button:hover { background-color: #8bd3dd; } - h1, h2, h3, h4, h5, h6 { - font-family: monospace; - color: #001858; - } -/*}*/ - -/* optimized for mobile users */ -/* -@media only screen and (max-width: 1279px) { - .container{ - display: grid; - grid-template-columns: repeat(1, 1fr); - grid-template-rows: 100px; - grid-template-columns: 1fr; - grid-auto-rows: minmax(100px, auto); - } - div.item-1 { - grid-column: 1 / 1; - grid-row: 1; - } - div.item-2 { - grid-column: 1 / 1; - grid-row: 2; - } - div.item-3 { - grid-column: 1 / 1; - grid-row: 3; - } - body { - font-size:3em; - } +h1, h2, h3, h4, h5, h6 { + font-family: monospace; + color: #001858; } -*/ div.round-border { - border: 1px solid; - padding: 0.01em 16px; - border-radius: 16px; + border: 1px solid #001858; + padding: 20px; + margin: 8px 0; + border-radius: 5px; } img { - max-width: 100%; + max-width: 100%; } img.available_space { @@ -115,23 +126,20 @@ img.available_space { } div.image_container { - border: 1px solid; + border: 1px solid #001858; padding: 0.5em 0.5em; - background-color: #F0F0F0; + background-color: #001858; + border-radius: 5px; } p.image_container { font-size: 0.8em; } -div.margin { - margin: 20px; -} - body { margin: 0px; background-color: #fef6e4; - color: #000000; + color: #001858; } body.status_page { @@ -313,41 +321,6 @@ div.dropdown { background-color: #8bd3dd; } -input[type=text], select { - width: 100%; - padding: 12px 20px; - margin: 8px 0; - display: inline-block; - border: 1px solid #001858; - border-radius: 4px; - box-sizing: border-box; -} - -input[type=password], select { - width: 100%; - padding: 12px 20px; - margin: 8px 0; - display: inline-block; - border: 1px solid #001858; - border-radius: 4px; - box-sizing: border-box; -} - -input[type=submit] { - width: 100%; - background-color: #001858; - color: #fef6e4; - padding: 14px 20px; - margin: 8px 0; - border: none; - border-radius: 4px; - cursor: pointer; -} - -input[type=submit]:hover { - background-color: #8bd3dd; -} - div.form { border-radius: 5px; border: 1px solid #001858;