started on a fancy project page

author: metamuffin <metamuffin@disroot.org> 2023-10-06 11:14:52 +0200
committer: metamuffin <metamuffin@disroot.org> 2023-10-06 11:14:52 +0200
commit: c71c92cf9964c60cee095a4baa540e8208aa519f (patch)
tree: e404b68fb7a021476a9376cd67883760fece95c3
parent: 2a7af3d6d20b1e669dbf060b696111034386e706 (diff)
download: jellything-c71c92cf9964c60cee095a4baa540e8208aa519f.tar
jellything-c71c92cf9964c60cee095a4baa540e8208aa519f.tar.bz2
jellything-c71c92cf9964c60cee095a4baa540e8208aa519f.tar.zst
2 files changed, 320 insertions, 2 deletions
diff --git a/index.html b/index.html
index cd0fe1d..a0bc622 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,82 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Jellything</title>
+        <link rel="stylesheet" href="style.css" />
     </head>
     <body>
-        <h1>Jellything</h1>
-        <p>Project page is work in progress...</p>
+        <nav>
+            <h1>Jellything</h1>
+            <a href="https://codeberg.org/metamuffin/jellything">
+                Sources on Codeberg
+            </a>
+        </nav>
+        <div id="main">
+            <img
+                class="top-backdrop"
+                style="opacity: 0.8; --backdrop-height: 30em"
+                src="./data/assets/banner.jpeg"
+            />
+            <h1>Jellything</h1>
+            <p class="tagline">Tagline is written here</p>
+            <section>
+                <div>
+                    <h2>Text 1</h2>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                        Asperiores ipsa dolor sapiente dolore quasi atque
+                        laborum eaque placeat est quam earum voluptate, sint
+                        minima expedita ab neque repellat recusandae enim?
+                    </p>
+                </div>
+                <img src="./data/assets/p1.jpeg" />
+            </section>
+            <section>
+                <div>
+                    <h2>Text 2</h2>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                        Ducimus fugiat quis obcaecati laboriosam sequi
+                        voluptatum minus reiciendis adipisci eum perferendis
+                        iste similique soluta corrupti voluptates, dolor eaque
+                        fuga maxime ab!
+                    </p>
+                </div>
+                <img src="./data/assets/p2.jpeg" />
+            </section>
+            <section>
+                <div>
+                    <h2>Text 3</h2>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing
+                        elit. Optio at numquam veritatis, enim soluta,
+                        repudiandae repellat possimus laboriosam fugit labore ea
+                        mollitia, sed ratione rerum doloribus! Officia aliquam
+                        ipsum quam!
+                    </p>
+                </div>
+                <img src="./data/assets/p3.jpeg" />
+            </section>
+            <section>
+                <div>
+                    <h2>Text 4</h2>
+                    <p>
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                        Tempora assumenda veniam ducimus illum nesciunt labore
+                        est ipsam doloribus similique! Quae illum quasi facere
+                        facilis? Similique sequi quibusdam nemo quae quos!
+                    </p>
+                </div>
+                <img src="./data/assets/p4.jpeg" />
+            </section>
+            <img
+                class="bottom-backdrop"
+                src="./data/assets/footer.jpeg"
+                style="filter: blur(10px)"
+            />
+            <div class="bottom">
+                <h2 style="text-align: center">Text 5</h2>
+                <p style="text-align: center">Ding dong bing bong blub</p>
+            </div>
+        </div>
     </body>
 </html>
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
author	metamuffin <metamuffin@disroot.org>	2023-10-06 11:14:52 +0200
committer	metamuffin <metamuffin@disroot.org>	2023-10-06 11:14:52 +0200
commit	c71c92cf9964c60cee095a4baa540e8208aa519f (patch)
tree	e404b68fb7a021476a9376cd67883760fece95c3
parent	2a7af3d6d20b1e669dbf060b696111034386e706 (diff)
download	jellything-c71c92cf9964c60cee095a4baa540e8208aa519f.tar jellything-c71c92cf9964c60cee095a4baa540e8208aa519f.tar.bz2 jellything-c71c92cf9964c60cee095a4baa540e8208aa519f.tar.zst