Skip to content

Commit 0bc6359

Browse files
1046prt1046prt
committed
Refactor CSS using BEM model convention
1 parent 8c7f295 commit 0bc6359

File tree

2 files changed

+78
-80
lines changed

2 files changed

+78
-80
lines changed

‎src/assets/styles/MobileSplash.css‎

Lines changed: 70 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
.container__splash {
1+
.container_splash {
2+
container-type: inline-size;
23
display: none;
34
}
45

56
@container (max-width: 768px) {
6-
.container__splash {
7+
.container_splash {
78
display: flex;
89
position: fixed;
910
inset: 0;
@@ -13,85 +14,82 @@
1314
align-items: center;
1415
padding: 1rem;
1516
transition: background-color 0.3s ease;
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-
}
17+
}
3218

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-
}
19+
.container_splash_card {
20+
background-color: light-dark(#ffffff, #0f172a);
21+
padding: 2rem;
22+
margin-bottom: 0.5vh;
23+
border-radius: 1rem;
24+
box-shadow: light-dark(0 10px 30px rgba(0, 0, 0, 0.1), 0 10px 30px rgba(0, 0, 0, 0.3));
25+
text-align: center;
26+
max-width: 400px;
27+
width: 100%;
28+
border: light-dark(none, 1px solid #404040);
29+
transition: background-color 0.3s ease, box-shadow 0.3s ease;
30+
}
4031

41-
&-heading {
42-
font-size: 1.25rem;
43-
margin-bottom: 1rem;
44-
color: light-dark(#222222, #e0e0e0);
45-
transition: color 0.3s ease;
46-
}
32+
.container_splash_logo {
33+
width: 60px;
34+
margin-bottom: 1rem;
35+
margin-left: 40%;
36+
filter: light-dark(none, brightness(0.9));
37+
transition: filter 0.3s ease;
38+
}
4739

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-
}
40+
.container_splash_heading {
41+
font-size: 1.25rem;
42+
margin-bottom: 1rem;
43+
color: light-dark(#222222, #e0e0e0);
44+
transition: color 0.3s ease;
45+
}
5446

55-
&-buttons {
56-
display: flex;
57-
flex-direction: column;
58-
gap: 0.75rem;
59-
}
47+
.container_splash_text {
48+
font-size: 0.95rem;
49+
color: light-dark(#555555, #b0b0b0);
50+
margin-bottom: 1.5rem;
51+
transition: color 0.3s ease;
52+
}
6053

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;
54+
.container_splash_buttons {
55+
display: flex;
56+
flex-direction: column;
57+
gap: 0.75rem;
58+
}
7059

71-
&--primary {
72-
background-color: light-dark(#0f172a, #3b82f6);
73-
color: light-dark(#ffffff, #f0f0f0);
60+
.container_splash_btn {
61+
display: inline-block;
62+
padding: 0.75rem 1rem;
63+
text-decoration: none;
64+
border-radius: 8px;
65+
font-weight: bold;
66+
text-align: center;
67+
font-size: 0.95rem;
68+
transition: all 0.3s ease;
69+
}
70+
71+
.container_splash_btn_primary {
72+
background-color: light-dark(#0f172a, #3b82f6);
73+
color: light-dark(#ffffff, #f0f0f0);
74+
}
7475

75-
&:hover {
76-
background-color: light-dark(#0f172a, #3b82f6);
77-
transform: translateY(-1px);
78-
}
79-
}
76+
.container_splash_btn_primary:hover {
77+
background-color: light-dark(#0f172a, #3b82f6);
78+
transform: translateY(-1px);
79+
}
8080

81-
&--secondary {
82-
border: 2px solid light-dark(#0f172a, #3b82f6);
83-
color: light-dark(#0f172a, #3b82f6);
84-
background-color: light-dark(#ffffff, transparent);
81+
.container_splash_btn_secondary {
82+
border: 2px solid light-dark(#0f172a, #3b82f6);
83+
color: light-dark(#0f172a, #3b82f6);
84+
background-color: light-dark(#ffffff, transparent);
85+
}
8586

86-
&:hover {
87-
background-color: light-dark(#f8f9f8, rgba(90, 110, 82, 0.1));
88-
transform: translateY(-1px);
89-
}
90-
}
87+
.container_splash_btn_secondary:hover {
88+
background-color: light-dark(#f8f9f8, rgba(90, 110, 82, 0.1));
89+
transform: translateY(-1px);
90+
}
9191

92-
&:hover {
93-
opacity: 0.9;
94-
}
95-
}
92+
.container_splash_btn:hover {
93+
opacity: 0.9;
9694
}
9795
}

‎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="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">
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="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>
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)