jekflix 3.0.0

data/_sass/_header.scss

@@ -0,0 +1,150 @@
+html,
+body {
+  height: 100%;
+}
+
+.bar-header {
+  background-color: $primaryDark;
+  padding: rem(10px) rem(15px);
+  position: fixed;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+  transition: top 0.5s, left 0.3s ease, background-color 0.5s, box-shadow 0.5s;
+  
+  @include media(">=sm") {
+    padding: rem(15px) rem(0px);
+  }
+
+  .logo {
+    display: inline-block;
+    margin: 0;
+    height: rem(32px);
+    line-height: rem(32px);
+
+    a {
+      display: block;
+      color: $accentDark;
+      text-decoration: none;
+      font-size: rem(32px);
+      position: relative;
+      outline: 0;
+    }
+
+    svg {
+      width: rem(120px);
+      height: rem(30px);
+      transition: all .4s;
+  
+      @include media(">=sm") {
+        width: rem(205px);
+      }
+    }
+  }
+
+  .version {
+    color: $accentDark;
+    font-size: rem(10px);
+    font-weight: normal;
+    line-height: 1;
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: block;
+    transform: translateX(110%);
+    opacity: 0.3;
+  }
+
+  .icon-menu {
+    float: left;
+    cursor: pointer;
+    margin: rem(5px) rem(20px) rem(5px) 0;
+    width: rem(20px);
+    height: rem(20px);
+    fill: $accentDark;
+
+    @include media(">=sm") {
+      margin: rem(5px) rem(20px) rem(5px) rem(25px);
+    }
+  }
+
+  .dosearch {
+    float: right;
+    width: rem(30px);
+    height: rem(30px);
+    cursor: pointer;
+    margin: 0;
+    @include media(">=sm") {
+      margin: 0 rem(20px) 0 0;
+    }
+  }
+
+  .icon-search {
+    width: rem(20px);
+    height: rem(20px);
+    fill: $accentDark;
+    margin: rem(5px);
+  }
+
+  .get-theme {
+    display: none;
+    font-size: rem(13px);
+    font-weight: bold;
+    text-decoration: none;
+    background-color: $themeColor;
+    color: $accentDark;
+    padding: rem(5px) rem(10px);
+    border-radius: rem(5px);
+    float: right;
+    margin: rem(5px) rem(15px) rem(5px) rem(5px);
+
+    @include media(">=sm") {
+      display: inline-block;
+    }
+  }
+}
+
+body.main-page {
+  background-color: #141414;
+
+  .bar-header {
+    background-color: rgba(0, 0, 0, 0.85);
+  }
+}
+
+body.light:not(.main-page) {
+  .bar-header {
+    box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
+    background-color: rgba(255, 255, 255, 0.95);
+
+    .icon-search,
+    .icon-menu {
+      fill: $primaryDark;
+    }
+
+    .logo a,
+    .version {
+      color: $primaryDark;
+    }
+  }
+}
+
+.overlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  pointer-events: none;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 17;
+  opacity: 0;
+  transition: all 0.3s;
+
+  &.show {
+    pointer-events: auto;
+    opacity: 1;
+  }
+}

data/_sass/_hero.scss

@@ -0,0 +1,108 @@
+.hero {
+  position: relative;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 100vh;
+
+  +#grid {
+    margin-top: rem(-80px);
+  }
+
+  .gradient,
+  .pixels {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .pixels {
+    opacity: 0.8;
+    background-image: url(../../assets/img/pixels.png);
+  }
+
+  .gradient {
+    background-image: linear-gradient(0deg, rgba(20, 20, 20, 1) 5%, rgba(0, 0, 0, 0) 30%);
+  }
+
+  .content {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    position: absolute;
+    width: 80%;
+    height: 100%;
+    padding-left: 10%;
+
+    @include media(">=sm") {
+      width: 50%;
+    }
+
+    .date {
+      font-size: rem(16px);
+      color: rgba(255, 255, 255, 0.75);
+    }
+
+    .title {
+      font-size: rem(40px);
+      color: #fff;
+      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+      margin: rem(10px) 0;
+
+      @include media(">=sm") {
+        font-size: rem(50px);
+      }
+    }
+
+    .description {
+      font-size: rem(24px);
+      color: #fff;
+      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+      margin: 0;
+
+      @include media(">=sm") {
+        font-size: rem(26px);
+      }
+    }
+
+    .buttons {
+      margin-top: rem(50px);
+    }
+
+    .button {
+      display: inline-block;
+      font-size: rem(18px);
+      font-weight: bold;
+      color: #fff;
+      text-decoration: none;
+      background-color: rgba(0, 0, 0, 0.6);
+      border-radius: rem(5px);
+      padding: rem(10px) rem(15px);
+      transition: all 0.3s;
+
+      @include media(">=sm") {
+        font-size: rem(18px);
+      }
+
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.5);
+        box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2);
+      }
+
+      svg {
+        width: rem(25px);
+        height: rem(25px);
+        margin-right: rem(10px);
+        vertical-align: middle;
+        color: $themeColor;
+      }
+
+      span {
+        vertical-align: middle;
+      }
+    }
+  }
+}

data/_sass/_highlight.scss

@@ -0,0 +1,140 @@
+pre {
+  background: #282a36;
+  width: 100%;
+  padding: rem(20px) 0;
+  color: $accentDark;
+  margin: rem(30px) 0;
+  font-size: rem(14px);
+
+  @include media(">=sm") {
+    font-size: rem(16px);
+    padding: rem(40px) 0;
+    margin: rem(50px) 0;
+  }
+
+  code {
+    @include center(rem(800px));
+    padding: 0 rem(20px);
+
+    @include media("<sm") {
+      overflow-x: scroll;
+    }
+  }
+
+  span {
+    line-height: 1.5rem;
+    font-family: "Monaco", "Consolas", "Menlo", monospace;
+  }
+}
+
+.highlight {
+  margin: rem(20px) 0;
+
+  @include media(">=sm") {
+    word-wrap: break-word;
+    margin: rem(29px) 0;
+  }
+
+  .hll {
+    background-color: #282a36;
+  }
+
+  .c,     // Comment
+  .cm,    // Comment.Multiline
+  .cp,    // Comment.Preproc
+  .c1,    // Comment.Single
+  .cs {   // Comment.Special
+    color: #6272a4;
+  }
+
+  .err {  // Error
+    color: #ff5555;
+    background-color: #282a36;
+  }
+
+  .kc,    // Keyword.Constant
+  .kp,    // Keyword.Pseudo
+  .kr,    // Keyword.Reserved
+  .kt,    // Keyword.Type
+  .no {   // Name.Constant
+    color: #66d9ef;
+  }
+
+  .l,     // Literal 
+  .mf,    // Literal.Number.Float
+  .mh,    // Literal.Number.Hex
+  .mi,    // Literal.Number.Integer
+  .mo,    // Literal.Number.Oct
+  .se,    // Literal.String.Escape
+  .il {   // Literal.Number.Integer.Long
+    color: #ae81ff;
+  }
+
+  .p,     // Punctuation
+  .nx {   // Name.Other
+    color: #f7f7f2;
+  }
+
+  .ni,    // Name.Entity
+  .nn,    // Name.Namespace
+  .py,    // Name.Property
+  .nv,    // Name.Variable
+  .w,     // Text.Whitespace
+  .bp,    // Name.Builtin.Pseudo
+  .vc,    // Name.Variable.Class
+  .vg,    // Name.Variable.Global
+  .vi {   // Name.Variable.Instance
+    color: #50fa7b;
+  }
+
+  .nl {   // Name.Label
+    color: #8be9fd;
+  }
+
+  .n,     // Name
+  .nb,    // Name.Builtin
+  .m {    // Literal.Number
+    color: #bd93f9;
+  }
+
+  .nt,    // Name.Tag
+  .k,     // Keyword
+  .kn,    // Keyword.Namespace
+  .kd,    // Keyword.Declaration
+  .o,     // Operator
+  .ow {   // Operator.Word
+    color: #ff79c6;
+  }
+
+  .ge {   // Generic.Emph
+    font-style: italic;
+  }
+
+  .gs {   // Generic.Strong
+    font-weight: bold;
+  }
+
+  .ld,     // Literal.Date
+  .s,      // Literal.String
+  .sb,     // Literal.String.Backtick
+  .sc,     // Literal.String.Char
+  .sd,     // Literal.String.Doc
+  .s2,     // Literal.String.Double
+  .sh,     // Literal.String.Heredoc
+  .si,     // Literal.String.Interpol
+  .sx,     // Literal.String.Other
+  .sr,     // Literal.String.Regex
+  .s1,     // Literal.String.Single
+  .ss,     // Literal.String.Symbol
+  .vglnk { // Link
+    color: #f1fa8c;
+  }
+
+  .na,    // Name.Attribute
+  .nc,    // Name.Class
+  .nd,    // Name.Decorator
+  .ne,    // Name.Exception
+  .nf {   // Name.Function
+    color: #50fa7b;
+  }
+}

data/_sass/_home.scss

@@ -0,0 +1,218 @@
+.home {
+  @include mainFont(400);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  padding-top: rem(80px);
+
+  @include media(">=sm") {
+    padding-top: rem(100px);
+  }
+
+  &.no-padding {
+    padding-top: 0;
+  }
+}
+
+.row {
+  @include center(100%);
+  margin: 0px rem($rowMargin);
+}
+
+.flex-grid {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+.title-category {
+  font-size: rem(32px);
+  margin: 0 0 rem(40px);
+  padding: 0 rem(23px);
+  text-transform: lowercase;
+  color: #fff;
+}
+
+.box-item {
+  flex: 1 0 $itemMinWidth;
+  margin: 0 0 rem(30px);
+  display: inline-block;
+  min-height: rem(285px);
+  transition: all 0.3s;
+  position: relative;
+  z-index: 1;
+
+  @include media(">=sm") {
+    margin: 0 rem($itemMargin) rem(30px);
+  }
+
+  // Note 1: This complex calc right here is what makes the leftover box items
+  // have the same width than their siblings.
+  @for $n from 2 through $maxItemsPerRow {
+    $resolution: (2 * $rowMargin) + ($n * $itemMinWidth);
+    @include media(">=#{$resolution}") {
+      max-width: calc(100%/#{$n} - #{$itemMargin * 2});
+    }
+  }
+
+  // Note 2: This sets the maximum number of box items per row.
+  @include media(">=#{(2 * $rowMargin) + ($maxItemsPerRow * $itemMinWidth)}") {
+    flex: 1 0 calc(100%/#{$maxItemsPerRow} - #{$itemMargin * 2});
+  }
+
+  &:hover {
+    z-index: 2;
+    transform: scale(1.1);
+
+    img {
+      -webkit-filter: grayscale(100%);
+      filter: grayscale(100%);
+      transform: scale(1.05);
+    }
+
+    .box-body {
+      time,
+      p {
+        color: $accentDark;
+      }
+
+      .cover {
+        .new-post-tag {
+          background-color: #000;
+        }
+
+        .read-icon {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  a {
+    text-decoration: none;
+    display: block;
+  }
+
+  .category {
+    display: block;
+    height: rem(36px);
+    line-height: rem(36px);
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: rem(18px);
+    padding: 0 rem(15px);
+
+    a {
+      color: $accentDark;
+    }
+  }
+
+  .box-body {
+    img {
+      width: 100%;
+      height: auto;
+      margin: 0 auto;
+      transition: all 0.2s ease-in-out;
+    }
+
+    time {
+      font-weight: 300;
+      font-size: rem(16px);
+      color: darken($lightGray, 50%);
+      pointer-events: none;
+    }
+
+    h2 {
+      margin: rem(10px) 0;
+      font-size: rem(24px);
+      @include mainFont(800);
+      color: $accentDark;
+      line-height: rem(30px);
+    }
+
+    p {
+      margin: 0 0 rem(30px);
+      color: darken($lightGray, 20%);
+      font-size: rem(17px);
+      line-height: rem(26px);
+    }
+
+    .tags a {
+      height: rem(30px);
+      line-height: rem(26px);
+      color: $accentDark;
+      padding: 0 rem(10px);
+      border: 1px solid $accentDark;
+      border-radius: 15px;
+      display: inline-block;
+      margin: 0 rem(10px) rem(10px) 0;
+      z-index: 50;
+
+      &:hover {
+        color: $primaryDark;
+        background: $accentDark;
+        border-color: $accentDark;
+      }
+    }
+
+    .cover {
+      position: relative;
+      display: block;
+
+      .loader {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate3d(-50%, -50%, 0);
+        color: $themeColor;
+        z-index: 1;
+      }
+
+      img {
+        position: relative;
+        z-index: 2;
+      }
+
+      .new-post-tag {
+        text-transform: uppercase;
+        display: inline-block;
+        background: $themeColor;
+        color: #fff;
+        font-size: rem(13px);
+        font-weight: 700;
+        line-height: rem(24px);
+        padding: 0 rem(8px);
+        position: absolute;
+        bottom: rem(8px);
+        left: 0;
+        z-index: 3;
+      }
+
+      .read-icon {
+        opacity: 0;
+        background-color: rgba(0, 0, 0, 0.7);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        content: "";
+        width: rem(80px);
+        height: rem(80px);
+        border-radius: 40px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-top: rem(-40px);
+        margin-left: rem(-40px);
+        border: 2px solid #fff;
+        color: $themeColor;
+        z-index: 4;
+
+        svg {
+          width: rem(48px);
+        }
+      }
+    }
+  }
+
+  .box-info {
+    padding: rem(15px);
+  }
+}

data/_sass/_icons.scss

@@ -0,0 +1,45 @@
+.icons-home {
+  text-align: center;
+
+  a {
+    display: inline-block;
+    padding: rem(15px);
+    margin: rem(2px);
+    border-radius: 50%;
+    border: rem(2px) solid $accentDark;
+    line-height: 0;
+    transition: all 0.7s;
+
+    .icon {
+      fill: $accentDark;
+      @include size(18, 18);
+
+      @include media(">=sm") {
+        @include size();
+      }
+    }
+
+    &:hover {
+      background: $accentDark;
+
+      .icon {
+        fill: $texts;
+      }
+    }
+  }
+}
+
+.down {
+  position: absolute;
+  bottom: 50px;
+  width: 100%;
+  display: block;
+  text-align: center;
+
+  .icon {
+    @include align(both);
+    @include size(100, 100);
+    fill: $accentDark;
+    animation: pulse 1.3s infinite;
+  }
+}