Skip to content

Commit 8c7f295

Browse files
1046prt1046prt
committed
Refactor MobileSplash component and styles as per instructed
1 parent a0111d0 commit 8c7f295

File tree

2 files changed

+83
-90
lines changed

2 files changed

+83
-90
lines changed

‎src/assets/styles/MobileSplash.css‎

Lines changed: 75 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,97 @@
1-
.mobile-splash {
1+
.container__splash {
22
display: none;
33
}
44

5-
@media (max-width: 768px) {
6-
html,
7-
body {
8-
overflow: hidden;
9-
height: 100%;
10-
}
11-
12-
.mobile-splash {
5+
@container (max-width: 768px) {
6+
.container__splash {
137
display: flex;
148
position: fixed;
159
inset: 0;
16-
z-index:1;
17-
background-color: light-dark(#f4f4f2, #090808);
10+
z-index: 1000;
11+
background-color: light-dark(#f4f4f2, #090808);
1812
justify-content: center;
1913
align-items: center;
2014
padding: 1rem;
2115
transition: background-color 0.3s ease;
22-
}
23-
24-
.splash-card {
25-
background-color: light-dark(#ffffff, #0f172a);
26-
padding: 2rem;
27-
margin-bottom: 0.5vh;
28-
border-radius: 1rem;
29-
box-shadow: light-dark(
30-
0 10px 30px rgba(0, 0, 0, 0.1),
31-
0 10px 30px rgba(0, 0, 0, 0.3)
32-
);
33-
text-align: center;
34-
max-width: 400px;
35-
width: 100%;
36-
border: light-dark(none, 1px solid #404040);
37-
transition: background-color 0.3s ease, box-shadow 0.3s ease;
38-
}
16+
17+
&-card {
18+
background-color: light-dark(#ffffff, #0f172a);
19+
padding: 2rem;
20+
margin-bottom: 0.5vh;
21+
border-radius: 1rem;
22+
box-shadow: light-dark(
23+
0 10px 30px rgba(0, 0, 0, 0.1),
24+
0 10px 30px rgba(0, 0, 0, 0.3)
25+
);
26+
text-align: center;
27+
max-width: 400px;
28+
width: 100%;
29+
border: light-dark(none, 1px solid #404040);
30+
transition: background-color 0.3s ease, box-shadow 0.3s ease;
31+
}
3932

40-
.logo {
41-
width: 60px;
42-
margin-bottom: 1rem;
43-
margin-left: 40%;
44-
filter: light-dark(none, brightness(0.9));
45-
transition: filter 0.3s ease;
46-
}
33+
&-logo {
34+
width: 60px;
35+
margin-bottom: 1rem;
36+
margin-left: 40%;
37+
filter: light-dark(none, brightness(0.9));
38+
transition: filter 0.3s ease;
39+
}
4740

48-
h1 {
49-
font-size: 1.25rem;
50-
margin-bottom: 1rem;
51-
color: light-dark(#222222, #e0e0e0);
52-
transition: color 0.3s ease;
53-
}
41+
&-heading {
42+
font-size: 1.25rem;
43+
margin-bottom: 1rem;
44+
color: light-dark(#222222, #e0e0e0);
45+
transition: color 0.3s ease;
46+
}
5447

55-
p {
56-
font-size: 0.95rem;
57-
color: light-dark(#555555, #b0b0b0);
58-
margin-bottom: 1.5rem;
59-
transition: color 0.3s ease;
60-
}
48+
&-text {
49+
font-size: 0.95rem;
50+
color: light-dark(#555555, #b0b0b0);
51+
margin-bottom: 1.5rem;
52+
transition: color 0.3s ease;
53+
}
6154

62-
.buttons {
63-
display: flex;
64-
flex-direction: column;
65-
gap: 0.75rem;
66-
}
55+
&-buttons {
56+
display: flex;
57+
flex-direction: column;
58+
gap: 0.75rem;
59+
}
6760

68-
.btn {
69-
display: inline-block;
70-
padding: 0.75rem 1rem;
71-
text-decoration: none;
72-
border-radius: 8px;
73-
font-weight: bold;
74-
text-align: center;
75-
font-size: 0.95rem;
76-
transition: all 0.3s ease;
77-
}
61+
&-btn {
62+
display: inline-block;
63+
padding: 0.75rem 1rem;
64+
text-decoration: none;
65+
border-radius: 8px;
66+
font-weight: bold;
67+
text-align: center;
68+
font-size: 0.95rem;
69+
transition: all 0.3s ease;
7870

79-
.primary {
80-
background-color: light-dark( #0f172a, #3b82f6);
81-
color: light-dark(#ffffff, #f0f0f0);
82-
}
71+
&--primary {
72+
background-color: light-dark(#0f172a, #3b82f6);
73+
color: light-dark(#ffffff, #f0f0f0);
8374

84-
.primary:hover {
85-
background-color: light-dark( #0f172a, #3b82f6);
86-
transform: translateY(-1px);
87-
}
75+
&:hover {
76+
background-color: light-dark(#0f172a, #3b82f6);
77+
transform: translateY(-1px);
78+
}
79+
}
8880

89-
.secondary {
90-
border: 2px solid light-dark( #0f172a, #3b82f6);
91-
color: light-dark( #0f172a, #3b82f6);
92-
background-color: light-dark(#ffffff, transparent);
93-
}
81+
&--secondary {
82+
border: 2px solid light-dark(#0f172a, #3b82f6);
83+
color: light-dark(#0f172a, #3b82f6);
84+
background-color: light-dark(#ffffff, transparent);
9485

95-
.secondary:hover {
96-
background-color: light-dark(#f8f9f8, rgba(90, 110, 82, 0.1));
97-
transform: translateY(-1px);
98-
}
86+
&:hover {
87+
background-color: light-dark(#f8f9f8, rgba(90, 110, 82, 0.1));
88+
transform: translateY(-1px);
89+
}
90+
}
9991

100-
.btn:hover {
101-
opacity: 0.9;
92+
&:hover {
93+
opacity: 0.9;
94+
}
95+
}
10296
}
103-
10497
}

‎src/components/MobileSplash.astro‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@ const githubUrl = "https://github.com/recursivezero/abcd";
55
const siteUrl = "https://abcdkbd.com";
66
const logoAlt = "abcdkbd";
77
---
8-
<div class="mobile-splash">
9-
<div class="splash-card">
10-
<img src={logo.src} alt={logoAlt} class="logo" />
11-
<h1><strong>abcdkbd is best experienced on desktop</strong></h1>
12-
<p>
8+
<div class="container__splash">
9+
<div class="container__splash-card">
10+
<img src={logo.src} alt={logoAlt} class="container__splash-logo" />
11+
<h1 class="container__splash-heading"><strong>abcdkbd is best experienced on desktop</strong></h1>
12+
<p class="container__splash-text">
1313
Revisit on desktop to check out abcdkbd.com. We will optimize for mobile soon. Stay tuned…
1414
</p>
15-
<div class="buttons">
16-
<a href={githubUrl} class="btn primary" target="_blank" rel="noopener">🔗 GitHub</a>
17-
<a href={siteUrl} class="btn secondary" target="_blank" rel="noopener">🌐 Visit abcdkbd.com</a>
15+
<div class="container__splash-buttons">
16+
<a href={githubUrl} class="container__splash-btn container__splash-btn--primary" target="_blank" rel="noopener">🔗 GitHub</a>
17+
<a href={siteUrl} class="container__splash-btn container__splash-btn--secondary" target="_blank" rel="noopener">🌐 Visit abcdkbd.com</a>
1818
</div>
1919
</div>
2020
</div>

0 commit comments

Comments
 (0)