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; |
e29d9cc4 JK |
9 | #background-image:linear-gradient(to right,#00c4f4 0%,#278fba 20%,#278fba 80%,#00c4f4 100%); |
10 | background-color:#278fba; | |
4bbfb028 JK |
11 | } |
12 | ||
13 | menu { | |
14 | position:absolute; | |
15 | width:400px; | |
16 | height:400px; | |
e29d9cc4 | 17 | font-family:'Source Code Pro', monospace; |
4bbfb028 JK |
18 | font-smooth:never; |
19 | -webkit-font-smoothing:none; | |
d7edfd55 | 20 | /*background-color:black;*/ |
e29d9cc4 JK |
21 | } |
22 | ||
23 | menu > div > a { | |
24 | color:inherit; | |
25 | text-decoration:none; | |
d7edfd55 JK |
26 | } |
27 | ||
28 | menu.middle { | |
29 | left:calc(50% - 200px); | |
30 | top:calc(50% - 400px); | |
e29d9cc4 | 31 | height:400px; |
d7edfd55 JK |
32 | } |
33 | ||
34 | menu.top { | |
35 | left:calc(50% - 200px); | |
e29d9cc4 JK |
36 | top:10px; |
37 | height:100px; | |
4bbfb028 JK |
38 | } |
39 | ||
aa933c49 | 40 | menu, menu > *, menu img, article { |
e29d9cc4 | 41 | transition:all .6s cubic-bezier(0.23, 1, 0.32, 1); |
4bbfb028 JK |
42 | } |
43 | ||
e29d9cc4 | 44 | menu.middle #avatar { |
4bbfb028 | 45 | display:block; |
e29d9cc4 JK |
46 | position:absolute; |
47 | right:0px; | |
48 | bottom:100px; | |
4bbfb028 JK |
49 | width:300px; |
50 | height:300px; | |
51 | margin-left:50px; | |
52 | margin-right:50px; | |
d7edfd55 | 53 | /*background-color:lightgrey;*/ |
4bbfb028 JK |
54 | } |
55 | ||
e29d9cc4 | 56 | menu.middle #avatar img { |
4bbfb028 JK |
57 | width:256px; |
58 | height:256px; | |
59 | margin:22px; | |
d7edfd55 JK |
60 | border-radius:50%; |
61 | } | |
62 | ||
e29d9cc4 JK |
63 | menu.middle #name { |
64 | position:absolute; | |
65 | right:0px; | |
66 | bottom:50px; | |
d7edfd55 JK |
67 | width:100%; |
68 | height:50px; | |
69 | font-size:3em; | |
70 | } | |
71 | ||
e29d9cc4 | 72 | menu.middle #name h1 { |
d7edfd55 JK |
73 | display:block; |
74 | width:100%; | |
75 | height:50px; | |
76 | line-height:50px; | |
77 | text-align:center; | |
4bbfb028 JK |
78 | } |
79 | ||
e29d9cc4 JK |
80 | menu.top #avatar { |
81 | display:inline-block; | |
82 | position:absolute; | |
83 | right:300px; | |
84 | bottom:50px; | |
85 | width:100px; | |
86 | height:50px; | |
87 | text-align:center; | |
88 | /*background-color:lightgrey;*/ | |
89 | } | |
90 | ||
91 | menu.top #avatar img { | |
92 | display:inline-block; | |
93 | width:50px; | |
94 | height:50px; | |
95 | border-radius:50%; | |
96 | } | |
97 | ||
98 | menu.top #name { | |
99 | display:inline-block; | |
100 | position:absolute; | |
101 | right:0px; | |
102 | bottom:50px; | |
103 | width:300px; | |
104 | height:50px; | |
105 | font-size:2.5em; | |
106 | } | |
107 | ||
108 | menu.top #name h1 { | |
109 | display:inline-block; | |
110 | width:100%; | |
111 | height:50px; | |
112 | line-height:50px; | |
113 | text-align:center; | |
114 | } | |
115 | ||
116 | menu nav { | |
117 | position:absolute; | |
118 | right:0px; | |
119 | bottom:0px; | |
120 | display:flex; | |
121 | flex-direction:column; | |
122 | } | |
123 | ||
4bbfb028 JK |
124 | menu nav ul { |
125 | display:flex; | |
126 | flex-direction:row; | |
e29d9cc4 | 127 | width:400px; |
d7edfd55 | 128 | height:50px; |
4bbfb028 JK |
129 | } |
130 | ||
131 | menu nav ul li { | |
132 | display:inline-block; | |
133 | text-align:center; | |
134 | width:25%; | |
d7edfd55 | 135 | height:50px; |
4bbfb028 | 136 | font-size:1.25em; |
d7edfd55 JK |
137 | line-height:50px; |
138 | } | |
139 | ||
140 | menu nav ul li a:link, menu nav ul li a:visited { | |
141 | text-decoration:none; | |
142 | color:inherit; | |
143 | } | |
144 | ||
aa933c49 | 145 | menu nav ul li a:hover, menu nav ul li a.selected { |
d7edfd55 | 146 | text-decoration:underline; |
4bbfb028 | 147 | } |
e29d9cc4 JK |
148 | |
149 | ||
150 | article { | |
151 | display:flex; | |
152 | flex-direction:row; | |
153 | justify-content:space-between; | |
154 | position:absolute; | |
155 | top:150px; | |
156 | left:calc(50% - 400px); | |
157 | width:800px; | |
158 | height:auto; | |
e29d9cc4 JK |
159 | } |
160 | ||
aa933c49 JK |
161 | article.selected { |
162 | opacity:1; | |
163 | visibility:visible; | |
164 | top:150px; | |
e29d9cc4 JK |
165 | } |
166 | ||
aa933c49 | 167 | article.hidden { |
e29d9cc4 | 168 | opacity:0; |
aa933c49 JK |
169 | visibility:hidden; |
170 | top:200px; | |
e29d9cc4 JK |
171 | } |
172 | ||
173 | article > div { | |
174 | width:375px; | |
175 | text-align:justify; | |
176 | } |