⭐ More colours! 🎨

Sections are now themed by colours inpired from Lawnchair's settings page
myfrom · Mar 8, 2019 · e8bf811 · e8bf811
1 parent 83adbf6
commit e8bf811
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 37 deletions.
diff --git a/css/index-desktop.css b/css/index-desktop.css
@@ -20,30 +20,20 @@ nav {
 nav > a {
   position: relative;
 }
-nav > a::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  box-shadow:
-    0 12px 17px 2px rgba(27, 126, 217, 0.14),
-    0  5px 22px 4px rgba(27, 126, 217, 0.12),
-    0  7px  8px 0   rgba(27, 126, 217, 0.2);
-  opacity: 0;
-  transition: opacity 200ms ease-out;
-}
 nav > a:hover::before,
 nav > a:focus::before {
-  opacity: 0.5;
+  opacity: 0.7;
 }
 nav > a.active::before {
   opacity: 1;
 }
+nav > a {
+  height: 50px;
+  padding: 0 20px;
+}
 
 #download-section {
-  top: 40px !important;
+  top: 35px !important;
   right: 30px !important;
 }
 
@@ -98,6 +88,11 @@ section .text {
     display: none;
   }
 
+  nav > a {
+    padding: 10px;
+    height: 48px;
+  }
+
 }
 
 @media (min-width: 1200px) {

diff --git a/css/index-mobile-noncritical.css b/css/index-mobile-noncritical.css
@@ -35,10 +35,12 @@ nav {
   padding: 20vh 0;
   transition: opacity 160ms ease-out 100ms, transform 260ms ease-out;
 }
-nav > a {
-  background: none;
-  margin: 2vh;
-  position: relative;
+nav > a {
+  background: none;
+  margin: 2vh;
+  color: white;
+  padding: 10px;
+  display: block;
 }
 nav > a::before {
   content: "";
@@ -50,6 +52,9 @@ nav > a::before {
   left: 0;
   right: 0;
   transform: scaleX(0);
+  box-shadow: none !important;
+  opacity: 1;
+  border-radius: 0;
   transform-origin: left;
   transition: transform 200ms ease-out;
 }

diff --git a/css/index-noncritical.css b/css/index-noncritical.css
@@ -26,6 +26,31 @@ header.header-waterfall > :not(label) {
   margin-bottom:  0.7em;
 }
 
+nav > a:nth-child(1)::before {
+  box-shadow:
+    0 12px 17px 2px rgba(26, 217, 211, 0.14),
+    0 5px 22px 4px rgba(26, 217, 211, 0.2),
+    0px 2px 4px 0 rgba(26, 217, 211, 0.26);
+}
+nav > a:nth-child(2)::before {
+  box-shadow:
+    0 12px 17px 2px rgba(26, 115, 232, 0.14),
+    0  5px 22px 4px rgba(26, 115, 232, 0.2),
+    0  2px  4px 0   rgba(84, 111, 146, 0.15);
+}
+nav > a:nth-child(3)::before {
+  box-shadow:
+    0 12px 17px 2px rgba(217, 26, 147, 0.14),
+    0  5px 22px 4px rgba(217, 26, 147, 0.2),
+    0  2px  4px 0   rgba(217, 26, 147, 0.1);
+}
+nav > a:nth-child(4)::before {
+  box-shadow:
+    0 12px 17px 2px rgba(26, 217, 96, 0.14),
+    0  5px 22px 4px rgba(26, 217, 96, 0.2),
+    0  2px  4px 0   rgba(26, 217, 96, 0.26);
+}
+
 nav #download-section, #download-section div {
   display: flex;
   flex-direction: column;
@@ -60,7 +85,7 @@ nav #download-section.upgraded {
 #scroll-down-indicator > svg {
   height: 40px;
   width: 40px;
-  stroke: #1b7ed9;
+  stroke: var(--color);
   opacity: 0.78;
   fill: none;
   stroke-width: 2px;
@@ -166,16 +191,16 @@ input:checked+label+.tab-content {
   background-color: #d1e3fa;
 }
 #instagram-link::before {
-  background-color: #e4405f;
+  background-color: #f7d1e9;
 }
 #telegram-link::before {
-  background-color: #35ace1;
+  background-color: #d1f7f6;
 }
 #support-link::before {
-  background-color: #00E676;
+  background-color: #d1f7df;
 }
 #github-link::before {
-  background-color: #607D8B;
+  background-color: #d8d1f7;
 }
 #social-links a:hover::before,
 #social-links a:focus::before {
@@ -208,24 +233,27 @@ footer > .footer-column p {
 }
 
 @media (min-width: 700px) {
+
   #download-section {
     position: absolute;
-    top: 30px;
+    top: 25px;
     right: 28px;
-    background-color: #1b7ed9;
+    background-color: #1ad960;
+    border-radius: 4px;
     padding: 0 22px 22px 22px;
     opacity: 1;
     transform: none;
     transform-origin: top right;
     transition: all 200ms ease-in-out;
     box-shadow:
-      0 16px 24px 2px rgba(27, 126, 217, 0.14),
-      0  6px 30px 5px rgba(10, 15, 20, 0.12),
-      0  8px 10px 0   rgba(0, 0, 0, 0.2);
+    0 12px 17px 2px rgba(26, 217, 96, 0.14),
+    0  5px 22px 4px rgba(26, 217, 96, 0.2),
+    0  2px  4px 0   rgba(26, 217, 96, 0.26);
   }
   #download-section.upgraded.collapsed {
     opacity: 0;
     transform: scale(calc(152/368), calc(40/228));
     pointer-events: none;
   }
+
 }
diff --git a/index.html b/index.html
@@ -45,6 +45,7 @@
       font-weight: 500;
       color: #212121;
       overflow-x: hidden;
+      scroll-behavior: smooth;
     }
 
     html {
@@ -99,7 +100,7 @@
       top: 16px;
       right: 20px;
       z-index: 2;
-      background-color: #1B7ED9;
+      background-color: #1a73e8;
     }
     label[for="nav-toggle"] > svg {
       fill: white;
@@ -114,13 +115,48 @@
       margin-right: 18px;
     }
     nav > a {
-      background-color: #1B7ED9;
-      color: white;
       text-transform: uppercase;
-      line-height: 20px;
-      height: 40px;
-      padding: 10px;
       margin: 10px;
+      color: var(--color);
+      background-color: var(--bg-color);
+      position: relative;
+      border-radius: 4px;
+      height: 50px;
+      padding: 0 20px;
+      display: flex;
+      align-items: center;
+    }
+    nav > a::before {
+      content: "";
+      position: absolute;
+      border-radius: 4px;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      opacity: 0.3;
+      transition: opacity 200ms ease-out;
+    }
+
+    #showcase {
+      --color: #1a73e8;
+    }
+    nav > a:nth-child(1), #about {
+      --color: #1ad9d3;
+      --bg-color: #d1f7f6;
+    }
+    nav > a:nth-child(2), #features {
+      --color: #1a73e8;
+      --bg-color: #d1e3fa;
+    }
+
+    nav > a:nth-child(3), #team {
+      --color: #d91a93;
+      --bg-color: #f7d1e9;
+    }
+    nav > a:nth-child(4) {
+      --color: #1ad960;
+      --bg-color: #d1f7df;
     }
 
     section {
@@ -176,7 +212,7 @@
       max-height: 300px;
     }
     .showcase-author {
-      color: #1B7ED9;
+      color: var(--color);
       font-size: 14px;
       margin-top: 15px;
       transition: all 200ms ease-in-out;