landing-page-gem 0.1.0

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

@@ -0,0 +1,79 @@
+//  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-0: #555;
+$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;
+
+$color-grey-bg: #b8babc;
+$white: #fff;
+
+$color-alert: #856404;
+$color-blue-reboot: #007bff;        // link color specified in reboot
+$color-blue-reboot-hover: #0056b3;  // link:hover color specified in reboot
+$color-green-emerald: #148ba9;
+$color-green-check: #00A14B;
+
+$color-grey-typography: $grey-0;   // Base grey-color for typography elements like p, ul, ol, etc.
+$color-grey-heading: $grey-0;      // Grey headings used within page content
+$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
+$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;
+$success-check-mark: $color-green-check;

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

@@ -0,0 +1,84 @@
+// Footer Styles
+
+.footer__margin {
+  margin-top: 20px;
+}
+
+.footer {
+  background-color: $grey-4;
+  margin-bottom: -56px;
+  margin-top: 60px;
+  padding-bottom: 40px;
+  padding-top: 40px;
+  width: 100%;
+  border-top-color: $color-black-light;
+  border-top-style: solid;
+  border-top-width: thin;
+}
+
+// Footer's "athletics.kcc.edu link"
+a.footer-link {
+  color: $primary-blue;
+
+  &:hover {
+    text-decoration: none !important;
+    color: $primary-red;
+  }
+}
+
+.footer-heading {
+  transition-property: color;
+  transition-timing-function: ease;
+  transition-duration: .3s;
+}
+
+.footer-icons {
+  background-color: $primary-red;
+  border-radius: 50%;
+  transition-property: background-color;
+  transition-timing-function: ease;
+  transition-duration: .3s;
+  height: 33px;
+  margin: 4px;
+  padding: 2px;
+  width: 33px;
+}
+
+@media screen and (min-width: 360px) {
+  .footer-icons {
+    height: 40px;
+    margin: 5px;
+    width: 40px;
+  }
+}
+
+@media screen and (min-width: 412px) {
+  .footer-icons {
+    height: 50px;
+    width: 50px;
+  }
+}
+
+a.footer-social-links, a.footer-social-links .footer-icons {
+  text-decoration: none !important; // Get rid of default link-underline on hover
+}
+
+a.footer-social-links:hover .footer-icons {
+  text-decoration: none !important;
+  background-color: $primary-blue;
+}
+
+.footer__mobile--margin-bottom {
+  margin-bottom: 20px;
+}
+
+@media screen and (min-width: 992px) {
+  .footer__mobile--margin-bottom {
+    margin-bottom: 0;
+  }
+}
+
+.footer__svg--logo {
+  height: 36px; // Needed for IE
+  max-width: 100%;
+}

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

@@ -0,0 +1,18 @@
+// Header styles
+// ==========================================
+
+// If you change the background-image be sure to modify the _includes/preconnect.html file!
+.header__bg {
+  background-image: url('/assets/img/banner-bg.jpg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 55%;
+  height: 55vh;
+}
+
+@media screen and (min-width: 1200px) {
+  .header__bg {
+    height: auto;
+  }
+}

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

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

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

@@ -0,0 +1,39 @@
+// Rules for styling links
+// =========================================
+
+.links__darker-link {
+  color: $darker-link;
+}
+
+.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%;
+}

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

@@ -0,0 +1,57 @@
+.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;
+  }
+}
+
+.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;
+  }
+  &--fill-green {
+    fill: $success-check-mark;
+  }
+  &__earn-more {
+    transform: scale(1.35);
+  }
+}
+
+.svg__fill--bright-red {
+  fill: #C81F49;
+}
+
+.svg__fill--red-shadow {
+  fill: #8F0F28;
+}
+

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

@@ -0,0 +1,320 @@
+// TYPOGRAPHY
+// ===========================
+// Set the base font size for em's to work
+body {
+  font-size: $font-size-base; // Takes control of the base font size from Bootstrap/reboot
+}
+
+// HEADINGS
+// Special Headings (decorative headings used for specific sections)
+
+// h1 is KCC's logo-font, reserved for the nav-local's page-title heading.
+.typography__nav-heading { // Not to be used for page content
+  color: $primary-blue;
+  display: inline;
+  font-family: $font-family-kcc;
+  font-size: 1.5rem;
+  font-style: italic;
+  font-weight: 700;
+  text-transform: uppercase;
+  transition-property: color;
+  transition-timing-function: ease;
+  transition-duration: .4s;
+  &:hover,
+  &:focus {
+    color: $primary-red;
+  }
+  &--smaller {
+    font-size: 1.25rem;
+  }
+}
+
+@media screen and (min-width:360px) {
+  .typography__nav-heading {
+    font-size: 1.8rem;
+    &--smaller {
+      font-size: 1.5rem;
+    }
+  }
+}
+
+@media screen and (min-width:410px) {
+  .typography__nav-heading {
+    font-size: 2rem;
+  }
+}
+
+@media screen and (min-width:576px) {
+  .typography__nav-heading {
+    font-size: 2.3rem;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .typography__nav-heading {
+    font-size: 2.4rem;
+  }
+}
+
+@media screen and (min-width: 1500px) {
+  .typography__nav-heading {
+    font-size: 2.6rem;
+  }
+}
+
+.typography__footer-heading { // Footer heading/link that shows the site URL
+  font-family: $font-family-headings;
+  font-size: 1.95rem;
+  font-weight: $font-weight-black;
+}
+
+@media screen and (min-width: 360px) {
+  .typography__footer-heading {
+    font-size: 2.2rem;
+  }
+}
+
+@media screen and (min-width: 375px) {
+  .typography__footer-heading {
+    font-size: 2.4rem;
+  }
+}
+
+@media screen and (min-width: 410px) {
+  .typography__footer-heading {
+    font-size: 2.6rem;
+  }
+}
+
+// Content Headings
+.typography__h2 {
+  color: $color-grey-heading;
+  font-family: $font-family-headings;
+  font-size: 2rem;
+  font-weight: $font-weight-boldish;
+}
+
+.typography__h3 {
+  color: $primary-blue;
+  font-family: $font-family-headings;
+  font-size: 1.75rem;
+  font-weight: $font-weight-bolder;
+}
+
+.typography__h4 {
+  color: $primary-red;
+  font-family: $font-family-headings;
+  font-size: 1.7rem;
+  font-weight: $font-weight-bolder;
+}
+
+.typography__h5 {
+  color: $color-grey-heading;
+  font-family: $font-family-headings;
+  font-weight: $font-weight-bold;
+  font-size: 1.5rem;
+}
+
+.typography__h6 {
+  color: $color-grey-heading;
+  font-family: $font-family-headings;
+  font-weight: $font-weight-bold;
+  font-size: 1.4rem;
+}
+
+.typography__phone--span {
+  color: $white;
+  font-family: $font-family-oswald;
+  font-size: 1.3rem;
+  font-weight: $font-weight-regular;
+  letter-spacing: .07rem;
+  white-space: nowrap;
+}
+
+@media screen and (min-width: 768px) {
+  .typography__phone--span {
+    font-size: 1.45rem;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .typography__phone--span {
+    font-size: 1.5rem;
+  }
+}
+
+p,
+ul:not(.navbar-nav), // :not() selecter prevents unnecesary style override
+ol { // Needed so list font looks the same as paragraph font
+  color: $color-grey-typography; // Bootstrap sets these things to black
+  font-family: $font-family-paragraph;
+  font-size: $font-size-base;
+}
+
+h1 sup, h2 sup, h3 sup, h4 sup, h5 sup, h6 sup { // Make superscripts within headings a little bit smaller than reboot's styling
+  font-size: 45% !important;
+  top: -1em;
+  font-weight: normal;
+}
+
+.typography__register--h2 {
+  color: $white;
+  font-family: eurostile, sans-serif;
+  font-size: 2.4rem;
+  font-weight: $font-weight-boldish;
+  letter-spacing: .03rem;
+  position: relative;
+  top: 30%;
+  margin-bottom: -10px;
+}
+
+@media screen and (min-width: 400px) {
+  .typography__register--h2 {
+    font-size: 3rem;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .typography__register--h2 {
+    font-size: 5.2rem;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .typography__register--h2 {
+    font-size: 6rem;
+  }
+}
+
+@media screen and (min-width: 1800px) {
+  .typography__register--h2 {
+    font-size: 6.6rem;
+  }
+}
+
+.typography__register--h3 {
+  color: $white;
+  font-family: eurostile, sans-serif;
+  font-size: 1.2rem;
+  font-weight: $font-weight-boldish;
+  letter-spacing: .03rem;
+  position: relative;
+  top: 31%;
+}
+
+@media screen and (min-width: 400px) {
+  .typography__register--h3 {
+    font-size: 1.45rem;
+    top: 30.5%;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .typography__register--h3 {
+    font-size: 2.5rem;
+    top: 30%;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .typography__register--h3 {
+    font-size: 2.6rem;
+    top: 30%;
+  }
+}
+
+@media screen and (min-width: 1800px) {
+  .typography__register--h3 {
+    font-size: 2.7rem;
+    top: 30%;
+  }
+}
+
+.typography__register--caption {
+  bottom: 15px;
+  color: $white;
+  filter: drop-shadow(0 0 2px rgba(0,0,0,0.25));
+  font-family: $font-family-oswald;
+  font-size: 1rem;
+  font-weight: $font-weight-boldish;
+  letter-spacing: .07rem;
+  position: absolute;
+  right: 25px;
+}
+
+@media screen and (min-width: 768px) {
+  .typography__register--caption {
+    font-size: 1.1rem;
+  }
+}
+
+@media screen and (min-width: 1000px) {
+  .typography__register--caption {
+    font-size: 1.2rem;
+  }
+}
+
+
+.typography__register-h4 {
+  font-family: $font-family-oswald;
+  font-size: 1.6rem;
+}
+
+@media screen and (min-width: 768px) {
+  .typography__register-h4 {
+    font-size: 2rem;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .typography__register-h4 {
+    font-size: 2rem;
+  }
+}
+
+@media screen and (min-width: 1800px) {
+  .typography__register-h4 {
+    font-size: 2.3rem;
+  }
+}
+
+.typography__larger-p {
+  font-size: 1.2rem;
+}
+
+.typography__register--thank-you {
+  color: $primary-blue;
+  font-family: $font-family-kcc;
+  font-size: 2rem;
+  &--message {
+    color: $primary-red;
+    font-family: $font-family-saira;
+    font-weight: $font-weight-bold;
+    font-size: 1.4rem;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .typography__register--thank-you {
+    font-size: 2.4rem;
+    margin-left: 100px;
+    margin-top: -10px;
+    &--message {
+      font-size: 1.6rem;
+      margin-left: 95px;
+    }
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .typography__register--thank-you {
+    font-size: 2.6rem;
+  }
+}
+
+@media screen and (min-width: 1800px) {
+  .typography__register--thank-you {
+    font-size: 3rem;
+    margin-top: -15px;
+  }
+}