@import url('https://fonts.googleapis.com/css?family=Cutive+Mono|Source+Code+Pro:300');
body {
- background-color:#7F7977;
width:100%;
height:100%;
overflow-x:hidden;
- font-family:'Cutive Mono';
+ font-family:'Cutive Mono', monospace;
color:#FFF1FF;
+ #background-image:linear-gradient(to right,#00c4f4 0%,#278fba 20%,#278fba 80%,#00c4f4 100%);
+ background-color:#278fba;
}
menu {
position:absolute;
width:400px;
height:400px;
+ font-family:'Source Code Pro', monospace;
font-smooth:never;
-webkit-font-smoothing:none;
/*background-color:black;*/
- transition:all .125s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+menu > div > a {
+ color:inherit;
+ text-decoration:none;
}
menu.middle {
left:calc(50% - 200px);
top:calc(50% - 400px);
+ height:400px;
}
menu.top {
left:calc(50% - 200px);
- top:0px;
-}
-
-menu.left {
- left:0px;
- top:0px;
+ top:10px;
+ height:100px;
}
-menu nav {
- display:flex;
- flex-direction:column;
+menu, menu > *, menu img {
+ transition:all .6s cubic-bezier(0.23, 1, 0.32, 1);
}
-menu #avatar {
+menu.middle #avatar {
display:block;
+ position:absolute;
+ right:0px;
+ bottom:100px;
width:300px;
height:300px;
margin-left:50px;
/*background-color:lightgrey;*/
}
-menu #avatar img {
+menu.middle #avatar img {
width:256px;
height:256px;
margin:22px;
border-radius:50%;
}
-menu #name {
+menu.middle #name {
+ position:absolute;
+ right:0px;
+ bottom:50px;
width:100%;
height:50px;
font-size:3em;
}
-menu #name h1 {
+menu.middle #name h1 {
display:block;
width:100%;
height:50px;
text-align:center;
}
+menu.top #avatar {
+ display:inline-block;
+ position:absolute;
+ right:300px;
+ bottom:50px;
+ width:100px;
+ height:50px;
+ text-align:center;
+ /*background-color:lightgrey;*/
+}
+
+menu.top #avatar img {
+ display:inline-block;
+ width:50px;
+ height:50px;
+ border-radius:50%;
+}
+
+menu.top #name {
+ display:inline-block;
+ position:absolute;
+ right:0px;
+ bottom:50px;
+ width:300px;
+ height:50px;
+ font-size:2.5em;
+}
+
+menu.top #name h1 {
+ display:inline-block;
+ width:100%;
+ height:50px;
+ line-height:50px;
+ text-align:center;
+}
+
+menu nav {
+ position:absolute;
+ right:0px;
+ bottom:0px;
+ display:flex;
+ flex-direction:column;
+}
+
menu nav ul {
display:flex;
flex-direction:row;
- width:350px;
- margin-left:25px;
- margin-right:25px;
+ width:400px;
height:50px;
}
menu nav ul li a:hover {
text-decoration:underline;
}
+
+
+article {
+ display:flex;
+ flex-direction:row;
+ justify-content:space-between;
+ position:absolute;
+ top:150px;
+ left:calc(50% - 400px);
+ width:800px;
+ height:auto;
+ opacity:1;
+}
+
+article.hidden {
+ display:none;
+}
+
+article.clear {
+ opacity:0;
+}
+
+article > div {
+ width:375px;
+ text-align:justify;
+}