Commit | Line | Data |
---|---|---|
4bbfb028 JK |
1 | @import url('https://fonts.googleapis.com/css?family=Cutive+Mono|Source+Code+Pro:300'); |
2 | ||
3 | body { | |
4bbfb028 JK |
4 | width:100%; |
5 | height:100%; | |
6 | overflow-x:hidden; | |
e29d9cc4 | 7 | font-family:'Cutive Mono', monospace; |
4bbfb028 | 8 | color:#FFF1FF; |
b0fbfd4f JK |
9 | transition:background-color .6s cubic-bezier(0.23, 1, 0.32, 1); |
10 | } | |
11 | ||
12 | body.pink { | |
13 | background-color:#161216; | |
14 | } | |
15 | ||
16 | body.blue { | |
17 | background-color:#001216; | |
18 | } | |
19 | ||
20 | body.green { | |
21 | background-color:#031514; | |
22 | } | |
23 | ||
24 | body.yellow { | |
25 | background-color:#191710; | |
26 | } | |
27 | ||
28 | main { | |
29 | width:100%; | |
30 | height:100%; | |
31 | background:url(stars.png); | |
4bbfb028 JK |
32 | } |
33 | ||
9d04f7fb | 34 | header { |
4bbfb028 JK |
35 | position:absolute; |
36 | width:400px; | |
37 | height:400px; | |
e29d9cc4 | 38 | font-family:'Source Code Pro', monospace; |
4bbfb028 JK |
39 | font-smooth:never; |
40 | -webkit-font-smoothing:none; | |
d7edfd55 | 41 | /*background-color:black;*/ |
e29d9cc4 JK |
42 | } |
43 | ||
9d04f7fb | 44 | header > div > a { |
e29d9cc4 JK |
45 | color:inherit; |
46 | text-decoration:none; | |
d7edfd55 JK |
47 | } |
48 | ||
9d04f7fb | 49 | header.middle { |
d7edfd55 JK |
50 | left:calc(50% - 200px); |
51 | top:calc(50% - 400px); | |
e29d9cc4 | 52 | height:400px; |
d7edfd55 JK |
53 | } |
54 | ||
9d04f7fb | 55 | header.top { |
d7edfd55 | 56 | left:calc(50% - 200px); |
e29d9cc4 JK |
57 | top:10px; |
58 | height:100px; | |
4bbfb028 JK |
59 | } |
60 | ||
9d04f7fb | 61 | header, header > *, header img, article { |
e29d9cc4 | 62 | transition:all .6s cubic-bezier(0.23, 1, 0.32, 1); |
4bbfb028 JK |
63 | } |
64 | ||
9d04f7fb | 65 | header.middle #avatar { |
4bbfb028 | 66 | display:block; |
e29d9cc4 JK |
67 | position:absolute; |
68 | right:0px; | |
69 | bottom:100px; | |
4bbfb028 JK |
70 | width:300px; |
71 | height:300px; | |
72 | margin-left:50px; | |
73 | margin-right:50px; | |
4bbfb028 JK |
74 | } |
75 | ||
9d04f7fb | 76 | header.middle #avatar img { |
4bbfb028 JK |
77 | width:256px; |
78 | height:256px; | |
79 | margin:22px; | |
d7edfd55 JK |
80 | border-radius:50%; |
81 | } | |
82 | ||
9d04f7fb | 83 | header.middle #name { |
e29d9cc4 JK |
84 | position:absolute; |
85 | right:0px; | |
86 | bottom:50px; | |
d7edfd55 JK |
87 | width:100%; |
88 | height:50px; | |
89 | font-size:3em; | |
90 | } | |
91 | ||
9d04f7fb | 92 | header.middle #name h1 { |
d7edfd55 JK |
93 | display:block; |
94 | width:100%; | |
95 | height:50px; | |
96 | line-height:50px; | |
97 | text-align:center; | |
4bbfb028 JK |
98 | } |
99 | ||
9d04f7fb | 100 | header.top #avatar { |
e29d9cc4 JK |
101 | display:inline-block; |
102 | position:absolute; | |
103 | right:300px; | |
104 | bottom:50px; | |
105 | width:100px; | |
106 | height:50px; | |
107 | text-align:center; | |
e29d9cc4 JK |
108 | } |
109 | ||
9d04f7fb | 110 | header.top #avatar img { |
e29d9cc4 JK |
111 | display:inline-block; |
112 | width:50px; | |
113 | height:50px; | |
114 | border-radius:50%; | |
115 | } | |
116 | ||
9d04f7fb | 117 | header.top #name { |
e29d9cc4 JK |
118 | display:inline-block; |
119 | position:absolute; | |
120 | right:0px; | |
121 | bottom:50px; | |
122 | width:300px; | |
123 | height:50px; | |
124 | font-size:2.5em; | |
125 | } | |
126 | ||
9d04f7fb | 127 | header.top #name h1 { |
e29d9cc4 JK |
128 | display:inline-block; |
129 | width:100%; | |
130 | height:50px; | |
131 | line-height:50px; | |
132 | text-align:center; | |
133 | } | |
134 | ||
9d04f7fb | 135 | header nav { |
e29d9cc4 JK |
136 | position:absolute; |
137 | right:0px; | |
138 | bottom:0px; | |
139 | display:flex; | |
140 | flex-direction:column; | |
141 | } | |
142 | ||
9d04f7fb | 143 | header nav ul { |
4bbfb028 JK |
144 | display:flex; |
145 | flex-direction:row; | |
e29d9cc4 | 146 | width:400px; |
d7edfd55 | 147 | height:50px; |
4bbfb028 JK |
148 | } |
149 | ||
9d04f7fb | 150 | header nav ul li { |
4bbfb028 JK |
151 | display:inline-block; |
152 | text-align:center; | |
153 | width:25%; | |
d7edfd55 | 154 | height:50px; |
4bbfb028 | 155 | font-size:1.25em; |
d7edfd55 JK |
156 | line-height:50px; |
157 | } | |
158 | ||
9d04f7fb | 159 | header nav ul li a:link, header nav ul li a:visited { |
d7edfd55 JK |
160 | text-decoration:none; |
161 | color:inherit; | |
162 | } | |
163 | ||
9d04f7fb | 164 | header nav ul li a:hover, header nav ul li a.selected { |
d7edfd55 | 165 | text-decoration:underline; |
4bbfb028 | 166 | } |
e29d9cc4 JK |
167 | |
168 | ||
169 | article { | |
170 | display:flex; | |
171 | flex-direction:row; | |
9d04f7fb | 172 | flex-wrap:wrap; |
e29d9cc4 JK |
173 | justify-content:space-between; |
174 | position:absolute; | |
175 | top:150px; | |
176 | left:calc(50% - 400px); | |
177 | width:800px; | |
178 | height:auto; | |
e29d9cc4 JK |
179 | } |
180 | ||
aa933c49 JK |
181 | article.selected { |
182 | opacity:1; | |
183 | visibility:visible; | |
184 | top:150px; | |
e29d9cc4 JK |
185 | } |
186 | ||
aa933c49 | 187 | article.hidden { |
e29d9cc4 | 188 | opacity:0; |
aa933c49 JK |
189 | visibility:hidden; |
190 | top:200px; | |
e29d9cc4 JK |
191 | } |
192 | ||
9d04f7fb JK |
193 | article div { |
194 | width:350px; | |
195 | margin:25px; | |
196 | } | |
197 | ||
9f0253f6 JK |
198 | em { |
199 | font-style:italic; | |
200 | } | |
201 | ||
202 | em > em { | |
203 | font-style:normal; | |
204 | font-weight:bold; | |
205 | } | |
206 | ||
9d04f7fb JK |
207 | article div h2 { |
208 | margin-bottom:5px; | |
209 | font-size:1.5em; | |
210 | } | |
211 | ||
212 | article div h2 a:link, article div h2 a:visited { | |
213 | color:inherit; | |
214 | } | |
215 | ||
9d04f7fb JK |
216 | article div p { |
217 | margin-top:5px; | |
9d04f7fb JK |
218 | } |
219 | ||
220 | article div p a:link, article div p a:visited { | |
221 | color:inherit; | |
222 | } | |
223 | ||
9d04f7fb JK |
224 | #about div { |
225 | width:600px; | |
226 | margin:25px 100px 25px 100px; | |
227 | } |