egghead-styles 1.0.29

data/app/assets/stylesheets/sections/_footer.css.scss

@@ -0,0 +1,87 @@
+/* FOOTER */
+footer {
+  background: $footer-bg;
+  padding: 55px 0;
+  font-size: 16px;
+  line-height: 22px;
+  color: $footer-color;
+  @include respond-to(phones) {
+    padding: 30px 0;
+    text-align: center;
+    .item {
+      margin-bottom: 30px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+  .footer-part-left {
+    @include respond-to(tablets-small) {
+      margin-bottom: 30px;
+    }
+  }
+  .footer-part-right {
+    @include respond-to(tablets-small) {
+      text-align: center;
+    }
+    @include respond-to(phones) {
+      .title {
+        margin-bottom: 10px;
+      }
+    }
+  }
+  .title {
+    color: $footer-titles-color;
+    margin-bottom: 20px;
+    text-align: left;
+    @include respond-to(phones) {
+      text-align: center;
+      margin-bottom: 5px;
+    }
+  }
+  ul {
+    @extend .list-unstyled;
+  }
+  a {
+    color: $footer-color;
+    @extend .underlined;
+    &:hover {
+      color: #ffffff;
+    }
+  }
+  .search-field-holder {
+    margin-bottom: 50px;
+    .input-search {
+      border: none;
+      line-height: 24px;
+  }
+  }
+  .terms-conditions-holder {
+    margin-bottom: 25px;
+  }
+  .social-holder {
+    @extend .clearfix;
+    @include respond-to(tablets-small) {
+      display: inline-block;
+    }
+    a {
+      display: block;
+      float: left;
+      margin-left: 10px;
+      border-radius: 50%;
+      color: $footer-bg;
+      background: $site-color-red;
+      width: 40px;
+      height: 40px;
+      text-align: center;
+      font-size: 20px;
+      line-height: 40px;
+      &:first-child {
+        margin-left: 0;
+      }
+      &:hover {
+        background: $site-color-red-dim;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/sections/_header.css.scss

@@ -0,0 +1,256 @@
+/* HEADER styles */
+header {
+  padding: 10px 10px 0px 10px;
+  background: $header-bg;
+  z-index: 1050;
+  @include respond-to(phones) {
+    padding: 10px 15px;
+    position: fixed;
+    width: 100%;
+    left: 0;
+    top: 0;
+  }
+}
+
+.egghead-search-input-container {
+  position: relative;
+  max-width: 230px;
+  margin-left: 10px;
+
+  @include respond-to(tablets-large) {
+    max-width: 180px;
+    .lesson-details-container {
+      flex-direction: column;
+      .lesson-details {
+        margin-bottom: 10px;
+      }
+    }
+
+  }
+  @include respond-to(phones) {
+    max-width: 100%;
+    width: 100%;
+  }
+
+  .search-component .typeahead-container {
+    padding: 0 10px 10px 10px;
+  }
+
+  .search-component .icon-search, .search-component .icon-spinner {
+    padding: 0 17px;
+  }
+
+  .search-component.collapsed .icon-search, .search-component.collapsed .icon-spinner {
+    padding: 0 8px;
+  }
+
+  .search-component .icon-remove-circle {
+    margin-left: -33px;
+  }
+
+}
+
+.header-navigation-holder {
+  margin-bottom: 0;
+  min-height: 1px;
+  .logo {
+    display: block;
+    padding: 0;
+    margin-right: 20px;
+    margin-top: 5px;
+    @include respond-to(tablets-small) {
+      margin-right: 10px;
+    }
+    @include respond-to(tablets-small) {
+      max-width: 162px;
+    }
+    @include respond-to(phones) {
+      height: auto;
+    }
+  }
+  .header-navigation-toggle {
+    @include respond-to(phones) {
+      margin: 0;
+      color: #ffffff;
+      padding: 0;
+      display: block;
+      width: 30px;
+      height: 30px;
+      font-size: 24px;
+      line-height: 30px;
+      border: none;
+      [class*='icon'] {
+        vertical-align: middle;
+      }
+    }
+  }
+  .search-field-holder {
+    position: relative;
+    width: 230px;
+    margin-top: 5px;
+    @include respond-to(tablets-large) {
+      width: 130px;
+      font-size: 14px;
+    }
+    @include transition(250ms);
+    @include respond-to(phones) {
+      width: 100%;
+    }
+
+    div.autocomplete-input, .react-typeahead-input-container {
+      width: 100%;
+    }
+
+    &:before {
+      display: none;
+    }
+    &.collapsed {
+      width: 30px;
+      border-radius: 50%;
+      overflow: hidden;
+      cursor: pointer;
+      &:before {
+        display: block;
+        content: '';
+        position: absolute;
+        z-index: 20;
+        width: 100%;
+        height: 100%;
+      }
+      input {
+        width: 0px;
+        background: none $header-bg;
+      }
+      .btn-submit {
+        color: $site-color-medium-graphite;
+        width: 30px;
+        height: 30px;
+      }
+    }
+    input {
+      height: 30px;
+      border: none;
+      position: relative;
+      width: 100%;
+      color: $site-color-grey;
+      background: none $header-search-field-bg;
+      font-size: $header-navigation-menu-item-font-size;
+      line-height: 24px;
+      padding: 4px 35px 4px 15px;
+      @include custom-placeholder($color: $site-color-medium-graphite, $font-size: 16px, $line-height: 22px);
+      @include respond-to(tablets-large) {
+        font-size: $header-navigation-menu-item-font-tablets;
+      }
+    }
+    .btn-submit {
+      width: 30px;
+      height: 30px;
+      font-size: 18px;
+    }
+  }
+}
+
+.header-navigation {
+  @include respond-to(phones) {
+    box-shadow: none;
+    border: none;
+    padding: 0;
+    &.collapse.in {
+      max-height: 370px;
+    }
+  }
+  .userpic-holder {
+    display: inline-block;
+  }
+  .userpic {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+  }
+}
+
+.header-navigation-list {
+  @include respond-to(phones) {
+    margin: 0;
+    &:first-child {
+      margin-top: 15px;
+    }
+    &:last-child {
+      margin-bottom: 15px;
+    }
+  }
+  .dropdown-menu > li > a {
+    @include respond-to(phones) {
+      white-space: pre-line;
+    }
+  }
+  .technology-title {
+    padding-left: 5px;
+  }
+  > li {
+    margin-top: 7px;
+    &.half-height {
+      margin-top: 4px;
+    }
+    &.full-height {
+      margin-top: 0;
+      margin-left: 5px;
+    }
+    > a {
+      font-size: $header-navigation-menu-item-font-size;
+      font-weight: $header-navigation-menu-item-font-weight;
+      line-height: $header-navigation-menu-item-line-height;
+      color: $header-navigation-menu-item-color;
+      padding: $header-navigation-menu-item-padding;
+      @include font-smoothing(on);
+      @include respond-to(tablets-small) {
+        font-size: $header-navigation-menu-item-font-tablets;
+        padding: $header-navigation-menu-item-padding-tablets;
+      }
+      &:hover, &:focus {
+        background: $header-bg;
+        color: $header-navigation-menu-item-color-hover;
+        .caret {
+          border-bottom-color: $site-color-red;
+          border-top-color: $site-color-red;
+        }
+      }
+      &.go-pro {
+        font-size: 14px;
+        @include respond-to(phones) {
+          margin: 10px 0 0 7px;
+          float: left;
+        }
+        &:hover {
+          color: #ffffff;
+          font-size: 14px;
+        }
+      }
+    }
+    &.open {
+      > a, > a:hover, > a:focus {
+        background: $header-bg;
+        color: $header-navigation-menu-item-color-hover;
+        .caret {
+          border-bottom-color: $site-color-red;
+          border-top-color: $site-color-red;
+        }
+      }
+    }
+  }
+  .caret {
+    border-bottom-color: $site-color-red-dim;
+    border-top-color: $site-color-red-dim;
+  }
+}
+
+// The dropdown menu (ul)
+.dropdown-menu {
+  // Links within the dropdown menu
+  > li > a {
+    @include respond-to(phones) {
+      color: #9e9e9e;
+    }
+
+  }
+}

data/app/assets/stylesheets/sections/_hero.css.scss

@@ -0,0 +1,455 @@
+.hero {
+  padding: 10px 0 10px 0;
+  background: url(image_path("bg/bg-hero.png")) 0 -5px repeat;
+  text-align: center;
+  color: $hero-subtitle-color;
+  &.related-to-angularjs {
+    background: url(image_path("bg/bg-hero-angularjs.png")) 0 0 no-repeat;
+    background-size: cover;
+  }
+  @include respond-to(phones) {
+    padding: 30px 0;
+  }
+  .hero-logo {
+    max-width: 140px;
+    width: 100%;
+    margin-bottom: 30px;
+    @include respond-to(tablets-small) {
+      max-width: 120px;
+    }
+    @include respond-to(phones) {
+      max-width: 80px;
+    }
+    &.hero-logo-egghead {
+      max-width: 290px;
+      width: 100%;
+      @include respond-to(tablets-small) {
+        max-width: 200px;
+      }
+      @include respond-to(phones) {
+        max-width: 100px;
+      }
+    }
+  }
+  .avatar {
+    @extend .avatar;
+    width: 140px;
+    margin-bottom: 30px;
+    border: 2px solid black;
+    @include respond-to(tablets-small) {
+      width: 120px;
+    }
+    @include respond-to(phones) {
+      width: 80px;
+    }
+  }
+  h1 {
+    font-size: 36px;
+  }
+  .mega {
+    font-weight: 900;
+    font-size: 58px;
+    @include respond-to(tablets-small) {
+      font-size: 36px;
+      font-weight: 600;
+    }
+    @include respond-to(phones) {
+      font-size: 22px;
+    }
+  }
+  .title {
+    color: $hero-title-color;
+    margin-bottom: 15px;
+
+    @include respond-to(phones) {
+      margin-top: 0;
+    }
+  }
+  .subtitle {
+    font-size: $hero-subtitle-font-size;
+    color: $hero-subtitle-color;
+    line-height: 1.285em;
+    max-width: 980px;
+    margin-bottom: 30px;
+    @include center-block();
+    @include respond-to(tablets-small) {
+      font-size: $hero-subtitle-font-size-tablets;
+    }
+    @include respond-to(phones) {
+      font-size: $hero-subtitle-font-size-phones;
+    }
+    a {
+      color: $site-color-light-grey;
+      text-decoration: underline;
+    }
+  }
+  .get-pro {
+    margin-bottom: 20px;
+  }
+  .hero-bottom-link {
+    color: #ffffff;
+    i, a {
+      color: #ffffff;
+    }
+  }
+  .line-lesson-author {
+    color: $hero-subtitle-color;
+    font-size: 16px;
+    margin-bottom: 40px;
+    a, a:hover, a:focus {
+      color: $hero-subtitle-color;
+    }
+  }
+
+
+  .next-lesson {
+    margin-top: 40px;
+    color: $hero-subtitle-color;
+    @include text-overflow();
+    text-align: center;
+
+    i {
+      color: $site-color-blue;
+      margin-left: 5px;
+      bottom: -3px;
+      position: relative;
+    }
+
+    a {
+      color: $hero-title-color;
+      @include respond-to(phones) {
+        margin-top: 0;
+      }
+    }
+  }
+}
+.logo-holder {
+  margin: 30px auto 40px auto;
+  img {
+    height: 100px;
+    width: auto;
+  }
+  @include respond-to(phones) {
+    margin: 0 auto 20px auto;
+    img {
+      height: 35px;
+    }
+  }
+}
+.lesson-without-playlist-holder {
+  position: relative;
+  @extend .clearfix;
+}
+
+.lesson-video-container {
+  padding-left: 75px;
+  padding-right: 75px;
+  @include respond-to(tablets-small) {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
+
+.lesson-with-playlist-holder {
+  margin-bottom: 0px;
+  position: relative;
+  @extend .clearfix;
+
+  .lesson-frame-column-theater {
+    padding-right: 0;
+    margin-bottom: 30px;
+  }
+  .lesson-frame-column {
+    padding-right: 360px;
+    @include respond-to(tablets-large) {
+      padding-right: 300px;
+    }
+    @include respond-to(tablets-small) {
+      padding-right: 0;
+      margin-bottom: 30px;
+    }
+  }
+
+  .playlist-column-theater {
+    width: 100%;
+    height: 300px;
+    position: relative;
+    margin-bottom: 30px;
+    padding-top: 45px;
+    right: 0;
+    top: 0;
+    background: $lesson-playlist-background;
+    text-align: left;
+    @include respond-to(tablets-small) {
+      width: 100%;
+    }
+  }
+  .playlist-column {
+    padding-top: 50px;
+    position: absolute;
+    height: 100%;
+    width: 360px;
+    right: 0;
+    top: 0;
+    background: $lesson-playlist-background;
+    text-align: left;
+    @include respond-to(tablets-large) {
+      width: 300px;
+    }
+    @include respond-to(tablets-small) {
+      width: 100%;
+      height: 300px;
+      position: relative;
+      margin-bottom: 30px;
+    }
+  }
+
+  .scrollable-holder {
+    overflow: hidden;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    @include respond-to(tablets-large) {
+      padding: 5px;
+    }
+  }
+  .welcome-box {
+    padding: 10px 15px;
+    font-size: 16px;
+    line-height: 22px;
+    @include respond-to(phones) {
+      font-size: 13px;
+      line-height: 18px;
+    }
+  }
+
+}
+
+
+.lessons-frame-holder {
+  width: 100%;
+  height: auto;
+  position: relative;
+  //padding-bottom: 56.89%;
+  &.lesson-frame-cannot-show {
+    height: 0;
+    padding-bottom: 50%;
+  }
+  .lessons-frame {
+    width: 100%;
+    height: 100%;
+    //position: absolute;
+    background: none #474747;
+    text-align: center;
+    padding: 5px 5px 5px 5px;
+    &.lesson-blocked {
+      position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+  .lesson-blocked {
+    background: url(image_path("elements/blocked-bg.jpg")) no-repeat center top /cover;
+    .egghead-logo-small {
+      max-width: 70px;
+    }
+    .title-subtitle-block {
+      margin-bottom: 15px;
+    }
+    .title {
+      font-size: 28px;
+    }
+    .subtitle {
+      font-size: 16px;
+      max-width: 80%;
+    }
+    .section {
+      padding: 30px 20px 20px 20px;
+    }
+    #signup {
+      margin-bottom: 10px;
+    }
+  }
+}
+
+
+.lesson-action-holder {
+  background-color: #474747;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 0px 5px 5px 5px;
+  .buttons-holder {
+    background-color: #272525;
+    width: 100%;
+    height: 100%;
+    text-align: left;
+    position: relative;
+    display: flex;
+    align-items: center;
+    a {
+      cursor: pointer; vertical-align: middle;
+    }
+  }
+}
+
+.lesson-controls-container {
+  flex-grow: 1;
+  display: flex;
+  .custom-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #b7b7b7;
+    margin: 5px;
+    border: none;
+    font-size: 15px;
+    padding: 8px 5px;
+    line-height: 20px;
+    font-weight: 700;
+    &:hover {
+      color: white;
+    }
+    @include respond-to(tablets-large) {
+      font-size: 14px;
+    }
+    @include respond-to(phones) {
+      font-size: 12px;
+      i {
+        font-size: 20px;
+      }
+    }
+    i {
+      color: $site-color-blue;
+      margin-right: 5px;
+      vertical-align: middle;
+      font-size: 18px;
+    }
+    .icon-check { color: $button-red-bg-active }
+  }
+  .add-to-menu {
+    .dropdown-toggle {
+      font-size: 15px;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      @include respond-to(tablets-large) {
+        font-size: 14px;
+      }
+      @include respond-to(phones) {
+        font-size: 12px;
+        i {
+          font-size: 20px;
+        }
+      }
+      i {
+        font-size: 18px;
+      }
+    }
+  }
+  .replay-speed-btn {
+    color: white;
+    width: 80px;
+    &:hover {
+      .icon-caret-down {
+        color: $button-grey-bg;
+      }
+      .icon-double-angle-right {
+        color: white;
+      }
+    }
+    @include respond-to(tablets-large) {
+      width: 50px;
+    }
+    .icon-double-angle-right {
+      @include transition(150ms);
+      color: $button-grey-bg-dark-active;
+      margin-right: 5px;
+      vertical-align: top;
+    }
+  }
+}
+
+.lesson-like-container {
+  position: relative;
+  display: flex;
+  text-align: right;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  .toggle-theater-mode-btn {
+    font-size: 20px;
+    color: $button-grey-bg;
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 20px;
+    &:hover {
+      color: white;
+    }
+  }
+  .lesson-like-btn {
+    color: $button-grey-bg;
+    font-size: 20px;
+    border: none;
+    display: inline-block;
+    margin: 0 5px;
+    &:last-child {
+      margin-right: 0;
+    }
+    &.green {
+      color: $site-color-green;
+    }
+    &.red {
+      color: $site-color-red;
+    }
+    &:hover {
+      &#lesson-like {
+        color: $site-color-green;
+      }
+      &#lesson-dislike {
+        color: $site-color-red;
+      }
+    }
+  }
+  #lesson-like {
+    vertical-align: top;
+  }
+  @include respond-to(phones) {
+    width: 35%;
+  }
+  span {
+    background-color: black;
+    position: relative;
+    text-align: center;
+    text-transform: uppercase;
+    color: $button-grey-bg;
+    margin: 0;
+    font-size: 14px;
+    padding: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    &.like-description {
+      padding: 0;
+      margin-right: 5px;
+      display: inline-block;
+      font-weight: 600;
+      cursor: default;
+    }
+    @include respond-to(tablets-large) {
+      padding: 11px 15px;
+    }
+    @include respond-to(tablets-small) {
+      background-color: transparent;
+    }
+    @include respond-to(phones) {
+      background-color: transparent;
+    }
+  }
+}
+
+
+
+
+