kcc-gem-theme-original 1.0.0

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/_vars.scss

@@ -0,0 +1,72 @@
+//  VARIABLES
+// =============================
+
+// 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-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: #856404;
+
+
+$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;
+  }
+}

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

@@ -0,0 +1,121 @@
+.navbar-light .navbar-nav .nav-link.buttons__btn-primary-custom {
+  background-color: $primary-red;
+  color: $white;
+  &:hover {
+    background-color: $primary-blue;
+  }
+}
+
+.buttons__yt-subscribe {
+  display: inline-block;
+  height: 1rem;
+  margin-top: -4px;
+  margin-right: 5px;
+  transform: scale(1.8,1.8);
+  vertical-align: middle;
+  width: 1rem;
+}
+
+.buttons__custom-danger {
+  margin-right: 20px;
+}
+
+.buttons__btn-margin-top {
+  margin-top: 20px;
+}
+
+.btn-primary {
+  background-color: $btn-primary-bg;
+  border-color: $btn-primary-border;
+}
+
+.btn-primary:hover {
+  background-color: $btn-hover-bg;
+  border-color: $btn-hover-border;
+}
+
+.buttons__no-decoration {
+  text-decoration: none;
+  &:hover {
+    text-decoration: none;
+  }
+  &:focus {
+    text-decoration: none;
+  }
+  &:visited {
+    text-decoration: none;
+  }
+}
+
+.buttons{
+  display: inline-block;
+  padding-left: .9rem;
+  padding-right: .9rem;
+  padding-top: .125rem;
+  padding-bottom: .125rem;
+  &__my-kcc {
+    border-color: $color-blue-grey;
+    padding-top: .125rem;
+    padding-bottom: .125rem;
+    margin-top: 0.25rem;
+    margin-bottom: .375rem;
+    &--mobile {
+      position: absolute;
+      bottom: .65rem;
+      left: 1rem;
+    }
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .buttons__my-kcc:hover,
+  .buttons__my-kcc:focus {
+    //color: $white;
+    background-color: #0c3050;
+  }
+}
+
+@media screen and (max-width: 992px) {
+  .buttons__my-kcc:hover,
+  .buttons__my-kcc:focus {
+    color: $primary-red;
+  }
+}
+
+.buttons__action {
+  color: $white;
+  background-color: $primary-red;
+  border-color: $color-red-darker;
+  font-family: $font-family-headings;
+  font-size: 1.3rem;
+  font-weight: $font-weight-bolder; //dash
+  line-height: 36px;
+  letter-spacing: .075rem;
+  width: 100%;
+  &:hover,
+  &:focus {
+    color: $white;
+    background-color: $primary-blue;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  .buttons__action {
+    font-size: 1.75rem;
+    line-height: 48px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .buttons__action {
+    font-size: 1.3rem;
+    line-height: 36px;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .buttons__action {
+    font-size: 1.75rem;
+    line-height: 48px;
+  }
+}

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

@@ -0,0 +1,4 @@
+
+html {
+  background-color: $color-page-background;
+}

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

@@ -0,0 +1,12 @@
+// Styles for <img>'s
+.img__full-width {
+  width: 100%;
+}
+
+.img__shadow {
+  filter: drop-shadow(3px 3px 10px rgba(126, 126, 126, .45));
+  &--border {
+    filter: drop-shadow(3px 3px 10px rgba(126, 126, 126, .45));
+    border: 3px solid $primary-blue;
+  }
+}

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

@@ -0,0 +1,126 @@
+// Rules for styling links
+// =========================================
+
+.links__kcc-logo {
+  display: inline;
+  float: left;
+  width: 120px;
+  height:80px;
+}
+
+// use the 'link__offset' class to offset jump-links via CSS only method.
+// Links need to be offset to clear the fixed navigation bar at the top.
+// =========================================
+
+.links__offset {  // Pointer-events is needed to prevent the .links__offset::before pseudo-element
+  pointer-events: none;  // from "blocking" any anchor tag above from being clicked.
+  & a,
+  & button,
+  & iframe,
+  & .card-body {  // HOWEVER, if there is a child anchor, or button, element,
+    pointer-events: auto; // it obviously needs to be clickable.
+  }
+}
+
+.links__offset::before {
+  // mobile devices get slightly different offset b/c of different sized fixed header
+  content: " ";
+  display: block;
+  height: 171px; // defining a height pushes the element down the page
+  margin-top: -171px; // negative margin is needed to push it back to its original position
+  pointer-events: none; // w/ out this it will interfere with the sites navigation links
+  visibility: hidden;
+}
+
+@media screen and (min-width: 768px) {
+    .links__offset::before {
+      height: 150px;
+      margin-top: -150px;
+  }
+}
+
+.links__darker-link {
+  color: $darker-link;
+}
+
+// Rules to override bootstrap 4's "nav-link" color
+// =========================================
+.navbar-light .navbar-nav .nav-link.links__nav-link--color:not(.btn-primary) { // Ugly (chain of) selectors needed to overide bootstrap's "nav-link" color:
+  color: $primary-blue;
+  &:hover,
+  &:focus {
+    color: $primary-red;
+  }
+}
+
+.navbar-light .navbar-nav .nav-link.links__nav-link--color.btn-primary {
+  color: $white;
+}
+
+.navbar-light .navbar-nav .active>.nav-link {
+  border-bottom-color: $primary-red;
+  border-bottom-style: solid;
+  border-bottom-width: thick;
+  color: $primary-blue;
+  padding-bottom: 0;
+}
+
+.navbar-light .navbar-nav .nav-link:focus,
+.navbar-light .navbar-nav .nav-link:hover {
+  color: $primary-red;
+}
+
+.links__phone--span { // Phone # link in the navigation on landing pages like info.kcc.edu
+  color: $white;
+  position: relative; // Needed to make pseudo-element underlining the right width
+  text-decoration: none;
+  &:visited {
+    color: $white;
+  }
+  &:hover,
+  &:focus {
+    color: $white;  // Remove the Bootstrap primary blue colour on a:hover
+    text-decoration: none; // Prevent underlining
+  }
+}
+
+
+.links__phone--span:focus:after,
+.links__phone--span:hover:after { // mouse-hover effect for phone # in landing pages
+  opacity: 1;  // Make the underline fade in
+  transform: translateY(-.2em); // Move the underline up (along the Y-axis) as it fades-in
+}
+
+.links__phone--span:after { // Pseudo-element to unerline the phone # on mouse-hover
+    background-color: $color-orange;
+    bottom: - .325rem;
+    content: "";
+    display: block;
+    height: .1875rem;
+    opacity: 0;
+    position: absolute;
+    transition: opacity .3s,transform .3s; // mouse-hover effect
+    width: 100%;
+}
+
+.links__no-underline {
+  text-decoration: none;
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .links__header-global--nav-local {
+    position: relative;
+  }
+  .active .links__header-global--nav-local::after {
+    background-color: $primary-red;
+    bottom: .125rem;
+    content: '';
+    display: block;
+    height: .145rem;
+    position: absolute;
+    width: calc(100% - 1rem);
+  }
+}

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

@@ -0,0 +1,82 @@
+.svg__fill {
+  &--blue {
+    fill: $primary-blue;
+  }
+  &--white {
+    fill: $white;
+  }
+}
+
+.svg {
+  height: 100px;
+  width: 100px;
+  &--none {
+    fill: none;
+  }
+  &--blue {
+    fill: $primary-blue;
+  }
+  &--red {
+    fill: $primary-red;
+  }
+  &--white {
+    fill: $white;
+  }
+}
+
+.svg--max-width {
+  max-width: 100%;
+}
+
+.svg {
+  &__button {
+    height: 48px;
+    width: 48px;
+  }
+  &--fill-none {
+    fill: none;
+  }
+  &--fill-white {
+    fill: $white;
+  }
+  &--fill-blue {
+    fill: $primary-blue;
+  }
+}
+
+.svg__action--place {
+  margin-left: -2rem;
+}
+
+@media screen and (min-width: 360px) {
+  .svg__action--place {
+    margin-left: -3rem;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .svg__action--place {
+    margin-left: 0;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  .svg__button {
+    height: 48px;
+    width: 48px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .svg__button {
+    height: 36px;
+    width: 36px;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .svg__button {
+    height: 48px;
+    width: 48px;
+  }
+}