jekflix 3.0.0

data/_sass/_modal.scss

@@ -0,0 +1,154 @@
+.modal {
+  .mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+    background-color: rgba(0, 0, 0, 0.5);
+    animation: 1s fadeIn ease both;
+  }
+
+  .window {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    z-index: 1001;
+    transform: translate(-50%, -50%);
+    width: calc(100% - #{rem(40px)});
+    max-width: rem(800px);
+    background-color: #fff;
+    border-radius: rem(10px);
+    padding: rem(5px) 0;
+    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.3);
+    animation: 0.3s fadeIn 0.5s ease both;
+
+    @include media(">=sm") {
+      min-width: rem(400px);
+    }
+
+    .close {
+      position: absolute;
+      right: rem(-10px);
+      top: rem(-10px);
+      width: rem(30px);
+      height: rem(30px);
+      fill: #fff;
+      background-color: $primaryDark;
+      border-radius: 50%;
+      border: 2px solid #fff;
+      padding: rem(5px);
+      cursor: pointer;
+    }
+
+    .header {
+      text-align: center;
+      border-bottom: 1px solid $lightGray;
+      padding: rem(15px);
+
+      h2,
+      p {
+        margin: 0;
+        font-size: rem(13px);
+      }
+    }
+
+    .content {
+      max-height: 90vh;
+      overflow: auto;
+      padding: rem(10px);
+
+      ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+
+        @include media(">=sm") {
+          flex-direction: row;
+        }
+
+        li {
+          flex: 1;
+          margin: rem(15px);
+
+          figure {
+            position: relative;
+            margin: 0;
+
+            &:after {
+              content: "Read now";
+              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: 10%;
+              left: -5px;
+              transition: background 0.2s;
+            }
+          }
+
+          img {
+            display: block;
+            max-width: 100%;
+            height: auto;
+            transition: all 0.2s ease-in-out;
+            position: relative;
+          }
+
+          a {
+            font-weight: normal;
+            color: $primaryDark;
+            text-decoration: none;
+            transition: all 0.3s;
+
+            &:hover {
+              color: rgba(0, 0, 0, 0.5);
+
+              img {
+                -webkit-filter: grayscale(100%);
+                filter: grayscale(100%);
+              }
+
+              figure {
+                &:after {
+                  background: $primaryDark;
+                }
+              }
+            }
+          }
+          h3 {
+            font-size: rem(20px);
+            margin-bottom: 0;
+          }
+
+          p {
+            display: none;
+
+            @include media(">=sm") {
+              display: block;
+              font-size: rem(15px);
+              line-height: rem(20px);
+            }
+          }
+        }
+      }
+    }
+  }
+  &.closed {
+    display: none;
+  }
+
+  &.exit {
+    .window {
+      animation: 0.5s fadeIn 0.5s both, 0.5s zoomIn 0.5s both;
+    }
+  }
+}

data/_sass/_no-js.scss

@@ -0,0 +1,9 @@
+.no-js {
+  .flex-grid article {
+    opacity: 1;
+  }
+
+  .preload {
+    display: none;
+  }
+}

data/_sass/_normalize.scss

@@ -0,0 +1,238 @@
+// Based on Kouto Swiss normalize function
+// https://github.com/leny/kouto-swiss/edit/master/lib/kouto-swiss/reset/normalize.styl
+
+html {
+  font-family: sans-serif;
+  line-height: 1.15;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+article,
+aside,
+footer,
+header,
+nav,
+section {
+  display: block;
+}
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+figcaption,
+figure,
+main {
+  display: block;
+}
+
+figure {
+  margin: 1em 40px;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+pre {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+a {
+  background-color: transparent;
+  -webkit-text-decoration-skip: objects;
+}
+
+a:active,
+a:hover {
+  outline-width: 0;
+}
+
+abbr[title] {
+  border-bottom: none;
+  text-decoration: underline;
+  text-decoration: underline dotted;
+}
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+dfn {
+  font-style: italic;
+}
+
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+audio,
+video {
+  display: inline-block;
+}
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+img {
+  border-style: none;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+html [type="button"]
+[type="reset"]
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+legend {
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
+}
+
+progress {
+  display: inline-block;
+  vertical-align: baseline;
+}
+
+textarea {
+  overflow: auto;
+}
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+details,
+menu {
+  display: block;
+}
+
+summary {
+  display: list-item;
+}
+
+canvas {
+  display: inline-block;
+}
+
+template {
+  display: none;
+}
+
+[hidden] {
+  display: none;
+}

data/_sass/_pagination.scss

@@ -0,0 +1,90 @@
+.pagination {
+  display: flex;
+  align-items: center;
+
+  &.pagination-home {
+    justify-content: center;
+    width: 100%;
+    margin: 0 auto;
+
+    a.next,
+    a.previous {
+      width: rem(40px);
+      height: rem(40px);
+
+      svg {
+        width: calc(100% - 20px);
+        height: calc(100% - 20px);
+        fill: #fff;
+        margin: 10px;
+        transition: all 0.3s ease;
+      }
+
+      &:hover > svg {
+        fill: $themeColor;
+      }
+    }
+
+    a.previous {
+      svg {
+        transform: rotate(180deg);
+      }
+    }
+
+    .page_number {
+      color: #fff;
+      font-size: rem(17px);
+      line-height: rem(22px);
+      margin: 0 rem(10px);
+    }
+  }
+
+  &.pagination-post {
+    justify-content: space-between;
+    padding: rem(15px) rem(20px) rem(30px);
+
+    @include media(">=sm") {
+      @include center(rem(800px));
+    }
+
+    a {
+      @include mainFont(bold);
+      font-size: rem(16px);
+      width: 100%;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      background-color: #fff;
+      color: $themeColor;
+      padding: 0 rem(15px);
+      border: 1px solid $themeColor;
+      border-radius: 5px;
+      transition: all 0.3s;
+
+      @include media(">=sm") {
+        font-size: rem(17px);
+        border: 2px solid $themeColor;
+      }
+
+      &:hover {
+        -webkit-filter: grayscale(100%);
+        filter: grayscale(100%);
+      }
+
+      .arrow {
+        width: rem(14px);
+        height: rem(14px);
+        fill: $themeColor;
+        margin-right: rem(10px);
+      }
+
+      .text {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: rem(15px) 0;
+      }
+    }
+  }
+}