Added new Projects page

Author: kabbagepatch

.codex

@@ -4,7 +4,7 @@
     v-bind:class="{
       pinkGradient: $route.name === 'Home',
       blueGradient: $route.name === 'Books',
-      greenGradient: $route.name === 'Projects' || $route.name === 'AoC',
+      warmGradient: $route.name === 'Projects' || $route.name === 'AoC',
     }"
   >
     <Header
@@ -20,12 +20,12 @@
   </div>
   <footer
     v-bind:class="{
+      pinkfooter: $route.name === 'Home',
       bluefooter: $route.name === 'Books',
-      brownfooter: $route.name === 'Projects',
-      brownfooter: $route.name === 'AoC',
+      brownfooter: $route.name === 'Projects' || $route.name === 'AoC',
     }"
   >
-    <p>Designed & developed by <a href="https://twitter.com/kavisherlock" target="_blank">Kavish</a></p>
+    <p>Designed & developed by <a href="https://github.com/kabbagepatch" target="_blank">Kavish</a></p>
     <p class="credit">
       Glitchy buttons in the header based on <a href="https://codepen.io/jh3y/pen/PoGbxLp" target="_blank">
         https://codepen.io/jh3y/pen/PoGbxLp
@@ -42,7 +42,7 @@ export default {
   name: 'app',
   data() {
     return {
-      tabs: ['Books', 'Projects'],
+      tabs: ['Projects', 'Books'],
       apiKey: 'AIzaSyBj6pwMyPi8NVKBybSPJ3WWwGfx3__Nr4I',
     };
   },
@@ -74,8 +74,8 @@ export default {
     background: linear-gradient(to bottom right, hsl(212, 51%, 31%) 10%, hsl(204, 36%, 47%));
   }
 
-  .greenGradient {
-    background: linear-gradient(to top right, hsl(101, 38%, 79%) 50%, hsl(101, 78%, 79%));
+  .warmGradient {
+    background: linear-gradient(135deg, hsl(34, 82%, 95%) 0%, hsl(25, 78%, 91%) 50%, hsl(38, 70%, 86%) 100%);
   }
 
   .fade-enter-active,
@@ -93,16 +93,19 @@ export default {
     padding: 10px 0 50px 0;
     width: 100%;
     height: 70px;
+  }
+
+  .pinkfooter {
     background: hsla(292, 38%, 92%, 50%);
     color: hsl(331, 86%, 75%);
   }
 
-  footer a {
+  .pinkfooter a {
     color: hsl(335, 99%, 68%);
   }
 
   .bluefooter {
-    background: hsl(202, 20%, 92%);
+    background: hsl(205, 100%, 88%);
     color: hsl(204, 39%, 55%)
   }
 

src/App.vue

@@ -24,13 +24,13 @@ export default {
   .cybr-btn {
     --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 1%));
     --shadow-primary: hsl(var(--shadow-primary-hue), 90%, 90%);
-    --primary-hue: 335;
-    --primary-lightness: 99;
-    --color: hsl(292, 38%, 92%);
+    --primary-hue: var(--button-primary-hue, 335);
+    --primary-lightness: var(--button-primary-lightness, 99);
+    --color: var(--button-color, hsl(292, 38%, 92%));
     --font-size: 24px;
-    --shadow-primary-hue: 320;
+    --shadow-primary-hue: var(--button-shadow-primary-hue, 320);
     --label-size: 9px;
-    --shadow-secondary-hue: 60;
+    --shadow-secondary-hue: var(--button-shadow-secondary-hue, 60);
     --shadow-secondary: hsl(var(--shadow-secondary-hue), 90%, 60%);
     --clip: polygon(0 0, 100% 0, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 70%);
     --border: 4px;
@@ -43,7 +43,7 @@ export default {
     --clip-six: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);
     --clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);
     font-family: 'Homemade Apple', cursive, sans-serif;
-    text-shadow:  2px 2px 1px hsl(292, 38%, 52%);
+    text-shadow: 2px 2px 1px var(--button-text-shadow, hsl(292, 38%, 52%));
     color: var(--color);
     cursor: pointer;
     background: transparent;

src/components/Button.vue

@@ -2,7 +2,7 @@
   <div class="header" v-bind:class="{
       pinkGradient: $route.name === 'Home',
       blueGradient: $route.name === 'Books',
-      greenGradient: $route.name === 'Projects' || $route.name === 'AoC',
+      warmGradient: $route.name === 'Projects' || $route.name === 'AoC',
     }">
     <h1 id="title">
       <router-link :to="'/'">
@@ -41,21 +41,53 @@ export default {
 
 <style scoped>
 .header {
+  --header-text: hsl(292, 38%, 92%);
+  --header-text-shadow: hsl(292, 38%, 52%);
+  --header-text-shadow-hover: hsl(292, 38%, 42%);
+  --header-selected: hsl(255, 100%, 91%);
+  --theme-button-primary-hue: 335;
+  --theme-button-primary-lightness: 99;
+  --theme-button-shadow-primary-hue: 320;
+  --theme-button-shadow-secondary-hue: 60;
   padding: 0 2%;
   padding-bottom: 20px;
   background: hsl(291, 37%, 25%);
 }
 
 .pinkGradient {
   background: linear-gradient(to bottom right, hsl(355, 35%, 28%) 10%, hsl(355, 51%, 48%));
+  --header-text: hsl(292, 38%, 92%);
+  --header-text-shadow: hsl(292, 38%, 52%);
+  --header-text-shadow-hover: hsl(292, 38%, 42%);
+  --header-selected: hsl(255, 100%, 91%);
+  --theme-button-primary-hue: 335;
+  --theme-button-primary-lightness: 99;
+  --theme-button-shadow-primary-hue: 320;
+  --theme-button-shadow-secondary-hue: 60;
 }
 
 .blueGradient {
   background: linear-gradient(to bottom right, hsl(212, 51%, 11%) 10%, hsl(204, 36%, 31%));
+  --header-text: hsl(196, 73%, 92%);
+  --header-text-shadow: hsl(210, 56%, 44%);
+  --header-text-shadow-hover: hsl(212, 61%, 34%);
+  --header-selected: hsl(191, 100%, 82%);
+  --theme-button-primary-hue: 204;
+  --theme-button-primary-lightness: 79;
+  --theme-button-shadow-primary-hue: 196;
+  --theme-button-shadow-secondary-hue: 48;
 }
 
-.greenGradient {
-  background: linear-gradient(to top right, hsl(101, 38%, 29%) 50%, hsl(101, 78%, 39%));
+.warmGradient {
+  background: linear-gradient(120deg, hsl(12, 37%, 18%) 0%, hsl(21, 44%, 25%) 48%, hsl(30, 54%, 36%) 100%);
+  --header-text: hsl(33, 77%, 90%);
+  --header-text-shadow: hsl(18, 47%, 30%);
+  --header-text-shadow-hover: hsl(16, 54%, 24%);
+  --header-selected: hsl(40, 94%, 80%);
+  --theme-button-primary-hue: 31;
+  --theme-button-primary-lightness: 78;
+  --theme-button-shadow-primary-hue: 18;
+  --theme-button-shadow-secondary-hue: 46;
 }
 
 #title {
@@ -69,8 +101,8 @@ export default {
 
 #title a {
   text-decoration: none;
-  color: hsl(292, 38%, 92%);
-  text-shadow:  4px 4px 3px hsl(292, 38%, 52%);
+  color: var(--header-text);
+  text-shadow: 4px 4px 3px var(--header-text-shadow);
   transition: color 0.5s ease-in-out;
   -moz-transition: color 0.5s ease-in-out;
   -webkit-transition: color 0.5s ease-in-out;
@@ -81,7 +113,7 @@ export default {
 #title a:hover {
   cursor: pointer;
   text-decoration: none;
-  text-shadow:  4px 4px 3px hsl(292, 38%, 42%);
+  text-shadow: 4px 4px 3px var(--header-text-shadow-hover);
 }
 
 ul, ol {
@@ -112,14 +144,27 @@ ul, ol {
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
-  color: hsl(292, 38%, 92%);
+  color: var(--header-text);
   transition: color 0.25s ease-in-out, background-color 0.5s ease-in-out;
   -moz-transition: color 0.25s ease-in-out, background-color 0.5s ease-in-out;
   -webkit-transition: color 0.25s ease-in-out, background-color 0.5s ease-in-out;
 }
 
 #main-menu li a.selected {
-  color: hsl(255, 100%, 91%);
+  color: var(--header-selected);
+}
+
+#main-menu li a {
+  --button-primary-hue: var(--theme-button-primary-hue);
+  --button-primary-lightness: var(--theme-button-primary-lightness);
+  --button-color: var(--header-text);
+  --button-shadow-primary-hue: var(--theme-button-shadow-primary-hue);
+  --button-shadow-secondary-hue: var(--theme-button-shadow-secondary-hue);
+  --button-text-shadow: var(--header-text-shadow);
+}
+
+#main-menu li a.selected {
+  --button-color: var(--header-selected);
 }
 
 #main-menu li a:hover {