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