1 files changed, 174 insertions, 0 deletions
diff --git a/ui/client-style/src/layout.css b/ui/client-style/src/layout.css
new file mode 100644
index 0000000..5c5272c
--- /dev/null
+++ b/ui/client-style/src/layout.css
@@ -0,0 +1,174 @@
+/*
+    This file is part of jellything (https://codeberg.org/metamuffin/jellything)
+    which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
+    Copyright (C) 2026 metamuffin <metamuffin.org>
+    Copyright (C) 2023 tpart
+*/
+@font-face {
+    font-family: "Cantarell";
+    src: url(/assets/cantarell.woff2) format("woff2");
+}
+
+@font-face {
+    font-family: "Material Icons";
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url("/assets/fonts/material-icons.woff2") format("woff2");
+}
+
+:root {
+    --card-size: min(50vw, 17em);
+    --bar-height: 5em;
+    --port-poster-aspect: calc(1 / 1.41);
+    --land-poster-aspect: calc(2 / 1.41);
+    --land-thumb-aspect: calc(16 / 9);
+    --backdrop-height: 24em;
+    --main-side-margin: 2em;
+}
+
+::selection {
+    background-color: var(--accent-dark);
+}
+
+* {
+    scrollbar-width: thin;
+    scrollbar-color: var(--background-light) #0000;
+}
+:root {
+    font-family: "Cantarell", sans-serif;
+    font-weight: 500;
+}
+
+body {
+    background-color: var(--background-dark);
+    width: 100vw;
+    margin: 0px;
+    padding: 0px;
+}
+
+h1, h2, h3, h4 {
+    color: var(--font-highlight);
+}
+h1 {
+    font-weight: bold;
+}
+p, span, a, td, th, label, input, legend, pre, summary, li {
+    color: var(--font);
+}
+pre {
+    margin: 0px;
+}
+
+code {
+    font-family: monospace !important;
+}
+.log .time,
+.log .module {
+    color: grey;
+}
+
+#main {
+    display: block;
+    margin-top: var(--bar-height);
+    margin-left: var(--main-side-margin);
+    margin-right: var(--main-side-margin);
+    margin-bottom: 1em;
+}
+
+section.message {
+    background-color: var(--background-light);
+    border-radius: 8px;
+}
+.error {
+    color: var(--c-error);
+    font-family: monospace;
+}
+.warn {
+    color: var(--c-warn);
+}
+.success {
+    color: var(--c-success);
+}
+.message p {
+    padding: 1em;
+}
+
+footer {
+    padding: 0.1em;
+    text-align: center;
+}
+footer p, footer p a {
+    color: var(--font-dark);
+    font-size: 0.8rem;
+}
+
+summary h3 {
+    display: inline;
+}
+
+*::before,
+.icon {
+    font-family: "Material Icons";
+    line-height: 1;
+    vertical-align: text-bottom;
+    display: inline-block;
+    text-rendering: optimizeLegibility;
+    font-feature-settings: "liga";
+}
+*::before {
+    margin-right: 3px;
+}
+
+.children {
+    padding: 1em;
+    padding-left: 3em;
+    padding-right: 3em;
+    list-style: none;
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+}
+.children:not(.hlist) {
+    flex-wrap: wrap;
+}
+.children li {
+    display: block;
+}
+.hlist {
+    overflow-x: auto;
+    max-width: 100%;
+    flex-wrap: nowrap;
+}
+.hlist li {
+    display: inline-block;
+}
+
+@media (max-width: 750px) {
+    .hlist ul {
+        padding-left: 0;
+    }
+}
+@media (max-width: 600px), (max-height: 800px) {
+    #main h2 {
+        margin: 0;
+    }
+}
+
+.search h1 {
+    text-align: center;
+}
+.search form {
+    text-align: center;
+}
+.search form input[type="text"] {
+    width: max(10em, 40%);
+}
+
+table.striped tr:nth-child(2n) {
+    background-color: #fff2;
+}
+table.striped td {
+    border: none;
+    padding: 5px;
+}