Merge branch 'feature/redesign' of github.com:sartography/sartography-website into feature/redesign
This commit is contained in:
Dan Funk
commit
69f7a1b6ff
|
|
@ -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
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,43 +1,18 @@
|
|||
<div class="about-us" fxLayout="column" fxLayout.gt-md="row" [@scrollAnimation]="state" fxLayoutAlign="start start">
|
||||
<div class="title" fxFlex="30%">
|
||||
<div class="about-us" fxLayout="column" fxLayoutAlign="start start">
|
||||
<div class="title">
|
||||
<h1 class="mat-display-1">About Us</h1>
|
||||
<h2 class="mat-display-3">What We Do</h2>
|
||||
</div>
|
||||
<div class="capabilities" fxFlex="67%" fxLayout="column">
|
||||
<div
|
||||
*ngFor="let c of capabilities; let i = index"
|
||||
gdColumns="1fr"
|
||||
gdColumns.gt-md="3fr 1fr 1fr 3fr"
|
||||
[ngClass]="isEven(i, 'even', 'odd')"
|
||||
>
|
||||
<div class="details-left">
|
||||
<ng-container *ngIf="isEven(i)">
|
||||
<h3>{{c.title}}</h3>
|
||||
<p>{{c.description}}</p>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<div class="icon-left">
|
||||
<span
|
||||
*ngIf="isEven(i)"
|
||||
[inlineSVG]="c.icon_url"
|
||||
class="capability-icon"
|
||||
></span>
|
||||
</div>
|
||||
<div class="icon-right">
|
||||
<span
|
||||
*ngIf="!isEven(i)"
|
||||
[inlineSVG]="c.icon_url"
|
||||
class="capability-icon"
|
||||
></span>
|
||||
</div>
|
||||
<div class="details-right">
|
||||
<ng-container *ngIf="!isEven(i)">
|
||||
<h3>{{c.title}}</h3>
|
||||
<p>{{c.description}}</p>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div fxLayout="column" fxLayout.gt-lg="row">
|
||||
<div fxHide fxShow.gt-lg fxFlex.xl="33.333%"></div>
|
||||
<div class="capabilities" fxFlex.xl="66.667%" fxLayout="column">
|
||||
<app-capability-details
|
||||
*ngFor="let c of capabilities; let i = index"
|
||||
[capability]="c"
|
||||
[index]="i"
|
||||
[numTotal]="capabilities.length"
|
||||
></app-capability-details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-about-us" fxShow fxHide.gt-md></div>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
<div
|
||||
(mouseover)="highlight(brandValue.id, true)"
|
||||
(mouseout)="highlight(brandValue.id, false)"
|
||||
gdRows="auto auto auto"
|
||||
gdGridAlign="center center"
|
||||
gdAlignRows="center center"
|
||||
class="value"
|
||||
[@scrollAnimation]="state"
|
||||
>
|
||||
<span inlineSVG="{{brandValue.icon_url}}" class="logo-element"></span>
|
||||
<h3>{{brandValue.title}}</h3>
|
||||
<p class="mat-caption">{{brandValue.description}}</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
.logo-element {
|
||||
::ng-deep svg {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
|
@ -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<BrandValueComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ BrandValueComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(BrandValueComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<div
|
||||
fxHide
|
||||
fxShow.gt-md
|
||||
gdColumns.gt-md="3fr 1fr 1fr 3fr"
|
||||
[ngClass]="{
|
||||
'capability': true,
|
||||
'even': isEven(index),
|
||||
'odd': !isEven(index),
|
||||
'first-row': index === 0,
|
||||
'last-row': index + 1 === numTotal,
|
||||
'second-to-last-row': index + 2 === numTotal
|
||||
}"
|
||||
[@scrollAnimation]="state"
|
||||
>
|
||||
<div class="details-left" [fxHide]="!isEven(index)" fxShow.gt-md>
|
||||
<ng-container *ngIf="isEven(index)">
|
||||
<h3>{{capability.title}}</h3>
|
||||
<p>{{capability.description}}</p>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="icon-left" [fxHide]="!isEven(index)" fxShow.gt-md>
|
||||
<span
|
||||
*ngIf="isEven(index)"
|
||||
[inlineSVG]="capability.icon_url"
|
||||
class="capability-icon"
|
||||
></span>
|
||||
</div>
|
||||
<div class="icon-right" [fxHide]="isEven(index)" fxShow.gt-md>
|
||||
<span
|
||||
*ngIf="!isEven(index)"
|
||||
[inlineSVG]="capability.icon_url"
|
||||
class="capability-icon"
|
||||
></span>
|
||||
</div>
|
||||
<div class="details-right" [fxHide]="isEven(index)" fxShow.gt-md>
|
||||
<ng-container *ngIf="!isEven(index)">
|
||||
<h3>{{capability.title}}</h3>
|
||||
<p>{{capability.description}}</p>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="capability-sm"
|
||||
fxShow
|
||||
fxHide.gt-md
|
||||
fxLayout="column"
|
||||
fxLayoutAlign="center center"
|
||||
[@scrollAnimation]="state"
|
||||
>
|
||||
<div class="icon">
|
||||
<span
|
||||
[inlineSVG]="capability.icon_url"
|
||||
class="capability-icon"
|
||||
></span>
|
||||
</div>
|
||||
<div class="details">
|
||||
<h3>{{capability.title}}</h3>
|
||||
<p>{{capability.description}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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<CapabilityDetailsComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ CapabilityDetailsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(CapabilityDetailsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -15,10 +15,10 @@
|
|||
|
||||
<div
|
||||
*ngIf="isExpanded && selectedStudyId && selectedStudy"
|
||||
@fadeInOut
|
||||
class="selected-case-study"
|
||||
fxLayout="column"
|
||||
fxLayoutGap="20px"
|
||||
[@scrollAnimation]="expandedState"
|
||||
>
|
||||
<button mat-fab color="primary" (click)="toggleExpanded(selectedStudy.id)" id="back">
|
||||
<mat-icon>arrow_back</mat-icon>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
@import "../../config";
|
||||
|
||||
h1 {
|
||||
margin: 80px;
|
||||
padding: 80px;
|
||||
max-width: 1280px;
|
||||
@media screen and (max-width: 599px) { padding-left: 20px; padding-right: 20px; }
|
||||
@media screen and (min-width: 600px) and (max-width: 959px) { padding-left: 10%; padding-right: 10%; }
|
||||
@media screen and (min-width: 960px) and (max-width: 1279px) { padding-left: 20%; padding-right: 20%; }
|
||||
}
|
||||
|
||||
.case-studies {
|
||||
|
|
@ -20,7 +24,6 @@ h1 {
|
|||
background-color: $brand-gray;
|
||||
z-index: 1000;
|
||||
overflow: auto;
|
||||
transition: all 1s ease-in-out;
|
||||
|
||||
@media screen and (max-width: 599px) { padding: 2em; }
|
||||
@media screen and (min-width: 600px) and (max-width: 959px) { padding: 4em; }
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ export class CaseStudiesComponent implements OnInit {
|
|||
selectedStudy: CaseStudy;
|
||||
selectedStudyId: string;
|
||||
isExpanded = false;
|
||||
expandedState = 'hide';
|
||||
isEven = isEven;
|
||||
bgClasses = [
|
||||
'bg-primary',
|
||||
|
|
@ -42,6 +43,8 @@ export class CaseStudiesComponent implements OnInit {
|
|||
} else {
|
||||
this.isExpanded = !this.isExpanded;
|
||||
}
|
||||
|
||||
this.expandedState = this.isExpanded ? 'show' : 'hide';
|
||||
}
|
||||
|
||||
getColumnSize(c: CaseStudy): string {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<div
|
||||
class="case-study"
|
||||
fxFlexAlign="{{isEven(index) ? 'start' : 'end'}}"
|
||||
fxHide
|
||||
fxShow.gt-sm
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="{{isEven(index) ? 'start' : 'end'}} center"
|
||||
fxLayoutGap="20px"
|
||||
|
|
@ -14,3 +16,20 @@
|
|||
</div>
|
||||
<img *ngIf="!isEven(index)" class="thumbnail" src="{{ caseStudy.featureLink }}">
|
||||
</div>
|
||||
<div
|
||||
class="case-study"
|
||||
fxFlexAlign="start"
|
||||
fxShow
|
||||
fxHide.gt-sm
|
||||
fxLayout="column"
|
||||
fxLayoutAlign="start center"
|
||||
fxLayoutGap="20px"
|
||||
[@scrollAnimation]="state"
|
||||
>
|
||||
<img class="thumbnail" src="{{ caseStudy.featureLink }}">
|
||||
<div>
|
||||
<h3>{{caseStudy.organizationName}}</h3>
|
||||
<h2>{{ caseStudy.projectName }}</h2>
|
||||
<h4>{{ caseStudy.tagLine }}</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,10 @@
|
|||
class="contact-us"
|
||||
[@scrollAnimation]="state"
|
||||
>
|
||||
<h1>Contact Us</h1>
|
||||
<div class="container form-container">
|
||||
<div class="margin-bottom-2">
|
||||
<h1>Contact Us</h1>
|
||||
</div>
|
||||
<form
|
||||
ngNoForm
|
||||
action="https://formspree.io/xbnvblvx"
|
||||
|
|
@ -17,7 +19,7 @@
|
|||
<div
|
||||
fxLayout="column"
|
||||
fxLayoutGap="2%"
|
||||
fxLayoutAlign="center"
|
||||
fxLayoutAlign="center start"
|
||||
>
|
||||
<div
|
||||
id="error_message"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
@import "../../config";
|
||||
|
||||
.contact-us {
|
||||
padding: 80px;
|
||||
background-color: $brand-gray-light-4;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,16 @@
|
|||
<footer
|
||||
class="footer"
|
||||
gdColumns="3fr 1fr"
|
||||
gdAlignColumns="center center"
|
||||
fxLayout="column"
|
||||
fxLayout.gt-md="row wrap"
|
||||
fxLayoutAlign="center center"
|
||||
>
|
||||
<div [@scrollAnimation]="state">
|
||||
<div [@scrollAnimation]="state" fxFlex="75%">
|
||||
<span class="footer-logo" inlineSVG="/assets/logo/Sartography-Logo-Horizontal-White.svg"></span>
|
||||
</div>
|
||||
|
||||
<div fxFlex="50%" [@scrollAnimation]="state">
|
||||
<div [@scrollAnimation]="state" fxFlex="25%">
|
||||
<address class="mat-body-1">
|
||||
Sartography<br>
|
||||
<span class="text-primary">Sartography</span><br>
|
||||
c/o Staunton Makerspace<br>
|
||||
20 S. Jefferson Street<br>
|
||||
Staunton VA 24401<br>
|
||||
|
|
@ -18,6 +19,5 @@
|
|||
</address>
|
||||
</div>
|
||||
|
||||
|
||||
<p>Copyright © {{today | date:'yyyy'}} Sartography LLC. All Rights Reserved.</p>
|
||||
<p fxFlex="100%" class="mat-caption copyright">Copyright © {{today | date:'yyyy'}} Sartography LLC. All Rights Reserved.</p>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -2,15 +2,20 @@
|
|||
|
||||
footer {
|
||||
background-color: $brand-gray;
|
||||
color: white;
|
||||
|
||||
::ng-deep .footer-logo svg {
|
||||
max-width: 100%;
|
||||
max-height: 400px;
|
||||
max-height: 25vh;
|
||||
}
|
||||
|
||||
address {
|
||||
color: white;
|
||||
font-style: normal;
|
||||
a { color: white; }
|
||||
}
|
||||
|
||||
.copyright {
|
||||
margin-top: 2em;
|
||||
text-align: center;
|
||||
color: $brand-gray-light-1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
@import "../../config";
|
||||
|
||||
button.toggle-menu {
|
||||
.toggle-menu {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 101;
|
||||
background-color: $brand-primary;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
|
||||
#menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -1,43 +1,22 @@
|
|||
<div class="logo-values" [@scrollAnimation]="state">
|
||||
<h1>Our Values</h1>
|
||||
<div class="margin-bottom-3">
|
||||
<h1>Our Values</h1>
|
||||
</div>
|
||||
<div
|
||||
fxLayout="column"
|
||||
fxLayout.gt-md="row"
|
||||
fxLayoutAlign="start start"
|
||||
fxLayoutGap="80px"
|
||||
fxLayoutGap="0px"
|
||||
fxLayoutGap.gt-md="80px"
|
||||
>
|
||||
<div fxFlex="33%" gdRows="auto">
|
||||
<div
|
||||
*ngFor="let v of brandValuesLeft"
|
||||
(mouseover)="highlight(v.id, true)"
|
||||
(mouseout)="highlight(v.id, false)"
|
||||
gdRows="auto auto auto"
|
||||
gdGridAlign="center center"
|
||||
gdAlignRows="center center"
|
||||
class="value"
|
||||
>
|
||||
<span inlineSVG="{{v.icon_url}}" class="logo-element"></span>
|
||||
<h3>{{v.title}}</h3>
|
||||
<p class="mat-caption">{{v.description}}</p>
|
||||
</div>
|
||||
<app-brand-value *ngFor="let v of brandValuesLeft" [brandValue]="v"></app-brand-value>
|
||||
</div>
|
||||
<div fxFlex="33%" fxHide fxShow.gt-md>
|
||||
<span inlineSVG="/assets/logo/Sartography-Logo-Elements.svg" class="logo-animated"></span>
|
||||
</div>
|
||||
<div fxFlex="33%" gdRows="auto" gdGridAlign="end stretch">
|
||||
<div
|
||||
*ngFor="let v of brandValuesRight"
|
||||
(mouseover)="highlight(v.id, true)"
|
||||
(mouseout)="highlight(v.id, false)"
|
||||
gdRows="auto auto auto"
|
||||
gdGridAlign="center center"
|
||||
gdAlignRows="center center"
|
||||
class="value"
|
||||
>
|
||||
<span inlineSVG="{{v.icon_url}}" class="logo-element"></span>
|
||||
<h3>{{v.title}}</h3>
|
||||
<p class="mat-caption">{{v.description}}</p>
|
||||
</div>
|
||||
<app-brand-value *ngFor="let v of brandValuesRight" [brandValue]="v"></app-brand-value>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,8 @@
|
|||
.logo-values {
|
||||
padding: 80px;
|
||||
|
||||
.logo-element {
|
||||
::ng-deep svg {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
@media screen and (max-width: 599px) { padding-left: 20px; padding-right: 20px; }
|
||||
@media screen and (min-width: 600px) and (max-width: 959px) { padding-left: 10%; padding-right: 10%; }
|
||||
@media screen and (min-width: 960px) and (max-width: 1279px) { padding-left: 20%; padding-right: 20%; }
|
||||
}
|
||||
|
||||
.logo-animated {
|
||||
|
|
|
|||
|
|
@ -28,14 +28,6 @@ export class LogoValuesComponent implements OnInit {
|
|||
|
||||
ngOnInit() {}
|
||||
|
||||
highlight(elementId: string, on: boolean) {
|
||||
if (on) {
|
||||
document.getElementById(elementId).classList.add('highlight');
|
||||
} else {
|
||||
document.getElementById(elementId).classList.remove('highlight');
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('window:scroll', ['$event'])
|
||||
checkScroll() {
|
||||
this.state = getScrollState(this.el);
|
||||
|
|
|
|||
|
|
@ -8,8 +8,6 @@
|
|||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.text-white { color: white; }
|
||||
.text-black { color: $brand-gray; }
|
||||
.full-width-heading {
|
||||
width: 100%;
|
||||
color: white;
|
||||
|
|
|
|||
|
|
@ -20,17 +20,17 @@
|
|||
<a
|
||||
*ngIf="teamMember.gitHubLink"
|
||||
[href]="teamMember.gitHubLink"
|
||||
mat-flat-button
|
||||
mat-button
|
||||
target="_blank"
|
||||
class="btn-github"
|
||||
class="btn-github mat-elevation-z0"
|
||||
matTooltip="{{teamMember.firstName}}'s GitHub Profile"
|
||||
><span inlineSVG="/assets/icons/github.svg"></span></a>
|
||||
<a
|
||||
*ngIf="teamMember.linkedInLink"
|
||||
[href]="teamMember.linkedInLink"
|
||||
mat-flat-button
|
||||
mat-button
|
||||
target="_blank"
|
||||
class="btn-linkedin"
|
||||
class="btn-linkedin mat-elevation-z0"
|
||||
matTooltip="{{teamMember.firstName}}'s LinkedIn Profile"
|
||||
><span inlineSVG="/assets/icons/linkedin.svg"></span></a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
::ng-deep .btn-github svg { fill: #181717; }
|
||||
::ng-deep .btn-linkedin svg { fill: #0077B5; }
|
||||
::ng-deep .btn-github svg { fill: white; }
|
||||
::ng-deep .btn-linkedin svg { fill: white; }
|
||||
|
||||
.team-avatar img {
|
||||
border-radius: 100%;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<h1>Our Team</h1>
|
||||
<div
|
||||
class="team container"
|
||||
>
|
||||
<app-team-member *ngFor="let t of teamMembers; let i = index" [teamMember]="t" [index]="i"></app-team-member>
|
||||
<div class="bg-primary-dark-1 text-white">
|
||||
<h1>Our Team</h1>
|
||||
<div
|
||||
class="team container"
|
||||
>
|
||||
<app-team-member *ngFor="let t of teamMembers; let i = index" [teamMember]="t" [index]="i"></app-team-member>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
h1 {
|
||||
margin: 80px;
|
||||
}
|
||||
.team {
|
||||
h1, .team {
|
||||
padding: 80px;
|
||||
max-width: 1280px;
|
||||
@media screen and (max-width: 599px) { padding-left: 20px; padding-right: 20px; }
|
||||
@media screen and (min-width: 600px) and (max-width: 959px) { padding-left: 10%; padding-right: 10%; }
|
||||
@media screen and (min-width: 960px) and (max-width: 1279px) { padding-left: 20%; padding-right: 20%; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@ export const isEven = (i: number, ifTrue?: string, ifFalse?: string): string | b
|
|||
|
||||
export const getScrollState = (el: ElementRef): string => {
|
||||
const hOffset = window.innerHeight * 0.75;
|
||||
const componentPosition = el.nativeElement.offsetTop;
|
||||
const nativeEl: HTMLElement = el.nativeElement;
|
||||
const componentPosition = nativeEl.offsetTop;
|
||||
const scrollPosition = window.pageYOffset + hOffset;
|
||||
return scrollPosition >= componentPosition ? 'show' : 'hide';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,3 +24,4 @@
|
|||
</div>
|
||||
<div class="bg-welcome" [@scrollAnimation]="state" fxFlex.gt-md="50%"></div>
|
||||
</div>
|
||||
<div class="bg-welcome-xs" [@scrollAnimation]="state" fxShow fxHide.gt-md></div>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,16 @@
|
|||
.bg-welcome {
|
||||
z-index: 0;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(255, 255, 255, 1),
|
||||
rgba(255, 255, 255, 1) 10%,
|
||||
rgba(255, 255, 255, 0) 50%
|
||||
),
|
||||
url("/assets/images/welcome.jpg");
|
||||
background-color: white;
|
||||
background-image: url("/assets/images/welcome.jpg");
|
||||
background-size: cover;
|
||||
background-position: center right;
|
||||
border-left: white 2px solid;
|
||||
|
||||
@media screen and (max-width: 599px) { background-image: none; }
|
||||
@media screen and (min-width: 600px) and (max-width: 959px) { background-image: none; }
|
||||
@media screen and (min-width: 960px) and (max-width: 1279px) { background-image: none; }
|
||||
@media screen and (min-width: 1280px) and (max-width: 1919px) { height: 100vh; }
|
||||
@media screen and (min-width: 1920px) and (max-width: 5000px) { height: 100vh; }
|
||||
}
|
||||
|
||||
.color-tile {
|
||||
|
|
@ -19,3 +18,12 @@
|
|||
width: 72px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.bg-welcome-xs {
|
||||
background-image: url("/assets/images/welcome.jpg");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 75% 75%;
|
||||
min-height: 75vh;
|
||||
min-width: 100vw;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 683 KiB After Width: | Height: | Size: 667 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 626 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
|
|
@ -57,11 +57,11 @@
|
|||
"id": "jim_rutt_reddit_analyzer",
|
||||
"projectName": "Reddit Analyzer",
|
||||
"tagLine": "Natural Language Processing",
|
||||
"description": "Reddit is a news aggregation and discussion forum that provides access to millions of comments, discussions, and news postings. Jim Rutt's Staunton Research project was working with a natural language processor to test a number of theories, and was looking for ways to speed up and automate his existing prototype. To help, we decided to use ElasticSearch, a search engine with a number of powerful processing features. Elastic Search is blazing fast, and provides a suite of tools that helped make the desired analysis efficient and maintainable even when running constantly for months, and managing millions of records",
|
||||
"description": "Reddit is a news aggregation and discussion forum that provides access to millions of comments, discussions, and news postings. Jim Rutt's Staunton Research project was working with a natural language processor to test a number of theories, and was looking for ways to speed up and automate his existing prototype. To help, we decided to use ElasticSearch, a search engine with a number of powerful processing features. ElasticSearch is blazing fast, and provides a suite of tools that helped make the desired analysis efficient and maintainable even when running constantly for months, and managing millions of records",
|
||||
"organizationName": "Staunton Research",
|
||||
"websiteLink": "",
|
||||
"gitHubLink": "",
|
||||
"imageLink": "assets/images/case-studies/reddit.png",
|
||||
"imageLink": "assets/images/case-studies/reddit-analyzer.png",
|
||||
"featureLink": "assets/images/case-studies/elastic.png",
|
||||
"testimonials": [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -11,18 +11,6 @@
|
|||
"gitHubLink": "https://github.com/danfunk",
|
||||
"linkedInLink": "https://www.linkedin.com/in/funkdan/"
|
||||
},
|
||||
{
|
||||
"firstName": "Aaron",
|
||||
"lastName": "Louie",
|
||||
"title": "Senior Developer & User Experience Architect",
|
||||
"description": [
|
||||
"Aaron is a serial entrepreneur and freelance Creative Director who draws from over 16 years of experience in web design, UX, information architecture, interaction design, user research, usability, and content strategy consulting. In addition to his work with Sartography, Aaron is involved with multiple entrepreneurial community initiatives aimed at nurturing a vibrant startup ecosystem in the Shenandoah Valley. Aaron can step effortlessly from design to implementation with diverse skills and an endless desire to learn, delve, test, illicit incite, and define new futures.",
|
||||
"Aaron and his wife Kristen enjoy spending time exploring the abundant nature of the Shenandoah valley and sharing their love of art, music, and nature with their beautiful young daughter. You can find Aaron leaping effortlessly from oil painting to fashioning beautifully tuned musical instruments. He is a craftsman of the highest order, with boundless energy for invention."
|
||||
],
|
||||
"imageLink": "assets/images/team/Aaron.jpg",
|
||||
"gitHubLink": "https://github.com/ajlouie",
|
||||
"linkedInLink": "https://www.linkedin.com/in/aaronjlouie/"
|
||||
},
|
||||
{
|
||||
"firstName": "Eleanor",
|
||||
"lastName": "Graham",
|
||||
|
|
@ -45,6 +33,18 @@
|
|||
"imageLink": "assets/images/team/Alex.jpg",
|
||||
"gitHubLink": "https://github.com/calexh-sar",
|
||||
"linkedInLink": "https://www.linkedin.com/in/alex-herron-b715783/"
|
||||
},
|
||||
{
|
||||
"firstName": "Aaron",
|
||||
"lastName": "Louie",
|
||||
"title": "Senior Developer & User Experience Architect",
|
||||
"description": [
|
||||
"Aaron is a serial entrepreneur and freelance Creative Director who draws from over 16 years of experience in web design, UX, information architecture, interaction design, user research, usability, and content strategy consulting. In addition to his work with Sartography, Aaron is involved with multiple entrepreneurial community initiatives aimed at nurturing a vibrant startup ecosystem in the Shenandoah Valley. Aaron can step effortlessly from design to implementation with diverse skills and an endless desire to learn, delve, test, illicit incite, and define new futures.",
|
||||
"Aaron and his wife Kristen enjoy spending time exploring the abundant nature of the Shenandoah valley and sharing their love of art, music, and nature with their beautiful young daughter. You can find Aaron leaping effortlessly from oil painting to fashioning beautifully tuned musical instruments. He is a craftsman of the highest order, with boundless energy for invention."
|
||||
],
|
||||
"imageLink": "assets/images/team/Aaron.jpg",
|
||||
"gitHubLink": "https://github.com/ajlouie",
|
||||
"linkedInLink": "https://www.linkedin.com/in/aaronjlouie/"
|
||||
}
|
||||
|
||||
]
|
||||
|
|
|
|||
|
|
@ -169,10 +169,10 @@ $sartography-theme: mat-light-theme(
|
|||
|
||||
|
||||
@media screen and (max-width: 599px) {
|
||||
h1, .mat-display-4 { font-size: 2.6rem !important; }
|
||||
h2, .mat-display-3 { font-size: 1.8rem !important; }
|
||||
h3, .mat-display-2 { font-size: 1.4rem !important; }
|
||||
h4, .mat-display-1 { font-size: 1.2rem !important; }
|
||||
h1, .mat-display-4 { font-size: 2.0rem !important; }
|
||||
h2, .mat-display-3 { font-size: 1.6rem !important; }
|
||||
h3, .mat-display-2 { font-size: 1.2rem !important; }
|
||||
h4, .mat-display-1 { font-size: 1.0rem !important; }
|
||||
}
|
||||
@media screen and (min-width: 600px) and (max-width: 959px) {
|
||||
h1, .mat-display-4 { font-size: 2.6rem !important; }
|
||||
|
|
@ -180,4 +180,7 @@ $sartography-theme: mat-light-theme(
|
|||
h3, .mat-display-2 { font-size: 1.4rem !important; }
|
||||
h4, .mat-display-1 { font-size: 1.2rem !important; }
|
||||
}
|
||||
|
||||
a { color: $brand-primary; }
|
||||
a:hover { color: $brand-accent; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,10 @@
|
|||
|
||||
@import "./helpers";
|
||||
|
||||
body, html {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.full-screen {
|
||||
background-color: #ffffff;
|
||||
padding: 80px;
|
||||
|
|
@ -14,6 +18,10 @@
|
|||
height: 100%;
|
||||
min-height: 100vh;
|
||||
|
||||
@media screen and (max-width: 599px) { padding-left: 20px; padding-right: 20px; }
|
||||
@media screen and (min-width: 600px) and (max-width: 959px) { padding-left: 10%; padding-right: 10%; }
|
||||
@media screen and (min-width: 960px) and (max-width: 1279px) { padding-left: 20%; padding-right: 20%; }
|
||||
|
||||
img.half-height {
|
||||
max-height: 50vh;
|
||||
margin: auto;
|
||||
|
|
@ -30,52 +38,16 @@
|
|||
max-width: 1280px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
|
||||
@media screen and (max-width: 599px) { padding-left: 20px; padding-right: 20px; }
|
||||
@media screen and (min-width: 600px) and (max-width: 959px) { padding-left: 10%; padding-right: 10%; }
|
||||
@media screen and (min-width: 960px) and (max-width: 1279px) { padding-left: 20%; padding-right: 20%; }
|
||||
}
|
||||
|
||||
|
||||
// COLORS
|
||||
.bg-primary { background-color: $brand-primary; }
|
||||
.bg-primary-light-1 { background-color: $brand-primary-light-1; }
|
||||
.bg-primary-light-2 { background-color: $brand-primary-light-2; }
|
||||
.bg-primary-light-3 { background-color: $brand-primary-light-3; }
|
||||
.bg-primary-light-4 { background-color: $brand-primary-light-4; }
|
||||
.bg-primary-dark-4 { background-color: $brand-primary-dark-4; }
|
||||
.bg-primary-dark-3 { background-color: $brand-primary-dark-3; }
|
||||
.bg-primary-dark-2 { background-color: $brand-primary-dark-2; }
|
||||
.bg-primary-dark-1 { background-color: $brand-primary-dark-1; }
|
||||
.bg-accent { background-color: $brand-accent; }
|
||||
.bg-accent-light-1 { background-color: $brand-accent-light-1; }
|
||||
.bg-accent-light-2 { background-color: $brand-accent-light-2; }
|
||||
.bg-accent-light-3 { background-color: $brand-accent-light-3; }
|
||||
.bg-accent-light-4 { background-color: $brand-accent-light-4; }
|
||||
.bg-accent-dark-4 { background-color: $brand-accent-dark-4; }
|
||||
.bg-accent-dark-3 { background-color: $brand-accent-dark-3; }
|
||||
.bg-accent-dark-2 { background-color: $brand-accent-dark-2; }
|
||||
.bg-accent-dark-1 { background-color: $brand-accent-dark-1; }
|
||||
.bg-warning { background-color: $brand-warning; }
|
||||
.bg-warning-light-1 { background-color: $brand-warning-light-1; }
|
||||
.bg-warning-light-2 { background-color: $brand-warning-light-2; }
|
||||
.bg-warning-light-3 { background-color: $brand-warning-light-3; }
|
||||
.bg-warning-light-4 { background-color: $brand-warning-light-4; }
|
||||
.bg-warning-dark-4 { background-color: $brand-warning-dark-4; }
|
||||
.bg-warning-dark-3 { background-color: $brand-warning-dark-3; }
|
||||
.bg-warning-dark-2 { background-color: $brand-warning-dark-2; }
|
||||
.bg-warning-dark-1 { background-color: $brand-warning-dark-1; }
|
||||
.bg-gray { background-color: $brand-gray; }
|
||||
.bg-gray-light-1 { background-color: $brand-gray-light-1; }
|
||||
.bg-gray-light-2 { background-color: $brand-gray-light-2; }
|
||||
.bg-gray-light-3 { background-color: $brand-gray-light-3; }
|
||||
.bg-gray-light-4 { background-color: $brand-gray-light-4; }
|
||||
.bg-gray-dark-4 { background-color: $brand-gray-dark-4; }
|
||||
.bg-gray-dark-3 { background-color: $brand-gray-dark-3; }
|
||||
.bg-gray-dark-2 { background-color: $brand-gray-dark-2; }
|
||||
.bg-gray-dark-1 { background-color: $brand-gray-dark-1; }
|
||||
|
||||
// BACKGROUND EFFECTS
|
||||
.gradient-overlay-section {
|
||||
background-color: white;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
|
|
|
|||
Loading…
Reference in New Issue