A few small tweaks

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

diff --git a/res/style.css b/res/style.css
index 2f3e444868c346eabd6bc0c7ff3486d154a4cf84..898417eb02eddc8d2b6019e269990a16bdfa871a 100644 (file)
--- a/res/style.css
+++ b/res/style.css
@@ -1,59 +1,226 @@
 @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;
 }
 
-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; 
 }