assets/css: Initial design refresh. Let footer occupy one line.

2 files changed, 109 insertions, 295 deletions

diff --git a/assets/css/edwin.css b/assets/css/edwin.css
index 23cd8f9..0e03cc6 100644
--- a/assets/css/edwin.css
+++ b/assets/css/edwin.css
@@ -1,13 +1,13 @@
 html, body {
-  font-family: system-ui, sans-serif;
+  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 {
-  height: 100%;
   margin: 0;
   width: 100%;
   overflow-y: scroll;
-  background-color: #2C2C2C;
+  background-color: #252b30;
 }
 
 body {
@@ -32,67 +32,16 @@ main {
   height: 360px;
 }
 
-#bg {
-  left: 0;
-  position: fixed;
-  top: 0;
-  min-width: 100%;
-  min-height: 100%;
-  opacity: 0;
-  transition: opacity .5s ease-in-out;
-  -moz-transition: opacity .5s ease-in-out;
-  -webkit-transition: opacity .5s ease-in-out;
-  -o-transition: opacity .5s ease-in-out;
-  z-index: -1;
-}
-
-@media screen and (max-width: 960px) {
-  #bg { min-width: 1080px; }
-}
-
 .body-opaque {
-  background-image: url("/images/overlay.png"), linear-gradient(0deg, rgb(44, 44, 44), rgb(44, 44, 44));
-}
-
-/* footer */
-
-.footer {
-  background-color: #222;
-  background-color: rgba(34, 34, 34, 0.85);
-  font-size: 12px;
-  line-height: 1.5;
-  text-align: left;
-}
-
-.footer-container {
-  color: #aaa;
-  margin: 0 auto;
-  max-width: 1344px;
-  padding: 2em 2em;
-}
-
-.footer-transparent {
-  background-color: #222;
-  background-color: rgba(0, 0, 0, 0);
+  background-color: #333b42;
+  background-image: url("/images/overlay.png"), linear-gradient(0deg, #333b42, #333b42);
 }
 
-.footer a {
-  color: #aaa;
-}
-
-.footer a:hover {
-  color: #f00;
-}
+.body-gradient { background-image: linear-gradient(180deg, #1B293A, #397382); }
 
 /*home page*/
 
-.intro {
-  width: 100%;
-}
-
-.ion {
-  font-size: 3.5em;
-}
+.intro { width: 100%; }
 
 .intro > h1 {
   color: #fff;
@@ -125,31 +74,16 @@ main {
 
 /*link colors*/
 
-a {
-  color: #fff;
-  text-decoration: none;
-}
+a { color: #fff; text-decoration: none; }
+a:hover { color: #f00 !important; }
 
-a.active {
-  color: #f00 !important;
-}
-
-a.icon:hover {
-  text-decoration: none;
-}
-
-a:hover {
-  color: red !important;
-}
-
-a.posts {
-  color: #ff0000 !important;
-}
+.topnav .active { color: red; }
+.topnav a:hover { color: red; }
 
 /* hashover comment section */
 
 #hashover .hashover-comment {
-  background-color: #333;
+  background-color: #252b31;
   border-radius: 3px;
   height: auto;
   margin: 0.75em 0 0 0;
@@ -165,79 +99,61 @@ a.posts {
   padding: 0.5em;
 }
 
-#hashover .hashover-comment-name {
-  font-weight: bold;
-}
+#hashover .hashover-comment-name { font-weight: bold; }
 
-#hashover .hashover-textarea {
-  margin-bottom: 1.5em;
-}
+#hashover .hashover-textarea { margin-bottom: 1.5em; }
 
-#hashover .hashover-comment.hashover-reply.odd {
-  background-color: #3f3f3f;
-}
+#hashover .hashover-comment.hashover-reply.odd { background-color: #3d464c; }
 
-#hashover .hashover-submit.hashover-post-button {
-  margin-bottom: 1.5em;
-}
+#hashover .hashover-submit.hashover-post-button { margin-bottom: 1.5em; }
 
-#hashover .hashover-submit.hashover-reply-post {
-  margin: 0;
-}
+#hashover .hashover-submit.hashover-reply-post { margin: 0; }
 
 #hashover .hashover-select-wrapper {
   margin-bottom: 1em;
   display: inline-block;
 }
 
-#hashover-sort-select {
-  margin: 0;
-}
+#hashover-sort-select { margin: 0; }
 
-#hashover .hashover-header {
-  margin-bottom: 0.5em;
-}
+#hashover .hashover-header { margin-bottom: 0.5em; }
 
-#hashover .hashover-footer {
-  margin-bottom: 0.75em;
-}
+#hashover .hashover-footer { margin-bottom: 0.75em; }
 
 #hashover .hashover-input-cell {
   display: table-cell;
   width: 640px;
 }
 
-#hashover .hashover-name-input {
-  padding-right: 1em;
-}
+#hashover .hashover-name-input { padding-right: 1em; }
 
-#hashover .hashover-email-input {
-  padding-left: 1em;
-}
+#hashover .hashover-email-input { padding-left: 1em; }
 
-#hashover .hashover-balloon {
-  width: 95%;
-}
+#hashover .hashover-balloon { width: 95%; }
 
-#hashover .hashover-buttons {
-  float: right;
-}
+#hashover .hashover-buttons { float: right; }
 
 #hashover-count-wrapper {
   text-align: right;
   margin-top: 1.1em;
 }
 
-#hashover-count {
-  font-weight: bold;
-}
+#hashover-count { font-weight: bold; }
 
-.hashover-content > p {
-  font-size: 0.9em;
-}
+.hashover-content > p { font-size: 0.9em; }
 
 #hashover-name-c3r1 {
-  color: #cc4949;
+  color: #333;
+  background-color: #ddd;
+  border-radius: 3px;
+  padding: 0 0.2em;
+}
+
+.hashover-date-permalink,
+.hashover-comment-reply,
+.hashover-like {
+  font-size: 14px;
+  color: #c2c2c2;
 }
 
 /* contact form */
@@ -303,12 +219,9 @@ label {
   text-transform: uppercase;
 }
 
-input, textarea, select, button {
-    font-family: system-ui, sans-serif;
-}
+textarea, input { font-family: inherit; }
 
 textarea {
-  font-size: 14px;
   height: 10rem;
   resize: none;
 }
@@ -337,8 +250,8 @@ input[type="text"], input[type="password"], input[type="email"], input[type="tel
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
-  background: rgb(25, 25, 25) none repeat scroll 0 0;
-  background: rgba(25, 25, 25, 0.7) none repeat scroll 0 0;
+  background: rgb(29, 33, 38) none repeat scroll 0 0;
+  background: rgb(29, 33, 38, 0.7) none repeat scroll 0 0;
   border-radius: 4px;
   border: 1px solid #fff;
   color: #fff;
@@ -355,8 +268,8 @@ input[type="submit"], input[type="reset"], input[type="button"] {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
-  background: rgb(25, 25, 25) none repeat scroll 0 0;
-  background: rgba(25, 25, 25, 0.7) none repeat scroll 0 0;
+  background: rgb(29, 33, 38) none repeat scroll 0 0;
+  background: rgb(29, 33, 38, 0.7) none repeat scroll 0 0;
   border-radius: 4px;
   border: 0 none;
   box-shadow: 0 0 0 1px #fff inset;
@@ -391,10 +304,10 @@ ul.graphic li {
 }
 
 ul.graphic li a, ul.graphic li a.sm2_link {
-  background-color: rgb(255, 50, 50);
+  background-color: rgb(241, 76, 50);
   background-color: rgba(255, 50, 50, 0.65);
   border: 1px solid transparent;
-  border-radius: 6px;
+  border-radius: 4px;
   color: #fff;
   display: inline-block;
   font-size: 14px;
@@ -487,9 +400,14 @@ body #sm2-container object, body #sm2-container embed {
   min-width: 3em;
 }
 
-.frame-info {
-  color: #fff;
-}
+.frame svg { fill: white; }
+.frame svg:hover { fill: #e03940; }
+
+.frame > .ion-md-list-box { height: 50px; width: 50px; }
+.frame > .ion-md-microphone { height: 50px; width: 50px; }
+.frame > .ion-md-filing { height: 50px; width: 50px; }
+
+.frame-info { color: #fff; }
 
 #overlay-faq, #overlay-demo, #overlay-projects {
   position: fixed;
@@ -502,8 +420,8 @@ body #sm2-container object, body #sm2-container embed {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgb(40, 40, 40);
-  background-color: rgba(40, 40, 40, 0.98);
+  background-color: #3d4751;
+  background-color: rgba(61, 71, 81, .99);
 }
 
 .closeButton {
@@ -548,7 +466,7 @@ body #sm2-container object, body #sm2-container embed {
   z-index: 1;
   top: 0;
   right: 0;
-  background-color: #222;
+  background-color: #252B30;
   overflow-x: hidden;
   transition: 0.25s;
 }
@@ -558,7 +476,6 @@ body #sm2-container object, body #sm2-container embed {
   text-decoration: none;
   text-align: left;
   font-size: 16px;
-  font-weight: 400;
   line-height: 1;
   display: block;
   color: #fff;
@@ -566,7 +483,7 @@ body #sm2-container object, body #sm2-container embed {
 
 .sidenav__container { margin-top: 4.2em; }
 
-.sidenav a.active { background-color: #333; }
+.sidenav a.active { background-color: #3b444c; font-weight: bold; }
 
 @media screen and (max-height: 450px) {
   .sidenav {padding-top: 15px;}
@@ -576,12 +493,12 @@ body #sm2-container object, body #sm2-container embed {
 /* navigation bar */
 
 nav {
-  background-color: #232323;
+  background-color: #282e34;
   margin-bottom: 2em;
 }
 
 .nav-transparent {
-  background-color: #232323;
+  background-color: #282e34;
   background-color: rgba(0, 0, 0, 0);
 }
 
@@ -611,6 +528,7 @@ nav {
 
 .topnav-left a {
   color: #ffffff;
+/*  border-bottom: 1px solid transparent;*/
   display: block;
   float: left;
   font-size: 18px;
@@ -621,16 +539,14 @@ nav {
   text-decoration: none;
 }
 
-.topnav-left a:nth-child(1) {
-  display: 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 { 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: #333; border-radius: 3px; width: 2em; height: 1em; }
+  .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; }
@@ -639,75 +555,37 @@ nav {
   .topnav .navicon { display: block; }
 }
 
-@media screen and (max-width:768px) {
-  .footer { background-color: #222; background-color: rgba(0, 0, 0, 0); padding-left: unset; text-align: center; }
-  nav { background-color: rgba(0, 0, 0, 0); }
-}
-
-/* error page */
-
-.error__header {
-  font-size: 8rem !important;
-}
-
-.error__lineHeight {
-  line-height: 0;
-}
-
-/* system-font.css v2.0.2 | CC0-1.0 License | github.com/jonathantneal/system-font-css */
+/* footer */
 
-@font-face {
-  font-family: system-ui;
-  font-style: normal;
-  font-weight: 300;
-  src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Segoe UI Light"), local("Ubuntu Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
+.footer-container {
+  color: #ccc;
+  margin: 0 auto;
+  max-width: 1344px;
+  padding: 2em 2em;
 }
 
-@font-face {
-  font-family: system-ui;
-  font-style: italic;
-  font-weight: 300;
-  src: local(".SFNSText-LightItalic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Light Italic"), local("Ubuntu Light Italic"), local("Roboto-LightItalic"), local("DroidSans"), local("Tahoma");
+.footer {
+  background-color: #282e34;
+  font-size: 12px;
+  line-height: 1.5;
+  text-align: left;
 }
 
-@font-face {
-  font-family: system-ui;
-  font-style: normal;
-  font-weight: 400;
-  src: local(".SFNSText-Regular"), local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"), local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"), local("DroidSans"), local("Tahoma");
+.footer-transparent {
+  background-color: #222;
+  background-color: rgba(0, 0, 0, 0);
 }
 
-@font-face {
-  font-family: system-ui;
-  font-style: italic;
-  font-weight: 400;
-  src: local(".SFNSText-Italic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Italic"), local("Ubuntu Italic"), local("Roboto-Italic"), local("DroidSans"), local("Tahoma");
-}
+.footer a { color: #ccc; }
 
-@font-face {
-  font-family: system-ui;
-  font-style: normal;
-  font-weight: 500;
-  src: local(".SFNSText-Medium"), local(".HelveticaNeueDeskInterface-MediumP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold"), local("Ubuntu Medium"), local("Roboto-Medium"), local("DroidSans-Bold"), local("Tahoma Bold");
-}
+.footer a:hover { color: #f00; }
 
-@font-face {
-  font-family: system-ui;
-  font-style: italic;
-  font-weight: 500;
-  src: local(".SFNSText-MediumItalic"), local(".HelveticaNeueDeskInterface-MediumItalicP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold Italic"), local("Ubuntu Medium Italic"), local("Roboto-MediumItalic"), local("DroidSans-Bold"), local("Tahoma Bold");
+@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); }
 }
 
-@font-face {
-  font-family: system-ui;
-  font-style: normal;
-  font-weight: 700;
-  src: local(".SFNSText-Bold"), local(".HelveticaNeueDeskInterface-Bold"), local(".LucidaGrandeUI"), local("Segoe UI Bold"), local("Ubuntu Bold"), local("Roboto-Bold"), local("DroidSans-Bold"), local("Tahoma Bold");
-}
+/* error page */
 
-@font-face {
-  font-family: system-ui;
-  font-style: italic;
-  font-weight: 700;
-  src: local(".SFNSText-BoldItalic"), local(".HelveticaNeueDeskInterface-BoldItalic"), local(".LucidaGrandeUI"), local("Segoe UI Bold Italic"), local("Ubuntu Bold Italic"), local("Roboto-BoldItalic"), local("DroidSans-Bold"), local("Tahoma Bold");
-}
+.error__header { font-size: 8rem !important; }
+.error__lineHeight { line-height: 0; }
diff --git a/assets/css/posts.css b/assets/css/posts.css
index e15baaf..d65e853 100644
--- a/assets/css/posts.css
+++ b/assets/css/posts.css
@@ -4,21 +4,21 @@ html {
   min-height: 100%;
   position: relative;
   overflow-y: scroll;
+  background-color: #252b30;
 }
 
 body {
-  background-color: #2c2c2c !important;
-  background-image: url("/images/overlay.png"), linear-gradient(0deg, rgb(44, 44, 44), rgba(44, 44, 44));
+  background-color: #333b42 !important;
+  background-image: url("/images/overlay.png"), linear-gradient(0deg, #333b42, #333b42);
   color: #fff !important;
-  font-family: system-ui, sans-serif !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; }
 
-a.active { color: #f00 !important; }
-
 .paragraph__serif {
-  font-family: Georgia, Times, "Times New Roman", serif;
+  font-family: 'Georgia', 'Baskerville', 'TimesNewRoman', 'Times New Roman', 'Times', serif;
   font-size: 20px;
   line-height: 1.8;
 }
@@ -103,7 +103,7 @@ h2 { font-size: 1.6rem; }
   z-index: 1;
   top: 0;
   right: 0;
-  background-color: #222;
+  background-color: #252B30;
   overflow-x: hidden;
   transition: 0.25s;
 }
@@ -113,7 +113,6 @@ h2 { font-size: 1.6rem; }
   text-decoration: none;
   text-align: left;
   font-size: 16px;
-  font-weight: 400;
   line-height: 1;
   display: block;
   color: #fff;
@@ -121,7 +120,7 @@ h2 { font-size: 1.6rem; }
 
 .sidenav__container { margin-top: 4.2em; }
 
-.sidenav a.active { background-color: #333; }
+.sidenav a.active { background-color: #3b444c; color: #ffffff; font-weight: bold; }
 
 @media screen and (max-height: 450px) {
   .sidenav {padding-top: 15px;}
@@ -131,7 +130,7 @@ h2 { font-size: 1.6rem; }
 /* navigation bar */
 
 nav {
-  background-color: #232323;
+  background-color: #282e34;
   margin-bottom: 2em;
 }
 
@@ -171,16 +170,16 @@ nav {
   text-decoration: none;
 }
 
-.topnav-left a:nth-child(1) {
-  display: none;
-}
+.topnav .active { color: red; }
 
-.topnav-right a {
-  float: right;
-}
+.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: #333; border-radius: 3px; width: 3em; height: 0.9em; }
+  .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; }
@@ -192,87 +191,24 @@ nav {
 /* footer */
 
 .footer-container {
-  color: #aaa;
+  color: #ccc;
   margin: 0 auto;
   max-width: 1392px;
   padding: 2em 2em;
 }
 
 .footer {
-  background-color: #232323;
-  background-color: rgba(34, 34, 34, 0.85);
+  background-color: #282e34;
   font-size: 12px;
   line-height: 1.5;
   text-align: left;
 }
 
-.footer a {
-  color: #aaa;
-}
-
-.footer a:hover {
-  color: #f00;
-}
-
-@media screen and (max-width: 768px) {
-  .footer { background-color: #2c2c2c; background-color: rgba(0, 0, 0, 0); padding-left: unset; text-align: center; }
-  nav { background-color: #2c2c2c; background-color: rgba(0, 0, 0, 0); }
-}
-
-/* system-font.css v2.0.2 | CC0-1.0 License | github.com/jonathantneal/system-font-css */
+.footer a { color: #ccc; }
 
-@font-face {
-  font-family: system-ui;
-  font-style: normal;
-  font-weight: 300;
-  src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Segoe UI Light"), local("Ubuntu Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
-}
-
-@font-face {
-  font-family: system-ui;
-  font-style: italic;
-  font-weight: 300;
-  src: local(".SFNSText-LightItalic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Light Italic"), local("Ubuntu Light Italic"), local("Roboto-LightItalic"), local("DroidSans"), local("Tahoma");
-}
-
-@font-face {
-  font-family: system-ui;
-  font-style: normal;
-  font-weight: 400;
-  src: local(".SFNSText-Regular"), local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"), local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"), local("DroidSans"), local("Tahoma");
-}
-
-@font-face {
-  font-family: system-ui;
-  font-style: italic;
-  font-weight: 400;
-  src: local(".SFNSText-Italic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Italic"), local("Ubuntu Italic"), local("Roboto-Italic"), local("DroidSans"), local("Tahoma");
-}
-
-@font-face {
-  font-family: system-ui;
-  font-style: normal;
-  font-weight: 500;
-  src: local(".SFNSText-Medium"), local(".HelveticaNeueDeskInterface-MediumP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold"), local("Ubuntu Medium"), local("Roboto-Medium"), local("DroidSans-Bold"), local("Tahoma Bold");
-}
-
-@font-face {
-  font-family: system-ui;
-  font-style: italic;
-  font-weight: 500;
-  src: local(".SFNSText-MediumItalic"), local(".HelveticaNeueDeskInterface-MediumItalicP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold Italic"), local("Ubuntu Medium Italic"), local("Roboto-MediumItalic"), local("DroidSans-Bold"), local("Tahoma Bold");
-}
-
-@font-face {
-  font-family: system-ui;
-  font-style: normal;
-  font-weight: 700;
-  src: local(".SFNSText-Bold"), local(".HelveticaNeueDeskInterface-Bold"), local(".LucidaGrandeUI"), local("Segoe UI Bold"), local("Ubuntu Bold"), local("Roboto-Bold"), local("DroidSans-Bold"), local("Tahoma Bold");
-}
+.footer a:hover { color: #f00; }
 
-@font-face {
-  font-family: system-ui;
-  font-style: italic;
-  font-weight: 700;
-  src: local(".SFNSText-BoldItalic"), local(".HelveticaNeueDeskInterface-BoldItalic"), local(".LucidaGrandeUI"), local("Segoe UI Bold Italic"), local("Ubuntu Bold Italic"), local("Roboto-BoldItalic"), local("DroidSans-Bold"), local("Tahoma Bold");
+@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); }
 }