clean things up a little. lol

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

diff --git a/res/style.css b/res/style.css
index 58fb54fb93e85444978d6898afebe8c5d3e9c36f..7dbb2b2b5f1bac81741102aa63c11ccb0ad796e3 100644 (file)
--- a/res/style.css
+++ b/res/style.css
@@ -1,43 +1,23 @@
-@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;
+@font-face {
+    font-family: "Cutive Mono";
+    src: url("./CutiveMono-Regular.woff2");
 }
 
-body.yellow {
-    background-color:#191710;
+body {
+    background: url(blackstars.png);
+    background-color: #111111;
+    color: #fefefe;
+    font-family: monospace;
+    padding: 16px;
 }
 
-main {
-    width:100%;
-    height:100%;
-    background:url(stars.png);
+header { 
+    width: 700px;
+    margin: 0 auto;
 }
 
-header {
-    position:absolute;
-    width:400px;
-    height:400px;
-    font-family:'Source Code Pro', monospace;
-    /*font-smooth:never;
-    -webkit-font-smoothing:none;*/
+header h1 {
+    font-size: 2em;
 }
 
 header > div > a {
@@ -45,116 +25,36 @@ header > div > a {
     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;
+    width: 400px;
 }
 
 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;
+    padding-right: 24px;
     font-size:1.25em;
     line-height:50px;
 }
 
+a {
+    color: #f771fc;
+}
+
+header nav ul li::before {
+    font-size: .75em;
+    line-height: .1em;
+    content: "#";
+}
+
 header nav ul li a:link, header nav ul li a:visited {
     text-decoration:none;
     color:inherit;
@@ -164,34 +64,20 @@ 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;
+    width: 700px;
+    margin: 0 auto;
+    /* padding: 16px 0px 16px 0px; */
 }
 
-article.selected {
-    opacity:1;
-    visibility:visible;
-    top:150px;
+article h2 {
+    /* padding: 8px 0px 8px 0px; */
+    font-size: 1.2em;
 }
 
-article.hidden {
-    opacity:0;
-    visibility:hidden;
-    top:200px;
-}
-
-article div {
-    width:350px;
-    margin:25px;
+article h2::before {
+    font-size: 1em;
+    content: "\2014"; /* emdash */
 }
 
 em {
@@ -203,24 +89,15 @@ em > em {
     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 p {
+    line-height: 1.25em;
 }
 
-article div p {
-    margin-top:5px;
-}
-
-article div p a:link, article div p a:visited {
-    color:inherit;
+article div {
+    padding: 16px 0px 16px 0px;
 }
 
-#about div {
-    width:600px;
-    margin:25px 100px 25px 100px; 
+a, p, h1, h2 {
+    background-color: #111111;
 }