Continue wallet rebrand

cardinal-app · Jan 8, 2024 · 24cfbe9 · 24cfbe9
1 parent d56be37
commit 24cfbe9
Show file tree

Hide file tree

Showing 12 changed files with 298 additions and 30 deletions.
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -50,7 +50,8 @@ nav {
         color: $mirage;
 
         .icon {
-          background: linear-gradient(0deg, $valencia75 0%, $zest 100%);
+          background: linear-gradient(0deg, $valencia 50%, $zest 100%);
+
         }
 
         p {

diff --git a/src/app/core/component/side-bar/side-bar.component.html b/src/app/core/component/side-bar/side-bar.component.html
@@ -0,0 +1,3 @@
+<section>
+  <h1>{{ title }}</h1>
+</section>
diff --git a/src/app/core/component/side-bar/side-bar.component.scss b/src/app/core/component/side-bar/side-bar.component.scss
@@ -0,0 +1,22 @@
+@import "base";
+
+section {
+  height: 100%;
+  width: 20rem;
+  background: linear-gradient(0deg, $black 20%, $valencia50 50%, $zest75 90%, $zest 100%);
+  border-radius: 3.5rem 0 0 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-shadow: $drop-shadow;
+  z-index: 100;
+
+  h1 {
+    background: -webkit-linear-gradient(90deg, $white00 0%, $white 30%, $white 70%, $white00 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-size: 1.25rem;
+    margin: 2.75rem 3rem;
+    letter-spacing: 1px;
+  }
+}
diff --git a/src/app/core/component/side-bar/side-bar.component.ts b/src/app/core/component/side-bar/side-bar.component.ts
@@ -0,0 +1,15 @@
+import { Component, Input } from "@angular/core";
+import { CommonModule } from "@angular/common";
+
+@Component({
+  selector: 'side-bar',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './side-bar.component.html',
+  styleUrl: './side-bar.component.scss'
+})
+export class SideBarComponent {
+
+  @Input() title: string = '';
+
+}
diff --git a/src/app/core/component/wallet/wallet.component.html b/src/app/core/component/wallet/wallet.component.html
@@ -1,3 +1,6 @@
 <section>
   <div id="background-image"></div>
+  <div id="wallet-item">
+    <ng-content></ng-content>
+  </div>
 </section>
diff --git a/src/app/core/component/wallet/wallet.component.scss b/src/app/core/component/wallet/wallet.component.scss
@@ -18,4 +18,12 @@ section {
     border-radius: 3.5rem 3.5rem 0 0;
     box-shadow: $drop-shadow;
   }
+
+  #wallet-item {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+  }
 }
diff --git a/src/app/structure/fit-track/fit-track.component.html b/src/app/structure/fit-track/fit-track.component.html
@@ -1,20 +1,41 @@
-<landing title="Fit Track" [content]="content"></landing>
-<standards></standards>
-<main>
-  <fit-track-admin (newWeek)="onWeekAdded($event)"></fit-track-admin>
-  <container>
-    <accordion title="General">
-      <general></general>
-    </accordion>
-  </container>
-  <container>
-    <accordion title="Resistance">
-      <resistance></resistance>
-    </accordion>
-  </container>
-  <container>
-    <accordion title="Running">
-      <running [weeks]="weeks"></running>
-    </accordion>
-  </container>
-</main>
+<!--<landing title="Fit Track" [content]="content"></landing>-->
+<!--<standards></standards>-->
+<!--<main>-->
+<!--  <fit-track-admin (newWeek)="onWeekAdded($event)"></fit-track-admin>-->
+<!--  <container>-->
+<!--    <accordion title="General">-->
+<!--      <general></general>-->
+<!--    </accordion>-->
+<!--  </container>-->
+<!--  <container>-->
+<!--    <accordion title="Resistance">-->
+<!--      <resistance></resistance>-->
+<!--    </accordion>-->
+<!--  </container>-->
+<!--  <container>-->
+<!--    <accordion title="Running">-->
+<!--      <running [weeks]="weeks"></running>-->
+<!--    </accordion>-->
+<!--  </container>-->
+<!--</main>-->
+<wallet>
+  <side-bar title="Fit Track"></side-bar>
+  <section>
+    <fit-track-admin (newWeek)="onWeekAdded($event)"></fit-track-admin>
+    <container>
+      <accordion title="General">
+        <general></general>
+      </accordion>
+    </container>
+    <container>
+      <accordion title="Resistance">
+        <resistance></resistance>
+      </accordion>
+    </container>
+    <container>
+      <accordion title="Running">
+        <running [weeks]="weeks"></running>
+      </accordion>
+    </container>
+  </section>
+</wallet>
diff --git a/src/app/structure/fit-track/fit-track.component.scss b/src/app/structure/fit-track/fit-track.component.scss
@@ -1,9 +1,9 @@
 @import 'base';
 
-main {
-  background: $alabaster;
-
-  section {
-    margin: 4rem 0;
-  }
+section {
+  background-color: $alabaster;
+  left: 20rem;
+  width: calc(100% - 20rem);
+  border-radius: 0 3.5rem 0 0;
+  position: absolute;
 }
diff --git a/src/app/structure/fit-track/fit-track.component.ts b/src/app/structure/fit-track/fit-track.component.ts
@@ -12,11 +12,13 @@ import { LandingComponent } from "../../core/component/landing/landing.component
 import { AccordionComponent } from "../../core/component/accordion/accordion.component";
 import { ContainerComponent } from "../../core/component/container/container.component";
 import { AdminComponent } from "./admin/admin.component";
+import {WalletComponent} from "../../core/component/wallet/wallet.component";
+import {SideBarComponent} from "../../core/component/side-bar/side-bar.component";
 
 @Component({
   selector: 'fit-track',
   standalone: true,
-  imports: [CommonModule, FaIconComponent, OrderWeeksPipe, ResistanceComponent, GeneralComponent, StandardsComponent, RunningComponent, LandingComponent, AccordionComponent, ContainerComponent, AdminComponent],
+  imports: [CommonModule, FaIconComponent, OrderWeeksPipe, ResistanceComponent, GeneralComponent, StandardsComponent, RunningComponent, LandingComponent, AccordionComponent, ContainerComponent, AdminComponent, WalletComponent, SideBarComponent],
   templateUrl: './fit-track.component.html',
   styleUrl: './fit-track.component.scss'
 })

diff --git a/src/app/structure/home/home.component.html b/src/app/structure/home/home.component.html
@@ -1,4 +1,123 @@
 <!--<landing title="Cardinal" [content]="content"></landing>-->
 <!-- TODO :: rename landing, now defunct... -->
 
-<wallet></wallet>
+<wallet>
+  <section>
+    <div id="hero">
+      <h1>Cardinal</h1>
+      <h2>/ˈkɑːdɪnəl/ Of the greatest importance; <br/> fundamental.</h2>
+
+
+
+
+
+      <div id="content">
+        <div class="row">
+          <div class="item">
+            <fa-icon class="icon" [icon]="faPersonRunning"></fa-icon>
+            <div class="item-description">
+              <p class="item-header">Fit Track</p>
+              <p class="item-body">Track completed training and progress towards goals</p>
+            </div>
+          </div>
+          <div class="item">
+            <fa-icon class="icon" [icon]="faPersonRunning"></fa-icon>
+            <div class="item-description">
+              <p class="item-header">Fit Track</p>
+              <p class="item-body">Track completed training and progress towards goals</p>
+            </div>
+          </div>
+          <div class="item">
+            <fa-icon class="icon" [icon]="faPersonRunning"></fa-icon>
+            <div class="item-description">
+              <p class="item-header">Fit Track</p>
+              <p class="item-body">Track completed training and progress towards goals</p>
+            </div>
+          </div>
+          <div class="item">
+            <fa-icon class="icon" [icon]="faPersonRunning"></fa-icon>
+            <div class="item-description">
+              <p class="item-header">Fit Track</p>
+              <p class="item-body">Track completed training and progress towards goals</p>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="item">
+            <fa-icon class="icon" [icon]="faPersonRunning"></fa-icon>
+            <div class="item-description">
+              <p class="item-header">Fit Track</p>
+              <p class="item-body">Track completed training and progress towards goals</p>
+            </div>
+          </div>
+          <div class="item">
+            <fa-icon class="icon" [icon]="faPersonRunning"></fa-icon>
+            <div class="item-description">
+              <p class="item-header">Fit Track</p>
+              <p class="item-body">Track completed training and progress towards goals</p>
+            </div>
+          </div>
+          <div class="item">
+            <fa-icon class="icon" [icon]="faPersonRunning"></fa-icon>
+            <div class="item-description">
+              <p class="item-header">Fit Track</p>
+              <p class="item-body">Track completed training and progress towards goals</p>
+            </div>
+          </div>
+          <div class="item">
+            <fa-icon class="icon" [icon]="faPersonRunning"></fa-icon>
+            <div class="item-description">
+              <p class="item-header">Fit Track</p>
+              <p class="item-body">Track completed training and progress towards goals</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<!--      <div id="content1">-->
+<!--        <div class="item">-->
+<!--          <fa-icon class="icon" [icon]="faPersonRunning"></fa-icon>-->
+<!--          <div class="item-description">-->
+<!--            <p class="item-header">Fit Track</p>-->
+<!--            <p class="item-body">Track completed training and progress towards goals</p>-->
+<!--          </div>-->
+<!--        </div>-->
+
+<!--        <div class="item">-->
+<!--          <fa-icon class="icon" [icon]="faPersonRunning"></fa-icon>-->
+<!--          <div class="item-description">-->
+<!--            <p class="item-header">Fit Track</p>-->
+<!--            <p class="item-body">Track completed training and progress towards goals</p>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--        <div class="item">-->
+<!--          <fa-icon class="icon" [icon]="faPersonRunning"></fa-icon>-->
+<!--          <div class="item-description">-->
+<!--            <p class="item-header">Fit Track</p>-->
+<!--            <p class="item-body">Track completed training and progress towards goals</p>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--        <div class="item">-->
+<!--          <fa-icon class="icon" [icon]="faPersonRunning"></fa-icon>-->
+<!--          <div class="item-description">-->
+<!--            <p class="item-header">Fit Track</p>-->
+<!--            <p class="item-body">Track completed training and progress towards goals</p>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </div>-->
+    </div>
+  </section>
+</wallet>
diff --git a/src/app/structure/home/home.component.scss b/src/app/structure/home/home.component.scss
@@ -0,0 +1,71 @@
+@import 'base';
+
+section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+
+  h1 {
+    margin-top: -8rem;
+    color: $white;
+    text-transform: uppercase;
+    font-size: 10rem;
+    letter-spacing: 1.5rem;
+    font-weight: $semi-bold;
+    background: -webkit-linear-gradient(90deg, $white00 0%, $white 30%, $white 70%, $white00 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    opacity: .85;
+
+    @media (max-width: $small-screen) {
+      font-size: 8.5rem;
+      letter-spacing: 1rem;
+    }
+  }
+
+  h2 {
+    margin-top: -1rem;
+    background: -webkit-linear-gradient(90deg, $white00 0%, $white 30%, $white 90%, $white00 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-left: 1rem;
+    font-weight: $regular;
+    font-size: 1.5rem;
+    letter-spacing: 3px;
+    line-height: 2rem;
+    opacity: .85;
+  }
+
+  #hero {
+    width: min-content;
+
+    #content {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      width: 100%;
+      margin-top: 4rem;
+
+      .item {
+        color: $white;
+        display: flex;
+        gap: 1rem;
+        flex-direction: column;
+        flex: 1;
+        width: 320px;
+
+        .item-description {
+          .item-header {
+            letter-spacing: 2px;
+          }
+
+          .item-body {
+            font-size: $default-text;
+            font-weight: $light;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/app/structure/home/home.component.ts b/src/app/structure/home/home.component.ts
@@ -2,11 +2,13 @@ import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import {LandingComponent} from "../../core/component/landing/landing.component";
 import { WalletComponent } from "../../core/component/wallet/wallet.component";
+import {faPersonRunning} from "@fortawesome/free-solid-svg-icons";
+import {FaIconComponent} from "@fortawesome/angular-fontawesome";
 
 @Component({
   selector: 'home',
   standalone: true,
-  imports: [CommonModule, LandingComponent, WalletComponent],
+  imports: [CommonModule, LandingComponent, WalletComponent, FaIconComponent],
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss'
 })
@@ -22,4 +24,5 @@ export class HomeComponent {
     ];
   }
 
+  protected readonly faPersonRunning = faPersonRunning;
 }