subpage setup

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

diff --git a/res/style.css b/res/style.css
index 2f3e444868c346eabd6bc0c7ff3486d154a4cf84..82280192b66728f89333763c4450258dc766952e 100644 (file)
--- a/res/style.css
+++ b/res/style.css
@@ -1,7 +1,7 @@
 @import url('https://fonts.googleapis.com/css?family=Cutive+Mono|Source+Code+Pro:300');
 
 body {
-    background-color:grey;
+    background-color:#7F7977;
     width:100%;
     height:100%;
     overflow-x:hidden;
@@ -13,11 +13,25 @@ menu {
     position:absolute;
     width:400px;
     height:400px;
-    left:calc(50% - 200px);
-    top:calc(50% - 200px);
     font-smooth:never;
     -webkit-font-smoothing:none;
-    background-color:black;
+    /*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 {
@@ -25,19 +39,34 @@ menu nav {
     flex-direction:column;
 }
 
-menu div {
+menu #avatar {
     display:block;
     width:300px;
     height:300px;
     margin-left:50px;
     margin-right:50px;
-    background-color:lightgrey;
+    /*background-color:lightgrey;*/
 }
 
-menu div img {
+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 {
@@ -46,14 +75,23 @@ menu nav ul {
     width:350px;
     margin-left:25px;
     margin-right:25px;
-    height:100px;
+    height:50px;
 }
 
 menu 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;
+}
+
+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;
 }