May 4th update

• new image overlays styles for dark blue • revised function for sizes • link color tweak
dlewand691 · May 4, 2020 · c78d227 · c78d227
1 parent 27c99d5
commit c78d227
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 38 deletions.
diff --git a/config.codekit3 b/config.codekit3
@@ -7,7 +7,7 @@
 		"uuidString": "6DBB5085-7DDA-44ED-8080-A7195DE1E875"
 		}
 	],
-"creatorBuild": "32137",
+"creatorBuild": "32147",
 "files": {
 	"/_BUILD": {
 		"ft": 65536,

diff --git a/scss/_settings.scss b/scss/_settings.scss
@@ -156,7 +156,7 @@ $code-font-weight: $global-weight-normal;
 $code-background: $light-gray;
 $code-border: 1px solid $medium-gray;
 $code-padding: rem-calc(2 5 1);
-$anchor-color: $success-color;
+$anchor-color: $green;
 $anchor-color-hover: scale-color($anchor-color, $lightness: -15%);
 $anchor-text-decoration: none;
 $anchor-text-decoration-hover: none;

diff --git a/scss/base/_colors.scss b/scss/base/_colors.scss
@@ -14,6 +14,20 @@ $blue-30: rgba($blue, 0.3) !default;
 $blue-50: rgba($blue, 0.5) !default;
 $blue-60: rgba($blue, 0.6) !default;
 $blue-85: rgba($blue, 0.85) !default;
+$blue-dark-05: rgba($blue-dark, 0.05) !default;
+$blue-dark-10: rgba($blue-dark, 0.1) !default;
+$blue-dark-15: rgba($blue-dark, 0.15) !default;
+$blue-dark-30: rgba($blue-dark, 0.3) !default;
+$blue-dark-50: rgba($blue-dark, 0.5) !default;
+$blue-dark-60: rgba($blue-dark, 0.6) !default;
+$blue-dark-85: rgba($blue-dark, 0.85) !default;
+$blue-light-05: rgba($blue-light, 0.05) !default;
+$blue-light-10: rgba($blue-light, 0.1) !default;
+$blue-light-15: rgba($blue-light, 0.15) !default;
+$blue-light-30: rgba($blue-light, 0.3) !default;
+$blue-light-50: rgba($blue-light, 0.5) !default;
+$blue-light-60: rgba($blue-light, 0.6) !default;
+$blue-light-85: rgba($blue-light, 0.85) !default;
 $white-05: rgba($white, 0.05) !default;
 $white-10: rgba($white, 0.1) !default;
 $white-15: rgba($white, 0.15) !default;
@@ -52,6 +66,18 @@ $cog-color-palette: (
   blue-30       : $blue-30,
   blue-60       : $blue-60,
   blue-85       : $blue-85,
+  blue-dark-05  : $blue-dark-05,
+  blue-dark-10  : $blue-dark-10,
+  blue-dark-15  : $blue-dark-15,
+  blue-dark-30  : $blue-dark-30,
+  blue-dark-60  : $blue-dark-60,
+  blue-dark-85  : $blue-dark-85,
+  blue-light-05 : $blue-light-05,
+  blue-light-10 : $blue-light-10,
+  blue-light-15 : $blue-light-15,
+  blue-light-30 : $blue-light-30,
+  blue-light-60 : $blue-light-60,
+  blue-light-85 : $blue-light-85,
   white-05      : $white-05,
   white-10      : $white-10,
   white-15      : $white-15,
@@ -124,12 +150,12 @@ $button-palette: (
 @media (prefers-color-scheme: dark) {
 
   $cog-color-palette: (
-    "blue"     : $blue-medium,
-    "white"    : invert($white),
-    gray-light : invert($black-15),
-    gray-medium: invert($black-30),
-    gray-dark  : invert($black-60),
-    "black"    : invert($black)
+    // "blue"     : $blue-medium,
+    // "white"    : invert($white),
+    // gray-light : invert($black-15),
+    // gray-medium: invert($black-30),
+    // gray-dark  : invert($black-60),
+    // "black"    : invert($black)
   );
 
   :root {

diff --git a/scss/base/_image-overlays.scss b/scss/base/_image-overlays.scss
@@ -66,6 +66,15 @@
   }
 }
 
+.gradient-overlay-blue-dark {
+  position: relative;
+
+  &::after {
+    background-image: linear-gradient(to bottom, rgba($blue-dark,0) 0%,rgba($blue-dark,0) 50%,rgba($blue-dark,1) 100%);
+    @include gradient-overlay-image;
+  }
+}
+
 .gradient-overlay-black {
   position: relative;
 
@@ -93,6 +102,15 @@
   }
 }
 
+.gradient-overlay-blue-dark-full {
+  position: relative;
+
+  &::after {
+    background-image: linear-gradient(to bottom, rgba($blue-dark, 0) 20%, rgba($blue-dark, 0.7) 65%);
+    @include gradient-overlay-image-full;
+  }
+}
+
 .gradient-overlay-black-full {
   position: relative;
 
@@ -110,6 +128,15 @@
     @include gradient-overlay-image-full;
   }
 }
+
+.gradient-overlay-blue-dark-angled {
+  position: relative;
+
+  &::after {
+    background-image: linear-gradient(135deg, rgba($blue-dark, 0) 30%, rgba($blue-dark, 0.7) 80%);
+    @include gradient-overlay-image-full;
+  }
+}
 // -----  End of IMAGE GRADIENT OVERLAY  ---------------------------------------------
 
 // ===================================================================================

diff --git a/scss/base/_sizes.scss b/scss/base/_sizes.scss
@@ -7,31 +7,42 @@
 // ===================================================================================
 
 $widths: 20;
-@for $i from 1 through $widths {
-  .w#{$i*5} {
-    width: $i*5%;
-    // max-width: $i*5%;
-  }
-}
-@for $i from 1 through $widths {
-  .max-w#{$i*5} {
-    max-width: $i*5%;
-  }
-}
-@for $i from 1 through $widths {
-  .min-w#{$i*5} {
-    min-width: $i*5%;
-  }
-}
-
 @each $size in $breakpoint-classes {
   @include breakpoint($size) {
-    .#{$size}-w66 {
-      width: 66%;
-    }
+    @for $i from 1 through $widths {
+      @if $size != $-zf-zero-breakpoint {
+        .#{$size}-w#{$i*5} {
+          width: $i*5%;
+        }
+
+        .#{$size}-max-w#{$i*5} {
+          max-width: $i*5%;
+        }
+
+        .#{$size}-min-w#{$i*5} {
+          min-width: $i*5%;
+        }
+      } @else {
+        .w#{$i*5} {
+          width: $i*5%;
+        }
+
+        .max-w#{$i*5} {
+          max-width: $i*5%;
+        }
+
+        .min-w#{$i*5} {
+          min-width: $i*5%;
+        }
+      }
 
-    .#{$size}-w33 {
-      width: 33%;
+      .#{$size}-w66 {
+        width: 66%;
+      }
+
+      .#{$size}-w33 {
+        width: 33%;
+      }
     }
   }
 }

diff --git a/scss/base/_typography.scss b/scss/base/_typography.scss
@@ -430,8 +430,10 @@ strong {
 
 =========================================================================================== */
 a,
+a:hover,
 a:link {
   font-weight: $global-weight-bold;
+  transition : all 0.3s ease;
 
   &:last-of-type {
     margin-bottom: 0;
@@ -452,6 +454,13 @@ a.link-coverAll:before {
   bottom  : 0;
 }
 
+.link-white {
+  a,
+  a:link {
+    color: $white !important;
+  }
+}
+
 /* ----  End of LINKS  -------------------------------------------------------------------------- */
 
 // =============================================================================================
@@ -490,13 +499,6 @@ a.link-coverAll:before {
   }
 }
 
-.link-white {
-  a,
-  a:link {
-    color: $white;
-  }
-}
-
 .text-wrap {
   white-space: normal;
 }

diff --git a/scss/cognizant-framework-2020.scss b/scss/cognizant-framework-2020.scss
@@ -216,4 +216,4 @@ $themeColor: $green;
 // ██   ██ ██   ██ ██   ██ ██  ██      ██  ██  ██ ██    ██ ██   ██ ██
 // ██████  ██   ██ ██   ██ ██   ██     ██      ██  ██████  ██████  ███████
 // ===================================================================================
-// @import "base/dark-mode";
+//- @import "base/dark-mode";