Skip to content

Commit 6ed8765

Browse files
1046prt1046prt
committed
Added mobile view
1 parent 00d87f0 commit 6ed8765

File tree

2 files changed

+129
-0
lines changed

2 files changed

+129
-0
lines changed

‎src/components/MobileSplash.astro‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
---
2+
import logo from '@/assets/icons/logo.svg';
3+
const githubUrl = "https://github.com/recursivezero/abcd";
4+
const siteUrl = "https://abcdkbd.com";
5+
const logoAlt = "abcdkbd";
6+
---
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+
115+
<div class="mobile-splash">
116+
<div class="splash-card">
117+
<img src={logo.src} alt={logoAlt} class="logo" />
118+
<h1><strong>abcdkbd is best experienced on desktop</strong></h1>
119+
<p>
120+
Revisit on desktop to check out abcdkbd.com. We will optimize for mobile soon. Stay tuned…
121+
</p>
122+
<div class="buttons">
123+
<a href={githubUrl} class="btn primary" target="_blank" rel="noopener">🔗 GitHub</a>
124+
<a href={siteUrl} class="btn secondary" target="_blank" rel="noopener">🌐 Visit abcdkbd.com</a>
125+
</div>
126+
</div>
127+
</div>

‎src/layouts/Base.astro‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ 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';
78
import { siteConfig } from "@/site-config";
89
910
const {
@@ -16,6 +17,7 @@ const {
1617
<BaseHead title={title} description={description} ogImage={ogImage} date={articleDate} />
1718
</head>
1819
<body id="body" class="body__container">
20+
<MobileSplash />
1921
<ThemeProvider />
2022
<Header title={title}>
2123
<slot name="header-left" slot="left" />

0 commit comments

Comments
 (0)