Add good backgrounds, many style improvements

src/components/Footer/index.css

@@ -1,9 +1,11 @@
 .footer {
+  align-self: stretch;
 	font-family: var(--font-header);
 	justify-content: center;
 	align-items: center;
 	display: flex;
   line-height: 2;
+  background-image: linear-gradient(to top, hsla(0,0%,0%,0.8), hsla(0,0%,0%,0));
 }
 
 .footer span a {
@@ -12,7 +14,7 @@
 }
 
 .footer a:hover {
-	color: hsla(0, 100%, 50%, 1);
+	color: #E2264D;
 }
 
 .heart {

src/components/Nav/index.css

@@ -1,6 +1,7 @@
 .nav {
-  display: flex;
+  align-self: stretch;
   justify-content: center;
+  background-image: linear-gradient(to bottom, hsla(0,0%,0%,0.8), hsla(0,0%,0%,0));
 }
 
 .links {
@@ -16,7 +17,7 @@
   padding: 0.5em;
 }
 
-.nav a:hover {
-  background-color: var(--blue);
-  color: var(--white);
+.nav a:hover, .nav a:focus {
+  background-color: #FED600;
+  color: black;
 }

src/components/Skill/index.css

@@ -13,16 +13,20 @@
   align-items: center;
 }
 
-.skill:before {
-  content: '';
-  background-image: linear-gradient(to bottom, #333, #555);
+.skill:before, .skill:after {
   position: absolute;
   bottom: 0;
   right: 0;
   height: 100%;
   width: 100%;
-  z-index: -1;
   clip-path: polygon(0 15%, 15% 0, 100% 0, 100% 85%, 85% 100%, 0% 100%);
+}
+
+.skill:before {
+  content: '';
+  z-index: -1;
+  background-image: linear-gradient(to bottom, #333, #555);
+  transform: scale(0.9);
   filter: brightness(50%);
 }
 
@@ -31,22 +35,37 @@
 }
 
 .usable:before {
-  background-image: linear-gradient(to bottom, hsl(var(--themeHue),91%,50%), hsl(var(--themeHue),91%,30%));
-}
-.skill:hover:before {
-  background-image: linear-gradient(to bottom, hsl(30,100%,30%), hsl(30,100%,60%));
-  filter: brightness(100%);
+  background-image: linear-gradient(to bottom, hsl(var(--themeHue),91%,40%), hsl(var(--themeHue),91%,20%));
 }
 
-.actionSkill:before {
+.usable:after {
+  z-index: -2;
+  content: '';
+  background-color: hsl(var(--themeHue),91%,70%);
+}
+
+.skill:hover:before {
+  background-image: linear-gradient(to bottom, hsl(51, 100%, 40%), hsl(51, 100%, 50%));
+  filter: brightness(100%);
+}
+.skill:hover:after {
+  background-color: black;
+}
+
+.skill:hover {
+  color: black;
+}
+
+.actionSkill:before, .actionSkill:after {
   clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
 }
 
-.chevron:before {
+.chevron:before, .chevron:after {
   clip-path: polygon(0 0, 50% 25%, 100% 0, 100% 75%, 50% 100%, 0 75%);
+  transform-origin: 50% 60%;
 }
 
-.diamond:before {
+.diamond:before, .diamond:after {
   clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%);
 }
 
@@ -85,5 +104,6 @@
   right: -0.25rem;
   font-size: 0.75em;
   background-color: #333;
+  color: var(--whiteText);
   padding: 0.1em;
 }

src/components/VaultHunter/index.css

@@ -5,6 +5,23 @@
   cursor: default;
 }
 
+.title {
+  display: block;
+  margin: 0 auto;
+  top: 3rem;
+  text-transform: uppercase;
+  text-align: center;
+  font-size: 3rem;
+  color: hsl(51, 100%, 50%);
+  background-color: black;
+  padding: 0.2em;
+  line-height: 1;
+}
+.subtitle {
+  text-transform: uppercase;
+  font-size: 0.5em;
+}
+
 .trees, .tier {
   display: flex;
 }
@@ -19,6 +36,7 @@
 .tree {
   --themeColor: hsl(var(--themeHue),91%,22%);
   display: flex;
+  z-index: 1;
   flex-direction: column;
   margin: 1rem;
   padding: 0 3.5rem;

src/components/VaultHunter/index.js

@@ -37,7 +37,9 @@ export default function VaultHunter ({
 
   return (
     <div class={style.VaultHunter}>
-      <h2>{ name } the { discipline }</h2>
+      <h1 class={style.title}>{ name }
+        <div class={style.subtitle}>the { discipline }</div>
+      </h1>
       <div class={style.trees}>
         { trees }
       </div>

src/index.css

@@ -1,11 +1,9 @@
 :root {
   --radius: 2px;
-	--blue: #1E88E5;
-	--white: #FFFFFF;
-	--offwhite: #F8F8FA;
+  --whiteText: hsla(0,0%,100%,0.8);
 	--transition-duration: 300ms;
 	--font-header: sans-serif;
-  --font-list: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  --font-list: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
   font-size: 1.5vw;
 }
 
@@ -33,9 +31,13 @@ body {
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-	color: #333;
+	color: #F8F8FA;
 	font-family: var(--font-list);
   -webkit-font-smoothing: antialiased;
+  background-color: #333;
+  background-image: url('@assets/backgrounds/background2.jpg');
+  background-size: cover;
+  background-position: center;
 }
 
 a {
@@ -44,9 +46,10 @@ a {
 }
 
 a:hover {
+  color: #E2264D;
 	text-decoration: underline;
 }
 
 a:visited {
-	color: rgb(0,80,160);
+	color: inherit;
 }

src/pages/Home/index.css

@@ -1,7 +0,0 @@
-.section {
-	padding-bottom: 64px;
-}
-
-.section h2 {
-	margin-bottom: 16px;
-}

src/pages/Home/index.js

@@ -1,4 +1,4 @@
-import style from './index.css';
+// import style from './index.css';
 
 export default function () {
   return (

src/pages/Operative/index.js

@@ -5,9 +5,9 @@ import skills from './skills.js';
 export default function Operative () {
   return (
     <VaultHunter
-      name = 'Zane'
-      discipline = 'Operative'
-      skills = { skills }
+      name='Zane'
+      discipline='Operative'
+      skills={skills}
     />
   );
 }

src/pages/Siren/index.js

@@ -5,9 +5,9 @@ import skills from './skills.js';
 export default function Siren () {
   return (
     <VaultHunter
-      name = 'Amara'
-      discipline = 'Siren'
-      skills = { skills }
+      name='Amara'
+      discipline='Siren'
+      skills={skills}
     />
   );
 }