initial 1312 funktioniert ein bisschen

2025-12-13 12:21:44 +01:00
commit 59dd267659
29 changed files with 973 additions and 0 deletions
@@ -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;
+    }
+}