diff --git a/src/_config.scss b/src/_config.scss index d649d6c..f0f6a16 100644 --- a/src/_config.scss +++ b/src/_config.scss @@ -54,3 +54,44 @@ $brand-gray-dark-1: scale-color($brand-gray, $lightness: $dark-1); $brand-gray-dark-2: scale-color($brand-gray, $lightness: $dark-2); $brand-gray-dark-3: scale-color($brand-gray, $lightness: $dark-3); $brand-gray-dark-4: scale-color($brand-gray, $lightness: $dark-4); + +$color_palette: ( + "black": $brand-gray-dark-4, + "white": white, + "primary": $brand-primary, + "primary-light-4": $brand-primary-light-4, + "primary-light-3": $brand-primary-light-3, + "primary-light-2": $brand-primary-light-2, + "primary-light-1": $brand-primary-light-1, + "primary-dark-1": $brand-primary-dark-1, + "primary-dark-2": $brand-primary-dark-2, + "primary-dark-3": $brand-primary-dark-3, + "primary-dark-4": $brand-primary-dark-4, + "accent": $brand-accent, + "accent-light-4": $brand-accent-light-4, + "accent-light-3": $brand-accent-light-3, + "accent-light-2": $brand-accent-light-2, + "accent-light-1": $brand-accent-light-1, + "accent-dark-1": $brand-accent-dark-1, + "accent-dark-2": $brand-accent-dark-2, + "accent-dark-3": $brand-accent-dark-3, + "accent-dark-4": $brand-accent-dark-4, + "warning": $brand-warning, + "warning-light-4": $brand-warning-light-4, + "warning-light-3": $brand-warning-light-3, + "warning-light-2": $brand-warning-light-2, + "warning-light-1": $brand-warning-light-1, + "warning-dark-1": $brand-warning-dark-1, + "warning-dark-2": $brand-warning-dark-2, + "warning-dark-3": $brand-warning-dark-3, + "warning-dark-4": $brand-warning-dark-4, + "gray": $brand-gray, + "gray-light-4": $brand-gray-light-4, + "gray-light-3": $brand-gray-light-3, + "gray-light-2": $brand-gray-light-2, + "gray-light-1": $brand-gray-light-1, + "gray-dark-1": $brand-gray-dark-1, + "gray-dark-2": $brand-gray-dark-2, + "gray-dark-3": $brand-gray-dark-3, + "gray-dark-4": $brand-gray-dark-4 +) diff --git a/src/_helpers.scss b/src/_helpers.scss index 39e7458..9971bad 100644 --- a/src/_helpers.scss +++ b/src/_helpers.scss @@ -60,3 +60,14 @@ $cases: (none, capitalize, uppercase, lowercase, full-width); text-transform: #{$case}; } } + +// COLORS +@each $color_name, $color_value in $color_palette { + .text-#{$color_name} { + color: #{$color_value}; + } + + .bg-#{$color_name} { + background-color: #{$color_value}; + } +} diff --git a/src/app/about-us/about-us.component.html b/src/app/about-us/about-us.component.html index 0cae140..f33b11b 100644 --- a/src/app/about-us/about-us.component.html +++ b/src/app/about-us/about-us.component.html @@ -1,43 +1,18 @@ -
-
+
+

About Us

What We Do

-
-
-
- -

{{c.title}}

-

{{c.description}}

- -
- -
- -
-
- -
-
- -

{{c.title}}

-

{{c.description}}

- -
+
+
+
+
- +
diff --git a/src/app/about-us/about-us.component.scss b/src/app/about-us/about-us.component.scss index 76e0871..064765d 100644 --- a/src/app/about-us/about-us.component.scss +++ b/src/app/about-us/about-us.component.scss @@ -6,113 +6,71 @@ background-image: url("/assets/images/about-us.jpg"); background-size: cover; background-repeat: no-repeat; - background-position: bottom left; min-height: 1600px; min-width: 100vw; + @media screen and (max-width: 599px) { background-image: none; } + @media screen and (min-width: 600px) and (max-width: 959px) { background-image: none; padding-left: 10%; padding-right: 10%; } + @media screen and (min-width: 960px) and (max-width: 1279px) { background-image: none; padding-left: 20%; padding-right: 20%; } + @media screen and (min-width: 1280px) and (max-width: 1919px) { background-position: 50% 80%; } + @media screen and (min-width: 1920px) and (max-width: 5000px) { background-position: 90% 90%; } + + &:before { + position: absolute; + content: ''; + background-color: $brand-gray; + height: 100%; + right: 0; + top: 0; + z-index: 0; + + @media screen and (max-width: 1279px) { width: 100%; } + @media screen and (min-width: 1280px) and (max-width: 1919px) { width: 50%; } + @media screen and (min-width: 1920px) and (max-width: 5000px) { width: 33.333%; } + } + + &:after { + @media screen and (min-width: 1280px) and (max-width: 1919px) { + position: absolute; + content: ''; + background-color: rgba(255, 255, 255, 0.8); + height: 100%; + left: 0; + top: 0; + z-index: 0; + width: 50%; + } + } + .title { + z-index: 1; margin-top: 80px; margin-left: 80px; + @media screen and (max-width: 1279px) { margin-left: 20px; margin-right: 20px; } h1 { color: $brand-primary; margin-bottom: 0; + @media screen and (max-width: 1279px) { color: $brand-primary-light-2; } + } + + h2 { + color: $brand-gray; + @media screen and (max-width: 1279px) { color: white; } } } .capabilities { - margin-top: 300px; - margin-left: 80px; - margin-right: 80px; - - ::ng-deep .capability-icon svg { - margin-top: -52px; - width: 128px; - height: 128px; - } - - .icon-left, - .icon-right { - position: relative; - background-color: transparent; - - &:after { - position: absolute; - left: 50%; - content: ''; - width: 2px; - } - } - } - - .even { - text-align: right; - - .details-left { - background-color: transparent; - h3 { color: $brand-primary-dark-1; } - } - .icon-left { - ::ng-deep .capability-icon svg path { fill: $brand-primary; } - - &:after { - @media screen and (min-width: 96px) { - bottom: 0; - height: calc(100% - 64px); - background-color: $brand-gray-light-3; - } - } - } - .icon-right { - &:after { - @media screen and (min-width: 96px) { - top: 0; - height: calc(100% - 40px); - background-color: $brand-gray-light-1; - } - } - } - .details-right { background-color: transparent; } - - &:first-of-type .icon-right:after { background-color: transparent; } - - &:last-of-type, - &:nth-last-of-type(2) { - .icon-left:after { background-color: transparent; } - } - } - - .odd { - text-align: left; - - .details-left { background-color: transparent; } - .icon-left { - &:after { - @media screen and (min-width: 96px) { - top: 0; - height: calc(100% - 40px); - background-color: $brand-gray-light-3; - } - } - } - .icon-right { - ::ng-deep .capability-icon svg path { fill: $brand-primary-light-1; } - - &:after { - @media screen and (min-width: 96px) { - bottom: 0; - height: calc(100% - 64px); - background-color: $brand-gray-light-1; - } - } - } - .details-right { - background-color: transparent; - color: white; - h3 { color: $brand-primary-light-2; } - } - - &:last-of-type .icon-right:after { background-color: transparent; } - &:last-of-type .icon-left:after { background-color: transparent; } + padding-bottom: 4em; + z-index: 1; } } + +.bg-about-us { + background-image: url("/assets/images/bg-about-us.jpg"); + background-size: cover; + background-repeat: no-repeat; + background-position: 75% 75%; + min-height: 75vh; + min-width: 100vw; +} diff --git a/src/app/about-us/about-us.component.ts b/src/app/about-us/about-us.component.ts index 6542100..4772aec 100644 --- a/src/app/about-us/about-us.component.ts +++ b/src/app/about-us/about-us.component.ts @@ -2,7 +2,7 @@ import {Component, ElementRef, HostListener, OnInit} from '@angular/core'; import {ApiService} from '../api.service'; import {Capability} from '../interfaces'; import {animations} from '../animation'; -import {getScrollState, isEven} from '../util'; +import {getScrollState} from '../util'; @Component({ selector: 'app-about-us', @@ -13,7 +13,6 @@ import {getScrollState, isEven} from '../util'; export class AboutUsComponent implements OnInit { capabilities: Capability[]; state = 'hide'; - isEven = isEven; constructor(private api: ApiService, public el: ElementRef) { this.api.getCapabilities().subscribe(c => this.capabilities = c); diff --git a/src/app/animation.ts b/src/app/animation.ts index 59a7030..8a127a6 100644 --- a/src/app/animation.ts +++ b/src/app/animation.ts @@ -26,8 +26,12 @@ export const fadeIn = animation( { params: { time: '1000ms', start: 1, end: 0, zIndex: 0 } } ); - -export function easingFn( t: number, b: number, c: number, d: number): number { +export function easingFn ( + t: number, + b: number, + c: number, + d: number +): number { if ((t /= d / 2) < 1) { return (c / 2) * t * t * t * t + b; } else { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6d6c737..923f9ef 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -38,6 +38,8 @@ import {EmailValidator, EmailValidatorMessage,} from './formly.validator'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {TeamMemberComponent} from './team-member/team-member.component'; import { CaseStudyComponent } from './case-study/case-study.component'; +import { CapabilityDetailsComponent } from './capability-details/capability-details.component'; +import { BrandValueComponent } from './brand-value/brand-value.component'; const routes: Routes = [ { @@ -80,6 +82,8 @@ export class FormlyConfig { HomeComponent, TeamMemberComponent, CaseStudyComponent, + CapabilityDetailsComponent, + BrandValueComponent, ], imports: [ BrowserAnimationsModule, diff --git a/src/app/brand-value/brand-value.component.html b/src/app/brand-value/brand-value.component.html new file mode 100644 index 0000000..e09c1e3 --- /dev/null +++ b/src/app/brand-value/brand-value.component.html @@ -0,0 +1,13 @@ +
+ +

{{brandValue.title}}

+

{{brandValue.description}}

+
diff --git a/src/app/brand-value/brand-value.component.scss b/src/app/brand-value/brand-value.component.scss new file mode 100644 index 0000000..c65337c --- /dev/null +++ b/src/app/brand-value/brand-value.component.scss @@ -0,0 +1,10 @@ +.logo-element { + ::ng-deep svg { + width: 64px; + height: 64px; + } +} + +.value { + margin-bottom: 2em; +} diff --git a/src/app/brand-value/brand-value.component.spec.ts b/src/app/brand-value/brand-value.component.spec.ts new file mode 100644 index 0000000..bbf74cb --- /dev/null +++ b/src/app/brand-value/brand-value.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BrandValueComponent } from './brand-value.component'; + +describe('BrandValueComponent', () => { + let component: BrandValueComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ BrandValueComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(BrandValueComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/brand-value/brand-value.component.ts b/src/app/brand-value/brand-value.component.ts new file mode 100644 index 0000000..75fe94f --- /dev/null +++ b/src/app/brand-value/brand-value.component.ts @@ -0,0 +1,37 @@ +import {Component, ElementRef, HostListener, Input, OnInit} from '@angular/core'; +import {animations} from '../animation'; +import {getScrollState} from '../util'; +import {BrandValue} from '../interfaces'; + +@Component({ + selector: 'app-brand-value', + templateUrl: './brand-value.component.html', + styleUrls: ['./brand-value.component.scss'], + animations: animations +}) +export class BrandValueComponent implements OnInit { + @Input() brandValue: BrandValue; + state = 'hide'; + + constructor(public el: ElementRef) { } + + ngOnInit() { + } + + highlight(elementId: string, on: boolean) { + const svgEl = document.getElementById(elementId) + + if (svgEl) { + if (on) { + svgEl.classList.add('highlight'); + } else { + svgEl.classList.remove('highlight'); + } + } + } + + @HostListener('window:scroll', ['$event']) + checkScroll() { + this.state = getScrollState(this.el); + } +} diff --git a/src/app/capability-details/capability-details.component.html b/src/app/capability-details/capability-details.component.html new file mode 100644 index 0000000..a4ddbef --- /dev/null +++ b/src/app/capability-details/capability-details.component.html @@ -0,0 +1,60 @@ +
+
+ +

{{capability.title}}

+

{{capability.description}}

+ +
+
+ +
+
+ +
+
+ +

{{capability.title}}

+

{{capability.description}}

+ +
+
+
+
+ +
+
+

{{capability.title}}

+

{{capability.description}}

+
+
diff --git a/src/app/capability-details/capability-details.component.scss b/src/app/capability-details/capability-details.component.scss new file mode 100644 index 0000000..ab05b2b --- /dev/null +++ b/src/app/capability-details/capability-details.component.scss @@ -0,0 +1,128 @@ +@import "../../config"; + +.capability-sm { + padding-left: 20px; + padding-right: 20px; + margin-bottom: 2em; + + ::ng-deep .capability-icon svg { + width: 128px; + height: 128px; + margin-bottom: -1em; + path { fill: $brand-primary-light-1; } + } + + h3 { + color: $brand-primary-light-2; + } + + .details { color: white; } +} + +@media screen and (min-width: 1280px) { + .capability { + ::ng-deep .capability-icon svg { + margin-top: -52px; + width: 128px; + height: 128px; + path { fill: $brand-primary-light-1; } + } + + .icon-left, + .icon-right { + position: relative; + background-color: transparent; + text-align: center; + min-width: 128px; + + &:after { + position: absolute; + left: 50%; + content: ''; + width: 2px; + } + } + + h3 { + color: $brand-primary-light-2; + } + + .details-left { + padding-left: 80px; + color: white; + } + + .details-right { + padding-right: 80px; + color: white; + } + + &.even { + text-align: right; + + .details-left { + background-color: transparent; + color: $brand-gray; + + h3 { color: $brand-primary-dark-1; } + } + + .icon-left { + ::ng-deep .capability-icon svg path { fill: $brand-primary; } + + &:after { + bottom: 0; + height: calc(100% - 64px); + background-color: $brand-gray-light-3; + } + } + .icon-right { + background-color: $brand-gray; + &:after { + top: 0; + height: calc(100% - 40px); + background-color: $brand-gray-light-1; + } + } + .details-right { background-color: $brand-gray; } + + &.first-row .icon-right:after { background-color: transparent; } + + &.last-row, + &.second-to-last-row { + .icon-left:after { background-color: transparent; } + } + } + + &.odd { + text-align: left; + + .details-left { background-color: transparent; } + .icon-left { + &:after { + top: 0; + height: calc(100% - 40px); + background-color: $brand-gray-light-3; + } + } + .icon-right { + background-color: $brand-gray; + ::ng-deep .capability-icon svg path { fill: $brand-primary-light-1; } + + &:after { + bottom: 0; + height: calc(100% - 64px); + background-color: $brand-gray-light-1; + } + } + .details-right { + background-color: $brand-gray; + color: white; + h3 { color: $brand-primary-light-2; } + } + + &.last-row .icon-right:after { background-color: transparent; } + &.last-row .icon-left:after { background-color: transparent; } + } + } +} diff --git a/src/app/capability-details/capability-details.component.spec.ts b/src/app/capability-details/capability-details.component.spec.ts new file mode 100644 index 0000000..4f9ad44 --- /dev/null +++ b/src/app/capability-details/capability-details.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CapabilityDetailsComponent } from './capability-details.component'; + +describe('CapabilityDetailsComponent', () => { + let component: CapabilityDetailsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CapabilityDetailsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CapabilityDetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/capability-details/capability-details.component.ts b/src/app/capability-details/capability-details.component.ts new file mode 100644 index 0000000..4b3854b --- /dev/null +++ b/src/app/capability-details/capability-details.component.ts @@ -0,0 +1,29 @@ +import {Component, ElementRef, HostListener, Input, OnInit} from '@angular/core'; +import {getScrollState, isEven} from '../util'; +import {Capability} from '../interfaces'; +import {animations} from '../animation'; + +@Component({ + selector: 'app-capability-details', + templateUrl: './capability-details.component.html', + styleUrls: ['./capability-details.component.scss'], + animations: animations +}) +export class CapabilityDetailsComponent implements OnInit { + @Input() capability: Capability; + @Input() index: number; + @Input() numTotal: number; + state = 'hide'; + isEven = isEven; + + constructor(public el: ElementRef) { + } + + ngOnInit() { + } + + @HostListener('window:scroll', ['$event']) + checkScroll() { + this.state = getScrollState(this.el); + } +} diff --git a/src/app/case-studies/case-studies.component.html b/src/app/case-studies/case-studies.component.html index aa28f4f..860965f 100644 --- a/src/app/case-studies/case-studies.component.html +++ b/src/app/case-studies/case-studies.component.html @@ -15,10 +15,10 @@