1 files changed, 178 insertions, 0 deletions
diff --git a/assets/style.css.jinja b/assets/style.css.jinja
new file mode 100644
index 0000000..0265333
--- /dev/null
+++ b/assets/style.css.jinja
@@ -0,0 +1,178 @@
+@font-face {
+    font-family: lexend;
+    src: url("{{ base }}lexend.woff2");
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    margin-left: auto;
+    margin-right: auto;
+    overflow-x: hidden;
+}
+
+img {
+    margin: 0;
+    width: 100%;
+}
+
+.cover {
+    width: 100%;
+}
+
+body {
+    background-color: black;
+    color: white;
+    font-family: lexend, arial, serif;
+}
+
+a {
+    color: white;
+}
+
+.index {
+    font-size: 24px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 20px;
+}
+
+.index-tags {
+    font-size: 18px;
+    gap: 3px;
+}
+
+.index-rating {
+    gap: 5px;
+    flex-wrap: nowrap;
+    max-width: 400px;
+    margin-top: 15px;
+}
+
+.index span {
+    color: rgb(255, 255, 255, 0.5);
+}
+
+.nav {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+    margin-bottom: 20px;
+    margin-top: 20px;
+}
+
+.nav-vertical {
+    flex-direction: column;
+}
+
+.nav-link {
+    width: 100%;
+    border: 1px solid white;
+    line-height: 2;
+    padding: 0 5px;
+}
+
+.nav-vertical .nav-link:visited {
+    border: 1px solid pink;
+}
+
+.home-link {
+    border: 1px solid white;
+    line-height: 2;
+    font-size: 26px;
+    padding: 5px;
+    margin-bottom: 20px;
+}
+
+.right {
+    text-align: right;
+}
+
+.gallery {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    gap: 3px;
+}
+
+a:has(> figure) {
+    margin: 0;
+    font-size: 12px;
+    font-weight: bold;
+    text-align: center;
+}
+
+figure {
+    margin: 0;
+}
+
+@media screen and (min-width: 1000px) {
+
+    .cover {
+        width: 360px;
+    }
+
+    .container {
+        max-width: 720px;
+    }
+
+    .gallery {
+        margin-left: 5%;
+        margin-right: 5%;
+        justify-content: left;
+        gap: 16px;
+    }
+
+    .index {
+        font-size: 18px;
+        margin-left: 5%;
+        margin-right: 5%;
+    }
+    a:has(> figure):hover {
+        text-decoration: underline;
+    }
+}
+
+a:has(> figure):visited {
+    color: pink;
+}
+
+a {
+    text-decoration: none;
+}
+
+a:not(:has(> figure)):hover {
+    text-decoration: underline;
+}
+
+.sheet {
+    margin-left: 10%;
+    margin-right: 10%;
+}
+
+.li-link {
+    font-size: 24px;
+    line-height: 1.5;
+}
+
+.back {
+    font-size: 20px;
+}
+
+figure {
+    width: {{ thumbnail_width }}px;
+}
+
+.t {
+    width: {{ thumbnail_width}}px;
+    height: {{thumbnail_height}}px;
+    object-fit: none;
+}
+
+{% for class_name, offset in offsets %}
+.{{ class_name }} {
+    object-position: {{ -offset }}px 0
+}
+{% endfor  %}
+\ No newline at end of file