hatena · cocodrips · Apr 19, 2022 · Apr 19, 2022 · Apr 19, 2022 · Apr 19, 2022
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -0,0 +1,24 @@
+name: build
+
+on:
+  pull_request:
+    paths-ignore:
+      - '**.md'
+  push:
+    branches:
+      - master
+    paths-ignore:
+      - '**.md'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 15.x
+          cache: npm
+      - run: npm install
+      - run: npm run build
diff --git a/bs-config.js b/bs-config.js
@@ -1,5 +1,5 @@
 module.exports = {
-    files: ['build/boilerplate.css'],
+    files: ['build/piyopiyo-code.css'],
     server: {
         baseDir: "build"
     },

diff --git a/package.json b/package.json
@@ -1,17 +1,17 @@
 {
-  "name": "hatena-blog-theme-boilerplate",
+  "name": "hatena-blog-theme-cocodrips",
   "version": "2.0.0",
-  "description": "Boilerplate for Hatena Blog theme",
+  "description": "Hatena Blog theme",
   "author": "Hatena Blog",
   "license": "MIT",
   "scripts": {
     "prestart": "npm run build",
     "start": "npm-run-all -p watch server",
     "build": "npm-run-all scss autoprefixer",
-    "scss": "node-sass scss/boilerplate.scss build/boilerplate.css --output-style expanded --indent-width 4 --source-map build/",
-    "autoprefixer": "postcss --use autoprefixer -r build/boilerplate.css",
+    "scss": "node-sass scss/piyopiyo_code/main.scss build/piyopiyo-code.css --output-style expanded --indent-width 4 --source-map build/",
+    "autoprefixer": "postcss --use autoprefixer -r build/piyopiyo-code.css",
     "server": "browser-sync start -c bs-config.js",
-    "watch": "chokidar \"scss/\" -c \"npm run build\""
+    "watch": "chokidar \\\\\\\"scss/\\\\\\\" -c \\\\\\\"npm run build\\\\\\\""
   },
   "devDependencies": {
     "autoprefixer": "^7.1.4",
@@ -22,4 +22,4 @@
     "npm-run-all": "^4.1.1",
     "postcss-cli": "^4.1.1"
   }
-}
+}
diff --git a/scss/lib/_core.scss b/scss/lib/_core.scss
@@ -7,8 +7,10 @@ body {
 }
 a {
     color: $link;
+    text-decoration: underline;
     &:hover {
         color: $hover;
+        text-decoration: none;
     }
     &.keyword {
         text-decoration: none;

diff --git a/scss/lib/_variable.scss b/scss/lib/_variable.scss
@@ -1,7 +1,7 @@
 // Variables
 
 // Font
-$font-family-base: 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS PGothic';
+$font-family-base: 'Helvetica Neue', 'Helvetica','Segoe UI', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS PGothic';
 $font-family-monospace: 'Monaco', 'Consolas', 'Courier New', Courier, monospace, sans-serif;
 
 // Background color

diff --git a/scss/piyopiyo_code/_core.scss b/scss/piyopiyo_code/_core.scss
@@ -0,0 +1,54 @@
+a {
+  color: $text;
+  text-decoration: underline;
+}
+
+
+// 1 column
+#content-inner {
+  flex-direction: column;
+  align-items: center;
+}
+
+#wrapper {
+  @media #{$mq-sm} {
+    width: 100%;
+  }
+  @media #{$mq-md} {
+    max-width: 720px;
+  }
+}
+
+#box2 {
+  width: 100%;
+  @media #{$mq-sm} {
+    width: 100%;
+  }
+  @media #{$mq-md} {
+    width: 100%;
+  }
+}
+
+#box2-inner {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  justify-content: flex-start;
+  @media #{$mq-sm} {
+    margin-left: -20px;
+    flex-direction: row;
+  }
+  @media #{$mq-md} {
+    margin-left: -30px;
+  }
+}
+
+.hatena-module {
+  width: 100%;
+  @media #{$mq-sm} {
+    width: 50%;
+  }
+  @media #{$mq-md} {
+    padding-left: 30px;
+  }
+}
diff --git a/scss/piyopiyo_code/_entry.scss b/scss/piyopiyo_code/_entry.scss
@@ -0,0 +1,216 @@
+// Header
+.entry-header {
+  margin: 4rem 0 .3rem;
+  flex-direction: column;
+  display: flex;
+  border-bottom: 0;
+}
+
+// line
+header.entry-header::after {
+  display: block;
+  content: "";
+  width: 15%;
+  height: 1px;
+  margin-top: 1em;
+  background: $text;
+}
+
+.entry-title {
+  margin: 0 0 .3rem;
+  font-size: 2rem;
+  line-height: 3rem;
+  @media #{$mq-md} {
+    font-size: 2rem;
+  }
+}
+
+.date {
+  margin-bottom: 0.05rem;
+
+  .date-year::after, .date-month::after {
+    content: ".";
+  }
+
+  .hyphen {
+    position: absolute;
+    width: 1rem;
+    height: 1rem;
+    overflow: hidden;
+    text-indent: -1rem;
+  }
+}
+
+
+.categories {
+  margin: .5em 0;
+  font-size: .9rem;
+  display: none;
+
+  a {
+    color: $text-light;
+    text-decoration: none;
+    margin-right: .5em;
+    padding: 2px 10px;
+    border: 1px solid $text-light;
+  }
+
+}
+
+.entry-content {
+  font-size: $base-font-size;
+  line-height: $base-font-size * 2;
+  letter-spacing: 0.4px;
+
+  p {
+    margin: $base-font-size * 1.5 0;
+
+    a[title] {
+      vertical-align: super;
+      font-size: 0.7rem;
+    }
+  }
+
+  h1,
+  h2 {
+    margin: 3em 0 -0.3em 0;
+  }
+
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 2em 0 -0.3em 0;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+    @media #{$mq-md} {
+      font-size: 1.6rem;
+    }
+  }
+
+  h2 {
+    font-size: 1.4rem;
+    @media #{$mq-md} {
+      font-size: 1.4rem;
+    }
+  }
+
+  h3 {
+    font-size: 1.2rem;
+    @media #{$mq-md} {
+      font-size: 1.3rem;
+    }
+  }
+
+  h4 {
+    font-size: 1.1rem;
+  }
+
+  h5 {
+    font-size: 1rem;
+  }
+
+  h6 {
+    font-size: .9rem;
+  }
+
+  ul,
+  ol,
+  dd {
+    margin: 0;
+    background-color: $light-bg;
+    padding: 1.5rem 3rem;
+
+    li {
+      ul, ol {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    border-bottom: 1em;
+    margin-bottom: 1em;
+    width: 100%;
+    overflow: auto;
+    display: block;
+    font-size: .8rem;
+    @media #{$mq-md} {
+      font-size: .9rem;
+    }
+  }
+
+  table th,
+  table td {
+    border: 1px solid $border;
+    padding: 5px 10px;
+  }
+
+  table th {
+    background: $bg-light;
+  }
+
+  blockquote {
+    border: 1px solid $border;
+    margin: 0 0 10px;
+    padding: 20px;
+
+    p:first-child {
+      margin-top: 0;
+    }
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  pre,
+  code {
+    font-family: $font-family-monospace;
+  }
+
+  pre {
+    background: $bg-light;
+    border: none;
+    white-space: pre-wrap;
+    text-overflow: ellipsis;
+    line-height: 1.3;
+    font-size: .8rem;
+    padding: 10px;
+
+    & > code {
+      margin: 0;
+      padding: 0;
+      white-space: pre;
+      border: none;
+      background-color: transparent;
+      font-family: $font-family-monospace;
+    }
+  }
+
+  code {
+    font-size: 90%;
+    margin: 0 2px;
+    padding: 0px 5px;
+    background-color: $bg-light;
+    border-radius: 3px;
+  }
+
+  hr {
+    width: 50%;
+    border: 0;
+    border: none;
+    border-top: 1px solid $border;
+    margin: 2em auto;
+  }
+
+  .table-of-contents {
+    padding: 1em 1em 1em 2em;
+    margin: 1em 0;
+    border: 1px solid $border;
+  }
+}
diff --git a/scss/piyopiyo_code/_module.scss b/scss/piyopiyo_code/_module.scss
@@ -0,0 +1,17 @@
+.hatena-module-body {
+  font-size: $base-font-size - 2;
+  line-height: ($base-font-size - 2)*1.5;
+}
+
+.hatena-module-category {
+  .hatena-module-body {
+    li {
+
+      display: inline;
+    }
+
+    li::after {
+      content: " / ";
+    }
+  }
+}