Commit | Line | Data |
---|---|---|
4bbfb028 JK |
1 | @import url('https://fonts.googleapis.com/css?family=Cutive+Mono|Source+Code+Pro:300'); |
2 | ||
3 | body { | |
d7edfd55 | 4 | background-color:#7F7977; |
4bbfb028 JK |
5 | width:100%; |
6 | height:100%; | |
7 | overflow-x:hidden; | |
8 | font-family:'Cutive Mono'; | |
9 | color:#FFF1FF; | |
10 | } | |
11 | ||
12 | menu { | |
13 | position:absolute; | |
14 | width:400px; | |
15 | height:400px; | |
4bbfb028 JK |
16 | font-smooth:never; |
17 | -webkit-font-smoothing:none; | |
d7edfd55 JK |
18 | /*background-color:black;*/ |
19 | transition:all .125s cubic-bezier(0.075, 0.82, 0.165, 1); | |
20 | } | |
21 | ||
22 | menu.middle { | |
23 | left:calc(50% - 200px); | |
24 | top:calc(50% - 400px); | |
25 | } | |
26 | ||
27 | menu.top { | |
28 | left:calc(50% - 200px); | |
29 | top:0px; | |
30 | } | |
31 | ||
32 | menu.left { | |
33 | left:0px; | |
34 | top:0px; | |
4bbfb028 JK |
35 | } |
36 | ||
37 | menu nav { | |
38 | display:flex; | |
39 | flex-direction:column; | |
40 | } | |
41 | ||
d7edfd55 | 42 | menu #avatar { |
4bbfb028 JK |
43 | display:block; |
44 | width:300px; | |
45 | height:300px; | |
46 | margin-left:50px; | |
47 | margin-right:50px; | |
d7edfd55 | 48 | /*background-color:lightgrey;*/ |
4bbfb028 JK |
49 | } |
50 | ||
d7edfd55 | 51 | menu #avatar img { |
4bbfb028 JK |
52 | width:256px; |
53 | height:256px; | |
54 | margin:22px; | |
d7edfd55 JK |
55 | border-radius:50%; |
56 | } | |
57 | ||
58 | menu #name { | |
59 | width:100%; | |
60 | height:50px; | |
61 | font-size:3em; | |
62 | } | |
63 | ||
64 | menu #name h1 { | |
65 | display:block; | |
66 | width:100%; | |
67 | height:50px; | |
68 | line-height:50px; | |
69 | text-align:center; | |
4bbfb028 JK |
70 | } |
71 | ||
72 | menu nav ul { | |
73 | display:flex; | |
74 | flex-direction:row; | |
75 | width:350px; | |
76 | margin-left:25px; | |
77 | margin-right:25px; | |
d7edfd55 | 78 | height:50px; |
4bbfb028 JK |
79 | } |
80 | ||
81 | menu nav ul li { | |
82 | display:inline-block; | |
83 | text-align:center; | |
84 | width:25%; | |
d7edfd55 | 85 | height:50px; |
4bbfb028 | 86 | font-size:1.25em; |
d7edfd55 JK |
87 | line-height:50px; |
88 | } | |
89 | ||
90 | menu nav ul li a:link, menu nav ul li a:visited { | |
91 | text-decoration:none; | |
92 | color:inherit; | |
93 | } | |
94 | ||
95 | menu nav ul li a:hover { | |
96 | text-decoration:underline; | |
4bbfb028 | 97 | } |