DRAFT | new theme - minimage

themes/minimage/source/javascript/GlobalNav.js

@@ -0,0 +1,32 @@
+class GlobalNav {
+  constructor () {
+    this.opener = document.querySelectorAll('.c-menu')
+    this.closer = document.querySelectorAll('.c-global-nav__closer')
+    this.overlay = document.querySelectorAll('.c-overlay')
+    this.isOpen = false
+
+    Array.from(this.opener, (opener) => {
+      opener.addEventListener('click', this.overlaySwitcher.bind(this), false)
+    })
+
+    Array.from(this.closer, (closer) => {
+      closer.addEventListener('click', this.overlaySwitcher.bind(this), false)
+    })
+  }
+
+  overlaySwitcher () {
+    if (this.isOpen) {
+      this.overlay.forEach((overlay) => {
+        this.isOpen = false
+        overlay.classList.remove('isShow')
+      })
+    } else {
+      this.overlay.forEach((overlay) => {
+        this.isOpen = true
+        overlay.classList.add('isShow')
+      })
+    }
+  }
+}
+
+export default GlobalNav

themes/minimage/source/javascript/application.js

@@ -0,0 +1,5 @@
+import GlobalNav from './GlobalNav'
+
+window.onload = () => {
+  new GlobalNav()
+}

themes/minimage/source/sass/_mixin.scss

@@ -0,0 +1,8 @@
+/**
+ *
+ */
+@mixin mq($breakpoint: md) {
+  @media #{map-get($breakpoints, $breakpoint)} {
+    @content;
+  }
+}

themes/minimage/source/sass/_placeholder.scss

@@ -0,0 +1,19 @@
+%clearfix {
+  zoom: 1;
+
+  &:before,
+  &:after {
+      content: "";
+      display: table;
+  }
+  &:after {
+      clear: both;
+  }
+}
+
+%code-base-style {
+  background-color: #383737;
+  white-space: pre;
+  font-size: 0.9em;
+  color: $color-font-white;
+}

themes/minimage/source/sass/_variables.scss

@@ -0,0 +1,29 @@
+// Size
+$document-width--small: 320px;
+$document-width--medium: 768px;
+$document-width--large: $document-width--medium;
+$document-width--xlarge: $document-width--medium;
+
+// Color
+$color-primary: #ffffff;
+
+$color-font-base: #494949;
+$color-font-white: #f6f6f6;
+$color-grey: #a0a0a0;
+$color-medium-grey: #b9b9b9;
+
+$font-base-size: 16px;
+
+$border-base-color: $color-grey;
+
+// Breakpoints
+$breakpoints: (
+  'small': 'screen and (max-width: #{$document-width--small})',
+  'medium': 'screen and (max-width: #{$document-width--medium})',
+  'large': 'screen and (max-width: #{$document-width--large})',
+  // 'xlarge': 'screen and (max-width: #{$document-width--xlarge})',
+) !default;
+
+
+// Easing
+$ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);

themes/minimage/source/sass/application.scss

@@ -0,0 +1,15 @@
+@charset "UTF-8";
+
+@import "foundation/_reset";
+@import 'vender/*';
+
+@import '_variables';
+@import "foundation/_fonts";
+@import "foundation/_base";
+@import "_mixin";
+@import "_placeholder";
+
+@import "layout/*";
+@import "object/component/*";
+@import "object/project/*";
+@import "object/utility/*";

themes/minimage/source/sass/foundation/_base.scss

@@ -0,0 +1,17 @@
+html,
+body {
+  background-color: $color-primary;
+  line-height: 1.6;
+  font-family: $font-gothic;
+  font-size: $font-base-size;
+  color: $color-font-base;
+}
+
+main {
+  display: block;
+}
+
+button {
+  appearance: none;
+  border: none;
+}

themes/minimage/source/sass/foundation/_fonts.scss

@@ -0,0 +1 @@
+$font-gothic: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;

themes/minimage/source/sass/foundation/_reset.scss

@@ -0,0 +1,10 @@
+// User's Reset
+@for $i from 1 through 6 {
+  h#{$i} {
+    margin: 0;
+  }
+}
+
+p {
+  margin: 0;
+}

themes/minimage/source/sass/layout/_global-footer.scss

@@ -0,0 +1,8 @@
+.c-global-footer {
+  margin-top: 20px;
+  padding: 1rem 0 2rem;
+
+  &__inner {
+    @extend %clearfix;
+  }
+}

themes/minimage/source/sass/layout/_global-header.scss

@@ -0,0 +1,17 @@
+.c-global-header {
+  padding: 1em 0;
+
+  &__inner {
+    display: flex;
+    align-items: center;
+  }
+
+  &__primary {
+    width: 60%;
+  }
+
+  &__utility {
+    text-align: right;
+    width: 40%;
+  }
+}

themes/minimage/source/sass/layout/_main-content.scss

@@ -0,0 +1,3 @@
+.c-main-content {
+  margin-top: 40px;
+}

themes/minimage/source/sass/object/component/_adsense.scss

@@ -0,0 +1,3 @@
+.ads {
+  margin-top: 40px;
+}

themes/minimage/source/sass/object/component/_archive.scss

@@ -0,0 +1,16 @@
+.c-archive-list {
+  list-style-type: none;
+  padding-left: 0;
+  margin: 0;
+
+  &__item {
+    transition: 0.3s $ease-out-quart 0s;
+    & + & {
+      margin-top: 20px;
+    }
+
+    &:hover {
+      background-color: #eeeeee;
+    }
+  }
+}

themes/minimage/source/sass/object/component/_bg-img.scss

@@ -0,0 +1,12 @@
+.c-bg-img {
+  background-repeat: no-repeat;
+  background-size: 100%;
+  background-position: center center;
+  transition: 0.3s $ease-out-quart 0s;
+  opacity: 1;
+
+  &:hover {
+    background-size: 110%;
+    opacity: 0.8;
+  }
+}

themes/minimage/source/sass/object/component/_brand.scss

@@ -0,0 +1,10 @@
+.c-brand {
+  display: inline-block;
+  @extend .c-link;
+
+  a {
+    text-decoration: none;
+    font-size: 1.6rem;
+    color: $color-font-base;
+  }
+}

themes/minimage/source/sass/object/component/_container.scss

@@ -0,0 +1,22 @@
+.c-container {
+  max-width: $document-width--xlarge;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 10px;
+  padding-right: 10px;
+
+  @include mq('large') {
+    max-width: $document-width--large;
+  }
+
+  @include mq('medium') {
+    max-width: $document-width--medium;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  @include mq('small') {
+    max-width: $document-width--small;
+  }
+}

themes/minimage/source/sass/object/component/_description.scss

@@ -0,0 +1,4 @@
+.c-description {
+  font-size: 14px;
+  color: lighten($color-font-base, 25%);
+}

themes/minimage/source/sass/object/component/_footer-nav.scss

@@ -0,0 +1,13 @@
+.c-footer-nav {
+  text-align: right;
+
+  &-item {
+    display: inline-block;
+    transition: 0.2s $ease-out-quart 0s;
+    color: $color-font-base;
+
+    &:hover {
+      color: lighten($color-font-base, 10%);
+    }
+  }
+}

themes/minimage/source/sass/object/component/_header-nav.scss

@@ -0,0 +1,23 @@
+.c-global-nav {
+  padding-top: 40px;
+
+  &__closer {
+    text-align: right;
+  }
+
+  &__item {
+    display: block;
+    transition: 0.2s $ease-out-quart 0s;
+    margin-top: 2em;
+    text-align: center;
+    font-size: 24px;
+
+    & + & {
+      margin-top: 0.8em;
+    }
+
+    &:hover {
+      color: lighten($color-font-base, 20%);
+    }
+  }
+}

themes/minimage/source/sass/object/component/_icon.scss

@@ -0,0 +1,24 @@
+/**
+ * IcoMoon's SVG Icon
+ *
+ * @url https://icomoon.io/app
+ */
+
+.icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  stroke-width: 0;
+  stroke: currentColor;
+  fill: $color-font-base;  // currentColor;
+
+  &.icon-cross,
+  &.icon-menu {
+    width: 1.5em;
+    height: 1.5em;
+  }
+}
+
+.icon-get-pocket {
+  width: 0.9599609375em;
+}

themes/minimage/source/sass/object/component/_link.scss

@@ -0,0 +1,9 @@
+.c-link {
+  text-decoration: none;
+  color: $color-font-base;
+  transition: 0.2s $ease-out-quart 0s;
+
+  &:hover {
+    opacity: 0.7;
+  }
+}

themes/minimage/source/sass/object/component/_menu.scss

@@ -0,0 +1,5 @@
+.c-menu {
+  &.active {
+    background-color: darken($color: #fff, $amount: 20%);
+  }
+}

themes/minimage/source/sass/object/component/_overlay.scss

@@ -0,0 +1,20 @@
+.c-overlay {
+  width: 100%;
+  height: 100vh;
+  background-color: rgba($color-primary, 0.8);
+  position: fixed;
+  top: 0;
+  left: -100%;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+  transform: translate3d(0, 60px, 0);
+  transition: transform 0.2s $ease-out-quart 0s, opacity 0.2s $ease-out-quart 0s;
+  opacity: 0;
+
+  &.isShow {
+    transform: translate3d(0, 0, 0);
+    left: 0;
+    opacity: 1;
+  }
+}

themes/minimage/source/sass/object/component/_pager.scss

@@ -0,0 +1,23 @@
+.c-pager {
+  margin-top: 40px !important;
+
+  &__list {
+    @extend %clearfix;
+    list-style-type: none;
+    padding-left: 0;
+    margin: 0;
+
+    &__item {
+      width: 49%;
+
+      &--prev {
+        float: left;
+      }
+
+      &--next {
+        float: right;
+        text-align: right;
+      }
+    }
+  }
+}

themes/minimage/source/sass/object/component/_post.scss

@@ -0,0 +1,118 @@
+.c-post {
+  text-decoration: none;
+
+  &--has-thumb {
+    .c-post__title,
+    .c-pub-time,
+    .c-tag__item {
+      color: $color-font-white;
+    }
+  }
+}
+
+.c-post {
+  &__header {
+    &--over-img {
+      display: table-cell;
+      width: 100%;
+      height: 100%;
+      vertical-align: middle;
+    }
+
+    &__meta {
+      margin-top: 0.4em;
+    }
+  }
+
+  &__title {
+    line-height: 1.4;
+    font-size: 1.8rem;
+    font-weight: 500;
+    color: $color-font-base;
+
+    @include mq('medium') {
+      font-size: 1.4rem;
+    }
+  }
+}
+
+.c-post {
+  &__body {
+    margin-top: 4rem;
+
+    * + * {
+      margin-top: 0.9rem;
+    }
+
+    h2 {
+      margin-top: 2.6em;
+      line-height: 1.8;
+      font-size: 1.7rem;
+    }
+
+    h3 {
+      margin-top: 1.6em;
+      line-height: 1.6;
+      font-size: 1.3rem;
+    }
+
+    h4,
+    h5 {
+      margin-top: 1.6em;
+      font-size: 1rem;
+    }
+
+    img {
+      width: 100%;
+    }
+
+    pre {
+      margin: 1.6rem 0;
+      background-color: #383737;
+      padding: 1em;
+      overflow: auto;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      border-radius: 5px;
+
+      code {
+        @extend %code-base-style;
+        width: 100%;
+      }
+    }
+
+    blockquote {
+      margin: 1.6rem 1.2rem;
+      padding: 0 1em;
+      border-left: 4px solid darken($color-medium-grey,  10%);
+      color: darken($color-medium-grey,  10%);
+    }
+
+    p {
+      line-height: 1.8;
+
+      > code {
+        @extend %code-base-style;
+        padding: 0.2em 0.4em;
+      }
+    }
+
+    a {
+      color: #3779cc;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+
+
+  &__footer {
+    margin-top: 40px;
+    border-top: 1px solid $border-base-color;
+
+    > * + * {
+      margin-top: 20px;
+    }
+  }
+}

themes/minimage/source/sass/object/component/_pub-time.scss

@@ -0,0 +1,4 @@
+.c-pub-time {
+  font-size: 15px;
+  color: $color-font-base;
+}

themes/minimage/source/sass/object/component/_related.scss

@@ -0,0 +1,33 @@
+.related-articles {
+  margin-top: 40px;
+
+  &__links {
+    list-style-type: none;
+    padding-left: 0;
+
+    &__item {
+      margin-top: 2em;
+    }
+  }
+}
+
+.related-article {
+  &__link {
+    text-decoration: none;
+    font-size: $font-base-size * 1.3;
+    color: $color-font-base;
+  }
+
+  &__tags {
+
+    &__item {
+      font-size: $font-base-size * 0.8;
+
+      & + &::before {
+        content: ',';
+        display: inline-block;
+        vertical-align: middle;
+      }
+    }
+  }
+}

themes/minimage/source/sass/object/component/_share.scss

@@ -0,0 +1,15 @@
+.c-share {
+  margin-top: 40px;
+
+  &__list {
+    margin-top: 10px;
+
+    &__item {
+      text-decoration: none;
+
+      & + & {
+        margin-left: 0.5em;
+      }
+    }
+  }
+}

themes/minimage/source/sass/object/component/_tag.scss

@@ -0,0 +1,18 @@
+.c-tag {
+  display: inline-block;
+  margin-left: 0.6em;
+
+  &__item {
+    text-decoration: none;
+    font-size: 15px;
+    color: $color-font-base;
+
+    &::after {
+      content: ',';
+    }
+
+    &:last-of-type::after {
+      content: '';
+    }
+  }
+}

themes/minimage/source/sass/object/component/_taxonomy-list.scss

@@ -0,0 +1,16 @@
+.c-taxonomy-list {
+  list-style-type: none;
+  padding: 0;
+  margin-left: -1em;
+  margin-right: -1em;
+
+  &__item {
+    display: inline-block;
+    margin: 0.6em 1em;
+
+    .c-link + span {
+      margin-left: 0.3em;
+      font-size: 0.9em;
+    }
+  }
+}

themes/minimage/source/sass/object/component/_thumb.scss

@@ -0,0 +1,9 @@
+.c-thumb {
+  margin-top: 40px;
+
+  &::after {
+    display: block;
+    content: '';
+    padding-top: percentage(164px / $document-width--medium);
+  }
+}

themes/minimage/source/sass/object/project/_archive.scss

@@ -0,0 +1,19 @@
+.p-archive {
+  .c-post {
+    min-height: 164px;
+    display: table;
+    width: 100%;
+    height: 100%;
+  }
+
+  .c-post__header {
+    padding: 0 20px;
+
+    &--over-img {
+      display: table-cell;
+      width: 100%;
+      height: 100%;
+      vertical-align: middle;
+    }
+  }
+}

themes/minimage/source/sass/object/project/_single.scss

@@ -0,0 +1,14 @@
+.p-single {
+  .c-post__title,
+  .c-pub-time,
+  .c-tag__item {
+    color: $color-font-base;
+  }
+
+  .c-thumb {
+    &:hover {
+      background-size: 100%;
+      opacity: 1;
+    }
+  }
+}