Skip to content

Commit 6e7f56c

Browse files
CiphroxCiphrox
committed
moved the controls menu to header in varnmala/english and hid record page
1 parent 8793777 commit 6e7f56c

File tree

5 files changed

+103
-65
lines changed

5 files changed

+103
-65
lines changed

‎src/assets/styles/about.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
display: block;
33
padding: 1rem;
44

5-
> .moto {
5+
& .moto {
66
color: #3a8657;
7-
font-size: 3rem;
7+
font-size: 2rem;
88
}
99
}

‎src/assets/styles/header.css‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,15 @@
1010
border-bottom: 1px solid var(--border);
1111
height: var(--header-h);
1212
padding: 0 1.5rem;
13-
display: flex;
13+
display: grid;
14+
grid-template-columns: 1fr auto 1fr;
1415
align-items: center;
15-
justify-content: space-between;
1616

1717
.header__brand {
1818
display: flex;
1919
align-items: center;
2020
gap: 0.75rem;
21+
justify-self: start;
2122

2223
.logo {
2324
width: 2rem;
@@ -33,6 +34,7 @@
3334

3435
.caption {
3536
text-align: center;
37+
justify-self: center;
3638

3739
h1 {
3840
font-size: 1.25rem;
@@ -48,14 +50,27 @@
4850
display: flex;
4951
gap: 1rem;
5052
align-items: center;
53+
justify-self: end;
5154
justify-content: flex-end;
5255
}
5356
}
5457

58+
[slot="header-right"] {
59+
display: flex;
60+
align-items: center;
61+
max-width: 33vw;
62+
flex-wrap: nowrap;
63+
justify-content: flex-end;
64+
}
65+
66+
.controls {
67+
flex-shrink: 0;
68+
}
69+
5570
.switch {
5671
background-color: black;
5772
height: 2rem;
5873
width: 2rem;
5974
border-radius: 50%;
6075
cursor: pointer;
61-
}
76+
}

‎src/assets/styles/varnmala/english.css‎

Lines changed: 69 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,72 @@
1-
.container__english {
2-
1+
.controls {
2+
background-color: color-mix(in srgb, var(--background) 95%, var(--text) 5%);
3+
padding: 0.5rem 0.7rem;
4+
z-index: 100;
5+
display: flex;
6+
flex-direction: row;
7+
align-items: center;
8+
gap: 0.8rem;
9+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
10+
color: var(--text);
11+
border-radius: 4px;
12+
margin-left: 0.5rem;
13+
}
14+
15+
.control-group {
16+
display: flex;
17+
align-items: center;
18+
gap: 0.5rem;
19+
accent-color: var(--primary);
20+
}
21+
22+
.control-group label {
23+
font-weight: bold;
24+
color: var(--text);
25+
font-size: 0.85rem;
26+
white-space: nowrap;
27+
}
28+
29+
.control-group select {
30+
padding: 0.35rem 0.5rem;
31+
border-radius: 4px;
32+
border: 1px solid var(--border);
33+
background-color: var(--background);
34+
color: var(--text);
35+
font-size: 0.85rem;
36+
max-width: 80px;
37+
}
38+
39+
.control-group button {
40+
padding: 0.4rem 0.7rem;
41+
border-radius: 4px;
42+
border: 1px solid var(--border);
43+
background-color: var(--background);
44+
color: var(--text);
45+
font-size: 0.85rem;
46+
cursor: pointer;
47+
transition: all 0.3s;
48+
white-space: nowrap;
49+
min-width: 65px;
50+
font-weight: 500;
51+
}
52+
53+
.control-group input[type="color"] {
54+
width: 35px;
55+
height: 30px;
56+
padding: 0;
57+
border: 1px solid var(--border);
58+
cursor: pointer;
59+
}
60+
61+
.control-group button:hover,
62+
.control-group select:hover {
63+
background-color: color-mix(in srgb, var(--background) 90%, var(--text) 10%);
64+
border-color: var(--primary);
65+
transform: translateY(-1px);
66+
}
67+
68+
/* Container styles */
69+
.container__english {
370
& .letter {
471
font-size: min(100vw, 100vh);
572
line-height: 1;
@@ -10,50 +77,6 @@
1077
transition: color 0.5s ease-in;
1178
}
1279

13-
/* Controls styles */
14-
& .controls {
15-
position: relative;
16-
background-color: color-mix(in srgb, var(--background) 95%, var(--text) 5%);
17-
padding: 1rem;
18-
z-index: 100;
19-
display: flex;
20-
justify-content: space-around;
21-
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
22-
color: var(--text);
23-
}
24-
25-
& .control-group {
26-
display: flex;
27-
align-items: center;
28-
gap: 1rem;
29-
accent-color: var(--primary);
30-
}
31-
32-
& .control-group label {
33-
font-weight: bold;
34-
color: var(--text);
35-
}
36-
37-
& .control-group select,
38-
& .control-group button {
39-
padding: 0.5rem;
40-
border-radius: 4px;
41-
border: 1px solid var(--border);
42-
background-color: var(--background);
43-
color: var(--text);
44-
}
45-
46-
& .control-group button {
47-
cursor: pointer;
48-
transition: all 0.3s;
49-
}
50-
51-
& .control-group button:hover,
52-
& .control-group select:hover {
53-
background-color: color-mix(in srgb, var(--background) 90%, var(--text) 10%);
54-
border-color: var(--primary);
55-
}
56-
5780
/* Background styles */
5881
& .bg-gradient1 {
5982
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);

‎src/pages/varnmala/english.astro‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,35 +7,35 @@ import BackButton from "@/components/ui/backButton.astro";
77

88
<BaseLayout meta={{ title: "English" }}>
99
<Fragment slot="header-right">
10-
<Help
11-
title="Hindi Varnmala"
12-
description="Just press any letter fron keyboard and it display the letter and it's relative word in clear way and if you type again it will change the color"
13-
/>
14-
</Fragment>
15-
<BackButton />
16-
<article class="container__english">
1710
<div class="controls" id="controls">
1811
<div class="control-group">
19-
<label>Background:</label>
12+
<label>Bg:</label>
2013
<select id="bgSelector">
2114
<option value="none">None</option>
22-
<option value="gradient1">Gradient 1</option>
23-
<option value="gradient2">Gradient 2</option>
24-
<option value="pattern1">Pattern 1</option>
15+
<option value="gradient1">G1</option>
16+
<option value="gradient2">G2</option>
17+
<option value="pattern1">P1</option>
2518
</select>
26-
<button id="toggleBg">Toggle Background</button>
19+
<button id="toggleBg">Toggle</button>
2720
</div>
2821

2922
<div class="control-group">
3023
<label>Font:</label>
3124
<select id="fontSelector">
3225
<option value="Arial">Arial</option>
3326
<option value="Georgia">Georgia</option>
34-
<option value="Times New Roman">Times New Roman</option>
27+
<option value="Times New Roman">Times</option>
3528
</select>
3629
<input type="color" id="colorPicker" value="#000000" />
3730
</div>
3831
</div>
32+
<Help
33+
title="Hindi Varnmala"
34+
description="Just press any letter fron keyboard and it display the letter and it's relative word in clear way and if you type again it will change the color"
35+
/>
36+
</Fragment>
37+
<BackButton />
38+
<article class="container__english">
3939
<article class="container__hindi" id="letterContainer">
4040
<div class="letter">A</div>
4141
</article>

‎src/utils/constants.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const NavbarLinks: LinkProps[] = [
3535
title: "Record",
3636
path: "/record",
3737
icon: RecordIcon,
38-
isActive: true
38+
isActive: false
3939
},
4040
{
4141
name: "Alphabets",

0 commit comments

Comments
 (0)