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 | ||
39 | menu { | |
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 | ||
49 | menu > div > a { | |
50 | color:inherit; | |
51 | text-decoration:none; | |
d7edfd55 JK |
52 | } |
53 | ||
54 | menu.middle { | |
55 | left:calc(50% - 200px); | |
56 | top:calc(50% - 400px); | |
e29d9cc4 | 57 | height:400px; |
d7edfd55 JK |
58 | } |
59 | ||
60 | menu.top { | |
61 | left:calc(50% - 200px); | |
e29d9cc4 JK |
62 | top:10px; |
63 | height:100px; | |
4bbfb028 JK |
64 | } |
65 | ||
aa933c49 | 66 | menu, menu > *, menu img, article { |
e29d9cc4 | 67 | transition:all .6s cubic-bezier(0.23, 1, 0.32, 1); |
4bbfb028 JK |
68 | } |
69 | ||
e29d9cc4 | 70 | menu.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 | ||
e29d9cc4 | 82 | menu.middle #avatar img { |
4bbfb028 JK |
83 | width:256px; |
84 | height:256px; | |
85 | margin:22px; | |
d7edfd55 JK |
86 | border-radius:50%; |
87 | } | |
88 | ||
e29d9cc4 JK |
89 | menu.middle #name { |
90 | position:absolute; | |
91 | right:0px; | |
92 | bottom:50px; | |
d7edfd55 JK |
93 | width:100%; |
94 | height:50px; | |
95 | font-size:3em; | |
96 | } | |
97 | ||
e29d9cc4 | 98 | menu.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 | ||
e29d9cc4 JK |
106 | menu.top #avatar { |
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 | ||
117 | menu.top #avatar img { | |
118 | display:inline-block; | |
119 | width:50px; | |
120 | height:50px; | |
121 | border-radius:50%; | |
122 | } | |
123 | ||
124 | menu.top #name { | |
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 | ||
134 | menu.top #name h1 { | |
135 | display:inline-block; | |
136 | width:100%; | |
137 | height:50px; | |
138 | line-height:50px; | |
139 | text-align:center; | |
140 | } | |
141 | ||
142 | menu nav { | |
143 | position:absolute; | |
144 | right:0px; | |
145 | bottom:0px; | |
146 | display:flex; | |
147 | flex-direction:column; | |
148 | } | |
149 | ||
4bbfb028 JK |
150 | menu nav ul { |
151 | display:flex; | |
152 | flex-direction:row; | |
e29d9cc4 | 153 | width:400px; |
d7edfd55 | 154 | height:50px; |
4bbfb028 JK |
155 | } |
156 | ||
157 | menu nav ul li { | |
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 | ||
166 | menu nav ul li a:link, menu nav ul li a:visited { | |
167 | text-decoration:none; | |
168 | color:inherit; | |
169 | } | |
170 | ||
aa933c49 | 171 | menu nav ul li a:hover, menu 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; | |
179 | justify-content:space-between; | |
180 | position:absolute; | |
181 | top:150px; | |
182 | left:calc(50% - 400px); | |
183 | width:800px; | |
184 | height:auto; | |
e29d9cc4 JK |
185 | } |
186 | ||
aa933c49 JK |
187 | article.selected { |
188 | opacity:1; | |
189 | visibility:visible; | |
190 | top:150px; | |
e29d9cc4 JK |
191 | } |
192 | ||
aa933c49 | 193 | article.hidden { |
e29d9cc4 | 194 | opacity:0; |
aa933c49 JK |
195 | visibility:hidden; |
196 | top:200px; | |
e29d9cc4 JK |
197 | } |
198 | ||
199 | article > div { | |
200 | width:375px; | |
201 | text-align:justify; | |
202 | } |