jekflix 3.0.0

data/_sass/_search.scss

@@ -0,0 +1,138 @@
+.search-wrapper {
+  position: fixed;
+  top: 30px;
+  width: 100%;
+  padding-right: 5%;
+  padding-left: 5%;
+  transform: translateY(-200px);
+  z-index: 19;
+
+  &.active {
+    transform: translateY(0);
+  }
+}
+
+.search-form {
+  position: relative;
+  top: 0;
+  width: 100%;
+  transform: translateX(-200px);
+  transition: all 200ms 100ms cubic-bezier(0, 0.6, 0.4, 1);
+  opacity: 0;
+  z-index: 19;
+
+  .search-field {
+    width: 100%;
+    height: rem(40px);
+    line-height: rem(30px);
+    @include mainFont(300);
+    font-size: rem(20px);
+    color: $primaryDark;
+    background-color: $accentDark;
+    border: 0;
+    border-radius: rem(20px);
+    padding: rem(5px) rem(25px);
+    outline: 0;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  &.active {
+    top: 0;
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  .search-list {
+    position: absolute;
+    width: 100%;
+    @include mainFont(300);
+    display: none;
+    padding: 0 rem(20px);
+    margin: rem(20px) 0;
+    list-style-type: none;
+
+    @include media("<sm") {
+      height: 380px;
+      overflow: scroll;
+    }
+
+    .active & {
+      display: block;
+    }
+
+    .entry-date {
+      float: right;
+      display: none;
+      font-size: rem(14px);
+
+      @include media(">=sm") {
+        display: inline;
+      }
+    }
+
+    .entry-category {
+      text-transform: uppercase;
+      background-color: $themeColor;
+      margin-right: rem(5px);
+      height: rem(20px);
+      border-radius: rem(10px);
+      font-size: rem(12px);
+      padding: rem(2px) rem(8px);
+      color: #ffffff;
+    }
+
+    a {
+      color: $accentDark;
+      text-decoration: none;
+      display: block;
+      padding: rem(15px) 0;
+      width: 100%;
+      border-bottom: 1px solid darken($accentDark, 80%);
+      transition: all 0.3s;
+      line-height: rem(25px);
+
+      &:hover {
+        color: $themeColor;
+        .entry-category {
+          color: #ffffff;
+        }
+      }
+    }
+  }
+
+  .icon-remove-sign {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: block;
+    width: rem(26px);
+    height: rem(26px);
+    padding: rem(5px);
+    fill: $accentDark;
+    background-color: $themeColor;
+    border-radius: 13px;
+    margin: rem(7px);
+    cursor: pointer;
+    outline: 0;
+    z-index: 1;
+  }
+}
+
+.search-overlay {
+  overflow: hidden;
+
+  &:after {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    min-height: 100%;
+    background-color: $primaryDark;
+    content: "";
+    z-index: 18;
+  }
+}

data/_sass/_share.scss

@@ -0,0 +1,37 @@
+.share {
+  @include center(800px);
+  text-align: center;
+  border-top: 1px solid $lightGray;
+  padding-top: rem(20px);
+  margin-top: rem(10px);
+
+  @include media(">=sm") {
+    margin-top: rem(50px);
+  }
+
+  article & {
+    border-top: none;
+  }
+
+  svg {
+    margin: rem(15px);
+    @include size(35, 35);
+  }
+
+  a {
+    text-decoration: none;
+    border: none;
+  }
+
+  .icon {
+    transition: all 0.3s;
+  }
+
+  .icon-twitter:hover {
+    fill: #1da1f3;
+  }
+  
+  .icon-facebook:hover {
+    fill: #3b5998;
+  }
+}

data/_sass/_staff.scss

@@ -0,0 +1,38 @@
+.staff {
+  @include media(">=sm") {
+    @include center(rem(800px));
+  }
+
+  .item:not(:last-child) {
+    border-bottom: 1px solid $lightGray;
+  }
+
+  img {
+    width: rem(150px);
+    margin: 0 rem(20px) rem(20px);
+
+    @include media(">=sm") {
+      width: rem(200px);
+      margin-bottom: rem(30px);
+    }
+  }
+
+  h1,
+  h2,
+  h3 {
+    margin-bottom: rem(10px);
+
+    &.name {
+      padding-top: rem(10px);
+    }
+
+    &.position {
+      font-size: rem(19px);
+      font-weight: normal;
+      font-style: italic;
+      color: #999;
+      padding-top: 0;
+      margin-bottom: rem(20px);
+    }
+  }
+}

data/_sass/_theme.scss

@@ -0,0 +1,7 @@
+$theme: (
+  themeColor: #ff0a16,
+  primaryDark: #141414,
+  accentDark: #ffffff,
+  lightGray: #f2f2f2,
+  texts: #333333
+);

data/_sass/_typo.scss

@@ -0,0 +1,7 @@
+a {
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
+h1, h2, h3, h4 {
+  @include mainFont();
+}

data/_sass/_variables.scss

@@ -0,0 +1,24 @@
+/**
+ * Set up here the general appearance of the theme.
+ */
+
+$themeColor: map-get($theme, themeColor) !default;
+$primaryDark: map-get($theme, primaryDark) !default;
+$accentDark: map-get($theme, accentDark) !default;
+$lightGray: map-get($theme, lightGray) !default;
+$texts: map-get($theme, texts) !default;
+
+// Breakpoints
+$breakpoints: (
+  sm: 37.5rem
+);
+
+// Margins
+$rowMargin: 10px;
+$itemMargin: 15px;
+
+// Sizes
+$itemMinWidth: 300px;
+
+// Settings
+$maxItemsPerRow: 6;

data/_sass/jekflix.scss

@@ -0,0 +1 @@
+@import "main";

data/_sass/main.scss

@@ -0,0 +1,25 @@
+@import "include-media";
+@import "normalize";
+@import "theme";
+@import "variables";
+@import "functions";
+@import "mixins";
+@import "typo";
+@import "animations";
+@import "icons";
+@import "menu";
+@import "hero";
+@import "search";
+@import "elements";
+@import "header";
+@import "home";
+@import "post";
+@import "pagination";
+@import "share";
+@import "highlight";
+@import "form";
+@import "author";
+@import "staff";
+@import "modal";
+@import "footer";
+@import "no-js";

data/_sass/preview.scss

@@ -0,0 +1,310 @@
+@import "include-media";
+@import "normalize";
+@import "theme";
+@import "variables";
+@import "functions";
+@import "mixins";
+@import "typo";
+@import "highlight";
+
+body {
+  overflow-x: auto;
+
+  @include media(">=sm") {
+    padding: rem(50px) rem(30px);
+  }
+
+  img {
+    max-width: 100%;
+    margin: 0 auto rem(20px);
+    display: block;
+    padding: 10px 0;
+
+    @include media(">=sm") {
+      margin: 0 auto rem(29px);
+    }
+  }
+
+  figure {
+    margin: 0;
+  }
+
+  figcaption,
+  img + em {
+    display: block;
+    color: darken($lightGray, 30%);
+    text-align: center;
+    @include mainFont(300);
+  }
+
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  ul,
+  ol,
+  iframe,
+  div[class^="css"] {
+    @include center(rem(800px));
+    @include mainFont(400);
+    font-size: rem(17px);
+    line-height: rem(30px);
+    letter-spacing: 0.05rem;
+    padding: 0 rem(20px);
+    margin: 0 auto rem(20px);
+
+    @include media(">=sm") {
+      font-size: rem(20px);
+      line-height: rem(40px);
+      margin: 0 auto rem(29px);
+      padding: 0;
+    }
+  }
+
+  h1.post-title {
+    margin: 0 auto;
+    line-height: rem(40px);
+    @include media(">=sm") {
+      line-height: rem(60px);
+      margin: 0 auto rem(10px);
+    }
+  }
+
+  p.post-subtitle {
+    color: darken($lightGray, 30%);
+    font-size: rem(17px);
+    margin: 0 auto rem(10px);
+    line-height: rem(30px);
+
+    @include media(">=sm") {
+      font-size: rem(20px);
+      line-height: rem(40px);
+    }
+  }
+
+  img.post-cover {
+    margin-bottom: rem(20px);
+    @include media(">=sm") {
+      margin-bottom: rem(29px);
+    }
+  }
+
+  p.post-info {
+    @include mainFont(300);
+    font-size: rem(13px);
+    letter-spacing: 0;
+    color: darken($lightGray, 30%);
+    margin: 0 auto;
+
+    @include media(">=sm") {
+      font-size: rem(16px);
+    }
+
+    span,
+    time {
+      vertical-align: middle;
+    }
+
+    time {
+      margin-right: rem(10px);
+
+      @include media(">=sm") {
+        margin-right: rem(30px);
+      }
+    }
+
+    svg {
+      width: rem(15px);
+      height: rem(15px);
+      fill: darken($lightGray, 30%);
+      vertical-align: middle;
+      margin-right: rem(5px);
+    }
+  }
+
+  li {
+    padding: rem(10px) 0;
+    ul {
+      margin-bottom: 0;
+    }
+  }
+
+  p,
+  li {
+    color: $texts;
+    code {
+      font-size: rem(15px);
+      color: #bf616a;
+      word-wrap: break-word;
+      background: $lightGray;
+      padding: rem(3px) rem(5px);
+      border-radius: 3px;
+      @include media(">=sm") {
+        font-size: rem(17px);
+      }
+    }
+  }
+
+  a {
+    color: #0000ee;
+    text-decoration: none;
+  }
+
+  iframe {
+    margin-top: rem(30px);
+    width: 100%;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @include mainFont(700);
+  }
+
+  h1 {
+    font-size: rem(32px);
+    line-height: 1.4;
+
+    @include media(">=sm") {
+      font-size: rem(47px);
+    }
+  }
+
+  h2 {
+    font-size: rem(24px);
+    line-height: 1.4;
+    @include media(">=sm") {
+      font-size: rem(37px);
+    }
+  }
+
+  h3 {
+    font-size: rem(20px);
+    line-height: 1.4;
+    @include media(">=sm") {
+      font-size: rem(27px);
+    }
+  }
+
+  ul,
+  ol {
+    padding-left: rem(40px);
+  }
+
+  ul.post-list {
+    padding: 0;
+
+    @include media("<sm") {
+      padding: 0 rem(20px);
+    }
+  }
+
+  blockquote {
+    @include center(rem(730px));
+    border-left: rem(5px) solid $texts;
+    padding: 0 rem(10px);
+    margin: rem(30px) auto;
+    width: 90%;
+
+    @include media(">=sm") {
+      width: 100%;
+      margin: rem(50px) auto;
+      padding: 0 rem(30px);
+    }
+
+    p {
+      font-size: rem(17px);
+      color: rgba(0, 0, 0, 0.6);
+      margin: 0;
+      
+      @include media(">=sm") {
+        font-size: rem(20px);
+      }
+    }
+  }
+
+  hr {
+    @include center(rem(760px));
+    border: 1px solid $lightGray;
+    margin: 50px auto;
+  }
+
+  hr.page-divider {
+    @include center(rem(760px));
+    border: 0;
+    margin: 50px auto;
+    position: relative;
+    height: rem(54px);
+
+    &:after {
+      display: block;
+      content: "Page divider";
+      padding: rem(5px) rem(10px);
+      border: 2px solid $themeColor;
+      border-radius: rem(5px);
+      font-size: rem(14px);
+      font-weight: bold;
+      color: $themeColor;
+      text-align: center;
+      text-transform: uppercase;
+    }
+  }
+
+  pre {
+    overflow-x: auto;
+    position: relative;
+
+    &:before {
+      display: inline-block;
+      content: "In the website, the code will be highlighted.";
+      position: absolute;
+      top: 0;
+      left: 0;
+      padding: 0 rem(15px);
+      @include mainFont(400);
+      font-size: rem(14px);
+      background-color: $themeColor;
+      color: #fff;
+    }
+  }
+
+  table {
+    @include mainFont(400);
+    font-size: rem(17px);
+    line-height: rem(35px);
+    letter-spacing: 0.05rem;
+    margin: rem(50px) auto;
+
+    @include media(">=sm") {
+      font-size: rem(20px);
+    }
+
+    th,
+    td {
+      border: rem(1px) solid #ccc;
+      padding: rem(5px) rem(10px);
+
+      @include media(">=sm") {
+        border: rem(2px) solid #ccc;
+        padding: rem(10px) rem(20px);
+      }
+    }
+  }
+
+  td > pre {
+    padding: 0;
+    margin: 0;
+  }
+}
+
+// Helpers
+
+.img-rounded {
+  border-radius: 50%;
+}