bwc9876.dev
Files for my website
bwc9876.dev
Better breakpoints, hide hero image on smaller screens
+36
-14
+3
-3
src/components/projects/ProjectGrid.astro
+3
-3
src/components/projects/ProjectGrid.astro
···
25
25
</div>
26
26
27
27
<style>
28
-
@media (width >= 770px) {
28
+
@media (width >= 1700px) {
29
29
div {
30
30
grid-template-columns: 1fr 1fr 1fr;
31
31
}
32
32
}
33
-
@media (425px <= width <= 770px) {
33
+
@media (1200px <= width <= 1700px) {
34
34
div {
35
35
grid-template-columns: 1fr 1fr;
36
36
}
37
37
}
38
-
@media (width <= 425px) {
38
+
@media (width <= 1200px) {
39
39
div {
40
40
grid-template-columns: 1fr;
41
41
}
+14
-7
src/layouts/Layout.astro
+14
-7
src/layouts/Layout.astro
···
69
69
</head>
70
70
<body id="top">
71
71
<header class="container">
72
-
<nav class="colrow-md">
72
+
<nav class="colrow-lg">
73
73
<a href="/"
74
74
><Image
75
75
class="nav-icon"
···
81
81
/>
82
82
<span><b class="gradient-text">Bwc9876</b>.dev</span>
83
83
</a>
84
-
<a href="/">Home</a>
85
-
<a href="/projects">Projects</a>
86
-
<a href="/blog">Blog</a>
87
-
<span class="spacer"></span>
84
+
<span>
85
+
<a href="/">Home</a>
86
+
<a href="/projects">Projects</a>
87
+
<a href="/blog">Blog</a>
88
+
</span>
88
89
<Socials labelPlacement="bottom" />
89
90
</nav>
90
91
</header>
91
92
<main class="container">
92
93
<slot />
93
94
</main>
94
-
<footer class="container colrow-md">
95
+
<footer class="container colrow-lg">
95
96
<p>
96
97
<IconLink
97
98
label="Back To Top"
···
140
141
justify-content: center;
141
142
}
142
143
143
-
span.spacer {
144
+
nav > span {
145
+
display: flex;
146
+
flex-direction: row;
147
+
gap: var(--2);
148
+
}
149
+
150
+
nav > span:nth-child(2) {
144
151
flex-grow: 1;
145
152
}
146
153
+4
-3
src/pages/index.astro
+4
-3
src/pages/index.astro
···
25
25
<a href="#about-me" role="button" class="secondary">About Me</a>
26
26
</div>
27
27
</div>
28
-
<div class="hero-image">
28
+
<div class="hero-image hide-lg">
29
29
<Image width={150} height={150} format="webp" alt="Ben C's Avatar" src={cow} />
30
30
</div>
31
31
</div>
···
99
99
}
100
100
101
101
.hero-image img {
102
-
width: var(--12);
103
-
height: var(--12);
102
+
width: var(--11);
103
+
height: var(--11);
104
+
position: relative;
104
105
z-index: 100;
105
106
clip-path: circle();
106
107
}
+15
-1
src/styles/style.css
+15
-1
src/styles/style.css
···
273
273
-webkit-text-fill-color: transparent;
274
274
}
275
275
276
+
.colrow-lg {
277
+
display: flex;
278
+
flex-direction: column;
279
+
}
280
+
276
281
.colrow-lg-rev {
277
282
display: flex;
278
283
flex-direction: column-reverse;
279
284
}
280
285
286
+
.hide-lg {
287
+
display: none !important;
288
+
}
289
+
281
290
@media (--lg) {
282
-
.colrow-lg-rev {
291
+
.colrow-lg-rev,
292
+
.colrow-lg {
283
293
flex-direction: row;
294
+
}
295
+
296
+
.hide-lg {
297
+
display: flex !important;
284
298
}
285
299
}
286
300