Added substantial portion of content to the site.

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

diff --git a/res/style.css b/res/style.css
index 5ba1ddff62a5542696d20223346bd8ff2261c99b..316676b26005ecbe8c79790997aa8d22734800ad 100644 (file)
--- a/res/style.css
+++ b/res/style.css
@@ -36,7 +36,7 @@ main {
     background:url(stars.png);
 }
 
-menu {
+header {
     position:absolute;
     width:400px;
     height:400px;
@@ -46,28 +46,28 @@ menu {
     /*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;
@@ -79,14 +79,14 @@ menu.middle #avatar {
     /*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 +95,7 @@ menu.middle #name {
     font-size:3em;
 }
 
-menu.middle #name h1 {
+header.middle #name h1 {
     display:block;
     width:100%;
     height:50px;
@@ -103,7 +103,7 @@ menu.middle #name h1 {
     text-align:center;
 }
 
-menu.top #avatar {
+header.top #avatar {
     display:inline-block;
     position:absolute;
     right:300px;
@@ -114,14 +114,14 @@ menu.top #avatar {
     /*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 +131,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 +139,7 @@ menu.top #name h1 {
     text-align:center;
 }
 
-menu nav {
+header nav {
     position:absolute;
     right:0px;
     bottom:0px;
@@ -147,14 +147,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 +163,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 +176,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 +197,44 @@ article.hidden {
     top:200px;
 }
 
-article > div {
-    width:375px;
-    text-align:justify;
+article div {
+    width:350px;
+    margin:25px;
+}
+
+article div h2 {
+    margin-bottom:5px;
+    font-size:1.5em;
+}
+
+article div h2 a:link, article div h2 a:visited {
+    color:inherit;
+}
+
+article div h2 a:hover {
+}
+
+article div p {
+    margin-top:5px;
+    font-weight:bold;
+}
+
+article div p a:link, article div p a:visited {
+    color:inherit;
+}
+
+article div p a:hover {
+}
+
+#about div {
+    width:600px;
+    margin:25px 100px 25px 100px; 
+}
+
+#about div h2 {
+
+}
+
+#about div p {
+
 }