Mirror of https://github.com/roostorg/playground
github.com/roostorg/playground
styles: make source code link a glowy button
+32
-2
+1
-1
_layouts/default.html
+1
-1
_layouts/default.html
+31
-1
style.css
+31
-1
style.css
···
51
51
header {
52
52
background-color: var(--roost-dark);
53
53
color: var(--roost-yellow);
54
-
padding-block: 1em;
54
+
padding-block: 0.5em;
55
55
}
56
56
57
57
header nav {
···
66
66
color: inherit;
67
67
font-family: var(--font-display);
68
68
font-weight: bold;
69
+
padding-block: 0.5em;
69
70
text-decoration: none;
70
71
}
71
72
···
151
152
padding: 0.125em 0.5em;
152
153
margin-top: 1em;
153
154
}
155
+
156
+
.button {
157
+
background-image: linear-gradient(
158
+
135deg,
159
+
var(--roost-yellow),
160
+
var(--roost-muddy),
161
+
var(--roost-peach)
162
+
);
163
+
background-position: center;
164
+
background-size: 175%;
165
+
border-radius: 0.25em;
166
+
color: var(--roost-dark);
167
+
font-weight: 600;
168
+
padding: 0.5em 1em;
169
+
transition:
170
+
background-size 1s ease-in-out,
171
+
box-shadow 200ms ease-in-out,
172
+
color 200ms ease-in-out;
173
+
}
174
+
175
+
.button:hover,
176
+
.button:focus {
177
+
background-size: 100%;
178
+
color: color-mix(var(--roost-dark) 80%, transparent);
179
+
text-decoration: none;
180
+
box-shadow:
181
+
-3px -3px 12px -3px var(--roost-yellow),
182
+
3px 3px 12px -3px var(--roost-peach);
183
+
}