initial commit

new website repo yay!!!

1 files changed, 117 insertions, 0 deletions

diff --git a/src/static/stylesheets/base.css b/src/static/stylesheets/base.css
new file mode 100644
index 0000000..62c2874
--- /dev/null
+++ b/src/static/stylesheets/base.css
@@ -0,0 +1,117 @@
+:root {
+    font-family: var(--primary-font);
+    font-size: 12px;
+
+    --navbar-height: 39px;
+    --primary-font: "Noto Sans Mono", monospace;
+}
+
+body,
+html {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background-image: url(/static/assets/watercolor.jpg);
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    /* #c9cfff */
+    background-color: rgb(197, 198, 254);
+}
+
+a {
+    text-decoration: none;
+}
+
+input[type="text"] {
+    font-family: var(--primary-font);
+}
+
+.flex-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.flex-col {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.container {
+    padding: 20px;
+    border: 2px #fff solid;
+    background-color: rgba(255, 255, 255, 0.3);
+}
+
+nav {
+    display: flex;
+    flex-direction: row;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    z-index: 10000 !important;
+}
+
+#nav-padding {
+    flex-basis: 0%;
+    flex-grow: 1;
+    max-width: 100%;
+}
+
+#nav-inner {
+    flex: 1 1 auto;
+    width: auto;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 4px 0;
+    margin: 0 auto;
+    gap: 6px;
+    background-color: #3f3f3f;
+    background-image: linear-gradient(to bottom, #3f3f3f, #2a2a2a);
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+.label {
+    display: inline-block;
+    padding: 6px 8px;
+    text-decoration: none;
+    background-image: linear-gradient(to bottom, #1c1c1c, #000);
+    color: #fff;
+    border: 1px solid #ccc;
+}
+
+.label:hover {
+    background-image: linear-gradient(to bottom, #1c1c1c, #2c2c2c);
+}
+
+.label[active] {
+    color: #f33;
+}
+
+#main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    padding-top: calc(var(--navbar-height) + 12px);
+}
+
+@media (max-width: 750px) {
+    #main {
+        padding-left: 5px;
+        padding-right: 5px;
+    }
+}