Skip to content

Commit e13e9eb

Browse files
defneTuncerdefneTuncer
committed
Blue Page Updated
1 parent 85f1693 commit e13e9eb

File tree

2 files changed

+63
-33
lines changed

2 files changed

+63
-33
lines changed

‎css/style.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,8 @@ section { padding: 6rem 0; }
100100
}
101101

102102
@keyframes ticker-scroll {
103-
from { transform: translateX(0); }
104-
to { transform: translateX(-25%); }
103+
from { transform: translateX(0%); }
104+
to { transform: translateX(-34%); }
105105
}
106106

107107
@keyframes float {
@@ -184,7 +184,7 @@ section { padding: 6rem 0; }
184184
.ticker-track {
185185
display: inline-flex;
186186
gap: 2.5rem;
187-
animation: ticker-scroll 28s linear infinite;
187+
animation: ticker-scroll 5s linear infinite;
188188
white-space: nowrap;
189189
}
190190

@@ -350,7 +350,7 @@ section { padding: 6rem 0; }
350350
/* font-size IS the letter size — all em values share this base */
351351
font-size: clamp(80px, 11vw, 128px);
352352
position: relative;
353-
width: 2.3em;
353+
width: 3em;
354354
height: 2.6em;
355355
flex-shrink: 0;
356356
user-select: none;

‎index.html‎

Lines changed: 59 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,52 @@
99
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
1010
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..900;1,9..144,400..900&family=Instrument+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
1111
<link rel="stylesheet" href="css/style.css" />
12+
<style>
13+
html, body {
14+
height: 100%;
15+
overflow: hidden;
16+
}
17+
18+
.ticker-top,
19+
.ticker-bottom {
20+
position: fixed;
21+
left: 0;
22+
width: 100%;
23+
z-index: 200;
24+
}
25+
26+
.ticker-top { top: 0; }
27+
.ticker-bottom { bottom: 0; }
28+
29+
.ticker-bottom .ticker-track {
30+
animation-direction: reverse;
31+
}
32+
33+
.uc-center {
34+
position: fixed;
35+
inset: 0;
36+
display: flex;
37+
flex-direction: column;
38+
align-items: center;
39+
justify-content: center;
40+
gap: 2.5rem;
41+
}
42+
43+
.uc-label {
44+
font-family: 'Instrument Sans', system-ui, sans-serif;
45+
font-size: clamp(0.6rem, 1.4vw, 0.8rem);
46+
font-weight: 700;
47+
letter-spacing: 0.2em;
48+
text-transform: uppercase;
49+
color: var(--muted);
50+
text-align: center;
51+
}
52+
</style>
1253
</head>
1354
<body>
1455

15-
<!-- ── Ticker ── -->
16-
<div class="ticker" aria-hidden="true">
56+
<!-- ── Top Ticker ── -->
57+
<div class="ticker ticker-top" aria-hidden="true">
1758
<div class="ticker-track">
1859
<span>Coming 2027</span>
1960
<span class="ticker-sep">·</span>
@@ -23,7 +64,7 @@
2364
<span class="ticker-sep">·</span>
2465
<span>Indie Game Studio</span>
2566
<span class="ticker-sep">·</span>
26-
<!-- Duplicate for seamless loop -->
67+
<!-- duplicate for seamless loop -->
2768
<span>Coming 2027</span>
2869
<span class="ticker-sep">·</span>
2970
<span>Under Construction</span>
@@ -32,6 +73,7 @@
3273
<span class="ticker-sep">·</span>
3374
<span>Indie Game Studio</span>
3475
<span class="ticker-sep">·</span>
76+
<!-- duplicate for seamless loop -->
3577
<span>Coming 2027</span>
3678
<span class="ticker-sep">·</span>
3779
<span>Under Construction</span>
@@ -43,25 +85,22 @@
4385
</div>
4486
</div>
4587

46-
<!-- ── Hero ── -->
47-
<section class="hero">
48-
<div class="container">
49-
<div class="hero-layout">
50-
<div class="hero-text">
51-
</div>
52-
<div class="logo-letters anim d1" aria-hidden="true">
53-
<span class="ll ll-b">b</span>
54-
<span class="ll ll-l">l</span>
55-
<span class="ll ll-u">u</span>
56-
<span class="ll ll-e">e</span>
57-
<span class="ll-dot"></span>
58-
</div>
59-
</div>
88+
<!-- ── Center ── -->
89+
<div class="uc-center">
90+
<div class="logo-letters anim d1" aria-hidden="true">
91+
<span class="ll ll-b">b</span>
92+
<span class="ll ll-l">l</span>
93+
<span class="ll ll-u">u</span>
94+
<span class="ll ll-e">e</span>
95+
<span class="ll-dot"></span>
6096
</div>
61-
</section>
97+
<div></div>
98+
<div></div>
99+
<p class="uc-label">Under Construction &nbsp;·&nbsp; Coming 2027</p>
100+
</div>
62101

63-
<!-- ── Ticker ── -->
64-
<div class="ticker" aria-hidden="true">
102+
<!-- ── Bottom Ticker ── -->
103+
<div class="ticker ticker-bottom" aria-hidden="true">
65104
<div class="ticker-track">
66105
<span>Coming 2027</span>
67106
<span class="ticker-sep">·</span>
@@ -71,7 +110,6 @@
71110
<span class="ticker-sep">·</span>
72111
<span>Indie Game Studio</span>
73112
<span class="ticker-sep">·</span>
74-
<!-- Duplicate for seamless loop -->
75113
<span>Coming 2027</span>
76114
<span class="ticker-sep">·</span>
77115
<span>Under Construction</span>
@@ -91,13 +129,5 @@
91129
</div>
92130
</div>
93131

94-
<script>
95-
const observer = new IntersectionObserver(
96-
entries => entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('is-visible'); }),
97-
{ threshold: 0.12 }
98-
);
99-
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
100-
</script>
101-
102132
</body>
103133
</html>

0 commit comments

Comments
 (0)