mirror of
https://github.com/Radiquum/radiquum.github.io.git
synced 2025-04-09 09:44:34 +00:00
feat: add landing
This commit is contained in:
parent
f94a1bb008
commit
b09a84afbe
GPG key ID:
858E8EE696525EED
3 changed files with 115 additions and 65 deletions
19
index.html
19
index.html
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="en" class="scroll-smooth">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
|
@ -7,7 +7,17 @@
|
|||
<link href="./static/tailwind.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="overflow-x-hidden bg-bg-black">
|
||||
<div class="h-screen">
|
||||
<header class="fixed top-0 left-0 right-0 z-10 w-full text-white opacity-[var(--header-opacity,0)] bg-bg-pink" id="header">
|
||||
<div class="container mx-auto">
|
||||
<a href="#section_landing">
|
||||
<div class="flex items-center gap-4 px-4 py-4">
|
||||
<img src="./static/avatar_512.png" alt="" class="w-[64px] lg:w-[64px] 2xl:w-[64px]"/>
|
||||
<h1 class="text-xl font-semibold lg:text-2xl xl:text-3xl 2xl:text-4xl">KENTAI RADIQUUM</h1>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="h-screen" id="section_landing">
|
||||
<div class="container mx-auto text-white h-full max-h-[60vh] relative">
|
||||
<div class="bg-bg-pink w-full h-full max-h-[60vh] max-w-[45.25%] absolute top-0 right-0 -z-10"></div>
|
||||
<div class="flex items-center justify-center gap-12 px-8 py-8">
|
||||
|
|
@ -36,10 +46,13 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="flex items-end justify-end w-full max-w-[45%] gap-4 p-8 font-medium text-4xl mb-[3%]">
|
||||
<a class="w-[320px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue hover:bg-opacity-85 transition-colors" href="#">READ MORE</a>
|
||||
<a class="w-[320px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue hover:bg-opacity-85 transition-colors" href="#section_about">READ MORE</a>
|
||||
<a class="w-[300px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue hover:bg-opacity-85 transition-colors" href="#">LINKS</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-screen" id="section_about">
|
||||
|
||||
</div>
|
||||
<script src="./static/script.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,46 @@ function updatePlayingTrack() {
|
|||
});
|
||||
}
|
||||
|
||||
function getScrollPosition () {
|
||||
const height =
|
||||
document.documentElement.scrollHeight -
|
||||
document.documentElement.clientHeight;
|
||||
const windowScroll = document.documentElement.scrollTop;
|
||||
const scrolled = (windowScroll / height) * 100;
|
||||
return Math.floor(scrolled)
|
||||
}
|
||||
|
||||
window.onload = () => {
|
||||
updatePlayingTrack();
|
||||
setInterval(updatePlayingTrack, 360000);
|
||||
}
|
||||
const header = document.getElementById("header")
|
||||
let last_Y_pos = 0
|
||||
let header_opacity = 0
|
||||
|
||||
window.onscroll = () => {
|
||||
let scrollPosition = getScrollPosition()
|
||||
console.log(last_Y_pos, window.scrollY, scrollPosition, header_opacity)
|
||||
|
||||
if (scrollPosition < 20) {
|
||||
header.style.display = "none"
|
||||
} else {
|
||||
header.style.display = "block"
|
||||
}
|
||||
|
||||
|
||||
if ((window.scrollY > last_Y_pos) && (scrollPosition > 40)) {
|
||||
header_opacity += 0.1
|
||||
} else if ((window.scrollY < last_Y_pos) && (scrollPosition < 40)) (
|
||||
header_opacity -= 0.1
|
||||
)
|
||||
last_Y_pos = window.scrollY
|
||||
|
||||
if (header_opacity > 1) {
|
||||
header_opacity = 1
|
||||
} else if (header_opacity < 0) {
|
||||
header_opacity = 0
|
||||
}
|
||||
|
||||
header.style.setProperty("--header-opacity", `${header_opacity.toFixed(2)}`)
|
||||
}
|
||||
|
|
@ -588,6 +588,10 @@ video {
|
|||
}
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -596,6 +600,10 @@ video {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.right-0 {
|
||||
right: 0px;
|
||||
}
|
||||
|
|
@ -604,10 +612,18 @@ video {
|
|||
top: 0px;
|
||||
}
|
||||
|
||||
.left-0 {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.-z-10 {
|
||||
z-index: -10;
|
||||
}
|
||||
|
||||
.z-10 {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
|
@ -630,10 +646,6 @@ video {
|
|||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.mt-8 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -654,8 +666,8 @@ video {
|
|||
height: 100vh;
|
||||
}
|
||||
|
||||
.max-h-\[40\%\] {
|
||||
max-height: 40%;
|
||||
.max-h-\[40vh\] {
|
||||
max-height: 40vh;
|
||||
}
|
||||
|
||||
.max-h-\[4px\] {
|
||||
|
|
@ -666,18 +678,14 @@ video {
|
|||
max-height: 60vh;
|
||||
}
|
||||
|
||||
.max-h-\[40vh\] {
|
||||
max-height: 40vh;
|
||||
}
|
||||
|
||||
.min-h-screen {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.w-\[256px\] {
|
||||
width: 256px;
|
||||
}
|
||||
|
||||
.w-\[300px\] {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.w-\[30px\] {
|
||||
width: 30px;
|
||||
}
|
||||
|
|
@ -690,22 +698,14 @@ video {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.w-\[300px\] {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.w-\[280px\] {
|
||||
width: 280px;
|
||||
.w-\[64px\] {
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
.max-w-\[45\%\] {
|
||||
max-width: 45%;
|
||||
}
|
||||
|
||||
.max-w-\[55\%\] {
|
||||
max-width: 55%;
|
||||
}
|
||||
|
||||
.max-w-\[45\.25\%\] {
|
||||
max-width: 45.25%;
|
||||
}
|
||||
|
|
@ -714,14 +714,6 @@ video {
|
|||
max-width: 54.75%;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
|
@ -758,6 +750,10 @@ video {
|
|||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.scroll-smooth {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.bg-bg-black {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(30 30 30 / var(--tw-bg-opacity));
|
||||
|
|
@ -815,14 +811,6 @@ video {
|
|||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.pt-8 {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
|
|
@ -838,6 +826,11 @@ video {
|
|||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.font-medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
@ -856,20 +849,12 @@ video {
|
|||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.shadow-black {
|
||||
--tw-shadow-color: #000;
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
.opacity-0 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.shadow-bg-blue {
|
||||
--tw-shadow-color: #298FF5;
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
|
||||
.transition-opacity {
|
||||
transition-property: opacity;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
.opacity-\[var\(--header-opacity\2c 0\)\] {
|
||||
opacity: var(--header-opacity,0);
|
||||
}
|
||||
|
||||
.transition-colors {
|
||||
|
|
@ -910,10 +895,6 @@ body {
|
|||
font-family: 'Fira Mono', monospace;
|
||||
}
|
||||
|
||||
.hover\:bg-opacity-90:hover {
|
||||
--tw-bg-opacity: 0.9;
|
||||
}
|
||||
|
||||
.hover\:bg-opacity-85:hover {
|
||||
--tw-bg-opacity: 0.85;
|
||||
}
|
||||
|
|
@ -922,17 +903,15 @@ body {
|
|||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.hover\:shadow-lg:hover {
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:w-\[372px\] {
|
||||
width: 372px;
|
||||
}
|
||||
|
||||
.lg\:w-\[64px\] {
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
.lg\:text-3xl {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
|
|
@ -942,6 +921,11 @@ body {
|
|||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.lg\:text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
|
|
@ -954,6 +938,11 @@ body {
|
|||
font-size: 3.75rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.xl\:text-3xl {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
|
|
@ -961,6 +950,10 @@ body {
|
|||
width: 512px;
|
||||
}
|
||||
|
||||
.\32xl\:w-\[64px\] {
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
.\32xl\:text-5xl {
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
|
|
@ -970,4 +963,9 @@ body {
|
|||
font-size: 6rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.\32xl\:text-4xl {
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue