summaryrefslogtreecommitdiff
path: root/static/main.css
diff options
context:
space:
mode:
authorboredpasta <boredpasta@tutanota.com>2025-01-13 06:39:10 +0200
committerboredpasta <boredpasta@tutanota.com>2025-01-13 06:39:10 +0200
commit44595618b5d162e8bb8362e3891dc694342d1869 (patch)
treea0b08aebb5c6d38b0138c9dd3917d42e03da6c98 /static/main.css
parent6e6c4aefd07da0aba70d651099a69c928aa7eae7 (diff)
Add project filesHEADmaster
Diffstat (limited to 'static/main.css')
-rw-r--r--static/main.css168
1 files changed, 168 insertions, 0 deletions
diff --git a/static/main.css b/static/main.css
new file mode 100644
index 0000000..f54c149
--- /dev/null
+++ b/static/main.css
@@ -0,0 +1,168 @@
+:root {
+ --color-grey: #222222;
+ --text-color: #f9f9f9;
+ --color-purple: #8f60af;
+ --background-img: url(/static/tile.png);
+ --banner-img: url(/static/banner.png);
+}
+
+* {
+ cursor: url("/static/cursor.png"), auto;
+}
+
+body {
+ min-width: 20rem;
+ max-width: 60rem;
+ margin: auto;
+ padding: 1em;
+ color: var(--text-color);
+ background-image: var(--background-img);
+ display: flex;
+ gap: 1em;
+ flex-wrap: wrap;
+ flex-direction: row-reverse;
+}
+
+header {
+ flex-basis: 100%;
+ display: flex;
+ position: relative;
+ justify-content: center;
+}
+
+nav {
+ flex-basis: 10%;
+ flex-grow: 1;
+ display: flex;
+ align-items: start;
+}
+
+main {
+ flex-basis: 70%;
+ flex-grow: 1;
+}
+
+footer {
+ flex-basis: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5em;
+}
+
+a {
+ color: lightblue;
+}
+
+.nav-list {
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: flex;
+ gap: 1em;
+ flex-wrap: wrap;
+}
+
+.nav-item {
+ flex-grow: 1;
+ flex-shrink: 1;
+ flex-basis: 0;
+ display: flex;
+}
+
+.box {
+ padding: 1em;
+ border-style: groove;
+ border-width: 0.5em;
+ background-color: var(--color-grey);
+ border-color: var(--color-purple);
+}
+
+.lighten:hover {
+ filter: brightness(110%);
+}
+
+.nav-link {
+ width: 100%;
+ text-align: center;
+ align-content: center;
+ color: var(--color-grey);
+ text-decoration: none;
+ background: var(--color-purple);
+ border-style: outset;
+ border-color: var(--color-purple);
+ padding: 0.5em;
+ font-family: monospace;
+ font-weight: bold;
+ font-size: 1.5em;
+}
+
+.nav-link:hover {
+ filter: brightness(130%);
+}
+
+.buttonbadge {
+ width: 88px;
+ height: 31px;
+ vertical-align: middle;
+}
+
+.codeblock {
+ white-space: pre-wrap;
+ word-break: break-all;
+ background: black;
+ color: lightgreen;
+}
+
+#banner {
+ max-width: 100%;
+ object-fit: contain;
+ image-rendering: pixelated;
+}
+
+#construction {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ height: auto;
+ width: 30%;
+ max-width: 125px;
+ max-height: 100%;
+}
+
+#status {
+ margin: 0;
+ background-color: #8f60af;
+ color: var(--color-grey);
+ border-radius: 1.5em;
+ padding: 0.5em;
+ display: flex;
+ align-items: center;
+ gap: 1em;
+ flex-basis: 100%;
+ border-color: var(--color-grey);
+ border-width: 0.1em;
+ border-style: solid;
+}
+
+#status-header {
+ padding: 0.1em 1em;
+ background: white;
+ height: 100%;
+ border-radius: 1em;
+ text-align: center;
+ align-content: center;
+}
+
+#status-body {
+ margin: 0;
+ font-size: 1.2em;
+ color: white;
+ word-break: break-word;
+}
+
+@media only screen and (min-width: 800px) {
+ ul {
+ flex-direction: column;
+ }
+}