A few small tweaks

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

diff --git a/res/style.css b/res/style.css
index 5ba1ddff62a5542696d20223346bd8ff2261c99b..898417eb02eddc8d2b6019e269990a16bdfa871a 100644 (file)
--- a/res/style.css
+++ b/res/style.css
@@ -1,9 +1,4 @@
 @import url('https://fonts.googleapis.com/css?family=Cutive+Mono|Source+Code+Pro:300');
-/* pink:473a47
- * blue:004350
- * green:0c5b57
- * yellow:4b4432
- */
 
 body {
     width:100%;
@@ -36,38 +31,37 @@ main {
     background:url(stars.png);
 }
 
-menu {
+header {
     position:absolute;
     width:400px;
     height:400px;
     font-family:'Source Code Pro', monospace;
     font-smooth:never;
     -webkit-font-smoothing:none;
-    /*background-color:black;*/
 }
 
-menu > div > a {
+header > div > a {
     color:inherit;
     text-decoration:none;
 }
 
-menu.middle {
+header.middle {
     left:calc(50% - 200px);
     top:calc(50% - 400px);
     height:400px;
 }
 
-menu.top {
+header.top {
     left:calc(50% - 200px);
     top:10px;
     height:100px;
 }
 
-menu, menu > *, menu img, article {
+header, header > *, header img, article {
     transition:all .6s cubic-bezier(0.23, 1, 0.32, 1);
 }
 
-menu.middle #avatar {
+header.middle #avatar {
     display:block;
     position:absolute;
     right:0px;
@@ -76,17 +70,16 @@ menu.middle #avatar {
     height:300px;
     margin-left:50px;
     margin-right:50px;
-    /*background-color:lightgrey;*/
 }
 
-menu.middle #avatar img {
+header.middle #avatar img {
     width:256px;
     height:256px;
     margin:22px;
     border-radius:50%;
 }
 
-menu.middle #name {
+header.middle #name {
     position:absolute;
     right:0px;
     bottom:50px;
@@ -95,7 +88,7 @@ menu.middle #name {
     font-size:3em;
 }
 
-menu.middle #name h1 {
+header.middle #name h1 {
     display:block;
     width:100%;
     height:50px;
@@ -103,7 +96,7 @@ menu.middle #name h1 {
     text-align:center;
 }
 
-menu.top #avatar {
+header.top #avatar {
     display:inline-block;
     position:absolute;
     right:300px;
@@ -111,17 +104,16 @@ menu.top #avatar {
     width:100px;
     height:50px;
     text-align:center;
-    /*background-color:lightgrey;*/
 }
 
-menu.top #avatar img {
+header.top #avatar img {
     display:inline-block;
     width:50px;
     height:50px;
     border-radius:50%;
 }
 
-menu.top #name {
+header.top #name {
     display:inline-block;
     position:absolute;
     right:0px;
@@ -131,7 +123,7 @@ menu.top #name {
     font-size:2.5em;
 }
 
-menu.top #name h1 {
+header.top #name h1 {
     display:inline-block;
     width:100%;
     height:50px;
@@ -139,7 +131,7 @@ menu.top #name h1 {
     text-align:center;
 }
 
-menu nav {
+header nav {
     position:absolute;
     right:0px;
     bottom:0px;
@@ -147,14 +139,14 @@ menu nav {
     flex-direction:column;
 }
 
-menu nav ul {
+header nav ul {
     display:flex;
     flex-direction:row;
     width:400px;
     height:50px;
 }
 
-menu nav ul li {
+header nav ul li {
     display:inline-block;
     text-align:center;
     width:25%;
@@ -163,12 +155,12 @@ menu nav ul li {
     line-height:50px;
 }
 
-menu nav ul li a:link, menu nav ul li a:visited {
+header nav ul li a:link, header nav ul li a:visited {
     text-decoration:none;
     color:inherit;
 }
 
-menu nav ul li a:hover, menu nav ul li a.selected {
+header nav ul li a:hover, header nav ul li a.selected {
     text-decoration:underline;
 }
 
@@ -176,6 +168,7 @@ menu nav ul li a:hover, menu nav ul li a.selected {
 article {
     display:flex;
     flex-direction:row;
+    flex-wrap:wrap;
     justify-content:space-between;
     position:absolute;
     top:150px;
@@ -196,7 +189,38 @@ article.hidden {
     top:200px;
 }
 
-article > div {
-    width:375px;
-    text-align:justify;
+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; 
 }