Add dirthpath css

srv/css/style20.css

@@ -0,0 +1,271 @@
+/* pywal */
+:root {
+    /* Special */
+    --background: #0b0904;
+    --foreground: #fffae1;
+    --cursor: #fffae1;
+
+    /* Colors */
+    --color0: #0b0904;
+    --color1: #885E37;
+    --color2: #5D4F19;
+    --color3: #8E714F;
+    --color4: #6C5C46;
+    --color5: #6B5132;
+    --color6: #57452C;
+    --color7: #cdbeab;
+    --color8: #31270f;
+    --color9: #bd793b;
+    --color10: #806b18;
+    --color11: #c69458;
+    --color12: #97794f;
+    --color13: #956a36;
+    --color14: #795b30;
+    --color15: #fffae1;
+
+    --color8-transparent: #31270fcc;
+    --color9-darker: #9f642f;
+    --background-transparent: #0b0904cf;
+}
+
+@font-face {
+    font-family: JetBrains;
+    src: url('/fonts/JetBrainsMono-Regular.otf');
+}
+
+* {
+    font-family: JetBrains;
+}
+
+body {
+    margin: auto;
+    background-color: var(--background);
+    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.1) 100%), url("/image/dirt-path.jpeg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-position: center;
+    opacity: 0.9;
+    color: var(--color9);
+    font-size: 20px;
+}
+
+div.form {
+    display: block;
+    text-align: center;
+}
+
+form {
+    display: inline-block;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: left;
+}
+
+input[type="text"],
+textarea,
+.header {
+    background: var(--background);
+    color: var(--color9);
+    border-color: var(--background);
+}
+
+hr {
+    display: none;
+}
+
+input[type="text"]:hover,
+textarea:hover,
+#container {
+    background-color: var(--color8);
+}
+
+a.x:link,
+a.x:visited,
+a:link,
+a:visited {
+    color: var(--color11);
+}
+a.end:link,
+a.end:visited,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--color9);
+    margin: auto;
+}
+a:hover {
+    color: var(--color1);
+}
+a:active {
+    color: purple;
+    text-decoration: underline;
+}
+
+input[type=submit] {
+    padding: 5px 15px;
+    background-color: var(--background);
+    color: var(--color9);
+    border: 0 none;
+    cursor: pointer;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+}
+
+quote {
+    background-color: var(--color8);
+    color: var(--color9);
+}
+spoiler {
+    background-color: var(--color9);
+    color: var(--color9);
+}
+spoiler:hover {
+    color: var(--color9);
+    background-color: var(--background);
+}
+.subcontainer {
+    display: grid;
+    grid-gap: 5px;
+    grid-template-columns: repeat(autofit, minmax(100px, 1fr));
+    grid-template-rows: repeat(2, 100px);
+}
+
+.subs table,
+th,
+td {
+    background: var(--color8);
+    border: 5px var(--color9) solid;
+    padding: 4px;
+    text-align: center;
+    font-weight: bold;
+}
+
+.postcontainer {
+    display: grid;
+    grid-gap: 25px;
+    grid-template-columns: repeat(1, 100%);
+}
+
+.post {
+    display: table;
+    padding: 25px;
+    margin-left: 250px;
+    margin-right: 150px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    background: var(--color8-transparent);
+    font-size: normal;
+    font-family: JetBrains;
+    border: 2px var(--color9) solid;
+    border-radius: 15px;
+}
+
+.post:hover,
+.postreply:hover,
+.postreply2:hover {
+    background-color: var(--background);
+}
+.postreply {
+    display: table;
+    padding: 15px;
+    margin-left: 35px;
+    margin-right: 150px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    background: var(--color8-transparent);
+    font-family: JetBrains;
+    border: 1px var(--color9) solid;
+    border-radius: 10px;
+}
+.postreply2 {
+    display: table;
+    padding: 15px;
+    margin-left: 350px;
+    margin-right: 150px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    background: var(--color8-transparent);
+    font-family: JetBrains;
+    border: 1px var(--color9) solid;
+    border-radius: 10px;
+}
+.newpost table,
+th,
+td {
+    background: var(--background);
+    border: 3px var(--background) solid;
+    padding: 4px;
+    text-align: center;
+    font-weight: bold;
+}
+
+#footer {
+    display: flex;
+    flex-flow: row wrap;
+    font-size: medium;
+}
+
+.alignleft {
+    background: var(--background);
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    width: 33.33333%;
+    text-align: left;
+}
+.aligncenter {
+    background: var(--background);
+    position: fixed;
+    left: 33%;
+    bottom: 0;
+    width: 100%;
+    width: 33.33333%;
+    text-align: center;
+}
+.alignright {
+    background: var(--background);
+    position: fixed;
+    left: 66%;
+    bottom: 0;
+    width: 100%;
+    width: 33.33333%;
+    text-align: right;
+}
+details {
+    color: var(--color9-darker);
+    background-color: var(--background-transparent);
+    font-size: medium;
+    margin-left: 350px;
+    padding: 0.5em 0.5em 0;
+    transition: margin 350ms ease-out;
+}
+
+summary {
+    font-weight: bold;
+    margin: -0.5em -0.5em 0;
+    padding: 0.5em;
+    transition: margin 250ms ease-out;
+}
+
+details[open] {
+    color: var(--color9-darker);
+    font-size: medium;
+    margin-bottom: 10pt;
+    animation: open .1s ease;
+}
+
+@keyframes open {
+    0% {
+        opacity: 0;
+        margin-left: 150px
+    }
+    100% {
+        opacity: 1;
+        margin-left: 0px
+    }
+}