navigation logic, styling, placeholders

sass/main.scss

@@ -1,13 +1,15 @@
 $font-stack: Helvetica, sans-serif;
 $primary-color: #333;
 $background-color: #222;
-$window-chrome: #00AEC1;
+$window-chrome: #285a71;
+$window-chrome-active: #00AEC1;
 $window-text: white;
 
 @mixin window-chrome {
   border: 4px solid $window-chrome;
   border-top-width: 2.6rem;
   background-color: white;
+  box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
 }
 
 [x-cloak] {
@@ -35,15 +37,23 @@ h1, logo span {
   font-size: 1.6rem;
   line-height: 1.3em;
   font-weight: 400;
-  top: -34px;
+  top: -36px;
   color: $window-text;
   width: 100%;
-  padding-left: 30px;
+  padding-left: 15px;
   cursor: pointer;
   -webkit-user-select: none; /* Safari */
   -ms-user-select: none; /* IE 10 and IE 11 */
   user-select: none; /* Standard syntax */
 }
+logo span {
+  margin-top: 2px;
+}
+h1 span {
+  font-family: sans-serif;
+  font-weight: bold;
+  margin-right: 0.2em;
+}
 
 article {
   .content {
@@ -52,17 +62,43 @@ article {
   @include window-chrome();
   position: absolute;
   padding: 4px 0px;
-  top: 55px;
-  right: 30px;
-  width: calc( 100% - 390px );
   min-width: 500px;
   max-width: 880px;
   line-height: 1.3em;
   font-size: 1.2rem;
+  top: 55px;
+  right: 30px;
+  width: calc( 100% - 390px );
   z-index: 30;
-  &.main-article {
+  transition: all 0.1s ease-in-out;
+  &.ontop {
     z-index: 120;
   }
+  &.expanded {
+    border-color: $window-chrome-active;
+    z-index: 120 !important;
+  }
+}
+
+#article1 {
+  //top: 55px;
+  //right: 30px;
+  //z-index: 30;
+  //width: calc( 100% - 390px );
+}
+
+#article2 {
+  top: 132px;
+  right: 147px;
+  z-index: 29;
+  width: calc( 100% - 460px );
+}
+
+#article3 {
+  top: 175px;
+  right: 77px;
+  z-index: 28;
+  width: calc( 100% - 600px );
 }
 
 logo {
@@ -79,9 +115,11 @@ logo {
     left: 30px;
     top: 30px;
     z-index: 10;
+    border-color: $window-chrome;
   }
   z-index: 50;
   @include window-chrome();
+  border-color: $window-chrome-active;
   transition: all 0.3s ease-in-out;
   position: absolute;
   left: 0;