initial 1312 funktioniert ein bisschen

static/css/main.css

@@ -0,0 +1,110 @@
+html {
+  border: 1px solig gray;
+  font-family: "DejaVu Serif"; }
+
+div.entry {
+  border: 1px solid gray;
+  padding: 10px 15px;
+  margin: 0px; }
+  div.entry div.entrymeta {
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    gap: 15px;
+    cursor: pointer; }
+    div.entry div.entrymeta span.time {
+      color: gray; }
+    div.entry div.entrymeta span.user {
+      text-decoration: underline; }
+    div.entry div.entrymeta img.userimage {
+      width: 80px; }
+  div.entry div.contents p {
+    margin: 8pt 0pt; }
+  div.entry img {
+    max-width: 100%; }
+  div.entry.comment {
+    border: none;
+    padding: 0px 15px;
+    margin: 0px;
+    display: flex;
+    gap: 5px; }
+    div.entry.comment .left {
+      width: 70px;
+      display: flex;
+      flex-direction: column; }
+      div.entry.comment .left .spacer {
+        background-color: black;
+        height: 100%;
+        width: 6%;
+        margin: 0px 47%; }
+
+form {
+  display: flex;
+  flex-direction: column;
+  width: 400px;
+  max-width: 100%; }
+  form textarea {
+    resize: vertical;
+    font-size: 1.0rem; }
+  form.create {
+    border: 1px solid gray;
+    padding: 10px 15px;
+    margin: 0px; }
+  form hr {
+    width: 100%; }
+
+input,
+textarea,
+button,
+select {
+  padding: 4pt 6pt;
+  margin: 3pt 0pt;
+  border: 2px solid black;
+  cursor: pointer;
+  box-shadow: 0px 0px; }
+  input:hover,
+  textarea:hover,
+  button:hover,
+  select:hover {
+    box-shadow: 1px 1px; }
+  input:focus,
+  textarea:focus,
+  button:focus,
+  select:focus {
+    box-shadow: 3px 3px black;
+    outline: none; }
+
+button {
+  background-color: #ffabcd; }
+
+#response div {
+  padding: 4pt 6pt; }
+
+#response .error {
+  color: red; }
+
+.loading {
+  background-color: #fffa;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  transition: background-color 5s;
+  transition-timing-function: ease-in; }
+
+.post {
+  border: 1px solid black;
+  padding: 15px 15px;
+  margin: 10px 0px; }
+  .post img {
+    max-width: 100%;
+    max-height: 800px; }
+  .post .meta {
+    color: gray; }
+  .post .content {
+    margin: 10px 0px; }

static/css/main.scss

@@ -0,0 +1,178 @@
+// @font-face {
+//     font-family: 'avenir';
+//     src: url('/static/avenir-font/AvenirLTStd-Medium.otf');
+//     font-weight: normal;
+//     font-style: normal;
+// }
+
+html {
+
+    // font-family: "avenir";
+    // font-weight: 400;
+    // font-style: normal;
+
+    // background-color: #e9e9ed;
+    border: 1px solig gray;
+    // border-radius: 5px;
+    font-family: "DejaVu Serif";
+}
+
+div.entry {
+    // background-color: green;
+    border: 1px solid gray;
+    padding: 10px 15px;
+    margin: 0px;
+
+    div.entrymeta {
+        display: flex;
+        justify-content: left;
+        align-items: center;
+        gap: 15px;
+        cursor: pointer;
+
+        span.time {
+            // background-color: red;
+            color: gray;
+        }
+
+        span.user {
+            // background-color: blue;
+            text-decoration: underline;
+        }
+
+        img.userimage {
+            width: 80px;
+        }
+    }
+
+    div.contents {
+        // background-color: yellow;
+
+        p {
+            // background-color: orange;
+            margin: 8pt 0pt;
+        }
+    }
+
+    img {
+        max-width: 100%;
+    }
+
+    &.comment {
+        border: none;
+        padding: 0px 15px;
+        margin: 0px;
+
+        display: flex;
+        gap: 5px;
+
+        .left {
+            width: 70px;
+            display: flex;
+            flex-direction: column;
+            // background-color: green;
+
+            .spacer {
+                background-color: black;
+                height: 100%;
+                width: 6%;
+                margin: 0px 47%;
+            }
+        }
+        // .right {
+        //     background-color: red;
+        // }
+        // .contents {
+        //     display: flex;
+        // }
+    }
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    width: 400px;
+    max-width: 100%;
+
+    textarea {
+        // width: 100%;
+        resize: vertical;
+        font-size: 1.0rem;
+    }
+
+    &.create {
+        border: 1px solid gray;
+        padding: 10px 15px;
+        margin: 0px;
+    }
+
+    hr {
+        width: 100%;
+    }
+}
+
+input,
+textarea,
+button,
+select {
+    padding: 4pt 6pt;
+    margin: 3pt 0pt;
+    border: 2px solid black;
+    cursor: pointer;
+    box-shadow: 0px 0px;
+
+    &:hover {
+        box-shadow: 1px 1px;
+    }
+
+    &:focus {
+        box-shadow: 3px 3px black;
+        outline: none;
+    }
+}
+
+button {
+    background-color: #ffabcd;
+}
+
+#response {
+    div {
+        padding: 4pt 6pt;
+    }
+
+    .error {
+        color: red;
+    }
+}
+
+.loading {
+    // background-image: url('/static/spinner.gif');
+    background-color: #fffa;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    transition: background-color 5s;
+    transition-timing-function: ease-in;
+}
+
+.post {
+    border: 1px solid black;
+    padding: 15px 15px;
+    margin: 10px 0px;
+    img {
+        max-width: 100%;
+        max-height: 800px;
+    }
+    .meta {
+        color: gray;
+    }
+    .content {
+        margin: 10px 0px;
+    }
+}

static/js/main.js

@@ -0,0 +1,3 @@
+$(() => {
+    $('#auth-visible').hide()
+})