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