started on a fancy project page

1 files changed, 245 insertions, 0 deletions

diff --git a/style.css b/style.css
new file mode 100644
index 0000000..06e95f1
--- /dev/null
+++ b/style.css
@@ -0,0 +1,245 @@
+/*
+    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) 2023 metamuffin <metamuffin.org>
+    Copyright (C) 2023 tpart
+*/
+
+@font-face {
+    font-family: "Cantarell";
+    src: url(/assets/cantarell.woff2) format("woff2");
+}
+
+:root {
+    --card-size: 17em;
+    --bar-height: 5em;
+    --port-poster-aspect: 1.41;
+    --land-poster-aspect: (1.41 / 2);
+    --land-thumb-aspect: (9 / 16);
+    --accent-light: rgb(255, 163, 87);
+    --accent-dark: rgb(199, 90, 0);
+    --backdrop-height: 24em;
+    --background-dark: #070707;
+    --background-light: #1c1c1c;
+    --background-very-light: #323232;
+    --main-side-margin: 2em;
+    --font: rgb(218, 218, 218);
+    --font-dark: rgb(148, 148, 148);
+    --font-highlight: white;
+}
+
+::selection {
+    background-color: var(--accent-dark);
+}
+
+* {
+    color: var(--font);
+    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 {
+    font-weight: bold;
+    color: var(--font-highlight);
+}
+
+nav {
+    user-select: none;
+    z-index: 90;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    padding: 1em;
+    width: calc(100vw - 2em);
+    height: 2em;
+    backdrop-filter: blur(6px);
+    background-color: #1c1c1c9a;
+
+    display: flex;
+    align-items: center;
+}
+
+nav a {
+    border: 0px solid transparent;
+    border-radius: 5px;
+    padding: 0.5em;
+    text-decoration: none;
+}
+
+nav a:hover {
+    background-color: #ffffff10;
+}
+
+nav a {
+    color: #dfe5f3;
+    text-decoration: none;
+    background-image: linear-gradient(transparent, transparent),
+        linear-gradient(var(--accent-light), var(--accent-light));
+    background-size: 100% 2px, 0 2px;
+    background-position: 100% 100%, 0 100%;
+    background-repeat: no-repeat;
+    transition: background-size 0.15s linear;
+}
+
+nav a:hover {
+    background-size: 0 2px, 100% 2px;
+}
+
+nav h1 {
+    margin: 0px;
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+    font-size: 1.5em;
+    display: inline;
+}
+
+#main {
+    display: block;
+    margin-top: var(--bar-height);
+    margin-left: var(--main-side-margin);
+    margin-right: var(--main-side-margin);
+    margin-bottom: 1em;
+}
+
+footer {
+    padding: 0.1em;
+    text-align: center;
+}
+
+footer p {
+    color: #828282;
+    font-size: 0.8em;
+}
+
+.top-backdrop {
+    --backdrop-height: 30em;
+    width: calc(100% + 2 * var(--main-side-margin));
+    height: calc(var(--backdrop-height) + 5em);
+    margin-left: calc(-1 * var(--main-side-margin));
+    margin-right: calc(-1 * var(--main-side-margin));
+    margin-top: calc(-1 * var(--bar-height));
+    margin-bottom: -5em;
+    -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1),
+            transparent calc(var(--backdrop-height) + 5em));
+    mask-image: linear-gradient(rgba(0, 0, 0, 1),
+            transparent calc(var(--backdrop-height) + 5em));
+    -webkit-mask-mode: alpha;
+    mask-mode: alpha;
+    pointer-events: none;
+    object-fit: cover;
+    object-position: center;
+}
+
+#main {
+    margin-left: 0px !important;
+    margin-right: 0px !important;
+}
+
+h1 {
+    z-index: 0;
+    position: relative;
+    text-align: center;
+    margin-top: -3em;
+    font-size: 5em;
+    font-weight: 800;
+    text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75);
+}
+
+p.tagline {
+    text-align: center;
+    font-size: 1.5em;
+    margin-bottom: 5em;
+    z-index: 0;
+    position: relative;
+
+}
+
+section {
+    margin: 0 auto 0 auto;
+    justify-self: center;
+    max-width: 70em;
+    padding: 2em;
+    height: 25em;
+}
+
+section div {
+    margin-top: 3em;
+    width: 30em;
+}
+
+section img {
+    border-radius: 10px;
+    box-shadow: 0px 0px 5em -3em white;
+    width: 30em;
+    margin: 2em;
+}
+
+section:nth-child(2n) div,
+section:nth-child(2n + 1) img {
+    float: left;
+}
+
+section:nth-child(2n + 1) div,
+section:nth-child(2n) img {
+    float: right;
+}
+
+h2 {
+    font-size: 2.3em;
+    font-weight: 800;
+}
+
+p {
+    font-size: 1.3em;
+    font-weight: 400;
+}
+
+.bottom-backdrop {
+    width: 100%;
+    height: 40em;
+    opacity: 0.8;
+    margin-bottom: -30em;
+    -webkit-mask-image: linear-gradient(transparent, black 20em);
+    mask-image: linear-gradient(transparent, black 20em);
+    -webkit-mask-mode: alpha;
+    mask-mode: alpha;
+    pointer-events: none;
+    object-fit: cover;
+    object-position: center;
+}
+
+.bottom {
+    margin-top: -3em;
+    height: 30em;
+    z-index: 0;
+    position: relative;
+}
+
+.bottom button {
+    border: none;
+    font-size: 1.5em;
+    text-decoration: none;
+    border-radius: 1em;
+    background-color: black;
+    padding: 0.5em;
+    transition: font-size 0.3s, margin-top 0.3s, box-shadow 0.3s;
+    cursor: pointer;
+}
+
+.bottom button:hover {
+    margin-top: -0.1em;
+    font-size: 1.7em;
+    box-shadow: 0px 0px 2em -0.5em white;
+}
\ No newline at end of file