Files for my website
bwc9876.dev
Background for content
+14
-15
src/assets/bg-tile.webp
src/assets/bg-tile.webp
This is a binary file and will not be displayed.
+14
-15
src/layouts/Layout.astro
+14
-15
src/layouts/Layout.astro
···
72
72
</style>
73
73
</head>
74
74
<body id="top">
75
-
<div class="backdrop" aria-hidden role="presentation"></div>
76
75
<header class="container">
77
76
<nav aria-label="Main navigation">
78
77
<a href="/"
···
118
117
<style>
119
118
body {
120
119
background-color: var(--background);
120
+
background-image: url("@assets/bg-tile.webp");
121
+
background-repeat: round;
122
+
background-blend-mode: multiply;
123
+
animation: rainbow 5s linear infinite;
124
+
121
125
margin: 0;
122
126
padding: 0;
123
127
display: flex;
···
127
131
overflow-x: hidden;
128
132
}
129
133
134
+
body > * {
135
+
background-color: color(from var(--background) srgb r g b / 70%);
136
+
backdrop-filter: blur(200px);
137
+
padding: 0 var(--4);
138
+
}
139
+
130
140
header {
131
141
border-bottom: var(--section-border);
132
142
}
133
143
134
144
@keyframes rainbow {
135
145
0% {
136
-
filter: hue-rotate(0deg);
146
+
backdrop-filter: hue-rotate(0deg);
137
147
}
138
148
50% {
139
-
filter: hue-rotate(180deg);
149
+
backdrop-filter: hue-rotate(180deg);
140
150
}
141
151
100% {
142
-
filter: hue-rotate(360deg);
152
+
backdrop-filter: hue-rotate(360deg);
143
153
}
144
-
}
145
-
146
-
.backdrop {
147
-
z-index: -50;
148
-
position: fixed;
149
-
inset: 0;
150
-
background-image: url("@assets/bg-tile.webp");
151
-
background-repeat: round;
152
-
animation: rainbow 5s linear infinite;
153
-
opacity: 3%;
154
154
}
155
155
156
156
nav {
···
243
243
244
244
footer {
245
245
border-top: var(--section-border);
246
-
margin-top: var(--4);
247
246
display: flex;
248
247
flex-direction: column;
249
248
align-items: center;