diff options
Diffstat (limited to 'web/assets/base.css')
-rw-r--r-- | web/assets/base.css | 208 |
1 files changed, 208 insertions, 0 deletions
diff --git a/web/assets/base.css b/web/assets/base.css new file mode 100644 index 000000000..b28cf2533 --- /dev/null +++ b/web/assets/base.css @@ -0,0 +1,208 @@ +html, body { + padding: 0; + margin: 0; + background: rgb(70, 79, 88); + color: #fafaff; + font-family: sans-serif; +} + +body { + display: grid; + + grid-template-rows: auto 1fr auto; + min-height: 100vh; + line-height: 1.5em; +} + +main { + background: #525c66; + display: grid; + padding-top: 2rem; + grid-template-columns: 1fr 50% 1fr; + grid-template-columns: auto min(92%, 90ch) auto; +} + +main .left { + grid-column: 1; + } + +main .right { + grid-column: 3; + } + +main.lightgray { + background: #525c66; + } + +main > * { + align-self: start; + grid-column: 2; + } + +header { + background: rgb(70, 79, 88); + padding: 2rem 0; + padding-bottom: 0; + display: flex; + flex-wrap: wrap; +} + +header img { + height: 4rem; + padding-left: 2rem; + padding-bottom: 2rem; + } + +header div { + height: 100%; + margin: 0 2rem; + margin-top: -2rem; + flex-grow: 1; + align-self: center; + display: flex; + } + +header div h1 { + align-self: center; + } + +h1 { + /* color: $acc1; */ + margin: 0; + line-height: 2.4rem; +} + +a { + color: #de8957; +} + +.button, button { + border-radius: 0.2rem; + background: #de8957; + color: #fafaff; + text-decoration: none; + font-size: 1.2rem; + font-weight: bold; + padding: 0.5rem; + border: none; + cursor: pointer; +} + +.button:hover, button:hover { + background: #c76d33; + } + +.count { + background: rgb(70, 79, 88); + border-radius: 0.3rem; + padding: 0.2rem; +} + +.nounderline { + text-decoration: none; +} + +.accent { + color: #de8957; +} + +.logo { + justify-self: center; +} + +.logo img { + height: 30vh; + } + +section.apps { + align-self: start; +} + +section.apps .applist { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 0.5rem; + align-content: start; + } + +section.apps .applist .entry { + display: grid; + grid-template-columns: 30% 1fr; + gap: 0.5rem; + padding: 0.5rem; + background: rgb(70, 79, 88); + border-radius: 0.5rem; + } + +section.apps .applist .entry .logo { + align-self: center; + width: 100%; + object-fit: contain; + flex: 1 1 auto; + } + +section.apps .applist .entry .logo.redraw { + fill: #fafaff; + stroke: #fafaff; + } + +section.apps .applist .entry div { + padding: 1rem 0; + } + +section.apps .applist .entry div h3 { + margin-top: 0; + } + +section.login form { + display: inline-grid; + grid-template-columns: auto 100%; + grid-gap: 0.7rem; + } + +section.login form button { + place-self: center; + grid-column: 2; + } + +input, select, textarea { + border: 1px solid #fafaff; + color: #fafaff; + background: #525c66; + width: 100%; +} + +footer { + align-self: end; + + padding: 2rem; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; +} + +footer a { + font-weight: bold; + } + +@media screen and (orientation: portrait) { + main { + grid-template-columns: 1fr 92% 1fr; + } + + header { + text-align: center; + } + + footer { + margin-top: 2rem; + grid-template-columns: 1fr; + } + + footer div { + margin: 0.3rem 0; + } + + section.apps .applist { + grid-template-columns: 1fr; + } +}
\ No newline at end of file |