subpage setup

[jkinsey.net.git] / res / style.css

@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';
    color:#FFF1FF;
}

menu {
    position:absolute;
    width:400px;
    height:400px;
    font-smooth:never;
    -webkit-font-smoothing:none;
    /*background-color:black;*/
    transition:all .125s cubic-bezier(0.075, 0.82, 0.165, 1);
}

menu.middle {
    left:calc(50% - 200px);
    top:calc(50% - 400px);
}

menu.top {
    left:calc(50% - 200px);
    top:0px;
}

menu.left {
    left:0px;
    top:0px;
}

menu nav {
    display:flex;
    flex-direction:column;
}

menu #avatar {
    display:block;
    width:300px;
    height:300px;
    margin-left:50px;
    margin-right:50px;
    /*background-color:lightgrey;*/
}

menu #avatar img {
    width:256px;
    height:256px;
    margin:22px;
    border-radius:50%;
}

menu #name {
    width:100%;
    height:50px;
    font-size:3em;
}

menu #name h1 {
    display:block;
    width:100%;
    height:50px;
    line-height:50px;
    text-align:center;
}

menu nav ul {
    display:flex;
    flex-direction:row;
    width:350px;
    margin-left:25px;
    margin-right:25px;
    height:50px;
}

menu nav ul li {
    display:inline-block;
    text-align:center;
    width:25%;
    height:50px;
    font-size:1.25em;
    line-height:50px;
}

menu nav ul li a:link, menu nav ul li a:visited {
    text-decoration:none;
    color:inherit;
}

menu nav ul li a:hover {
    text-decoration:underline;
}