Merge branch 'maintenance/StyleSheet-cleanup-extended' into develop

JeremyCaney · JeremyCaney · commit 1df0caaf36d8 · 2020-08-06T13:56:35.000-07:00
Finalized this round of optimizations and cleanup for the stylesheets This includes a number of bug fixes introduced by the initial round, as well as a few final optimizations which had initially been either missed or deferred. Performance - Implemented `preconnect` and `dns-prefetch` hints for expected external web requests (8c6b228) - Optimized splash screen image on home page by delivering multiples sizes and formats (16eb537) Bug Fixes - Fixed handling for the calls to action navigation, which should "stick" to the bottom () - Fixed implementation of Awesome Foundation Checkboxes, which had broke as part of the ASP.NET Core update (98d5e9f) - Fixed width of application cards on homepage so that hover correctly bleeds to edge of card (9af0647) - Fixed Owl Carousel navigation icons on homepage, which were reliant on the Font Awesome CSS classes (2e70ea5) Refactoring - Improved positioning of icons on new GoldSim styles (`blockquote.note`, `aside.help`) (aef4539) - Implemented @ktrunkey's optimization for handling the Lesson navigation list wrapping (430bc79)
diff --git a/Shared/Scripts/Views/Home.js b/Shared/Scripts/Views/Home.js
@@ -116,8 +116,8 @@
       autoHeight                : true,
       nav                       : true,
       navText                   : [
-        '<i class="fa fa-caret-left"></i>',
-        '<i class="fa fa-caret-right"></i>'
+        '<span class="previous"></span>',
+        '<span class="next"></span>'
       ],
       loop                      : false
     });
@@ -127,8 +127,8 @@
       autoHeight                : false,
       nav                       : true,
       navText                   : [
-        '<i class="fa fa-caret-left"></i>',
-        '<i class="fa fa-caret-right"></i>'
+        '<span class="previous"></span>',
+        '<span class="next"></span>'
       ],
       loop                      : false
     });
diff --git a/Shared/Styles/Base/_contentBoxes.scss b/Shared/Styles/Base/_contentBoxes.scss
@@ -196,6 +196,7 @@ aside.help {
   font-weight                   : bold;
   display                       : block;
   margin                        : rem-calc(16 44);
+  min-height                    : rem-calc(32);
   &:before {
     @include fa-icon;
     font-family                 : 'Font Awesome 5 Free';
@@ -204,13 +205,17 @@ aside.help {
     content                     : fa-content($fa-var-question-circle);
     padding-right               : rem-calc(12);
     margin-left                 : rem-calc(-44);
+    vertical-align              : middle;
   }
 }
 
 blockquote.note {
   display                       : block;
-  margin                        : rem-calc(16 44);
+  margin                        : rem-calc(0 44);
   border-left                   : none;
+  min-height                    : rem-calc(32);
+  margin-inline-start           : rem-calc(0);
+  padding-left                  : rem-calc(44);
   &:before {
     @include fa-icon;
     font-family                 : 'Font Awesome 5 Free';
@@ -219,5 +224,7 @@ blockquote.note {
     content                     : fa-content($fa-var-comment-alt);
     padding-right               : rem-calc(12);
     margin-left                 : rem-calc(-44);
+    position                    : relative;
+    top                         : rem-calc(14);
   }
 }
diff --git a/Shared/Styles/Style.scss b/Shared/Styles/Style.scss
@@ -52,7 +52,7 @@
 // @include foundation-pagination;
 // @include foundation-progress-bar;
 // @include foundation-slider;
-// @include foundation-sticky;
+@include foundation-sticky;
 // @include foundation-reveal;
 // @include foundation-switch;
 @include foundation-table;
diff --git a/Shared/Styles/Views/Courses.scss b/Shared/Styles/Views/Courses.scss
@@ -46,8 +46,8 @@ section.panel {
     margin-right                : rem-calc(24);
     font-size                   : rem-calc(16);
     li {
-      padding-left              : rem-calc(22);
-      text-indent               : rem-calc(-16);
+      padding-left              : rem-calc(20);
+      position                  : relative;
     }
     @include breakpoint(medium down) {
       padding-left              : rem-calc(8);
@@ -63,7 +63,9 @@ section.panel {
       }
     }
     a:before {
-      margin-left               : rem-calc(12);
+      position                  : absolute;
+      top                       : rem-calc(7);
+      left                      : rem-calc(1);
     }
     li.selected a {
       font-weight               : 600;
diff --git a/Shared/Styles/Views/Form.scss b/Shared/Styles/Views/Form.scss
@@ -15,6 +15,7 @@
 @import "variables";
 @import "foundation";
 @import "Helpers/helpers";
+@import "awesome-foundation6-checkbox/src/awesome-foundation6-checkbox";
 
 //----------------------------------------------------------------------------------------------
 // FOUNDATION DEPENDENCIES
@@ -117,6 +118,7 @@ textarea {
       left                      : 2px !important;
       width                     : 17px !important;
       height                    : 17px !important;
+      font-weight               : 700;
     }
   }
   input[type="radio"] {
@@ -142,6 +144,7 @@ span.radio {
     &:after {
       line-height               : 1.8 !important;
       color                     : $palette-black !important;
+      font-weight               : 700;
     }
   }
   input[type="checkbox"] {
diff --git a/Shared/Styles/Views/Home.scss b/Shared/Styles/Views/Home.scss
@@ -15,6 +15,8 @@
 @import "foundationSettings";
 @import "foundation";
 @import "Helpers/mixins";
+@import "fontawesome-free/scss/_mixins.scss";
+@import "fontawesome-free/scss/_variables.scss";
 
 //----------------------------------------------------------------------------------------------
 // FOUNDATION DEPENDENCIES
@@ -35,10 +37,40 @@ main {
     position                    : relative;
     padding                     : rem-calc(48 36);
     box-shadow                  : inset 0 0 9px 2px rgba(32, 32, 32, 0.75);
-    background                  : $palette-black url('/Images/Home/Splash.Background.png') no-repeat center center;
+    background-position         : center center;
+    background-repeat           : no-repeat;
+    background-color            : $palette-black;
     background-size             : cover;
+    @include breakpoint(small) {
+      background-image          : url('https://media.GoldSim.com/Images/Home/Splash/Splash.Background.640w.png');
+      @supports (background-image: url('https://media.GoldSim.com/Images/Home/Splash/Splash.Background.640w.webp')) {
+        background-image        : url('https://media.GoldSim.com/Images/Home/Splash/Splash.Background.640w.webp')
+      }
+    }
+    @include breakpoint(medium) {
+      background-image          : url('https://media.GoldSim.com/Images/Home/Splash/Splash.Background.1024w.png');
+      @supports (background-image: url('https://media.GoldSim.com/Images/Home/Splash/Splash.Background.1024w.webp')) {
+        background-image        : url('https://media.GoldSim.com/Images/Home/Splash/Splash.Background.1024w.webp')
+      }
+    }
     @include breakpoint(large) {
       padding                   : rem-calc(48 0 0);             // WAS rem-calc(80 0 0)
+      background-image          : url('https://media.GoldSim.com/Images/Home/Splash/Splash.Background.1366w.png');
+      @supports (background-image: url('https://media.GoldSim.com/Images/Home/Splash/Splash.Background.1366w.webp')) {
+        background-image        : url('https://media.GoldSim.com/Images/Home/Splash/Splash.Background.1366w.webp')
+      }
+    }
+    @include breakpoint(1400px) {
+      background-image          : url('https://media.GoldSim.com/Images/Home/Splash/Splash.Background.1920w.png');
+      @supports (background-image: url('https://media.GoldSim.com/Images/Home/Splash/Splash.Background.1920w.webp')) {
+        background-image        : url('https://media.GoldSim.com/Images/Home/Splash/Splash.Background.1920w.webp')
+      }
+    }
+    @include breakpoint(2000px) {
+      background-image          : url('https://media.GoldSim.com/Images/Home/Splash/Splash.Background.2500w.png');
+      @supports (background-image: url('https://media.GoldSim.com/Images/Home/Splash/Splash.Background.2500w.webp')) {
+        background-image        : url('https://media.GoldSim.com/Images/Home/Splash/Splash.Background.2500w.webp')
+      }
     }
     @include media-screen-wide-short() {
       padding                   : rem-calc(48 0 0);
@@ -187,7 +219,7 @@ main {
   // Applications
   &.applications {
     h2 {
-      margin                    : rem-calc(28) auto rem-calc(20);
+      margin                    : rem-calc(28) rem-calc(28) rem-calc(20);
       font-size                 : rem-calc(20);
       font-weight               : normal;
       text-align                : center;
@@ -317,29 +349,40 @@ main {
         width                   : rem-calc(80);
       }
       &.disabled {
-        i.fa {
+        span {
           display               : none;
         }
       }
-      i.fa {
+      span {
         position                : absolute;
         top                     : 40%;
         font-size               : rem-calc(32);
         color                   : lighten($palette-black, 44.5%);       // #959595
       }
     }
+    button span:before {
+      @include fa-icon;
+      font-family               : 'Font Awesome 5 Free';
+      font-weight               : 900;
+    }
     .owl-prev {
       left                      : 0;
-      i.fa {
+      span.previous {
         left                    : rem-calc(4);
+        &:before                {
+          content               : fa-content($fa-var-caret-left);
+        }
         @include breakpoint(medium) {
           left                  : rem-calc(42);
         }
       }
     }
     .owl-next {
       right                     : 0;
-      i.fa {
+      span.next {
+        &:before                {
+          content               : fa-content($fa-var-caret-right);
+        }
         right                   : rem-calc(4);
         @include breakpoint(medium) {
           right                 : rem-calc(42);
@@ -447,7 +490,7 @@ main {
       }
     }
     .card-section {
-      padding                   : rem-calc(0 28);
+      padding                   : rem-calc(0);
     }
     picture {
       overflow                  : hidden;
@@ -469,7 +512,7 @@ main {
         line-height             : 1.4;
         a {
           display               : block;
-          padding               : rem-calc(16 0);
+          padding               : rem-calc(16 28);
           font-weight           : normal;
           border                : 0 none transparent;
           &:hover,
diff --git a/Views/Layout/_Layout.cshtml b/Views/Layout/_Layout.cshtml
@@ -9,6 +9,11 @@
     <title>@(Model.MetaTitle?? Model.Title?? Model.Key) - GoldSim</title>
     <meta name="keywords" content="@Model.MetaKeywords" />
     <meta name="description" content="@Model.MetaDescription" />
+    <link rel="preconnect" href="https://www.google-analytics.com">
+    <link rel="preconnect" href="https://stats.g.doubleclick.net">
+    <link rel="preconnect" href="https://dc.services.visualstudio.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link rel="dns-prefetch" href="https://media.GoldSim.com">
     <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400&family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap">
     <link rel="preload" as="font" type="font/woff2" crossorigin href="/Shared/Fonts/Vendor/FontAwesome/fa-solid-900.woff2">
     <link rel="preload" as="font" type="font/woff2" crossorigin href="/Shared/Fonts/Vendor/FontAwesome/fa-regular-400.woff2">
diff --git a/gulpFile.js b/gulpFile.js
@@ -104,6 +104,7 @@ function scssTask() {
     .pipe(sass({
       includePaths: [
         './Shared/Styles',
+        './node_modules',
         './node_modules/foundation-sites/scss',
         './node_modules/@fortawesome'
       ]

Original file line number	Diff line number	Diff line change
`@@ -46,8 +46,8 @@ section.panel {`
`46`	`46`	`margin-right : rem-calc(24);`
`47`	`47`	`font-size : rem-calc(16);`
`48`	`48`	`li {`
`49`		`- padding-left : rem-calc(22);`
`50`		`- text-indent : rem-calc(-16);`
	`49`	`+ padding-left : rem-calc(20);`
	`50`	`+ position : relative;`
`51`	`51`	`}`
`52`	`52`	`@include breakpoint(medium down) {`
`53`	`53`	`padding-left : rem-calc(8);`
`@@ -63,7 +63,9 @@ section.panel {`
`63`	`63`	`}`
`64`	`64`	`}`
`65`	`65`	`a:before {`
`66`		`- margin-left : rem-calc(12);`
	`66`	`+ position : absolute;`
	`67`	`+ top : rem-calc(7);`
	`68`	`+ left : rem-calc(1);`
`67`	`69`	`}`
`68`	`70`	`li.selected a {`
`69`	`71`	`font-weight : 600;`
Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,7 @@`
`15`	`15`	`@import "variables";`
`16`	`16`	`@import "foundation";`
`17`	`17`	`@import "Helpers/helpers";`
	`18`	`+@import "awesome-foundation6-checkbox/src/awesome-foundation6-checkbox";`
`18`	`19`
`19`	`20`	`//----------------------------------------------------------------------------------------------`
`20`	`21`	`// FOUNDATION DEPENDENCIES`
`@@ -117,6 +118,7 @@ textarea {`
`117`	`118`	`left : 2px !important;`
`118`	`119`	`width : 17px !important;`
`119`	`120`	`height : 17px !important;`
	`121`	`+ font-weight : 700;`
`120`	`122`	`}`
`121`	`123`	`}`
`122`	`124`	`input[type="radio"] {`
`@@ -142,6 +144,7 @@ span.radio {`
`142`	`144`	`&:after {`
`143`	`145`	`line-height : 1.8 !important;`
`144`	`146`	`color : $palette-black !important;`
	`147`	`+ font-weight : 700;`
`145`	`148`	`}`
`146`	`149`	`}`
`147`	`150`	`input[type="checkbox"] {`
Original file line number	Diff line number	Diff line change
`@@ -104,6 +104,7 @@ function scssTask() {`
`104`	`104`	`.pipe(sass({`
`105`	`105`	`includePaths: [`
`106`	`106`	`'./Shared/Styles',`
	`107`	`+ './node_modules',`
`107`	`108`	`'./node_modules/foundation-sites/scss',`
`108`	`109`	`'./node_modules/@fortawesome'`
`109`	`110`	`]`