Skip to content

Commit 5a50661

Browse files
1046prt1046prt
committed
Add MobileSplash component and associated styles for mobile view and Remove the popup from Base.astro to index.astro
1 parent 6ed8765 commit 5a50661

File tree

4 files changed

+107
-111
lines changed

4 files changed

+107
-111
lines changed

‎src/assets/styles/MobileSplash.css‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
.mobile-splash {
2+
display: none;
3+
}
4+
5+
@media (max-width: 768px) {
6+
html,
7+
body {
8+
overflow: hidden;
9+
height: 100%;
10+
}
11+
12+
.mobile-splash {
13+
display: flex;
14+
position: fixed;
15+
inset: 0;
16+
z-index:1;
17+
background-color: light-dark(#f4f4f2, #090808);
18+
justify-content: center;
19+
align-items: center;
20+
padding: 1rem;
21+
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+
}
39+
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+
}
47+
48+
h1 {
49+
font-size: 1.25rem;
50+
margin-bottom: 1rem;
51+
color: light-dark(#222222, #e0e0e0);
52+
transition: color 0.3s ease;
53+
}
54+
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+
}
61+
62+
.buttons {
63+
display: flex;
64+
flex-direction: column;
65+
gap: 0.75rem;
66+
}
67+
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+
}
78+
79+
.primary {
80+
background-color: light-dark( #0f172a, #3b82f6);
81+
color: light-dark(#ffffff, #f0f0f0);
82+
}
83+
84+
.primary:hover {
85+
background-color: light-dark( #0f172a, #3b82f6);
86+
transform: translateY(-1px);
87+
}
88+
89+
.secondary {
90+
border: 2px solid light-dark( #0f172a, #3b82f6);
91+
color: light-dark( #0f172a, #3b82f6);
92+
background-color: light-dark(#ffffff, transparent);
93+
}
94+
95+
.secondary:hover {
96+
background-color: light-dark(#f8f9f8, rgba(90, 110, 82, 0.1));
97+
transform: translateY(-1px);
98+
}
99+
100+
.btn:hover {
101+
opacity: 0.9;
102+
}
103+
104+
}

‎src/components/MobileSplash.astro‎

Lines changed: 1 addition & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,117 +1,10 @@
11
---
22
import logo from '@/assets/icons/logo.svg';
3+
import "@/assets/styles/MobileSplash.css";
34
const githubUrl = "https://github.com/recursivezero/abcd";
45
const siteUrl = "https://abcdkbd.com";
56
const logoAlt = "abcdkbd";
67
---
7-
8-
<style>
9-
.mobile-splash {
10-
display: none;
11-
}
12-
13-
@media (max-width: 768px) {
14-
html,
15-
body {
16-
overflow: hidden;
17-
height: 100%;
18-
}
19-
20-
.mobile-splash {
21-
display: flex;
22-
position: fixed;
23-
inset: 0;
24-
z-index:9999;
25-
background-color: light-dark(#f4f4f2, #090808);
26-
justify-content: center;
27-
align-items: center;
28-
padding: 1rem;
29-
transition: background-color 0.3s ease;
30-
}
31-
32-
.splash-card {
33-
background-color: light-dark(#ffffff, #0f172a);
34-
padding: 2rem;
35-
margin-bottom: 0.5vh;
36-
border-radius: 1rem;
37-
box-shadow: light-dark(
38-
0 10px 30px rgba(0, 0, 0, 0.1),
39-
0 10px 30px rgba(0, 0, 0, 0.3)
40-
);
41-
text-align: center;
42-
max-width: 400px;
43-
width: 100%;
44-
border: light-dark(none, 1px solid #404040);
45-
transition: background-color 0.3s ease, box-shadow 0.3s ease;
46-
}
47-
48-
.logo {
49-
width: 60px;
50-
margin-bottom: 1rem;
51-
margin-left: 40%;
52-
filter: light-dark(none, brightness(0.9));
53-
transition: filter 0.3s ease;
54-
}
55-
56-
h1 {
57-
font-size: 1.25rem;
58-
margin-bottom: 1rem;
59-
color: light-dark(#222222, #e0e0e0);
60-
transition: color 0.3s ease;
61-
}
62-
63-
p {
64-
font-size: 0.95rem;
65-
color: light-dark(#555555, #b0b0b0);
66-
margin-bottom: 1.5rem;
67-
transition: color 0.3s ease;
68-
}
69-
70-
.buttons {
71-
display: flex;
72-
flex-direction: column;
73-
gap: 0.75rem;
74-
}
75-
76-
.btn {
77-
display: inline-block;
78-
padding: 0.75rem 1rem;
79-
text-decoration: none;
80-
border-radius: 8px;
81-
font-weight: bold;
82-
text-align: center;
83-
font-size: 0.95rem;
84-
transition: all 0.3s ease;
85-
}
86-
87-
.primary {
88-
background-color: light-dark( #0f172a, #3b82f6);
89-
color: light-dark(#ffffff, #f0f0f0);
90-
}
91-
92-
.primary:hover {
93-
background-color: light-dark( #0f172a, #6a7e62);
94-
transform: translateY(-1px);
95-
}
96-
97-
.secondary {
98-
border: 2px solid light-dark( #0f172a, #3b82f6);
99-
color: light-dark( #0f172a, #3b82f6);
100-
background-color: light-dark(#ffffff, transparent);
101-
}
102-
103-
.secondary:hover {
104-
background-color: light-dark(#f8f9f8, rgba(90, 110, 82, 0.1));
105-
transform: translateY(-1px);
106-
}
107-
108-
.btn:hover {
109-
opacity: 0.9;
110-
}
111-
112-
}
113-
</style>
114-
1158
<div class="mobile-splash">
1169
<div class="splash-card">
11710
<img src={logo.src} alt={logoAlt} class="logo" />

‎src/layouts/Base.astro‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import BaseHead from "@/layouts/BaseHead";
44
import Footer from "@/layouts/common/Footer";
55
import Header from "@/layouts/common/Header";
66
import Menu from "@/layouts/common/Menu";
7-
import MobileSplash from '@/components/MobileSplash.astro';
87
import { siteConfig } from "@/site-config";
98
109
const {
@@ -17,7 +16,6 @@ const {
1716
<BaseHead title={title} description={description} ogImage={ogImage} date={articleDate} />
1817
</head>
1918
<body id="body" class="body__container">
20-
<MobileSplash />
2119
<ThemeProvider />
2220
<Header title={title}>
2321
<slot name="header-left" slot="left" />

‎src/pages/index.astro‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
import BaseLayout from "@/layouts/Base";
3-
3+
import MobileSplash from '@/components/MobileSplash.astro';
44
import Help from "@/components/Help.astro";
55
---
66

@@ -20,6 +20,7 @@ import Help from "@/components/Help.astro";
2020
}
2121
</style>
2222
<BaseLayout meta={{ title: "Home" }}>
23+
<MobileSplash />
2324
<h1>Welcome to parixan.xyz</h1>
2425
<Fragment slot="header-right">
2526
<Help title="Sample Dialog" description="This is sample dialog which need your details if you want to give?" />

0 commit comments

Comments
 (0)