navigation logic, styling, placeholders

css/main.css

@@ -23,46 +23,78 @@ h1, logo span {
   font-size: 1.6rem;
   line-height: 1.3em;
   font-weight: 400;
-  top: -34px;
+  top: -36px;
   color: white;
   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 {
-  border: 4px solid #00AEC1;
+  border: 4px solid #285a71;
   border-top-width: 2.6rem;
   background-color: white;
+  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
   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;
+  transition: all 0.1s ease-in-out;
 }
 article .content {
   padding: 18px 30px;
 }
-article.main-article {
+article.ontop {
   z-index: 120;
 }
+article.expanded {
+  border-color: #00AEC1;
+  z-index: 120 !important;
+}
+
+#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 {
   width: 100%;
   height: 100%;
   background-size: 680px 400px;
   z-index: 50;
-  border: 4px solid #00AEC1;
+  border: 4px solid #285a71;
   border-top-width: 2.6rem;
   background-color: white;
+  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
+  border-color: #00AEC1;
   transition: all 0.3s ease-in-out;
   position: absolute;
   left: 0;
@@ -81,6 +113,7 @@ logo.sidebar {
   left: 30px;
   top: 30px;
   z-index: 10;
+  border-color: #285a71;
 }
 
 /*# sourceMappingURL=main.css.map */