Hugging Face's logo

Spaces:
build-small-hackathon
/
LoFinity
Running on Zero

App Files Community
eloigil6 commited on
Commit
db7afcd
·
1 Parent(s): e60d445

Refactor subtitle presentation in index.html and enhance animations in style.css. Wrapped the subtitle in a new div for improved styling and added slide and fade animations to enhance visual appeal during the title display.

Browse files
Files changed (2) hide show
  1. frontend/index.html +3 -1
  2. frontend/style.css +32 -2
frontend/index.html CHANGED
@@ -67,7 +67,9 @@
67
  <body>
68
  <div id="title-overlay">
69
  <h1 id="title">LoFinity</h1>
70
- <p id="subtitle">♪ chill beats, freshly vended</p>
 
 
71
  </div>
72
  <div id="vending-label" class="hover-label"><span>♪ vend a vibe</span></div>
73
  <div id="collection-label" class="hover-label">
 
67
  <body>
68
  <div id="title-overlay">
69
  <h1 id="title">LoFinity</h1>
70
+ <div class="subtitle-wrap">
71
+ <p id="subtitle">♪ chill beats, freshly vended</p>
72
+ </div>
73
  </div>
74
  <div id="vending-label" class="hover-label"><span>♪ vend a vibe</span></div>
75
  <div id="collection-label" class="hover-label">
frontend/style.css CHANGED
@@ -51,12 +51,22 @@ body {
51
  title-bob 5.5s ease-in-out 1.6s infinite alternate;
52
  }
53
 
 
 
 
 
 
 
 
 
 
 
54
  #subtitle {
55
  font-family: "Baloo 2", sans-serif;
56
  font-weight: 600;
57
  font-size: clamp(0.95rem, 2.2vw, 1.3rem);
58
  color: rgba(255, 255, 255, 0.95);
59
- margin: 1.1rem 0 0;
60
  letter-spacing: 0.14em;
61
  text-transform: lowercase;
62
  padding: 0.45em 1.4em;
@@ -65,7 +75,9 @@ body {
65
  border: 1px solid rgba(255, 255, 255, 0.3);
66
  backdrop-filter: blur(6px);
67
  -webkit-backdrop-filter: blur(6px);
68
- animation: title-in 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
 
 
69
  }
70
 
71
  @keyframes title-in {
@@ -79,6 +91,24 @@ body {
79
  }
80
  }
81
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
82
  @keyframes title-bob {
83
  from {
84
  transform: translateY(0);
 
51
  title-bob 5.5s ease-in-out 1.6s infinite alternate;
52
  }
53
 
54
+ /* The transform-based entrance lives on the wrapper, NOT on #subtitle: an
55
+ element with backdrop-filter loses its blur the moment it also carries a
56
+ transform (and title-in's `both` fill left one on permanently), which is
57
+ what wiped the glass during the intro. A 2D transform on an ancestor is not
58
+ a backdrop root, so the pill's blur survives. */
59
+ .subtitle-wrap {
60
+ margin-top: 1.1rem;
61
+ animation: subtitle-slide 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
62
+ }
63
+
64
  #subtitle {
65
  font-family: "Baloo 2", sans-serif;
66
  font-weight: 600;
67
  font-size: clamp(0.95rem, 2.2vw, 1.3rem);
68
  color: rgba(255, 255, 255, 0.95);
69
+ margin: 0;
70
  letter-spacing: 0.14em;
71
  text-transform: lowercase;
72
  padding: 0.45em 1.4em;
 
75
  border: 1px solid rgba(255, 255, 255, 0.3);
76
  backdrop-filter: blur(6px);
77
  -webkit-backdrop-filter: blur(6px);
78
+ /* opacity-only fade — opacity on the element itself does not break its own
79
+ backdrop-filter, unlike a transform would */
80
+ animation: subtitle-fade 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
81
  }
82
 
83
  @keyframes title-in {
 
91
  }
92
  }
93
 
94
+ @keyframes subtitle-slide {
95
+ from {
96
+ transform: translateY(28px) scale(0.96);
97
+ }
98
+ to {
99
+ transform: translateY(0) scale(1);
100
+ }
101
+ }
102
+
103
+ @keyframes subtitle-fade {
104
+ from {
105
+ opacity: 0;
106
+ }
107
+ to {
108
+ opacity: 1;
109
+ }
110
+ }
111
+
112
  @keyframes title-bob {
113
  from {
114
  transform: translateY(0);