kcc-gem-theme-slim 0.0.1

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,13 @@
+// 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,45 @@
+// Rules for styling links
+// =========================================
+// 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;
+}
+
+
+.links__no-underline {
+  text-decoration: none;
+  &:hover {
+    text-decoration: none;
+  }
+}
+

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

@@ -0,0 +1,57 @@
+
+.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;
+  }
+}

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

@@ -0,0 +1,304 @@
+// 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;
+  }
+}
+
+.typography__contacts--name {
+  color: $primary-blue;
+  font-family: $font-family-headings;
+  font-size: 1.3em;
+  font-weight: $font-weight-bold;
+  margin-bottom: .2rem;
+}
+
+.typography__contacts--title {
+  color: $color-grey-heading;
+  font-family: $font-family-headings;
+  font-size: 1.1em;
+  font-weight: $font-weight-bold;
+  margin-bottom: .2rem;
+}
+
+.typography__orange-h4  {
+  color: $orange-heading;
+  font-family: $font-family-oswald;
+  font-size: 2.4rem;
+}
+
+.typography__section--heading {
+  color: $primary-red;
+  font-family: $font-family-oswald;
+  font-size: 2rem;
+  font-weight: $font-weight-boldish;
+}
+
+.typography__header-global--nav-top,
+.typography__header-global--nav-bottom,
+.typography__header-global--nav-local {
+  color: $primary-blue;
+  font-family: $font-family-oswald;
+  font-size: 1rem;
+  font-weight: 500;
+  letter-spacing: 0.05rem;
+  padding-bottom: .25rem;
+  padding-top: .25rem;
+  text-transform: capitalize;
+}
+
+@media screen and (min-width: 992px) {
+  .typography__header-global--nav-top {
+    color: $color-blue-light-nav;
+    font-size: 1.1rem;
+    &:hover,
+    &:focus {
+      color: $color-blue-light-nav;
+    }
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .typography__header-global--nav-bottom {
+    color: $white;
+    font-size: 1.05rem;
+    font-weight: 400;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .typography__header-global--nav-bottom:hover,
+  .typography__header-global--nav-bottom:focus,
+  .header-global__dropdown:hover .typography__header-global--nav-bottom,
+  .header-global__dropdown:focus .typography__header-global--nav-bottom {
+    color: $primary-blue;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .typography__header-global--nav-local {
+    font-size: 1rem;
+    font-weight: 400;
+  }
+  & .nav-link:not([role=tab]) {
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+}
+
+// "The POWER of Community" text
+.typography__power-text {
+  color: $white;
+  font-family: $font-family-power;
+  font-size: 1.1rem;
+  font-weight: $font-weight-bold;
+  letter-spacing: .02em;
+  text-transform: uppercase;
+}
+
+@media screen and (min-width: 360px) {
+  .typography__power-text {
+    font-size: 1.3rem;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .typography__power-text {
+    font-size: 2.2rem;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .typography__power-text {
+    font-size: 2.9rem;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .typography__power-text {
+    font-size: 3.1rem;
+  }
+}
+
+// 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__h5--description {
+  color: $grey-6;
+  font-family: $font-family-oswald;
+  font-size: 1.25rem;
+  font-weight: 400;
+}
+
+// Other font styles
+
+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-heading; // Bootstrap sets these things to black
+  font-family: $font-family-paragraph;
+  font-size: $font-size-base;
+}
+
+.typography__tables th {
+  color: $primary-red;
+  font-family: $font-family-headings;
+  font-weight: $font-weight-bold;
+}
+
+.typography__tables td {
+  color: $color-grey-heading; // 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__larger-p {
+  font-size: 1.2rem;
+}
+
+@media screen and (max-width: 992px) {
+  .typography__nowrap--sm {
+    white-space: nowrap;
+  }
+}
+
+.typography__color--inherit {
+  color: inherit;
+}
+
+.typography__my-kcc {
+  font-family: $font-family-kcc;
+  line-height: 1.2;
+  font-size: 1.2rem;
+}
+
+.typography__alert {
+  color: $color-alert;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.typography__header-global--nav-bottom:hover {
+  cursor: default;
+}

data/assets/scss/2-modules/_accordion.scss

@@ -0,0 +1,43 @@
+
+.accordion {
+  &__padding-left {
+    padding-left: 0;
+  }
+  &__typography--card-header .btn-link {
+    color: $primary-blue;
+    font-family: $font-family-paragraph;
+    font-size: 1.4rem;
+    font-weight: 700;
+    text-align: left;
+    &:hover {
+      color: $primary-red;
+    }
+  }
+  &__button::before {
+    background-color: $primary-blue;
+    border-radius: 50%;
+    color: #fff;
+    content: '\002D';
+    display: inline-block;
+    font-family: $font-family-paragraph;
+    font-size: 2rem;
+    font-weight: 400;
+    height: 30px;
+    line-height: 30px;
+    margin-right: 10px;
+    position: relative; // Safari doesn't want to render this pseudo-element without `position: relative;`
+    text-align: center;
+    text-decoration: none !important;
+    text-indent: 0;
+    vertical-align: middle;
+    width: 30px;
+  }
+  &__button.collapsed::before {
+    content: '\002B';
+  }
+}
+
+.accordion__button {
+  text-indent: -45px;
+  margin-left: 45px;
+}