Skip to content

Commit 2e77edf

Browse files
recursivezerorecursivezero
authored
Merge pull request #102 from recursivezero/feature/RZA-250091
Added mobile view pop up
2 parents a5a6d9e + 0bc6359 commit 2e77edf

File tree

4 files changed

+141
-1
lines changed

4 files changed

+141
-1
lines changed

‎package.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,30 @@
4040
{
4141
"name": "Vamil Porwal",
4242
"email": "[email protected]"
43+
},
44+
{
45+
"name": "Ayush Tyagi",
46+
"email": "[email protected]"
47+
},
48+
{
49+
"name": "Azmat Raza",
50+
"email": "[email protected]"
51+
},
52+
{
53+
"name": "Chhavi Sharma",
54+
"email": "[email protected]"
55+
},
56+
{
57+
"name": "Prakash Raj",
58+
"email": "[email protected]"
59+
},
60+
{
61+
"name": "Rupesh",
62+
"email": "[email protected]"
63+
},
64+
{
65+
"name": "Suresh Chelani",
66+
"email": "[email protected]"
4367
}
4468
],
4569
"keywords": [

‎src/assets/styles/MobileSplash.css‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
.container_splash {
2+
container-type: inline-size;
3+
display: none;
4+
}
5+
6+
@container (max-width: 768px) {
7+
.container_splash {
8+
display: flex;
9+
position: fixed;
10+
inset: 0;
11+
z-index: 1000;
12+
background-color: light-dark(#f4f4f2, #090808);
13+
justify-content: center;
14+
align-items: center;
15+
padding: 1rem;
16+
transition: background-color 0.3s ease;
17+
}
18+
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+
}
31+
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+
}
39+
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+
}
46+
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+
}
53+
54+
.container_splash_buttons {
55+
display: flex;
56+
flex-direction: column;
57+
gap: 0.75rem;
58+
}
59+
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+
}
75+
76+
.container_splash_btn_primary:hover {
77+
background-color: light-dark(#0f172a, #3b82f6);
78+
transform: translateY(-1px);
79+
}
80+
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+
}
86+
87+
.container_splash_btn_secondary:hover {
88+
background-color: light-dark(#f8f9f8, rgba(90, 110, 82, 0.1));
89+
transform: translateY(-1px);
90+
}
91+
92+
.container_splash_btn:hover {
93+
opacity: 0.9;
94+
}
95+
}

‎src/components/MobileSplash.astro‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
import logo from '@/assets/icons/logo.svg';
3+
import "@/assets/styles/MobileSplash.css";
4+
const githubUrl = "https://github.com/recursivezero/abcd";
5+
const siteUrl = "https://abcdkbd.com";
6+
const logoAlt = "abcdkbd";
7+
---
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">
13+
Revisit on desktop to check out abcdkbd.com. We will optimize for mobile soon. Stay tuned…
14+
</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>
18+
</div>
19+
</div>
20+
</div>

‎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

@@ -38,6 +38,7 @@ import Help from "@/components/Help.astro";
3838
}
3939
</style>
4040
<BaseLayout meta={{ title: "Home" }}>
41+
<MobileSplash />
4142
<h1>Welcome to parixan.xyz</h1>
4243
<Fragment slot="header-right">
4344
<Help title="Sample Dialog" description="This is sample dialog which need your details if you want to give?" />

0 commit comments

Comments
 (0)