@import url('https://fonts.googleapis.com/css?family=Cutive+Mono|Source+Code+Pro:300');
body {
- background-color:grey;
width:100%;
height:100%;
overflow-x:hidden;
- font-family:'Cutive Mono';
+ font-family:'Cutive Mono', monospace;
color:#FFF1FF;
+ transition:background-color .6s cubic-bezier(0.23, 1, 0.32, 1);
}
-menu {
+body.pink {
+ background-color:#161216;
+}
+
+body.blue {
+ background-color:#001216;
+}
+
+body.green {
+ background-color:#031514;
+}
+
+body.yellow {
+ background-color:#191710;
+}
+
+main {
+ width:100%;
+ height:100%;
+ background:url(stars.png);
+}
+
+header {
position:absolute;
width:400px;
height:400px;
- left:calc(50% - 200px);
- top:calc(50% - 200px);
+ font-family:'Source Code Pro', monospace;
font-smooth:never;
-webkit-font-smoothing:none;
- background-color:black;
+ /*background-color:black;*/
}
-menu nav {
- display:flex;
- flex-direction:column;
+header > div > a {
+ color:inherit;
+ text-decoration:none;
+}
+
+header.middle {
+ left:calc(50% - 200px);
+ top:calc(50% - 400px);
+ height:400px;
+}
+
+header.top {
+ left:calc(50% - 200px);
+ top:10px;
+ height:100px;
}
-menu div {
+header, header > *, header img, article {
+ transition:all .6s cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+header.middle #avatar {
display:block;
+ position:absolute;
+ right:0px;
+ bottom:100px;
width:300px;
height:300px;
margin-left:50px;
margin-right:50px;
- background-color:lightgrey;
}
-menu div img {
+header.middle #avatar img {
width:256px;
height:256px;
margin:22px;
+ border-radius:50%;
+}
+
+header.middle #name {
+ position:absolute;
+ right:0px;
+ bottom:50px;
+ width:100%;
+ height:50px;
+ font-size:3em;
}
-menu nav ul {
+header.middle #name h1 {
+ display:block;
+ width:100%;
+ height:50px;
+ line-height:50px;
+ text-align:center;
+}
+
+header.top #avatar {
+ display:inline-block;
+ position:absolute;
+ right:300px;
+ bottom:50px;
+ width:100px;
+ height:50px;
+ text-align:center;
+}
+
+header.top #avatar img {
+ display:inline-block;
+ width:50px;
+ height:50px;
+ border-radius:50%;
+}
+
+header.top #name {
+ display:inline-block;
+ position:absolute;
+ right:0px;
+ bottom:50px;
+ width:300px;
+ height:50px;
+ font-size:2.5em;
+}
+
+header.top #name h1 {
+ display:inline-block;
+ width:100%;
+ height:50px;
+ line-height:50px;
+ text-align:center;
+}
+
+header nav {
+ position:absolute;
+ right:0px;
+ bottom:0px;
+ display:flex;
+ flex-direction:column;
+}
+
+header nav ul {
display:flex;
flex-direction:row;
- width:350px;
- margin-left:25px;
- margin-right:25px;
- height:100px;
+ width:400px;
+ height:50px;
}
-menu nav ul li {
+header nav ul li {
display:inline-block;
text-align:center;
width:25%;
- height:100px;
+ height:50px;
font-size:1.25em;
- line-height:100px;
+ line-height:50px;
+}
+
+header nav ul li a:link, header nav ul li a:visited {
+ text-decoration:none;
+ color:inherit;
+}
+
+header nav ul li a:hover, header nav ul li a.selected {
+ text-decoration:underline;
+}
+
+
+article {
+ display:flex;
+ flex-direction:row;
+ flex-wrap:wrap;
+ justify-content:space-between;
+ position:absolute;
+ top:150px;
+ left:calc(50% - 400px);
+ width:800px;
+ height:auto;
+}
+
+article.selected {
+ opacity:1;
+ visibility:visible;
+ top:150px;
+}
+
+article.hidden {
+ opacity:0;
+ visibility:hidden;
+ top:200px;
+}
+
+article div {
+ width:350px;
+ margin:25px;
+}
+
+em {
+ font-style:italic;
+}
+
+em > em {
+ font-style:normal;
+ font-weight:bold;
+}
+
+article div h2 {
+ margin-bottom:5px;
+ font-size:1.5em;
+}
+
+article div h2 a:link, article div h2 a:visited {
+ color:inherit;
+}
+
+article div p {
+ margin-top:5px;
+}
+
+article div p a:link, article div p a:visited {
+ color:inherit;
+}
+
+#about div {
+ width:600px;
+ margin:25px 100px 25px 100px;
}