diff options
| -rw-r--r-- | index.html | 77 | ||||
| -rw-r--r-- | style.css | 245 |
2 files changed, 320 insertions, 2 deletions
@@ -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 |