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