kcc-gem-theme-core 0.0.1

data/assets/scss/2-modules/_dark-mode.scss

@@ -0,0 +1,350 @@
+$dark-mode-background: #191f25;
+$dark-mode-foreground: #7e848f;
+$dark-mode-foreground-lighter: #abaeb3;
+$dark-mode-text-link-hover: #bfd7f9;
+$dark-mode-text-primary-blue: #9bb7dd;
+$dark-mode-text-primary-blue-darker: #8db2e5;
+$dark-mode-text-primary-red: #e46181;
+$dark-mode-bg-primary-blue: #002348;
+$dark-mode-bg-primary-red: #80132e;
+$dark-mode-bg-primary-red-darker: #600f23;
+$dark-mode-bg-primary-blue-darker: #011a36;
+$dark-mode-text-blue-purple: #7588a6;
+$dark-mode-white-darker: #bfbfbf;
+
+.dark-mode body {
+  background-color: $dark-mode-background;
+}
+
+.dark-mode {
+  background-color: $dark-mode-background;
+  & p,
+  & ol,
+  & ul:not(.navbar-nav),
+  & .typography__h2,
+  & .typography__h5,
+  & .typography__h6,
+  & .typography__contacts--title {
+    color: $dark-mode-foreground;
+  }
+  & .typography__h4 {
+    color: $dark-mode-text-primary-red;
+  }
+  & .accordion__typography--card-header .btn-link,
+  & .typography__h3,
+  & .typography__header-global--nav-top,
+  & .links__nav-link--color:not(.btn-primary),
+  & .typography__nav-heading,
+  & .typography__contacts--name {
+    color: $dark-mode-text-primary-blue;
+  }
+  & .typography__h5--description {
+    color: #7e848f;
+  }
+  & .typography__h5--oswald {
+    color: #9a9faa;
+  }
+  & .footer-icons,
+  & .buttons__action,
+  & iframe[title="calendar"],
+  & .hero-slider__slider,
+  & #emergencyAlerts {
+    filter: brightness(.75);
+  }
+  .buttons__action {
+    border-color: rgba(255,255,255,.65);
+  }
+  & .buttons__action:hover {
+    background-color: $dark-mode-bg-primary-blue;
+    border-color: rgba(255,255,255,.4);
+  }
+  & footer {
+    background-color: #14191d;
+    border-top-color: rgba(256,256,256,.5);
+    border-top-width: 1px;
+    border-top-style: solid;
+  }
+  & .breadcrumbs {
+    border-bottom-color: rgba(256,256,256,.5)
+  }
+  & .background__color--tan {
+    background-color: #1e1b15;
+  }
+  & .benefits__background-color {
+    background-color: #1c282c;
+  }
+  & .news__h3 {
+    color: $dark-mode-foreground-lighter;
+  }
+  & .header-global .dropdown-menu {
+    background-color: #151a1e;
+    & .dropdown-item {
+      color: #ccc;
+    }
+    & .dropdown-item:hover,
+    & .dropdown-item:focus {
+      background-color: #000;
+      color: #efefef
+    }
+  }
+  & .benefits__typography--img-cap {
+    color: $dark-mode-foreground-lighter;
+  }
+  & .news__li {
+    border-bottom-color: $dark-mode-foreground-lighter;
+  }
+  & .svg--fill-blue {
+    stroke: $dark-mode-foreground-lighter;
+  }
+  & .svg__fill--blue {
+    fill: $dark-mode-foreground-lighter;
+  }
+  & .benefits__borders--circle-img {
+    border-color: #000;
+    filter: drop-shadow(5px 5px 12px rgba(0,0,0,.5)) brightness(.75);
+  }
+  & .news__span {
+    box-shadow: inset 0 0 0 1.4px $dark-mode-foreground;
+  }
+  & .news__div--img {
+    border: solid thin #ccc;
+    filter: brightness(.75);
+  }
+  & .btn-primary {
+    background-color: $dark-mode-bg-primary-blue;
+    border-color: $dark-mode-text-primary-blue-darker;
+    &:hover {
+      background-color: $dark-mode-text-primary-blue-darker;
+      color: $dark-mode-bg-primary-blue !important;
+    }
+  }
+  & .alert-warning {
+    background-color: #664d03;
+    border-color: #fff3cd;
+    & p {
+      color: #fff3cd;
+    }
+  }
+  & .alert-primary {
+    background-color: #003670;
+    border-color: #cce5ff;
+    & p {
+      color: #cce5ff;
+    }
+  }
+  & .alert-info {
+    background-color: #0a4752;
+    border-color: #d1ecf1;
+    & p {
+      color: #d1ecf1;
+    }
+  }
+  & .alert-danger {
+    background-color: #461116;
+    border-color: #f8d7da;
+    & p {
+      color: #f8d7da;
+    }
+  }
+  & a:not(.nav-link),
+  & .links__darker-link {
+    color: $dark-mode-text-primary-blue-darker;
+  }
+  & a:not(.btn):hover,
+  & .links__darker-link:hover {
+    color: $dark-mode-text-link-hover;
+   }
+  & iframe[title="calendar"] {
+    filter: contrast(0.5);
+  }
+  & .header-global__nav-top {
+    background-color: $dark-mode-bg-primary-blue-darker;
+  }
+  & .header-global__nav-bottom {
+    background-color: $dark-mode-bg-primary-red-darker;
+  }
+  & .buttons__action {
+    color: $white !important;
+    background-color: $dark-mode-bg-primary-red;
+  }
+  & img {
+    filter: brightness(.75);
+  }
+  & .card {
+    background-color: #151a1c;
+    border-color: rgba(256,256,256,.4);
+  }
+  & .card-body {
+    background-color: #192125;
+  }
+  & .accordion>.card>.card-header {
+    margin-bottom: 0;
+    border-bottom-color: rgba(256,256,256,.125);
+  }
+  & .accordion__button::before {
+    border-style: solid;
+    border-color: rgba(256,256,256,.25);
+    border-width: thin;
+  }
+  & .nav-tabs .nav-link {
+    border-left-color: rgba(256,256,256,.325);
+    border-right-color: rgba(256,256,256,.325);
+    border-top-color: rgba(256,256,256,.325);
+    border-bottom-color: rgba(256,256,256,.5);
+    background-color: #151a1c;
+  }
+  & .nav-tabs .nav-link.active {
+    border-color: rgba(256,256,256,.6) !important;
+    background-color: #192125;
+    border-bottom: thin solid #192125 !important;
+  }
+  & .nav-tabs {
+    border-bottom-color: rgba(256,256,256,.5);
+  }
+  & .nav-tabs .nav-item.show .nav-link,
+  & .nav-tabs .nav-link.active {
+    color: $dark-mode-foreground-lighter;
+  }
+  & .nav-content {
+    background-color: $color-bs-bg-dark !important;
+  }
+  & a.navbar-brand:hover .typography__nav-heading,
+    a.navbar-brand:focus .typography__nav-heading {
+      color: $dark-mode-text-link-hover !important;
+  }
+  & .tab-pane {
+    background-color: #192125;
+    border-bottom: thin solid rgba(256,256,256,.5);
+    border-left: thin solid rgba(256,256,256,.5);
+    border-right: thin solid rgba(256,256,256,.5);
+    border-bottom-left-radius: .25rem;
+    border-bottom-right-radius: .25rem;
+    padding: .5rem;
+  }
+  & td,
+  & th,
+  & thead th {
+    border-color: #454d55;
+  }
+  & .table {
+    background-color: #262a2e;
+    color: $dark-mode-foreground-lighter
+  }
+  & .table-striped tbody tr:nth-of-type(odd) {
+    background-color: rgba(255,255,255,.05);
+  }
+  & .table-hover tbody tr:hover {
+    background-color: rgba(255,255,255,.25);
+    color: $white;
+  }
+  & .modal-content {
+    background-color: #2a2f34;
+    border-color: rgba(255,255,255,.4);
+  }
+  & .modal-header {
+    border-bottom-color: rgba(256,256,256,.5);
+    color: $dark-mode-foreground-lighter
+  }
+  & .modal-footer {
+    border-bottom-color: rgba(256,256,256,.5)
+  }
+  & .close {
+    color: $dark-mode-foreground-lighter;
+    &:hover,
+    &:focus {
+      color: rgba(256,256,256,.6);
+    }
+  }
+  & .header-global__navbar--toggler .navbar-toggler-icon {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath stroke='rgba(255, 255, 255, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
+  }
+  & .header-global__navbar--toggler {
+    border-color: rgba(256,256,256,.5);
+  }
+  & #headerGlobalNavbarContent.collapse.show .navbar-nav,
+  & #headerGlobalNavbarContent.collapsing .navbar-nav {
+    background-color: #2a323c;
+  }
+  & #___gcse_0 {
+    filter: invert(1);
+  }
+  & pre {
+    background-color: #272934;
+    border-radius: 8px;
+    color: #0f0;
+    padding-top: 1rem;
+  }
+  & hr {
+    border-top-color: rgba(255,255,255,.325);
+  }
+  & div.dt-button-collection { // Adjustments to datatables buttons/searchPanes styling
+    filter: invert(1) brightness(2.5);
+  }
+  & div.dataTables_scrollBody { // Adjustments to datatables buttons/searchPanes styling
+    filter: brightness(.95);
+  }
+}
+
+.dark-mode #headerGlobalNavbarContent.collapse.show .header-global__nav-top::before,
+.dark-mode #headerGlobalNavbarContent.collapsing .header-global__nav-top::before {
+  background-color: $dark-mode-bg-primary-red-darker;
+}
+
+.dark-mode .header-global__navbar--search-toggle:before {
+  background-color: $dark-mode-bg-primary-red-darker;
+}
+
+@media screen and (min-width: 992px) {
+  .dark-mode .header-global__navbar--search-toggle:before {
+    background-color: $dark-mode-bg-primary-blue-darker;
+  }
+  .dark-mode .header-global__nav-bottom .dropdown:hover {
+      background-color: #0f1417;
+  }
+  .dark-mode .header-global .dropdown-menu {
+    border: thin solid rgba(255,255,255,.325);
+  }
+}
+
+@media screen and (max-width: 991px) {
+  .dark-mode .header-global__core:after {
+    background-color: #272b30;
+    border-top: 1px solid #b1b1b1;
+  }
+  .dark-mode .header-global .dropdown-menu {
+    border: thin solid rgba(255,255,255,.325);
+  }
+}
+
+// Styles for the BOT page.
+.dark-mode #board-of-trustees {  // on about/BOT page
+  border: none !important;
+}
+.dark-mode #agendas-and-minutes {  // on about/BOT page
+  border: none !important;
+}
+
+.dark-mode #v-pills-tabContent .tab-pane { // on about/BOT page
+  border: none;
+}
+
+.dark-mode .sub-nav__navbar {
+  background-color: #141a1c !important;
+}
+
+.dark-mode .sub-nav__nav-link {
+  color: $dark-mode-text-primary-blue-darker;
+}
+
+.dark-mode .typography__sub-nav--red-h2,
+.dark-mode .typography__section--heading {
+  color: $dark-mode-text-primary-red;
+}
+
+.dark-mode .error__main-heading {
+  color: $dark-mode-text-primary-red;
+}
+
+.dark-mode .error__sub-heading {
+  color: $dark-mode-text-primary-blue;
+}

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

@@ -0,0 +1,10 @@
+
+.error__main-heading {
+  color: $primary-red;
+  font-weight: $font-weight-bold;
+}
+
+.error__sub-heading {
+  color: $primary-blue;
+  font-weight: $font-weight-bold;
+}

data/assets/scss/2-modules/_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
+}

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

@@ -0,0 +1,21 @@
+// NOT TO BE CONFUSED WITH `1-base/_header-global.scss` SCSS MODULE
+// STYLES USED IN LANDING PAGE HEADER SECTIONS
+// SPECIFICALLY THE LARGE BACKGROUND IMAGE IN THE DESIGN
+//
+// Header styles for landing pages
+// ==========================================
+
+.header__bg {
+  background-image: url('/assets/img/DSC_8724_4x3.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;
+  }
+}