sartography
/
sartography-website
mirror of https://github.com/sartography/sartography-website.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds background and text color helpers

This commit is contained in:
Aaron Louie 2019-10-22 15:04:21 -04:00
parent cf1c969cf1
commit 907c2fc07b
4 changed files with 71 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/_config.scss
View File

@ -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
)

11
src/_helpers.scss
View File

@ -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};
}
}

11
src/sartography_material.scss
View File

@ -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; }
}

51
src/styles.scss
View File

@ -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,47 +38,12 @@
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;