kcc-gem-theme-core 0.0.1

data/assets/scss/0-tools/_gsc-overrides.scss

@@ -0,0 +1,144 @@
+// Custom styling to the Google Custom Search used in `_includes/header-global.html` & `_includes/nav-global.html`
+// ==================================================
+// Styling for the Google Custom Search used in the `_includes/header-global.html` version of the nav
+// ==================================================
+.header-global__search-collapse #___gcse_0:hover #gsc-iw-id1,
+.header-global__search-collapse #___gcse_0:focus #gsc-iw-id1 {
+  filter: drop-shadow(2px 2px 6px rgba(128,128,128, 0.5));
+}
+
+.header-global__search-collapse #gsc-iw-id1 {
+  border-radius: 2rem;
+  padding-left: .5rem;
+  border: solid thin $grey-5;
+  line-height: 1;
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+
+.header-global__search-collapse .gsc-search-button-v2 {
+  background-color: transparent !important;
+  border: none !important;
+  pointer-events: auto;
+  position: relative;
+  right: -0.5rem;
+  top: -.25rem;
+  transition-property: right;
+  transition-duration: .2s;
+}
+
+.header-global__search-collapse button.gsc-overrides__clear-x {
+  right: .5rem;
+  padding-right: 5px !important;
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__search-collapse .gsc-search-button-v2 {
+    top: 0;
+    right: .5rem;
+  }
+
+  .header-global__search-collapse button.gsc-overrides__clear-x {
+    right: 1.125rem;
+    padding-right: 5px !important;
+  }
+}
+
+.header-global__search-collapse .gsst_a .gscb_a {
+  vertical-align: middle;
+}
+
+.header-global__search-collapse .gsc-search-button-v2 svg {
+  fill: $primary-blue !important;
+  height: 1.25rem;
+  width: 1.25rem;
+  transition-property: fill;
+  transition-duration: .2s;
+}
+
+.header-global__search-collapse .gsc-search-button-v2:hover svg,
+.header-global__search-collapse .gsc-search-button-v2:focus svg {
+  fill: $primary-red !important;
+}
+
+.header-global__search-collapse td.gsc-search-button {
+  display: inline;
+  pointer-events: none;
+  position: absolute;
+  right: 50px;
+}
+
+@media screen and (min-width: 1400px) {
+  .header-global__search-collapse td.gsc-search-button {
+    right: 44px;
+  }
+}
+
+.header-global__search-collapse .gsc-search-box-tools .gsc-search-box .gsc-input {
+  padding-right: 0 !important;
+}
+
+// Similar styling for the Google Custom Search used in the `_includes/nav-global.html` version of the nav
+// ==================================================
+.nav-global__gcse-wrapper #___gcse_0:hover #gsc-iw-id1,
+.nav-global__gcse-wrapper #___gcse_0:focus #gsc-iw-id1 {
+  filter: drop-shadow(2px 2px 6px rgba(128,128,128, 0.5));
+}
+
+.nav-global__gcse-wrapper #gsc-iw-id1 {
+  border-radius: 2rem;
+  padding-left: .5rem;
+  border: solid thin $grey-5;
+  line-height: 1;
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+
+.nav-global__gcse-wrapper .gsc-search-button-v2 {
+  background-color: transparent !important;
+  border: none !important;
+  pointer-events: auto;
+  position: relative;
+  right: 30px;
+  transition-property: right;
+  transition-duration: .2s;
+}
+
+.nav-global__gcse-wrapper .gsst_a .gscb_a {
+  vertical-align: middle;
+}
+
+.nav-global__gcse-wrapper button.gsc-overrides__clear-x {
+  right: 48px;
+  padding-right: 5px !important;
+}
+
+.nav-global__gcse-wrapper .gsc-search-button-v2 svg {
+  fill: $primary-blue !important;
+  height: 1.25rem;
+  width: 1.25rem;
+  transition-property: fill;
+  transition-duration: .2s;
+}
+
+.nav-global__gcse-wrapper .gsc-search-button-v2:hover svg,
+.nav-global__gcse-wrapper .gsc-search-button-v2:focus svg {
+  fill: $primary-red !important;
+}
+
+.nav-global__gcse-wrapper td.gsc-search-button {
+  display: inline;
+  pointer-events: none;
+  position: absolute;
+  right: 50px;
+}
+
+@media screen and (min-width: 1400px) {
+  .nav-global__gcse-wrapper td.gsc-search-button {
+    right: 44px;
+  }
+}
+
+.nav-global__search-collapse--visible #___gcse_0 {
+  margin-bottom: 20px;
+}

data/assets/scss/0-tools/_gsc-search-page-overrides.scss

@@ -0,0 +1,275 @@
+/**
+*
+*  Custom overrides for Google Search search-results page
+*  Author: Wesley Zajicek - https://github.com/wdzajicek
+*
+*/
+// ===================================================== //
+//  IMPORTANT! (pun intended):                           //
+//                                                       //
+//    Assume that ANY `!important` used in this file is  //
+//    required for the styling to work correctly!        //
+//                                                       //
+//    i.e. DO NOT DELETE ANY `!important;`'s BELLOW      //
+//                                                       //
+// ===================================================== //
+$color-link-visited: #3600b3;
+// The pagination of the search results (at the bottom)
+.gsc-results .gsc-cursor-box .gsc-cursor-page {
+  background-color: rgba(0,0,0,0.09) !important;
+  border-width: thin;
+  border-style: solid;
+  border-color: #666;
+  border-radius: 5px;
+  color: $grey-1 !important;
+  padding: .25rem 1rem;
+}
+// The active page in the search result pagination
+.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
+  background-color: rgba(0,0,0,0.25) !important;
+  color: $black !important;
+  text-decoration: underline !important;
+}
+// One of the outer-most elements of the search results
+.gsc-control-cse {
+  font-family: $font-family-paragraph !important;
+  counter-reset: result;
+}
+// Outermost div for each search result
+.gsc-webResult.gsc-result {
+  border-bottom: solid thin #0b0e10 !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
+  max-width: 630px;
+  padding-left: .75rem !important;
+  padding-right: .75rem !important;
+}
+// Parent element of the search result's title
+.gsc-thumbnail-inside {
+  margin-left: 32px;
+}
+// Custom styling to make a counter before each title (like in newsroom)
+.gsc-thumbnail-inside::before {
+  background-color: $primary-blue;
+  border-radius: 50%;
+  border-color: #0b0e10;
+  border-style: solid;
+  border-width: 1px;
+  color: $white;
+  counter-increment: result;
+  content: counter(result);
+  display: block;
+  font-size: 11px;
+  font-weight: 700;
+  height: 26px;
+  margin-left: -32px;
+  line-height: 24px;
+  position: absolute;
+  text-align: center;
+  width: 26px;
+}
+// Font size for smaller text—description pagination
+.gsc-control-cse,
+.gsc-control-cse .gsc-table-result {
+  font-size: .99rem !important;
+}
+// Larger font-sizes
+.gsc-control-cse .gs-spelling,
+.gsc-control-cse .gs-result .gs-title,
+.gsc-control-cse .gs-result .gs-title * {
+  font-size: 1.125rem !important;
+}
+// Title of the page/doc that is clicked
+.gs-result .gs-title,
+.gs-result .gs-title *,
+.gs-result .gs-title a.gs-title b,
+.gcsc-find-more-on-google {
+  color: $color-blue-reboot !important;
+}
+// Hover effect for the search results title/link
+.gs-result .gs-title a.gs-title:hover,
+.gs-result .gs-title a.gs-title:hover b {
+  color: $color-blue-reboot-hover !important;
+  text-decoration: underline !important;
+}
+// Visited styles for the search results title/link
+.gs-result .gs-title a.gs-title:visited,
+.gs-result .gs-title a.gs-title:visited b {
+  color: $color-link-visited !important;
+}
+// The little magnifying glass svg on the bottom-right
+// of the results that says "🔍 Search for <SEARCH_TERM> on Google"
+.gcsc-find-more-on-google-magnifier {
+  fill: $color-blue-reboot !important;
+}
+// Breadcrumb for each search result
+.gs-webResult div.gs-visibleUrl {
+  color: $color-green-emerald !important;
+}
+// The parent element for the results breadcrumb
+.gs-bidi-start-align.gs-visibleUrl.gs-visibleUrl-breadcrumb {
+  display: inline-block;
+  border: thin solid rgba(0,0,0,0.125);
+  padding: 0 .25rem;
+  border-radius: 5px;
+  margin-top: .25rem;
+}
+// Description text for the search results
+.gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet,
+.gs-fileFormatType {
+  color: $grey-1 !important;
+  margin-top: 6px;
+  font-family: $font-family-paragraph !important;
+}
+.gs-bidi-start-align.gs-snippet b {
+  font-weight: 700;
+}
+// Preview image for the search result
+.gs-web-image-box .gs-image,
+.gs-promotion-image-box .gs-promotion-image {
+  height: 93px;
+  margin-left: -18.25px;
+  max-width: unset !important;
+}
+// Parent element of the preview image for search result
+.gs-web-image-box,
+.gs-promotion-image-box {
+  background-color: $grey-1;
+  border-radius: 50%;
+  border-color: #ebebeb;
+  border-style: solid;
+  border-width: thin;
+  float: right !important;
+  height: 93px;
+  margin-top: .25rem;
+  margin-left: 1rem !important;
+  overflow: hidden;
+  padding: 0 !important;
+  position: relative;
+  bottom: 20px;
+  width: 93px !important;
+}
+// Specific styles for portrait oriented images
+.gs-web-image-box-portrait .gs-image {
+  height: 93px;
+  margin-left: calc(100% / -16);
+  transform: scale(1.2);
+}
+// Parent div of the pagination buttons
+.gsc-cursor-box.gs-bidi-start-align {
+  margin-top: 1.5rem !important;
+}
+// ======================================= //
+//   Styling adjustments/additions to      //
+//   search-page styling for darkMode      //
+// ======================================= //
+// .dark-mode gets added to <html> element 
+.dark-mode {
+  // Description of the search result
+  .gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet,
+  .gs-fileFormatType {
+    color: #969ca5 !important;
+  }
+  // Pagination buttons for extra results
+  .gs-bidi-start-align.gs-visibleUrl.gs-visibleUrl-breadcrumb {
+    border-color: rgba(255,255,255,.25);
+  }
+  // The little magnifying glass svg on the bottom-right
+  // of the results that says "🔍 Search for <SEARCH_TERM> on Google"
+  .gcsc-find-more-on-google-magnifier {
+    fill: #9fc0ed !important;
+  }
+  // Title/link of the search result
+  .gs-result .gs-title,
+  .gs-result .gs-title *,
+  .gs-result .gs-title a.gs-title b,
+  .gcsc-find-more-on-google {
+    color: #9fc0ed !important;
+  }
+  // Title/link hover effect
+  .gs-result .gs-title a.gs-title:hover,
+  .gs-result .gs-title a.gs-title:hover b {
+    color: #b0d1ff !important;
+  }
+  // Visited title links
+  .gs-result .gs-title a.gs-title:visited,
+  .gs-result .gs-title a.gs-title:visited b {
+    color: #7382d7 !important;
+  }
+  // Top bar that shows the number of results and Sort by:...
+  .gsc-above-wrapper-area {
+    border-bottom-color: rgba(255,255,255,0.5)
+  }
+  // One of the outer-most parent elements of the results
+  .gsc-control-cse.gsc-control-cse-en {
+    background-color: transparent;
+    border-color: rgba(255,255,255,0.25);
+    border-radius: 5px;
+  }
+  // Outer-most element for each search result
+  .gsc-webResult.gsc-result,
+  .gsc-results .gsc-imageResult {
+    background-color: #191d1f;
+    border-color: rgba(255,255,255,0.125);
+  }
+  // Result stats: # of results and time
+  .gsc-result-info,
+  .gsc-orderby-label {
+    color: #bababa;
+  }
+  // Pagination buttons of the extra results
+  .gsc-results .gsc-cursor-box .gsc-cursor-page {
+    background-color: #0b0e10;
+    border-color: rgba(255,255,255,0.25);
+    border-style: solid;
+  }
+  // Current page-button in the paginated results
+  .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
+    color: #ebebeb !important;
+    background-color: rgba(0,0,0,0.5) !important;
+  }
+  // Hover effect when mouse hovers a search result
+  .gsc-webResult.gsc-result:hover {
+    background-color: rgba(255,255,255,0.0125) !important;
+  }
+  // Outer-most element of each search result
+  .gsc-webResult.gsc-result {
+    border-bottom: solid 1px $white !important;
+  }
+  // Custom counter-circles to number results
+  .gsc-thumbnail-inside::before {
+    background-color: #9bb7dd;
+    border-color: $white;
+    color: #0b0e10;
+  }
+  // The "Sort by:" button
+  .gsc-selected-option-container {
+    background-color: #9fc0ed;
+    border-radius: 4px;
+    border-color: $white;
+    border-width: 1px;
+    border-style: solid;
+    font-size: 13px !important;
+    padding-bottom: 1.75rem;
+    padding-left: .75rem !important;
+    padding-right: 32px;
+  }
+  // The little carrot icon in the "Sort by:" button
+  .gsc-control-cse .gsc-option-selector {
+    right: 8px;
+    top: 13px;
+    transform: scale(1.5);
+  }
+  // The "Sort by:" menu
+  .gsc-control-cse .gsc-option-menu {
+    background-color: #0b0e10;
+  }
+  // Current selection in the "Sort by:" menu
+  .gsc-option-menu-item-highlighted {
+    background-color: #282828;
+    color: $white;
+  }
+  .gs-bidi-start-align.gs-snippet b {
+    color: #c4c4c4;
+  }
+}

data/assets/scss/0-tools/_slick-vars.scss

@@ -0,0 +1,15 @@
+// Slick carousel variables
+// Use these variables from slick-carousel to override defaults
+$slick-font-path: '/assets/fonts/';
+$slick-font-family: 'none';
+$slick-loader-path: '/assets/img/';
+// $slick-arrow-color: white;
+// $slick-dot-color: black;
+// $slick-dot-color-active: $slick-dot-color;
+// $slick-prev-character: '\2190';
+// $slick-next-character: '\2192';
+$slick-dot-character: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12"><circle stroke-width=".75" stroke="%23000" fill="%23e5e8ed" cx="6" cy="6" r="3.5"/></svg>');
+// $slick-dot-size: 6px;
+// $slick-opacity-default: 0.75;
+// $slick-opacity-on-hover: 1;
+// $slick-opacity-not-active: 0.25;

data/assets/scss/0-tools/_vars.scss

@@ -0,0 +1,98 @@
+//  VARIABLES
+// =============================
+
+// @font-face for typekit's eruostile
+@font-face {
+  font-family:'eurostile';
+  src:url("https://use.typekit.net/af/198f80/00000000000000003b9b2162/27/l?subset_id=2&fvd=i7&v=3") format("woff2"),url("https://use.typekit.net/af/198f80/00000000000000003b9b2162/27/d?subset_id=2&fvd=i7&v=3") format("woff"),url("https://use.typekit.net/af/198f80/00000000000000003b9b2162/27/a?subset_id=2&fvd=i7&v=3") format("opentype");
+  font-display: swap;
+  font-style: italic;
+  font-weight: 700;
+}
+
+// @import for google fonts
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Oswald:wght@400;500&family=Roboto:wght@400;500;700&display=swap');
+
+// Fonts
+$font-family-paragraph: 'Open Sans', sans-serif;
+$font-family-headings: 'Roboto', sans-serif;
+$font-family-power: 'Libre Franklin', sans-serif;
+$font-family-kcc: 'eurostile', sans-serif;
+$font-family-oswald: 'Oswald', sans-serif;
+$font-family-saira: 'Saira', 'sans-serif';
+$font-family-icons: 'Material Icons';
+
+$font-size-base: 1rem;
+
+$font-weight-light: 300;
+$font-weight-regular: 400;
+$font-weight-boldish: 500;
+$font-weight-bolder: 600;
+$font-weight-bold: 700;
+$font-weight-black: 900;
+
+
+//Image path for most of global style sheet
+$imagedir:'/assets/img/';
+
+// Colors
+//KCC colors
+$primary-blue: #0f3b63;       // Primary red-color
+$primary-red: #c61f48;        // Primary blue-color
+$accent-blue: #005bac;        // Accent blue-color used in all links and link buttons;
+$color-blue-light: #ccdde1;
+$color-tan-light: #fcf1d6;
+$color-orange: #f99e1b;
+$color-blue-grey: #7a7b7b;
+$color-blue-lighter-nav: #e2e3e4;
+$color-black-light: rgba(0,0,0,.15);
+$color-red-darker: #8a1632;
+$color-bs-bg-dark: #343a40;
+
+$color-blue-grey: #b8babc;
+$color-page-background: $color-blue-grey;
+$color-blue-light-nav: $color-blue-grey;
+
+$black: #000;
+$grey-1: #666;
+$grey-2: #e5e8ed;
+$grey-3: #f1f2f7;            //  Background color for slick tracks
+$grey-4: #f8f9fa;            // Background color for footer (and Bootstrap 4 light navbar)
+$grey-5: #b1b1b1;            // Border-bottom for local-nav navigation bar
+$grey-6: #58585b;
+$grey-7: #868686;
+$grey-8: #d9d9d9;
+
+$white: #fff;
+
+$color-alert-warning-text: #856404; // BS4 color for alert-warning text-color
+$color-alert-info-text: #0c5460; // BS4 color for alert-info text-color
+$color-alert-primary-text: #004085; // BS4 color for alert-primary text-color
+$color-alert-danger-text: #721c24;
+// Create custom border-colors for the BS4 alerts we use:
+$color-alert-warning-border: $color-alert-warning-text;
+$color-alert-info-border: $color-alert-info-text;
+$color-alert-primary-border: $color-alert-primary-text;
+$color-alert-danger-border: $color-alert-danger-text;
+
+$color-alert: $color-alert-warning-text;
+$color-blue-reboot: #007bff;        // link color specified in reboot
+$color-blue-reboot-hover: #0056b3;  // link:hover color specified in reboot
+$color-green-emerald: #148ba9;
+
+
+$landing-bg: $grey-2;        // Landing page's background-color
+$default-bg: $white;        // Background color for non-landing pages
+$footer-bg: $white;         // Footer's background color
+$color-grey-heading: $grey-1;      // Grey headings used within page content
+$fa-color: $primary-red;
+$slide-bg: $white;            // Background color for the upcoming games slick slides
+$sub-nav-heading: $white;     // Font color for h1.page-heading heading of sub-nav
+$nav-link: $white;            // Color for nav-link-main links in mega-nav
+
+$btn-primary-bg: #0051a7;
+$btn-primary-border: #003773;
+$btn-hover-bg: #022b55;
+$btn-hover-border: #021e3d;
+$darker-link: #006ce0;
+$orange-heading: $color-orange;

data/assets/scss/1-base/_background.scss

@@ -0,0 +1,5 @@
+.background {
+  &__color--tan {
+    background-color: $color-tan-light;
+  }
+}