bwc9876.dev
Files for my website
bwc9876.dev
Responsive Grid And Navbar
+41
-5
+15
-1
src/components/projects/ProjectGrid.astro
+15
-1
src/components/projects/ProjectGrid.astro
···
29
29
</div>
30
30
31
31
<style>
32
+
@media (width >= 769px) {
33
+
div {
34
+
grid-template-columns: 1fr 1fr 1fr;
35
+
}
36
+
}
37
+
@media (425px <= width <= 769px) {
38
+
div {
39
+
grid-template-columns: 1fr 1fr;
40
+
}
41
+
}
42
+
@media (width <= 425px) {
43
+
div {
44
+
grid-template-columns: 1fr;
45
+
}
46
+
}
32
47
div {
33
48
display: grid;
34
-
grid-template-columns: 1fr 1fr 1fr;
35
49
gap: var(--spacing);
36
50
}
37
51
</style>
+26
-4
src/layouts/Layout.astro
+26
-4
src/layouts/Layout.astro
···
40
40
<!DOCTYPE html>
41
41
<html data-theme="dark" lang="en">
42
42
<head>
43
+
<title>{fullTitle}</title>
43
44
<meta charset="UTF-8" />
44
45
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
45
46
<meta name="viewport" content="width=device-width" />
···
58
59
<meta name="twitter:image" content={og.src} />
59
60
<link rel="canonical" href={canonical} />
60
61
<link rel="icon" href="/favicon.png" />
61
-
<title>{fullTitle}</title>
62
62
</head>
63
63
<body>
64
64
<nav class="container">
···
75
75
/>
76
76
</a>
77
77
</li>
78
-
<li>
78
+
<li class="brand-name">
79
79
<b>Bwc9876</b>.dev
80
80
</li>
81
81
<li>
···
89
89
<li>
90
90
<IconLink
91
91
icon="github"
92
-
size={30}
92
+
size={25}
93
93
href="https://github.com/Bwc9876"
94
94
label="GitHub"
95
95
placement="bottom"
···
98
98
<li>
99
99
<IconLink
100
100
icon="twitter"
101
-
size={30}
101
+
size={25}
102
102
href="https://twitter.com/Bwc9876"
103
103
label="Twitter"
104
104
placement="bottom"
105
105
/>
106
106
</li>
107
+
<li>
108
+
<IconLink
109
+
icon="linkedin"
110
+
size={25}
111
+
href="https://www.linkedin.com/in/bwc9876"
112
+
label="Linkedin"
113
+
placement="bottom"
114
+
/>
115
+
</li>
107
116
</ul>
108
117
</nav>
109
118
<main class="container">
···
116
125
:root {
117
126
--spacing: 0.5rem !important;
118
127
--muted-color: hsl(205 10% 65% / 1) !important;
128
+
}
129
+
130
+
@media (width <= 575px) {
131
+
.brand-name {
132
+
display: none;
133
+
}
134
+
}
135
+
136
+
@media (width <= 330px) {
137
+
nav [astro-icon] {
138
+
width: 1em;
139
+
height: 1em;
140
+
}
119
141
}
120
142
121
143
.nav-icon {