Development environment renewal

- gulp v4
- PostCSS to Sass

21 files changed, 435 insertions, 0 deletions

diff --git a/src/scss/object/component/article.scss b/src/scss/object/component/article.scss
new file mode 100644
index 0000000..4790e14
--- /dev/null
+++ b/src/scss/object/component/article.scss
@@ -0,0 +1,38 @@
+.c-article {
+  &__title {
+    font-size: 2.4rem;
+    & a {
+      color: $color-text;
+      &:hover {
+        color: var(--link-hover);
+      }
+    }
+  }
+  &__meta {
+    font-size: 1.6rem;
+    line-height: 1;
+  }
+  &__summary {
+    font-size: 1.4rem;
+    color: #999;
+    line-height: 1.57;
+    & p {
+      margin: 0;
+    }
+  }
+  &__btn {
+    display: inline-block;
+    padding-bottom: 4px;
+    font-size: 1.6rem;
+    &::after {
+      content: '';
+      display: inline-block;
+      margin-left: 3px;
+      width: 5px;
+      height: 5px;
+      border: solid currentColor;
+      border-width: 1px 1px 0 0;
+      transform: rotate(45deg);
+    }
+  }
+}
diff --git a/src/scss/object/component/avatar.scss b/src/scss/object/component/avatar.scss
new file mode 100644
index 0000000..4f33a87
--- /dev/null
+++ b/src/scss/object/component/avatar.scss
@@ -0,0 +1,13 @@
+.c-avatar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  overflow: hidden;
+  & img {
+    max-width: 100%;
+    height: auto;
+  }
+}
diff --git a/src/scss/object/component/links.scss b/src/scss/object/component/links.scss
new file mode 100644
index 0000000..bd17b22
--- /dev/null
+++ b/src/scss/object/component/links.scss
@@ -0,0 +1,32 @@
+.c-links {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin: 8px 0 0;
+  padding: 0;
+  a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 30px;
+    height: 30px;
+    border: 1px solid;
+    border-color: $color-text;
+    border-radius: 50%;
+    color: $color-text;
+    transition: 0.2s;
+    &:hover {
+      background: $color-text;
+      color: #fff;
+    }
+  }
+  &__item {
+    margin: 8px 8px 0;
+    list-style: none;
+  }
+  &__icon {
+    width: 16px;
+    height: 16px;
+    fill: currentColor;
+  }
+}
diff --git a/src/scss/object/component/pagination.scss b/src/scss/object/component/pagination.scss
new file mode 100644
index 0000000..d46fce7
--- /dev/null
+++ b/src/scss/object/component/pagination.scss
@@ -0,0 +1,56 @@
+.c-pagination {
+  font-size: 1.6rem;
+  a {
+    display: inline-block;
+    padding: 8px 16px;
+    transition: 0.2s;
+    &:hover {
+      background: #fafafa;
+    }
+  }
+  &__ctrl {
+    display: flex;
+    justify-content: space-between;
+  }
+  &__newer,
+  &__older {
+    flex: 1;
+  }
+  &__newer {
+    a {
+      &::before {
+        content: '';
+        display: inline-block;
+        position: relative;
+        top: -1px;
+        width: 4px;
+        height: 4px;
+        margin-right: 4px;
+        border: solid currentColor;
+        border-width: 2px 0 0 2px;
+        transform: rotate(-45deg);
+      }
+    }
+  }
+  &__older {
+    text-align: right;
+    a {
+      &::after {
+        content: '';
+        display: inline-block;
+        position: relative;
+        top: -1px;
+        width: 4px;
+        height: 4px;
+        margin-left: 4px;
+        border: solid currentColor;
+        border-width: 2px 2px 0 0;
+        transform: rotate(45deg);
+      }
+    }
+  }
+  &__count {
+    display: block;
+    text-align: center;
+  }
+}
diff --git a/src/scss/object/component/tag.scss b/src/scss/object/component/tag.scss
new file mode 100644
index 0000000..860d814
--- /dev/null
+++ b/src/scss/object/component/tag.scss
@@ -0,0 +1,16 @@
+.c-tag {
+  display: inline-block;
+  margin: 8px 6px 0 0;
+  padding: 4px;
+  font-size: 1.6rem;
+  color: #555;
+  &::before {
+    content: "#";
+    display: inline-block;
+    margin-right: 2px;
+    color: currentColor;
+  }
+  &:hover {
+    background: #fafafa;
+  }
+}
diff --git a/src/scss/object/component/time.scss b/src/scss/object/component/time.scss
new file mode 100644
index 0000000..3991c52
--- /dev/null
+++ b/src/scss/object/component/time.scss
@@ -0,0 +1,4 @@
+.c-time {
+  display: block;
+  font-size: 1.6rem;
+}
diff --git a/src/scss/object/component/title.scss b/src/scss/object/component/title.scss
new file mode 100644
index 0000000..6e18a0d
--- /dev/null
+++ b/src/scss/object/component/title.scss
@@ -0,0 +1,4 @@
+.c-title {
+  font-weight: 300;
+  font-family: $OpenSans;
+}
diff --git a/src/scss/object/project/article.scss b/src/scss/object/project/article.scss
new file mode 100644
index 0000000..5019e9b
--- /dev/null
+++ b/src/scss/object/project/article.scss
@@ -0,0 +1,24 @@
+.p-article {
+  &__thumbnail {
+    margin-top: 24px;
+  }
+  &__body {
+    margin: 40px 0 30px;
+    word-wrap: break-word;
+    @include mq-up(sm) {
+      margin: 40px 0 60px;
+    }
+    img[data-action^='zoom'] {
+      &:hover {
+        cursor: zoom-in;
+      }
+    }
+    .zoom-img-wrap {
+      img {
+        &:hover {
+          cursor: zoom-out;
+        }
+      }
+    }
+  }
+}
diff --git a/src/scss/object/project/author.scss b/src/scss/object/project/author.scss
new file mode 100644
index 0000000..7965269
--- /dev/null
+++ b/src/scss/object/project/author.scss
@@ -0,0 +1,36 @@
+.p-author {
+  display: block;
+  position: relative;
+  width: 100%;
+  margin: 20px auto 0;
+  @include mq-up(sm) {
+    display: flex;
+    margin: 80px auto 0;
+  }
+  &::before {
+    content: '* * *';
+    position: absolute;
+    top: -30px;
+    left: 0;
+    right: 0;
+    margin: auto;
+    text-align: center;
+    font-size: 1.4rem;
+    color: #999;
+    @include mq-up(sm) {
+      top: -50px;
+    }
+  }
+  &__name {
+    font-size: 2.8rem;
+  }
+  &__body {
+    flex: 1;
+    @include mq-up(sm) {
+      padding-left: 16px;
+    }
+    p {
+      margin: 0;
+    }
+  }
+}
diff --git a/src/scss/object/project/copyright.scss b/src/scss/object/project/copyright.scss
new file mode 100644
index 0000000..af3414b
--- /dev/null
+++ b/src/scss/object/project/copyright.scss
@@ -0,0 +1,5 @@
+.p-copyright {
+  margin: 24px 0 0;
+  text-align: center;
+  font-size: 1.2rem;
+}
diff --git a/src/scss/object/project/list-article.scss b/src/scss/object/project/list-article.scss
new file mode 100644
index 0000000..e3f1135
--- /dev/null
+++ b/src/scss/object/project/list-article.scss
@@ -0,0 +1,9 @@
+.p-list-article {
+  margin-top: 40px;
+  &:first-child {
+    margin-top: 0;
+  }
+  &__btn {
+    margin-top: 16px;
+  }
+}
diff --git a/src/scss/object/project/menu.scss b/src/scss/object/project/menu.scss
new file mode 100644
index 0000000..0056b0c
--- /dev/null
+++ b/src/scss/object/project/menu.scss
@@ -0,0 +1,40 @@
+.p-menu {
+  margin-top: 40px;
+  &__lists {
+    display: block;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+    @include mq-up(sm) {
+      display: flex;
+    }
+  }
+  &__listitem {
+    margin: 12px 0 0 0;
+    list-style: none;
+    @include mq-up(sm) {
+      margin: 24px 24px 0 0;
+    }
+    a {
+      padding-bottom: 4px;
+      &:hover {
+        border-bottom: 1px solid currentColor;
+      }
+    }
+    ul {
+      padding-left: 12px;
+      li {
+        margin: 4px 0 0;
+        &::before {
+          content: '-';
+          margin-right: 4px;
+        }
+      }
+    }
+  }
+  &__parent {
+    span {
+      color: var(--link-color);
+    }
+  }
+}
diff --git a/src/scss/object/project/notfound.scss b/src/scss/object/project/notfound.scss
new file mode 100644
index 0000000..bbd1837
--- /dev/null
+++ b/src/scss/object/project/notfound.scss
@@ -0,0 +1,10 @@
+.p-notfound {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  h1 {
+    font-size: 10rem;
+    font-weight: bold;
+  }
+}
diff --git a/src/scss/object/project/pagination.scss b/src/scss/object/project/pagination.scss
new file mode 100644
index 0000000..90c5f22
--- /dev/null
+++ b/src/scss/object/project/pagination.scss
@@ -0,0 +1,9 @@
+.p-pagination {
+  margin: 30px 0;
+  @include mq-up(sm) {
+    margin: 60px 0;
+  }
+  &__count {
+    margin-top: 24px;
+  }
+}
diff --git a/src/scss/object/project/related.scss b/src/scss/object/project/related.scss
new file mode 100644
index 0000000..e0300a9
--- /dev/null
+++ b/src/scss/object/project/related.scss
@@ -0,0 +1,52 @@
+.p-related {
+  margin-bottom: 100px;
+  &__list {
+    padding: 0;
+    font-size: 0;
+  }
+  &__item {
+    display: inline-block;
+    width: 230px;
+    height: 150px;
+    margin-right: 15px;
+    list-style: none;
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+    &:nth-child(n + 4) {
+      margin-top: 15px;
+    }
+    a {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      padding: 8px;
+      background-size: cover;
+      background-color: #92c6f2;
+      color: #fafafa;
+      font-weight: normal;
+      font-family: 'Open Sans', sans-serif;
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.3);
+        transition: 0.1s;
+      }
+      &:hover {
+        &::before {
+          background: rgba(0, 0, 0, 0.6);
+        }
+      }
+    }
+    span {
+      position: relative;
+    }
+  }
+}
diff --git a/src/scss/object/project/screen-reader-text.scss b/src/scss/object/project/screen-reader-text.scss
new file mode 100644
index 0000000..358c69c
--- /dev/null
+++ b/src/scss/object/project/screen-reader-text.scss
@@ -0,0 +1,28 @@
+.p-screen-reader-text {
+  clip: rect(1px, 1px, 1px, 1px);
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  &:hover,
+  &:active,
+  &:focus {
+    background-color: #f1f1f1;
+    border-radius: 3px;
+    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+    clip: auto !important;
+    color: var(--link-color);
+    display: block;
+    font-size: 14px;
+    font-size: 0.875rem;
+    font-weight: bold;
+    height: auto;
+    left: 5px;
+    line-height: normal;
+    padding: 15px 23px 14px;
+    text-decoration: none;
+    top: 5px;
+    width: auto;
+    z-index: 100000;
+  }
+}
diff --git a/src/scss/object/project/subtitle.scss b/src/scss/object/project/subtitle.scss
new file mode 100644
index 0000000..90af1a7
--- /dev/null
+++ b/src/scss/object/project/subtitle.scss
@@ -0,0 +1,7 @@
+.p-subtitle {
+  margin: 12px 0 0 0;
+  color: $color-text;
+  font-size: 1.4rem;
+  font-weight: 300;
+  font-family: $OpenSans;
+}
diff --git a/src/scss/object/project/tag-title.scss b/src/scss/object/project/tag-title.scss
new file mode 100644
index 0000000..343916e
--- /dev/null
+++ b/src/scss/object/project/tag-title.scss
@@ -0,0 +1,13 @@
+.p-tag-title {
+  display: inline-block;
+  margin: 0;
+  padding-bottom: 8px;
+  border-bottom: 1px solid currentColor;
+  color: $color-text;
+  font-size: 2.4rem;
+  &::before {
+    content: '#';
+    display: inline-block;
+    margin-right: 4px;
+  }
+}
diff --git a/src/scss/object/project/title.scss b/src/scss/object/project/title.scss
new file mode 100644
index 0000000..963bf91
--- /dev/null
+++ b/src/scss/object/project/title.scss
@@ -0,0 +1,7 @@
+.p-title {
+  margin: 0;
+  font-size: 4.4rem;
+  &__link {
+    color: $color-text;
+  }
+}
diff --git a/src/scss/object/utility/align.scss b/src/scss/object/utility/align.scss
new file mode 100644
index 0000000..6289ccf
--- /dev/null
+++ b/src/scss/object/utility/align.scss
@@ -0,0 +1,17 @@
+.u-align-left {
+  display: block !important;
+  margin-left: 0 !important;
+  margin-right: auto !important;
+}
+
+.u-align-center {
+  display: block !important;
+  margin-right: auto !important;
+  margin-left: auto !important;
+}
+
+.u-align-right {
+  display: block !important;
+  margin-left: auto !important;
+  margin-right: 0 !important;
+}
diff --git a/src/scss/object/utility/display.scss b/src/scss/object/utility/display.scss
new file mode 100644
index 0000000..f64f367
--- /dev/null
+++ b/src/scss/object/utility/display.scss
@@ -0,0 +1,15 @@
+.u-dn {
+  display: none !important;
+}
+
+.u-db {
+  display: block !important;
+}
+
+.u-di {
+  display: inline !important;
+}
+
+.u-dib {
+  display: inline-block !important;
+}