From c71c92cf9964c60cee095a4baa540e8208aa519f Mon Sep 17 00:00:00 2001 From: metamuffin Date: Fri, 6 Oct 2023 11:14:52 +0200 Subject: started on a fancy project page --- index.html | 77 ++++++++++++++++++- style.css | 245 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 320 insertions(+), 2 deletions(-) create mode 100644 style.css diff --git a/index.html b/index.html index cd0fe1d..a0bc622 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,82 @@ Jellything + -

Jellything

-

Project page is work in progress...

+ +
+ +

Jellything

+

Tagline is written here

+
+
+

Text 1

+

+ 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? +

+
+ +
+
+
+

Text 2

+

+ 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! +

+
+ +
+
+
+

Text 3

+

+ 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! +

+
+ +
+
+
+

Text 4

+

+ 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! +

+
+ +
+ +
+

Text 5

+

Ding dong bing bong blub

+
+
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 + 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 -- cgit v1.2.3-70-g09d2