A few small tweaks

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

@import url('https://fonts.googleapis.com/css?family=Cutive+Mono|Source+Code+Pro:300');

body {
    width:100%;
    height:100%;
    overflow-x:hidden;
    font-family:'Cutive Mono', monospace;
    color:#FFF1FF;
    transition:background-color .6s cubic-bezier(0.23, 1, 0.32, 1);
}

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;
    font-family:'Source Code Pro', monospace;
    font-smooth:never;
    -webkit-font-smoothing:none;
}

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;
}

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;
}

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;
}

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:400px;
    height:50px;
}

header nav ul li {
    display:inline-block;
    text-align:center;
    width:25%;
    height:50px;
    font-size:1.25em;
    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; 
}