Merge pull request #71 from whitep4nth3r/clickable-hero

Tweaks

apps/fretonator-web/src/app/common/footer/footer.component.html

@@ -46,7 +46,7 @@ <h5 class="footer__sectionTitle">
       </ul>
       <a
         class="footer__bigButton"
-        href="https://github.com/ishythefishy/fretonator"
+        href="https://github.com/whitep4nth3r/fretonator"
         rel="nofollow noopener noreferrer"
         target="_blank"
       >View on GitHub</a>

apps/fretonator-web/src/app/common/header/header.component.scss

@@ -9,6 +9,7 @@
   flex-direction: column;
   justify-content: center;
   align-content: center;
+  border-top: pxToRem($grid-unit / 2) solid var(--header-border-color);
 }
 
 .header__topRow {

apps/fretonator-web/src/app/pages/about/about-index/about-index.component.html

@@ -1,5 +1,3 @@
-<app-stripe-banner></app-stripe-banner>
-
 <main class="about__container">
   <p class="about__title">Hi there! <span role="img" aria-label="waving emoji">👋🏼</span></p>
   <h1 class="about__subtitle">Thanks for checking out the Fretonator!</h1>

apps/fretonator-web/src/app/pages/about/about.module.ts

@@ -3,14 +3,12 @@ import { CommonModule } from '@angular/common';
 
 import { AboutRoutingModule } from './about-routing.module';
 import { AboutIndexComponent } from './about-index/about-index.component';
-import { StripeBannerModule } from '../../common/stripe-banner/stripe-banner.module';
 
 @NgModule({
   declarations: [AboutIndexComponent],
   imports: [
     CommonModule,
-    AboutRoutingModule,
-    StripeBannerModule
+    AboutRoutingModule
   ],
   exports: [AboutIndexComponent]
 })

apps/fretonator-web/src/app/pages/contact/contact-index/contact-index.component.html

@@ -1,4 +1,3 @@
-<app-stripe-banner></app-stripe-banner>
 <div class="form__container" #scrollTarget>
   <h1 class="form__title">Share the love <span role="img" aria-label="red heart emoji">❤️</span></h1>
   <p class="form__copy">My goal with

apps/fretonator-web/src/app/pages/contact/contact.module.ts

@@ -8,8 +8,6 @@ import { ContactSuccessComponent } from './contact-success/contact-success.compo
 import { HttpClientModule } from '@angular/common/http';
 import { FormService } from './form.service';
 import { TickModule } from '../../common/svgs/tick/tick.module';
-import { StripeBannerModule } from '../../common/stripe-banner/stripe-banner.module';
-
 
 @NgModule({
   declarations: [ContactIndexComponent, ContactSuccessComponent],
@@ -20,7 +18,6 @@ import { StripeBannerModule } from '../../common/stripe-banner/stripe-banner.mod
     FormsModule,
     HttpClientModule,
     TickModule,
-    StripeBannerModule
   ],
   providers: [
     FormService

apps/fretonator-web/src/app/pages/learn/learn-index/learn-index.component.html

@@ -1,5 +1,3 @@
-<app-stripe-banner></app-stripe-banner>
-
 <div class="learn__container">
   <h1 class="learn__title">Learn Guitar Theory</h1>
   <h2 class="learn__subtitle">Fretonator Learning Hub</h2>

apps/fretonator-web/src/app/pages/learn/learn.module.ts

@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common';
 
 import { LearnRoutingModule } from './learn-routing.module';
 import { LearnIndexComponent } from './learn-index/learn-index.component';
-import { StripeBannerModule } from '../../common/stripe-banner/stripe-banner.module';
 import { PatternsIndexComponent } from './patterns-index/patterns-index.component';
 import { FretboardModule } from '../../common/fretonator/fretboard/fretboard.module';
 
@@ -16,7 +15,6 @@ import { FretboardModule } from '../../common/fretonator/fretboard/fretboard.mod
   imports: [
     CommonModule,
     LearnRoutingModule,
-    StripeBannerModule,
     FretboardModule,
   ],
   exports: [

apps/fretonator-web/src/app/pages/learn/patterns-index/patterns-index.component.html

@@ -1,6 +1,3 @@
-<app-stripe-banner></app-stripe-banner>
-
-
 <div class="patterns__container">
   <div class="breadcrumbs">
     <a [routerLink]="['/', 'learn']" class="breadcrumbs__link">

apps/fretonator-web/src/styles.scss

@@ -6,6 +6,7 @@
   --black: #202124;
   --white: #ffffff;
   --offwhite: #f9f9f9;
+  --offwhite-alt: #e1e1e1;
   --grey: #474350;
   --yellow: #fafac6;
   --peach: #fecdaa;
@@ -37,27 +38,24 @@
   --border-width-button: 2px;
 
   --header-background: var(--black);
-  --header-logo-color: #e1e1e1;
-  --theme-toggle-color: #e1e1e1;
+  --header-logo-color: var(--offwhite-alt);
+  --header-border-color: var(--peach);
+  --theme-toggle-color: var(--offwhite-alt);
+  --hamburger_layer-color: var(--peach);
+  --header-link-color: var(--peach);
+  --hero-background-color: var(--black);
+  --hero-title-color: var(--offwhite-alt);
+  --hero-block-box-shadow-color: var(--grey);
+  --hero-toggle-foreground-color: var(--offwhite-alt);
+  --hero-toggle-background-color: var(--black);
 
   --footer-background: var(--black);
   --footer-border-color: var(--peach);
-  --footer-copy-color: #e1e1e1;
+  --footer-copy-color: var(--offwhite-alt);
   --footer-link-color: var(--peach);
   --footer-title-color: var(--peach);
   --footer-list-link-color: var(--yellow);
   --footer-small-button-accent-color: var(--yellow);
-
-  --hamburger_layer-color: var(--peach);
-  --header-link-color: var(--peach);
-
-  --hero-background-color: var(--black);
-  --hero-title-color: #e1e1e1;
-  --hero-block-box-shadow-color: var(--grey);
-  --hero-toggle-foreground-color: #e1e1e1;
-  --hero-toggle-background-color: var(--black);
-
-
 }
 
 [color-mode="light"] {
@@ -152,7 +150,7 @@
 
   --background-color-base: var(--black);
   --background-color-light: var(--grey);
-  --foreground-color-base: #e1e1e1;
+  --foreground-color-base: var(--offwhite-alt);
   --text-link-color: var(--peach);
   --text-link-hover-color: #FD7C21;
 
@@ -164,11 +162,11 @@
   --hero-block-background-step-4: var(--coral);
   --hero-block-background-step-5: var(--peach);
 
-  --string-color: #e1e1e1;
-  --string-label-color: #e1e1e1;
+  --string-color: var(--offwhite-alt);
+  --string-label-color: var(--offwhite-alt);
   --nut-color: #d3d3d3;
   --fret-color: rgba(249, 249, 249, 0.2);
-  --fretboard-help-text-color: #e1e1e1;
+  --fretboard-help-text-color: var(--offwhite-alt);
   --fretboard-play-cta-color: #d3d3d3;
 
   --fret-marker-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23474350'/%3E%3C/svg%3E");
@@ -189,15 +187,15 @@
   --note-color-dominant: var(--black);
 
   --chip-background-color: var(--grey);
-  --chip-foreground-color: #e1e1e1;
+  --chip-foreground-color: var(--offwhite-alt);
   --chip-border-color: var(--grey);
 
   --chip-background-color-active: var(--peach);
   --chip-foreground-color-active: var(--black);
   --chip-border-color-active: var(--peach);
 
   --chip-background-color-muted: var(--grey);
-  --chip-foreground-color-muted: #e1e1e1;
+  --chip-foreground-color-muted: var(--offwhite-alt);
   --chip-border-color-muted: var(--grey);
 
   --chip-foreground-color-muted-active: var(--peach);
@@ -214,7 +212,7 @@
   --form-input-autofill-color: var(--black);
 
   --video-loader-background-color: var(--grey);
-  --info-toggle-foreground-color: #e1e1e1;
+  --info-toggle-foreground-color: var(--offwhite-alt);
   --card-background-color: var(--grey);
   --card-border-color: var(--grey);
   --card-box-shadow-color: #0A0A0B;

apps/fretonator-web/src/styles/content.scss

@@ -8,6 +8,7 @@ $top_block_max_width: $screen-med;
 @mixin content_container {
   @include content_wrapper();
   max-width: $screen-med;
+  margin-top: pxToRem($grid-unit * 4);
 }
 
 @mixin content_title {