kcc-gem-theme 0.1.0

data/assets/scss/2-modules/_local-nav.scss

@@ -0,0 +1,111 @@
+.local-nav {
+  top: 55px;
+  border-bottom-color: $grey-5;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+}
+
+.local-nav--search-toggle {
+  top: 86px;
+}
+
+.local-nav__custom-nav {
+  padding-left: 40px;
+  border-bottom-color: $black;
+  border-bottom-width: 3px;
+  border-bottom-style: solid;
+}
+
+.local-nav__centered {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.local-nav__kcc-logo {
+  margin-bottom: -4px; // pull the logo down a little to line-up with "Newsroom" heading.
+  width: 65px;
+}
+
+@media screen and (min-width: 360px) {
+  .local-nav__kcc-logo {
+    margin-bottom: -5px; // pull the logo down a little to line-up with "Newsroom" heading.
+    width: 70px;
+  }
+}
+
+@media screen and (min-width: 410px) {
+  .local-nav__kcc-logo {
+    margin-bottom: -7px; // pull the logo down a little to line-up with "Newsroom" heading.
+    width: 75px;
+  }
+}
+
+@media screen and (min-width: 576px) {
+  .local-nav__kcc-logo {
+    margin-bottom: -15px; // pull the logo down a little to line-up with "Newsroom" heading.
+    width: 140px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .local-nav__kcc-logo {
+    margin-bottom: -15px; // pull the logo down a little to line-up with "Newsroom" heading.
+    width: 160px;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .local-nav__kcc-logo {
+    margin-bottom: -17px; // pull the logo down a little to line-up with "Newsroom" heading.
+    width: 135px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .local-nav__kcc-logo {
+    margin-bottom: -15px; // pull the logo down a little to line-up with "Newsroom" heading.
+    width: 160px;
+  }
+}
+
+.local-nav .nav-link {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+@media screen and (min-width:992px) {
+  .local-nav .nav-link {
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+}
+
+@media screen and (min-width:1200px) {
+  .local-nav .nav-link {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+}
+
+#mainNav,
+.navbar-brand,
+.links__local-nav__newsroom-heading-link {
+  transition: all ease .4s;
+}
+
+@media screen and (min-width: 992px) {
+  #mainNav.navbar-shrink {
+    padding-top: 0;
+    padding-bottom: 0;
+    opacity: .96;
+  }
+
+  #mainNav.navbar-shrink .navbar-brand {
+    transform: scale(.8, .8);
+  }
+
+  #mainNav.navbar-shrink .links__local-nav__newsroom-heading-link {
+    transform: scale(.8, .8);
+    margin-left: -35px;
+  }
+}

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

@@ -0,0 +1,272 @@
+
+#yt_wrapper {
+display: flex;
+flex-wrap: wrap;
+}
+
+@media screen and (min-width: 992px) {
+  #yt_wrapper {
+    flex-wrap: nowrap;
+  }
+}
+
+#yt_player {
+  flex-direction: column;
+  height: 50vh;
+  left: 0;
+  margin-top: 10px;
+  top: 0;
+  width: 100vw;
+}
+
+@media screen and (min-width: 1200px) {
+  #yt_player {
+    width: 50vw;
+  }
+}
+
+#yt_list {
+  flex-direction: column;
+  justify-content: center;
+  height: 50.5vh;
+  margin-left: 0;
+  width: 100vw;
+  top: 0;
+  right: 0;
+  overflow-y: scroll;
+}
+
+@media screen and (min-width: 992px) {
+  #yt_list {
+    margin-left: 20px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  #yt_list {
+    width: 50vw;
+  }
+}
+
+.yt-item {
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  height: auto;
+  width: calc(98% - 30px);
+  float: left;
+  padding: 15px;
+  margin-bottom: 10px;
+  margin-left: 35px;
+  margin-right: 10px;
+  margin-top: 10px;
+}
+
+@media screen and (orientation: portrait) and (max-width: 468px) {
+  .yt-item {
+    height: auto;
+    width: calc(95% - 30px);
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .yt-item {
+    margin-left: 40px;
+    width: calc(98% - 50px);
+  }
+}
+
+a > .yt-item > img {
+  width: 25%;
+  float: left;
+  margin-right: 20px;
+}
+.yt-item:hover {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+div#channel_input {
+  position: fixed;
+  left: 10px;
+}
+div#channel_input > input,
+div#channel_input > button {
+  display: inline-block;
+  padding: 0.2em;
+  font-weight: 700;
+  font-size: 2em;
+}
+
+div#channel_input > input#user_name {
+  width: 250px;
+  color: #111;
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid #dfab12;
+  transition: 112ms;
+}
+div#channel_input > input#user_name:focus,
+button#sbm:focus {
+  outline: 1px solid #000;
+  box-shadow: 0 0 10px #fff;
+}
+div#channel_input > input#user_name.error {
+  color: #d33;
+  border-color: #d33;
+  text-decoration: line-through;
+  background: rgba(0, 0, 0, 0.5);
+}
+div#channel_input > button#sbm {
+  color: #dfab12;
+  background: rgba(0, 0, 0, 0.7);
+  border: 1px solid #dfab12;
+}
+div#channel_input > div.info {
+  display: none;
+  width: calc(100% - 2em);
+  font-size: 1em;
+  line-height: 1.2em;
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  padding: 1em;
+  transition: 225ms;
+}
+button#load-more{
+  display: block;
+  margin: 1em auto;
+  pading: .8em 1em;
+  font-size: 2em;
+  border: 1px solid;
+  outline: none;
+  border-radius:1em;
+  transition: 225ms;
+}
+button#load-more:hover{
+  cursor: pointer;
+  background:rgba(0,0,0,1);
+  color: #dfab12;
+  border-color: #dfab12;
+}
+@media screen and (orientation: portrait) {
+  #yt_player {
+    width: 100%;
+    height: 40vh;
+  }
+  #yt_list {
+    height: 59vh;
+    width: 100%;
+    top: auto;
+    bottom: 0;
+    left: 0;
+  }
+}
+
+.playlist__count {
+  margin-left: -10vw;
+  position: relative;
+  top: 1.5rem;
+  left: -15px;
+}
+
+@media screen and (min-width: 360px) {
+  .playlist__count {
+    margin-left:  -9vw;
+  }
+}
+
+@media screen and (min-width: 375px) {
+  .playlist__count {
+    margin-left:  -9vw;
+  }
+}
+
+@media screen and (min-width: 390px) {
+  .playlist__count {
+    margin-left:  -8vw;
+  }
+}
+
+@media screen and (min-width: 410px) {
+  .playlist__count {
+    margin-left:  -8vw;
+  }
+}
+
+@media screen and (min-width: 430px) {
+  .playlist__count {
+    margin-left:  -7vw;
+  }
+}
+
+@media screen and (min-width: 490px) {
+  .playlist__count {
+    margin-left:  -6vw;
+  }
+}
+
+@media screen and (min-width: 576px) {
+  .playlist__count {
+    margin-left:  -5vw;
+  }
+}
+
+@media screen and (min-width: 700px) {
+  .playlist__count {
+    margin-left:  -4.5vw;
+  }
+}
+
+@media screen and (orientation: portrait) and (min-width: 768px) {
+  .playlist__count {
+    margin-left:  -4vw;
+  }
+}
+
+@media screen and (orientation: portrait) and (min-width: 880px) {
+  .playlist__count {
+    margin-left:  -3.5vw;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .playlist__count {
+    margin-left: -35px;
+  }
+}
+
+.playlist__title {
+  font-size: 1.2rem;
+}
+
+@media screen and (min-width: 992px) {
+  .playlist__title {
+    font-size: 1.3rem;
+  }
+}
+
+@media screen and (min-width: 1400px) {
+  .playlist__title {
+    font-size: 1.4rem;
+  }
+}
+
+.playlist__title--shift {
+  position: relative;
+  top: -.5rem;
+  margin-left: 35%;
+}
+
+.playlist__more-btn--wrapper {
+  text-align: center;
+  margin-top: 30px;
+}
+
+.playlist__more-btn {
+  margin-top: 20px;
+}
+
+.playlist__blue-play {
+  clear: left;
+  width: 2rem;
+  height: 2rem;
+  margin-left: 5%;
+  margin-top: 5%;
+  margin-right: 0;
+}

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

@@ -0,0 +1,191 @@
+// Styles for both the .heroSlider and .baseballSlider
+// slick carousels
+//==============================================
+.slider-container {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+@media screen and (min-width: 1400px) {
+  .slider-container {
+    max-width: 1300px;
+  }
+}
+
+@media screen and (min-width: 1400px) {
+  .index-slider-container {
+    max-width: 1300px;
+  }
+}
+
+.slider-row {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.heading-container {   // div container for slide headings
+  border-left-color: $white;
+  border-left-style: solid;
+  border-left-width: 2px;
+  margin-left: .9%;
+  padding-left: 5px;
+  position: absolute;
+  top: 55%;
+  width: 7%;
+  z-index: 4444;
+}
+
+@media screen and (min-width: 488px) {
+  .heading-container {
+    top: 60%;
+    width: 6%;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .heading-container {
+    margin-left: .7%;
+    padding-left: 10px;
+    top: 61%;
+    width: 6%;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .heading-container {
+    margin-left: .6%;
+    padding-left: 20px;
+    top: 67%;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .heading-container {
+    top: 69%;
+  }
+}
+
+.heroSlider .slide-img,
+.baseballSlider .slide-img {
+  position: relative;
+  width: 100%;
+}
+
+.heroSlider .slick-next,
+.baseballSlider .slick-next {
+  right: 20px;
+}
+
+.heroSlider .slick-prev,
+.baseballSlider .slick-prev {
+  left: 20px;
+  z-index: 4;
+}
+
+@media screen and (min-width: 576px) {
+  .heroSlider .slick-next,
+  .baseballSlider .slick-next {
+    right: 25px;
+  }
+
+  .heroSlider .slick-prev,
+  .baseballSlider .slick-prev {
+    left: 25px;
+    z-index: 4;
+  }
+}
+
+.heroSlider .slick-next,
+.heroSlider .slick-prev,
+.baseballSlider .slick-next,
+.baseballSlider .slick-prev {
+  height: 25px;
+  top: 75%;
+  width: 25px;
+}
+
+@media screen and (min-width: 992px) {
+  .heroSlider .slick-next,
+  .heroSlider .slick-prev,
+  .baseballSlider .slick-next,
+  .baseballSlider .slick-prev {
+    height: 40px;
+    top: 80%;
+    width: 40px;
+  }
+}
+
+.heroSlider .slick-dots li button:before,
+.baseballSlider .slick-dots li button:before {
+  color: $landing-bg;
+  font-size: 12px;
+  line-height: 30px;
+  opacity: 1;
+  text-shadow:
+    -1px -1px 0 $black,
+    1px -1px 0 $black,
+    -1px 1px 0 $black,
+    1px 1px 0 $black;
+}
+
+.heroSlider .slick-dots li.slick-active button:before,
+.baseballSlider .slick-dots li.slick-active button:before {
+  color: $primary-blue;
+  opacity: 1;
+  text-shadow:
+    -1px -1px 0 $black,
+    1px -1px 0 $black,
+    -1px 1px 0 $black,
+    1px 1px 0 $black;
+}
+
+.heroSlider .slick-dots li,
+.baseballSlider .slick-dots li  {
+  margin-left: 1px;
+  margin-right: 1px;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.njcaa-link {
+  margin-top: 30px;
+  position: absolute;
+  right: 15%;
+  z-index: 1000;
+}
+
+@media screen and (min-width:1600px) {
+  .njcaa-link {
+    right: 20%;
+  }
+}
+
+@media screen and (min-width:1900px) {
+  .njcaa-link {
+    right: 25%;
+  }
+}
+
+@media screen and (min-width:1200px) {
+  .njcaa-logo {
+    width: 175px;
+  }
+}
+
+@media screen and (min-width:1600px) {
+  .njcaa-logo {
+    width: 200px;
+  }
+}
+
+.baseballSlider {   // prevents all slides from displaying vertically before slick has initialized
+  visibility: hidden;
+}
+
+.slick-initialized {   // makes slides visible again once slick has initialized
+  visibility: visible;
+}
+
+.slick-track {
+  margin-left: 0;
+}