summaryrefslogtreecommitdiff
path: root/web/assets/base.css
diff options
context:
space:
mode:
Diffstat (limited to 'web/assets/base.css')
-rw-r--r--web/assets/base.css208
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