assets/css/posts: Dry up posts.css and prepare for its removal

2 files changed, 122 insertions, 279 deletions

diff --git a/assets/css/edwin.css b/assets/css/edwin.css
index 0e03cc6..7247f79 100644
--- a/assets/css/edwin.css
+++ b/assets/css/edwin.css
@@ -1,47 +1,42 @@
+html { overflow-y: scroll; }
+body { color: #fff; }
+
 html, body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
   Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-}
-
-html {
   margin: 0;
   width: 100%;
-  overflow-y: scroll;
-  background-color: #252b30;
 }
 
-body {
-  color: #fff;
-  margin: 0;
-  min-height: 100%;
-  text-align: center;
-  width: 100%;
+ul { padding: 0; }
+li { list-style: none; }
+
+main, .contact, .container, .feedback {
+  min-height: 100vh;
+  min-height: calc(100vh - 10.625em);
 }
 
 main {
-  -webkit-align-items: center;
   align-items: center;
   display: flex;
   display: -ms-flexbox;
   display: -webkit-flex;
+  -webkit-align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   margin: 0 auto;
-  min-height: 100vh;
-  min-height: calc(100vh - 166px);
-  height: 360px;
+  height: 400px;
 }
 
-.body-opaque {
-  background-color: #333b42;
-  background-image: url("/images/overlay.png"), linear-gradient(0deg, #333b42, #333b42);
-}
+/* body variants */
+
+.body-opaque { background-color: #333b42; }
 
 .body-gradient { background-image: linear-gradient(180deg, #1B293A, #397382); }
 
 /*home page*/
 
-.intro { width: 100%; }
+.intro { width: 100%; text-align: center; }
 
 .intro > h1 {
   color: #fff;
@@ -72,13 +67,14 @@ main {
   width: 10vh;
 }
 
-/*link colors*/
+/* link colors */
 
-a { color: #fff; text-decoration: none; }
-a:hover { color: #f00 !important; }
+a, a:hover { color: #46afff; text-decoration: none}
 
-.topnav .active { color: red; }
-.topnav a:hover { color: red; }
+.topnav .active { color: white; text-shadow: 0 0 0 #fff; }
+.topnav a:hover { background-color: #ffffff2b; border-radius: 3px; color: white; }
+
+.link__underline { border-bottom: 1px solid currentColor; }
 
 /* hashover comment section */
 
@@ -161,8 +157,6 @@ a:hover { color: #f00 !important; }
 .contact {
   height: 400px;
   max-width: 540px;
-  min-height: 100vh;
-  min-height: calc(100vh - 166px);
   padding-bottom: 0;
   padding-right: 16px;
   padding-top: 0;
@@ -171,15 +165,11 @@ a:hover { color: #f00 !important; }
 }
 
 .contact-buttonPadding { padding-left: 0; }
-
 .contact-maxWidth { width: 100% }
-
 .contact-name { padding-right: 1em; }
-
 .contact-email { padding-left: 1em; }
 
 .form-alert { color: #f00; }
-
 .form { display: none; }
 
 /* feedback form */
@@ -187,8 +177,6 @@ a:hover { color: #f00 !important; }
 .feedback {
   height: auto;
   max-width: 540px;
-  min-height: 100vh;
-  min-height: calc(100vh - 206px);
   padding-bottom: 40px;
   padding-top: 0;
   text-align: justify;
@@ -230,6 +218,10 @@ select[multiple], select[size] {
   height: 2.75em;
 }
 
+input[type="text"], input[type="password"], input[type="email"], textarea {
+  box-sizing: content-box;
+}
+
 input[type="text"], input[type="password"], input[type="email"], select {
   height: 1.5rem;
   margin-bottom: 1.3em;
@@ -240,13 +232,13 @@ input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hove
 
 }
 
-input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, select:focus, textarea:focus {
+input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, select:focus, textarea:focus {
   background: rgba(25, 25, 25, 0.35) none repeat scroll 0 0;
   border-color: #fff;
   box-shadow: 0 0 0 1px #fff;
 }
 
-input[type="text"], input[type="password"], input[type="email"], input[type="tel"], select, textarea {
+input[type="text"], input[type="password"], input[type="email"], select, textarea {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -287,7 +279,7 @@ input[type="submit"], input[type="reset"], input[type="button"] {
   white-space: nowrap;
 }
 
-/* inlineplayer.css */
+/* inline player */
 
 ul.graphic p {
   display: inline;
@@ -308,6 +300,7 @@ ul.graphic li a, ul.graphic li a.sm2_link {
   background-color: rgba(255, 50, 50, 0.65);
   border: 1px solid transparent;
   border-radius: 4px;
+  box-shadow: inset 0 1px rgba(255,255,255,.1),inset -1px 0 rgba(0,0,0,.1),inset 1px 0 rgba(0,0,0,.1),inset 0 -1px rgba(0,0,0,.6);
   color: #fff;
   display: inline-block;
   font-size: 14px;
@@ -344,7 +337,7 @@ ul.graphic li a, ul.graphic li a.sm2_paused:hover, ul.graphic li a.sm2_link:hove
 
 ul.graphic li a.sm2_link:hover {
   background-color: rgba(40, 40, 40, 0.65);
-  color: #fff;
+  color: red;
 }
 
 ul.graphic li a.sm2_paused {
@@ -455,9 +448,9 @@ body #sm2-container object, body #sm2-container embed {
 
 /* sidebar navigation */
 
-#main {
-  transition: margin-left .25s;
-}
+#main { transition: margin-left .25s; }
+
+.fa { box-sizing: content-box; }
 
 .sidenav {
   height: 100%;
@@ -490,12 +483,13 @@ body #sm2-container object, body #sm2-container embed {
   .sidenav a {font-size: 18px;}
 }
 
+.sidenav__landing { background-color: rgba(0, 0, 0, 0.2); }
+.sidenav__landing .fa { background-color: rgba(255, 255, 255, 0.15); }
+.sidenav__landing a.active { background-color: rgba(255, 255, 255, 0.15); }
+
 /* navigation bar */
 
-nav {
-  background-color: #282e34;
-  margin-bottom: 2em;
-}
+nav { background-color: #282e34; height: 4.5em; margin-bottom: 2em; }
 
 .nav-transparent {
   background-color: #282e34;
@@ -506,9 +500,10 @@ nav {
   border-radius: 0;
   border: none;
   background-color: transparent;
-  position: absolute;
   cursor: pointer;
-  top: 10px;
+  display: none;
+  position: absolute;
+  top: 12px;
   right: 10px;
   font-size: 19px !important;
   padding: 14px 20px !important;
@@ -528,32 +523,19 @@ nav {
 
 .topnav-left a {
   color: #ffffff;
-/*  border-bottom: 1px solid transparent;*/
   display: block;
   float: left;
   font-size: 18px;
   font-weight: 400;
   line-height: 1.4;
-  padding: 22px 16px;
+  margin: 12px 6px;
+  padding: 10px;
   text-align: center;
   text-decoration: none;
 }
 
-/*.topnav-left a:hover { border-bottom: 1px solid currentColor; }*/
-.topnav-left a:nth-child(1) { display: none; }
-
 .topnav-right a { float: right; }
-/*.topnav-right a:hover { border-bottom: 1px solid transparent; }*/
 
-@media screen and (max-width: 768px) {
-  .fa { font-size: 1em; padding: 0.6em 0 0.6em 1em; background-color: #3B444C; border-radius: 3px; width: 2em; height: 1em; }
-  .topnav a.active { background-color: transparent; color: #fff !important; }
-  .topnav a { font-size: 20px; padding: 24px 16px; }
-  .topnav a:not(:first-child) { display: none; }
-  .topnav-left a:nth-child(1) { display: block; line-height: 1; }
-  .topnav-right a { display: none; }
-  .topnav .navicon { display: block; }
-}
 
 /* footer */
 
@@ -561,7 +543,7 @@ nav {
   color: #ccc;
   margin: 0 auto;
   max-width: 1344px;
-  padding: 2em 2em;
+  padding: 2em;
 }
 
 .footer {
@@ -577,15 +559,90 @@ nav {
 }
 
 .footer a { color: #ccc; }
-
 .footer a:hover { color: #f00; }
 
-@media screen and (max-width:768px) {
+/* responsive desgin */
+
+@media screen and (max-width: 768px) {
+  .fa { font-size: 1em; padding: 0.6em 0 0.6em 1em; background-color: #3B444C; border-radius: 3px; width: 2em; height: 1em; }
+  .topnav a.active {}
+  .topnav a { font-size: 14px; padding: 14px 4px; }
+  .topnav-right a { display: none; }
+  .topnav .navicon { display: block; }
+  nav { background-color: transparent; box-shadow: 0 0 12px 4px #0000004f;  }
+  .nav-transparent { box-shadow: 0 0 12px 4px #0000004f; }
+  nav, .nav-transparent { padding: 0 4.8em 0 1em; }
   .footer { background-color: #282e34; background-color: rgba(0, 0, 0, 0); padding-left: unset; text-align: center; }
-  nav { background-color: rgba(0, 0, 0, 0); }
 }
 
+@media screen and (max-width: 355px) { .topnav a { font-size: 14px; padding: 14px 0; margin: 12px 5px; } }
+
+
 /* error page */
 
 .error__header { font-size: 8rem !important; }
 .error__lineHeight { line-height: 0; }
+
+
+/* bootstrap override */
+
+.paragraph__serif {
+  font-family: 'Georgia', 'Baskerville', 'TimesNewRoman', 'Times New Roman', 'Times', serif;
+  font-size: 20px;
+  line-height: 1.8;
+}
+
+.paragraph__quote {
+  color: #ccc;
+  font-style: oblique;
+  padding: 1em;
+}
+
+hr {
+    border-top: 1px solid rgb(40, 40, 40) !important;
+    border-top: 1px solid rgba(0, 0, 0, 0) !important;
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+}
+
+.blog-post { font-size: 0.95rem; }
+.blog-post-tags { display: none; }
+.blog-post-categories { display: none; }
+.blog__card { background-color: #434a51; border-radius: 3px; box-shadow: 3px 3px 0 #bababa; padding: 1em; }
+.blog__recents { font-size: 0.95em; }
+
+.text-secondary { color: #eee !important; margin-bottom: 1em; }
+
+/* buttons */
+
+.badge-primary { background-color: #d63d3d; }
+.badge-primary[href]:focus, .badge-primary[href]:hover { background-color: #D50000; }
+
+/* paginator */
+
+.page-item.active .page-link {
+  color: #000 !important;
+  border-color: #aaa !important;
+  background-color: #aaa !important;
+}
+
+.page-link {
+  color: #000 !important;
+  background-color: #fff;
+}
+
+/* image sizing */
+
+.blog-post img {
+  max-width: 100%;
+}
+
+.blog-header, .blog-post, .blog-pagination {
+  margin-bottom: 2rem;
+}
+
+@media screen and (max-width: 768px) {
+  .blog-header, .blog-post, .blog-pagination {
+    max-width: 90vw;
+  }
+}
diff --git a/assets/css/posts.css b/assets/css/posts.css
index d65e853..e69de29 100644
--- a/assets/css/posts.css
+++ b/assets/css/posts.css
@@ -1,214 +0,0 @@
-/* bootstrap overrides */
-
-html {
-  min-height: 100%;
-  position: relative;
-  overflow-y: scroll;
-  background-color: #252b30;
-}
-
-body {
-  background-color: #333b42 !important;
-  background-image: url("/images/overlay.png"), linear-gradient(0deg, #333b42, #333b42);
-  color: #fff !important;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-  Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;
-}
-
-a, a:hover { color: #46afff; }
-
-.paragraph__serif {
-  font-family: 'Georgia', 'Baskerville', 'TimesNewRoman', 'Times New Roman', 'Times', serif;
-  font-size: 20px;
-  line-height: 1.8;
-}
-
-.paragraph__quote {
-  color: #aaa;
-  font-style: oblique;
-  padding: 1em;
-}
-
-hr {
-    border-top: 1px solid rgb(40, 40, 40) !important;
-    border-top: 1px solid rgba(0, 0, 0, 0) !important;
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
-}
-
-h2 { font-size: 1.6rem; }
-
-.container { min-height: calc(100vh - 166px); }
-
-.blog-post { font-size: 0.95rem; }
-
-.blog-post-tags { display: none; }
-
-.blog-post-categories { display: none; }
-
-.text-secondary {
-  color: #ccc !important;
-  margin-bottom: 1em;
-}
-
-/* buttons */
-
-.badge-primary {
-  background-color: #d63d3d;
-}
-
-.badge-primary[href]:focus, .badge-primary[href]:hover {
-  background-color: #D50000;
-}
-
-/* paginator */
-
-.page-item.active .page-link {
-  color: #000 !important;
-  border-color: #aaa !important;
-  background-color: #aaa !important;
-}
-
-.page-link {
-  color: #000 !important;
-  background-color: #fff;
-}
-
-/* image sizes */
-
-.blog-post img {
-  max-width: 100%;
-}
-
-.blog-header, .blog-post, .blog-pagination {
-  margin-bottom: 2rem;
-}
-
-@media screen and (max-width: 768px) {
-  .blog-header, .blog-post, .blog-pagination {
-    max-width: 90vw;
-  }
-}
-
-/* sidebar navigation */
-
-#main {
-  transition: margin-left .25s;
-}
-
-.sidenav {
-  height: 100%;
-  width: 0;
-  position: fixed;
-  z-index: 1;
-  top: 0;
-  right: 0;
-  background-color: #252B30;
-  overflow-x: hidden;
-  transition: 0.25s;
-}
-
-.sidenav a {
-  padding: 12px 8px 12px 32px;
-  text-decoration: none;
-  text-align: left;
-  font-size: 16px;
-  line-height: 1;
-  display: block;
-  color: #fff;
-}
-
-.sidenav__container { margin-top: 4.2em; }
-
-.sidenav a.active { background-color: #3b444c; color: #ffffff; font-weight: bold; }
-
-@media screen and (max-height: 450px) {
-  .sidenav {padding-top: 15px;}
-  .sidenav a {font-size: 18px;}
-}
-
-/* navigation bar */
-
-nav {
-  background-color: #282e34;
-  margin-bottom: 2em;
-}
-
-.navicon {
-  border-radius: 0;
-  border: none;
-  background-color: transparent;
-  position: absolute;
-  cursor: pointer;
-  top: 10px;
-  right: 10px;
-  font-size: 19px !important;
-  padding: 14px 20px !important;
-  line-height: 1;
-  -webkit-backface-visibility: hidden;
-  -moz-transform: translateZ(0) scale(1.0, 1.0);
-  -ms-transform: translateZ(0) scale(1.0, 1.0);
-  -webkit-transform: translateZ(0) scale(1.0, 1.0);
-  transform: translateZ(0) scale(1.0, 1.0);
-}
-
-.topnav {
-  margin: 0 auto;
-  max-width: 1344px;
-  overflow: hidden;
-}
-
-.topnav-left a {
-  color: #ffffff;
-  display: block;
-  float: left;
-  font-size: 18px;
-  font-weight: 400;
-  line-height: 1.4;
-  padding: 22px 16px;
-  text-align: center;
-  text-decoration: none;
-}
-
-.topnav .active { color: red; }
-
-.topnav a:hover { color: red; }
-
-.topnav-left a:nth-child(1) { display: none; }
-
-.topnav-right a { float: right; }
-
-@media screen and (max-width: 768px) {
-  .fa { font-size: 1em; padding: 0.6em 0 1.6em 1em; background-color: #3B444C; border-radius: 3px; width: 3em; height: 1em; }
-  .topnav a.active { background-color: transparent; color: #fff !important; }
-  .topnav a { font-size: 20px; padding: 24px 16px; }
-  .topnav a:not(:first-child) { display: none; }
-  .topnav-left a:nth-child(1) { display: block; line-height: 1; }
-  .topnav-right a { display: none; }
-  .topnav .navicon { display: block; }
-}
-
-/* footer */
-
-.footer-container {
-  color: #ccc;
-  margin: 0 auto;
-  max-width: 1392px;
-  padding: 2em 2em;
-}
-
-.footer {
-  background-color: #282e34;
-  font-size: 12px;
-  line-height: 1.5;
-  text-align: left;
-}
-
-.footer a { color: #ccc; }
-
-.footer a:hover { color: #f00; }
-
-@media screen and (max-width:768px) {
-  .footer { background-color: #282e34; background-color: rgba(0, 0, 0, 0); padding-left: unset; text-align: center; }
-  nav { background-color: rgba(0, 0, 0, 0); }
-}