-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.css
105 lines (87 loc) · 1.83 KB
/
index.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
95
96
97
98
99
100
101
102
103
104
105
@font-face {
font-family: 'Roboto Mono Light';
src: url('./fonts/RobotoMono-Light.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'Roboto Condensed Light';
src: url('./fonts/RobotoCondensed-Light.ttf') format('truetype');
font-display: swap;
}
:root
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 62.5%;
--font-headings: 'Roboto Mono Light';
--font-copy: 'Roboto Condensed Light';
--color-headings: rebeccaPurple;
--color-copy: grey;
--color-accent: #f1c40f;
}
body{
display: grid;
grid-template-areas:
"title"
"poemtext"
"subline";
grid-template-rows: 5rem 1fr 2rem;
gap: calc(4rem + 1vw);
justify-content: center;
align-items: center;
padding: calc(3rem + 1vw);
}
header {
grid-area: title;
border-top: var(--color-headings) solid 0.1rem;
padding-top: calc(5rem + 1vw);
}
main
{ grid-area: poemtext;
font-family: var(--font-copy);
color: var(--color-copy);
padding: 0 0 calc(1rem + 1vw) calc(1rem + 1vw);
border-bottom: var(--color-headings) solid 0.1rem;
}
footer {
grid-area: subline;
padding-left: 1rem;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-headings);
font-weight: normal;
color: var(--color-headings);
}
p {
font-family: var(--font-copy);
font-size: calc(1.1rem + 0.3vw);
line-height: 1.5;
}
em {
font-family: var(--font-headings);
font-size: calc(1rem + 0.2vw);
padding-left: 1rem;
}
main > p:first-of-type::first-letter {
-webkit-initial-letter: 2 2;
initial-letter: 2 2;
margin-right: 0.8rem;
}
main > p::first-line {
font-variant: small-caps;
}
p::selection {
background: var(--color-accent);
color: var(--color-headings);
}
/* Icons */
#github-icon {
position: absolute;
top: calc(1rem + 1vw);
right: calc(1rem + 1vw);
width: calc(1rem + 1vw);
height: auto;
fill: var(--color-headings);
animation: grow-shrink 2s linear;
}