generated from webmural/swoon
-
Notifications
You must be signed in to change notification settings - Fork 0
/
broove.css
94 lines (79 loc) · 1.29 KB
/
broove.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
html {
font: max(3ch, 5vmax + 3vmin) sans-serif;
}
body {
display: flex;
flex-flow: anywhere;
box-sizing: border-box;
overflow-wrap: anywhere;
margin: 0;
min-height: 100vh;
border: 1ch groove deepskyblue;
}
body > * {
box-sizing: border-box;
padding: 1ch 1ch 1em;
}
h1 {
font-weight: unset;
justify-content: center;
animation: 60s ease-in-out swoon infinite;
border: 1ch groove hotpink;
display: table;
margin: auto;
margin-bottom: 1rem;
}
p {
margin: auto;
}
a {
display: inline-flex;
padding: 1vmin;
}
b {
text-shadow:
0 -3vh 0,
0 -2vh 0,
0 -1vh 0;
}
body {
display: flex;
flex-flow: column;
margin: auto;
}
main {
align-items: center;
display: flex;
flex-flow: row;
justify-content: center;
min-height: 100vh;
}
:root {
background: #ee1;
color: indigo;
background-image: linear-gradient(.3turn, gainsboro 0% , gainsboro 50%, #ee1 50%);
line-height: 1.618;
}
:any-link {
background: #bae;
color: indigo;
}
::selection {
background: deepskyblue;
color: indigo;
}
@keyframes swoon {
from {
text-shadow: 0 -1vh 0 mediumpurple;
}
to {
text-shadow: 0 -1vh 0 darkviolet;
}
}
:focus-within {
box-shadow: 0 0 0 2vw deepskyblue;
}
:focus {
box-shadow: 0 0 0 10vmax deepskyblue;
outline: 1ch groove skyblue;
}