Skip to content

Commit 46a9959

Browse files
Ciphroxxkeshav
Ciphrox
authored and
xkeshav
committed
updated the alphabets page to have playground and board
1 parent 4627e8e commit 46a9959

File tree

6 files changed

+296
-30
lines changed

6 files changed

+296
-30
lines changed

‎src/assets/styles/alphabet/index.css‎

Lines changed: 36 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
.container__alphabets {
2-
padding: 2rem;
3-
max-width: 1200px;
2+
padding: 2rem 1.5rem;
3+
max-width: 1400px;
44
margin: 0 auto;
55

66
& .alphabets__header {
77
text-align: center;
8-
margin-bottom: 3rem;
8+
margin-bottom: 2rem;
99
}
1010

11-
& .header h1 {
12-
font-size: clamp(2rem, 5vw, 3.5rem);
11+
& .alphabets__header h1 {
12+
font-size: clamp(2.5rem, 5vw, 4rem);
1313
font-weight: 800;
1414
background: linear-gradient(135deg, var(--primary), var(--primary-light));
1515
-webkit-background-clip: text;
@@ -20,23 +20,22 @@
2020

2121
& .subtitle {
2222
color: var(--secondary);
23-
font-size: 1.2rem;
23+
font-size: 1.1rem;
2424
max-width: 600px;
2525
margin: 0 auto;
2626
}
2727

2828
& .list__alphabets {
2929
display: grid;
30-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
31-
gap: 2rem;
30+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
31+
gap: 1rem;
3232
padding: 0;
3333
list-style: none;
3434
}
3535

3636
& .card {
3737
opacity: 0;
38-
animation: fadeInUp 0.6s ease forwards;
39-
transform: translateY(20px);
38+
animation: fadeInUp 0.4s ease forwards;
4039
}
4140

4241
& .card__link {
@@ -48,6 +47,7 @@
4847
padding: 2rem;
4948
transition: all 0.3s ease;
5049
height: 100%;
50+
overflow: hidden;
5151
}
5252

5353
& .card__link:hover {
@@ -98,31 +98,42 @@
9898
opacity: 1;
9999
transform: translateX(0);
100100
}
101+
}
101102

102-
@keyframes fadeInUp {
103-
from {
104-
opacity: 0;
105-
transform: translateY(20px);
106-
}
107103

108-
to {
109-
opacity: 1;
110-
transform: translateY(0);
111-
}
104+
@keyframes fadeInUp {
105+
to {
106+
opacity: 1;
107+
transform: translateY(0);
112108
}
109+
}
113110

114-
@media (max-width: 768px) {
115-
.container__alphabets {
116-
padding: 1rem;
117-
}
111+
@media (max-width: 768px) {
112+
.container__alphabets {
113+
padding: 1rem;
118114

119-
.list__alphabets {
115+
& .list__alphabets {
120116
grid-template-columns: 1fr;
121117
gap: 1rem;
122118
}
123119

124-
.card__link {
120+
& .card__link {
125121
padding: 1.5rem;
126122
}
123+
124+
& .card__actions {
125+
flex-direction: column;
126+
gap: 0.5rem;
127+
}
128+
129+
& .btn {
130+
width: 100%;
131+
font-size: 1.1rem;
132+
padding: 0.75rem 1rem;
133+
}
134+
135+
& .alphabets__header {
136+
margin-bottom: 2rem;
137+
}
127138
}
128139
}

‎src/assets/styles/alphabet/playground/playground.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
:root {
2+
--letter__txt--2: blueviolet;
3+
--spelling__txt--3: palevioletred;
4+
--steps: 10;
5+
}
6+
7+
.container__typing {
8+
display: grid;
9+
grid-template-columns: repeat(2, 1fr);
10+
grid-template-rows: 35% auto auto;
11+
grid-template-areas:
12+
"letter emoji"
13+
"spelling spelling"
14+
"description description";
15+
grid-auto-flow: row;
16+
height: calc(100vh - 10rem);
17+
width: auto;
18+
font-size: clamp(0.8rem, 1vw, 1.2rem);
19+
place-items: center;
20+
will-change: contents;
21+
22+
& .letter {
23+
grid-area: letter;
24+
font-size: clamp(10em, 20vw, 25em);
25+
color: var(--letter__txt--2);
26+
padding: 0;
27+
transition: color 0.5s ease-in;
28+
text-align: center;
29+
width: 100%;
30+
}
31+
32+
& .emoji {
33+
grid-area: emoji;
34+
font-size: clamp(6em, 15vw, 18em);
35+
}
36+
37+
& .animation {
38+
animation:
39+
typing 1s steps(var(--steps, 10)),
40+
blink 0.5s step-end infinite alternate;
41+
}
42+
43+
& .spelling {
44+
grid-area: spelling;
45+
grid-column: 1/3;
46+
grid-row: 2/3;
47+
width: clamp(6ch, 50vw, 12ch);
48+
white-space: nowrap;
49+
overflow: hidden;
50+
border-right: 3px solid;
51+
font-family: monospace;
52+
font-size: clamp(4em, 10vw, 12em);
53+
transition: all 0.5s ease-in-out;
54+
color: var(--spelling__txt--3);
55+
}
56+
57+
& .description {
58+
grid-area: description;
59+
width: 100%;
60+
text-align: center;
61+
font-family: monospace;
62+
font-size: clamp(1.5em, 3vw, 2em);
63+
padding: 1rem;
64+
margin-top: 2rem;
65+
color: var(--spelling__txt--3);
66+
min-height: 2em;
67+
}
68+
}
69+
70+
@keyframes typing {
71+
from {
72+
width: 0;
73+
}
74+
}
75+
76+
@keyframes blink {
77+
50% {
78+
border-color: transparent;
79+
}
80+
}

‎src/data/alphabets.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"general": {
33
"description": "General knowledge about the English alphabet",
4+
"icon": "🔤",
45
"data": [
56
{
67
"id": 1,
@@ -188,6 +189,7 @@
188189
},
189190
"nato": {
190191
"description": "NATO phonetic alphabet",
192+
"icon": "🎖️",
191193
"data": [
192194
{
193195
"id": 1,
@@ -375,6 +377,7 @@
375377
},
376378
"braille": {
377379
"description": "Braille alphabet",
380+
"icon": "⠿",
378381
"data": [
379382
{
380383
"id": 1,
@@ -562,6 +565,7 @@
562565
},
563566
"fruits": {
564567
"description": "Fruits of the English alphabet",
568+
"icon": "🍎",
565569
"data": [
566570
{
567571
"id": 1,
@@ -749,6 +753,7 @@
749753
},
750754
"animals": {
751755
"description": "Animals of the English alphabet",
756+
"icon": "🦁",
752757
"data": [
753758
{
754759
"id": 1,
@@ -936,6 +941,7 @@
936941
},
937942
"countries": {
938943
"description": "Countries of the English alphabet",
944+
"icon": "🌍",
939945
"data": [
940946
{
941947
"id": 1,

‎src/pages/alphabets/index.astro‎

Lines changed: 80 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,97 @@ const getCategoryDescription = (category: string) => alphabetData[category as ke
1414
<section class="container__alphabets">
1515
<div class="alphabets__header">
1616
<h1>Alphabet Categories</h1>
17-
<p class="subtitle">Explore different alphabet representations and meanings</p>
17+
<p class="subtitle">Choose a category to discover different alphabet representations</p>
1818
</div>
1919
<ul class="list__alphabets">
2020
{
2121
categories.map((category, index) => (
22-
<li class="card" style={`animation-delay: ${index * 100}ms`}>
23-
<a href={`/alphabets/${category}`} class="card__link">
22+
<li class="card" style={`animation-delay: ${index * 50}ms`}>
23+
<div class="card__inner">
2424
<div class="card__content">
25+
<div class="category__icon">{alphabetData[category as keyof AlphabetsData].icon}</div>
2526
<h2 class="category__title">{category.charAt(0).toUpperCase() + category.slice(1)}</h2>
2627
<p class="category__description">{getCategoryDescription(category)}</p>
27-
<span class="card__arrow">→</span>
2828
</div>
29-
</a>
29+
<div class="card__actions">
30+
<a href={`/alphabets/playground/${category}`} class="btn btn-playground">
31+
<span class="icon">🎮</span>
32+
Playground
33+
</a>
34+
<a href={`/alphabets/${category}`} class="btn btn-board">
35+
<span class="icon">📋</span>
36+
Board
37+
</a>
38+
</div>
39+
</div>
3040
</li>
3141
))
3242
}
3343
</ul>
3444
</section>
3545
</BaseLayout>
46+
47+
<style>
48+
.card__inner {
49+
background: var(--background);
50+
border: 2px solid var(--border);
51+
border-radius: 1rem;
52+
padding: 1.25rem;
53+
height: 100%;
54+
display: flex;
55+
flex-direction: column;
56+
justify-content: space-between;
57+
gap: 1rem;
58+
transition: all 0.2s ease;
59+
}
60+
61+
.category__icon {
62+
font-size: 2.5rem;
63+
margin-bottom: 0.5rem;
64+
}
65+
66+
.btn {
67+
display: inline-flex;
68+
align-items: center;
69+
justify-content: center;
70+
gap: 0.5rem;
71+
padding: 0.75rem 1rem;
72+
border-radius: 0.75rem;
73+
font-weight: 600;
74+
font-size: 1.1rem;
75+
transition: all 0.2s ease;
76+
text-decoration: none;
77+
}
78+
79+
.btn-playground {
80+
background: var(--primary);
81+
color: var(--background);
82+
}
83+
84+
.btn-board {
85+
background: var(--background);
86+
color: var(--text);
87+
border: 2px solid var(--border);
88+
}
89+
90+
.card:hover .card__inner {
91+
transform: translateY(-3px);
92+
border-color: var(--primary);
93+
}
94+
95+
.btn:hover {
96+
transform: translateY(-2px);
97+
}
98+
99+
.btn-playground:hover {
100+
background: var(--primary-light);
101+
}
102+
103+
.btn-board:hover {
104+
background: color-mix(in srgb, var(--background) 97%, var(--text) 3%);
105+
}
106+
107+
.icon {
108+
font-size: 1.2em;
109+
}
110+
</style>

0 commit comments

Comments
 (0)