deploy: b780169745c17f9fc971299e923e5ca5669b5a22

1 files changed, 1183 insertions, 333 deletions

diff --git a/css/style.css b/css/style.css
index 81235acc..fe351c8d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,348 +1,1198 @@
-@charset "utf-8";
-
-:root
-{
-    --font-color-0: #04077e;
-    --font-color-1: #000;
-    --font-color-2: #666;
-    --font-color-3: #aaa;
-    --bg-color-1: #eee;
-    --line-1: #ccc;
-    --line-2: #ddd;
-}
-p
-{
-    word-wrap: break-word;
-    white-space: pre-wrap;
-}
-
-body
-{
-    font-family: "Montserrat", "SF UI Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
-    font-size: 16px;
-    line-height: 1.75;
-    letter-spacing: 0.6px;
-    color: var(--font-color-2);
-    background: #111;
-}
-a
-{
-    text-decoration: none;
-    color: var(--font-color-1);
-}
-
-.paper
-{
-    padding: 4vw;
-}
-.paper-main
-{
-    width: 100%;
-    max-width: 880px;
-    margin: 0 auto;
-    padding: 72px 8vw 24px;
-    background: #fff;
-    border-radius: 24px;
-    background: #fff;
-}
-
-.header
-{
-    padding-bottom: 48px;
-    margin-bottom: 48px;
-    border-bottom: 1px solid var(--line-1);
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-content: center;
-}
-.logo
-{
-    font-size: 2rem;
-    font-weight: 600;
-    color: var(--font-color-1);
-    margin-bottom: 16px;
-    flex: 0 0 100%;
-}
-.nav
-{
-    margin: 0 0 4px;
-    flex: 0 0 100%;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-content: center;
-}
-.nav li
-{
-    padding: 2px 0;
-    margin-right: 24px;
+.flex-container {
+  width: 720px;
+  margin: 0 auto;
 }
-.nav li:last-of-type
-{
-    margin-right: 0;
+html {
+  font-size: 18px;
 }
-.nav li a
-{
-    color: var(--font-color-1);
-    opacity: .6;
-    transition: opacity ease-in-out .5s;
-}
-.nav li a:hover
-{
-    opacity: 1;
-    transition: opacity ease-in-out .5s;
-}
-
-.post-header
-{
-    margin-bottom: 48px;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-content: center;
+@media (max-width: 1600px) {
+  html {
+    font-size: 18px;
+  }
+  .flex-container {
+    width: 720px;
+  }
 }
-.post-header .logo
-{
-    font-size: 1rem;
+@media (max-width: 1200px) {
+  html {
+    font-size: 18px;
+  }
+  .flex-container {
+    width: 640px;
+  }
 }
-.post-header .go-home
-{
+@media (max-width: 688px) {
+  .flex-container {
     display: block;
-    padding: 10px 20px 8px;
-    border-radius: 18px;
-    background: #fff;
-    border: 1px solid #eee;
-    margin: 8px 0;
-    transition: background ease-in-out .5s;
-}
-.post-header .go-home:hover
-{
-    background: var(--bg-color-1);
-    transition: background ease-in-out .5s;
-}
-.post-header .go-home svg
-{
-    transform: translateX(0);
-    transition: transform ease-in-out .5s;
-}
-.post-header .go-home:hover svg
-{
-    transform: translateX(-4px);
-    transition: transform ease-in-out .5s;
-}
-
-.post-list
-{
-    display: flex;
+    width: calc(100% - 48px);
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+}
+/* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+html {
+  line-height: 1.15 /* 1 */;
+  -webkit-text-size-adjust: 100% /* 2 */;
+}
+body {
+  margin: 0;
+}
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+hr {
+  box-sizing: content-box /* 1 */;
+  height: 0 /* 1 */;
+  overflow: visible /* 2 */;
+}
+pre {
+  font-family: monospace, monospace /* 1 */;
+  font-size: 1em /* 2 */;
+}
+a {
+  background-color: transparent;
+}
+abbr[title] {
+  border-bottom: none /* 1 */;
+  text-decoration: underline /* 2 */;
+  text-decoration: underline dotted /* 2 */;
+}
+b,
+strong {
+  font-weight: bolder;
+}
+code,
+kbd,
+samp {
+  font-family: monospace, monospace /* 1 */;
+  font-size: 1em /* 2 */;
+}
+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;
+}
+img {
+  border-style: none;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit /* 1 */;
+  font-size: 100% /* 1 */;
+  line-height: 1.15 /* 1 */;
+  margin: 0 /* 2 */;
+}
+button,
+input {
+  overflow: visible;
+}
+button,
+select {
+  text-transform: none;
+}
+button,
+[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;
+}
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+legend {
+  box-sizing: border-box /* 1 */;
+  color: inherit /* 2 */;
+  display: table /* 1 */;
+  max-width: 100% /* 1 */;
+  padding: 0 /* 3 */;
+  white-space: normal /* 1 */;
+}
+progress {
+  vertical-align: baseline;
+}
+textarea {
+  overflow: auto;
+}
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box /* 1 */;
+  padding: 0 /* 2 */;
+}
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+[type="search"] {
+  -webkit-appearance: textfield /* 1 */;
+  outline-offset: -2px /* 2 */;
+}
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+::-webkit-file-upload-button {
+  -webkit-appearance: button /* 1 */;
+  font: inherit /* 2 */;
+}
+details {
+  display: block;
+}
+summary {
+  display: list-item;
+}
+template {
+  display: none;
+}
+[hidden] {
+  display: none;
+}
+.highlight {
+  color: #657b83;
+}
+.highlight table {
+  background: #fdf6e3;
+}
+.highlight .code .comment,
+.highlight .code .quote {
+  color: #93a1a1;
+}
+.highlight .code .keyword,
+.highlight .code .selector-tag,
+.highlight .code .addition {
+  color: #859900;
+}
+.highlight .code .number,
+.highlight .code .string,
+.highlight .code .meta .meta-string,
+.highlight .code .literal,
+.highlight .code .doctag,
+.highlight .code .regexp {
+  color: #2aa198;
+}
+.highlight .code .title,
+.highlight .code .section,
+.highlight .code .name,
+.highlight .code .selector-id,
+.highlight .code .selector-class {
+  color: #268bd2;
+}
+.highlight .code .attribute,
+.highlight .code .attr,
+.highlight .code .variable,
+.highlight .code .template-variable,
+.highlight .code .class .title,
+.highlight .code .type {
+  color: #b58900;
+}
+.highlight .code .symbol,
+.highlight .code .bullet,
+.highlight .code .subst,
+.highlight .code .meta,
+.highlight .code .meta .keyword,
+.highlight .code .selector-attr,
+.highlight .code .selector-pseudo,
+.highlight .code .link {
+  color: #cb4b16;
+}
+.highlight .code .built_in,
+.highlight .code .deletion {
+  color: #dc322f;
+}
+.highlight .code .formula {
+  background: #eee8d5;
+}
+.highlight .code .emphasis {
+  font-style: italic;
+}
+.highlight .code .strong {
+  font-weight: bold;
+}
+body {
+  margin: 0;
+}
+.mask-border::before {
+  content: '';
+  width: 100%;
+  height: 100vh;
+  border: 4px #373633 solid;
+  position: fixed;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 8;
+}
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+.main {
+  flex-grow: 1;
+  padding: 0;
+  margin: 0;
+}
+div {
+  display: block;
+  padding: 0;
+  margin: 0;
+}
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+a {
+  text-decoration: none;
+  color: #373633;
+}
+input {
+  outline: none;
+  border: none;
+}
+body {
+  font-family: 'Inter', 'Noto Sans SC', helvetica, arial;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  color: #373633;
+  background-color: #fff;
+}
+input[type=search]::-ms-clear {
+  display: none;
+  width: 0;
+  height: 0;
+}
+input[type=search]::-ms-reveal {
+  display: none;
+  width: 0;
+  height: 0;
+}
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  display: none;
+}
+.header {
+  border: 2px solid #373633;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: #373633;
+}
+.header-inner {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin-top: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+.header-inner #menu-btn {
+  display: none;
+}
+.header-inner .site-nav {
+  flex-grow: 1;
+  overflow-x: auto;
+}
+.menu-list {
+  text-align: right;
+  display: flex;
+}
+.menu-list .menu-item {
+  position: relative;
+  margin-left: 1.5rem;
+}
+.menu-list:before {
+  content: "";
+  flex-grow: 1;
+}
+.menu-item:after {
+  content: "";
+  -webkit-transition: width 0.4s ease-in-out;
+  transition: width 0.4s ease-in-out;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  border-bottom: solid 1px #373633;
+}
+.menu-item:hover:after {
+  width: 100%;
+}
+.menu-item-active:after {
+  border-bottom: solid 2px;
+  width: 100%;
+}
+.logo-img {
+  max-height: 2.25rem;
+  width: auto;
+  max-width: 100%;
+  display: flex;
+}
+@media (max-width: 688px) {
+  .header-inner {
+    flex-wrap: wrap;
+  }
+  .header-inner #menu-btn {
+    display: block !important;
+    text-align: right;
+    width: 50%;
+  }
+  .header-inner #menu-btn .icon {
+    float: right;
+  }
+  .header-inner .site-brand-container {
+    width: 50%;
+  }
+  .header-inner .site-nav {
+    width: 100%;
+  }
+  .header-inner .site-nav .menu-list {
+    height: 0;
+    overflow: hidden;
+  }
+  .header-inner .site-nav .menu-list .menu-item {
+    margin-right: 0;
+    margin-left: auto;
+    margin-top: 0.5rem;
+  }
+  .header-inner .site-nav .active {
+    margin-top: 0.75rem;
+    height: auto;
     flex-direction: column;
+  }
+}
+.footer {
+  margin-top: 3.5rem;
+  border: 2px #373633 solid;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: #373633;
+}
+.footer .footer-text {
+  margin-top: 2rem;
+  margin-bottom: 3.5rem;
+}
+.post-list a {
+  background-image: linear-gradient(#fff, #fff), linear-gradient(#373633, #373633);
+  background-size: 100% 1px, 0% 1px;
+  background-position: 100% 100%, 0 100%;
+  background-repeat: no-repeat, no-repeat;
+  transition: background-size 0.6s linear;
+}
+.post-list a:hover {
+  background-size: 0 1px, 100% 1px;
+}
+.year-title {
+  margin-top: 3.5rem;
+  margin-bottom: 0.75rem;
+  font-size: 1.75rem;
+  font-weight: 700;
+  line-height: 2.25rem;
+  color: #e8e8e8;
+}
+.post-list-item {
+  display: flex;
+  flex-wrap: nowrap;
+  margin-top: 0.75rem;
+  align-items: top;
+}
+.post-list-item .post-title {
+  flex-grow: 1;
+  font-family: 'Inter', 'Noto Sans SC', helvetica, arial;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  color: #373633;
+  font-variation-settings: 'wght' 500;
+}
+.post-list-item .post-date {
+  margin-left: 1.5rem;
+  min-width: 8rem;
+  text-align: right;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: #373633;
+  line-height: 1.5rem;
+  color: #afaea9;
+}
+@media (max-width: 480px) {
+  .post-list-item {
     flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: stretch;
+  }
+  .post-list-item .post-title {
+    width: 100%;
+  }
+  .post-list-item .post-date {
+    margin-left: 0;
+    width: 100%;
+    text-align: left;
+  }
 }
-.post
-{
+.post-gallery-list .h-line-secondary {
+  margin-top: 0.75rem;
+}
+.post-gallery-list .h-line-secondary:last-child {
+  display: none;
+}
+.post-gallery-item {
+  display: flex;
+  margin-top: 3.5rem;
+  margin-bottom: 0.75rem;
+}
+.post-gallery-item .post-info {
+  margin-right: 1.5rem;
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+}
+.post-gallery-item .post-info .post-title {
+  margin-bottom: 0.75rem;
+  font-size: 1.75rem;
+  font-weight: 700;
+  line-height: 2.25rem;
+  color: #373633;
+}
+.post-gallery-item .post-info .post-date {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: #373633;
+}
+.post-gallery-item .post-img {
+  width: 50%;
+}
+.post-gallery-item a {
+  background-image: linear-gradient(#fff, #fff), linear-gradient(#373633, #373633);
+  background-size: 100% 1px, 0% 1px;
+  background-position: 100% 100%, 0 100%;
+  background-repeat: no-repeat, no-repeat;
+  transition: background-size 0.6s linear;
+}
+.post-gallery-item a:hover {
+  background-size: 0 1px, 100% 1px;
+}
+@media (max-width: 480px) {
+  .post-gallery-item {
+    flex-wrap: wrap;
+  }
+  .post-gallery-item .post-info {
     width: 100%;
-    padding-bottom: 48px;
-    margin-bottom: 48px;
-    border-bottom: 1px dashed var(--line-2);
-}
-.post-title
-{
-    display: inline-block;
-    font-size: 1.6rem;
-    font-weight: 600;
-    line-height: 1.5;
-    margin-bottom: 12px;
-    color: var(--font-color-1);
-    /*transition: color ease-in-out .5s;*/
-}
-.post-title:hover
-{
-    color: var(--font-color-0);
-    transition: color ease-in-out .5s;
-}
-.post-except
-{
-    word-break: break-all;
-    margin-bottom: 12px;
-}
-.read-more
-{
-    padding: 0 4px;
-    color: var(--font-color-0);   
-}
-.read-more:before,
-.read-more:after
-{
-    display: inline-block;
-    transition: transform ease-in-out .5s;
-}
-.read-more:before
-{
-    content: "{ ";
-}
-.read-more:after
-{
-    content: " }";
-}
-.read-more:hover:before
-{
-    transform: translateX(-4px);
-    transition: transform ease-in-out .25s;
-}
-.read-more:hover:after
-{
-    transform: translateX(4px);
-    transition: transform ease-in-out .25s;
-}
-.post-date
-{
-    font-size: 0.875rem;
-    color: var(--font-color-3);
-}
-
-.paginator
-{
-    font-size: 0.875rem;
+  }
+  .post-gallery-item .post-img {
     width: 100%;
-    margin: 0 auto 24px;
-    display: flex;
-    flex-direction: row;
+    margin-top: 0.75rem;
+  }
+}
+.paginator {
+  margin-top: 3.5rem;
+}
+.pagination {
+  margin-top: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: #373633;
+  display: flex;
+}
+.pagination:before {
+  content: "";
+  flex-grow: 1;
+}
+.page-number {
+  position: relative;
+  margin-left: 1.5rem;
+}
+.page-number:after {
+  content: "";
+  -webkit-transition: width 0.4s ease-in-out;
+  transition: width 0.4s ease-in-out;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  border-bottom: solid 1px #373633;
+}
+.page-number:hover:after {
+  width: 100%;
+}
+.pagination .current:after {
+  border-bottom: solid 2px;
+  width: 100%;
+}
+.pagination .space {
+  margin-left: 1.5rem;
+}
+.profile {
+  margin-top: 3.5rem;
+  display: flex;
+  flex-direction: row-reverse;
+}
+.profile .profile-content {
+  width: 50%;
+  margin: 0 1.5rem 0 0;
+}
+.profile .profile-content .profile-title {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+.profile .profile-content .profile-body {
+  margin-top: 0;
+  margin-bottom: 2rem;
+}
+.profile .profile-content .profile-title {
+  font-size: 1.75rem;
+  font-weight: 700;
+  line-height: 2.25rem;
+  color: #373633;
+}
+.profile .profile-content .profile-body {
+  font-family: 'Inter', 'Noto Sans SC', helvetica, arial;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  color: #373633;
+}
+.profile .profile-content .profile-link {
+  margin-top: 0;
+  margin-bottom: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: #373633;
+}
+.profile .profile-image {
+  width: 50%;
+}
+@media (max-width: 480px) {
+  .profile {
     flex-wrap: wrap;
-    justify-content: space-evenly;
-    align-items: center;
+  }
+  .profile .profile-content {
+    width: 100%;
+    margin-top: 0.75rem;
+  }
+  .profile .profile-image {
+    width: 100%;
+  }
 }
-.paginator *
-{
-    display: block;
-    padding: 8px 16px;
-    border-radius: 18px;
-    background: #fff;
-    border: 1px solid #eee;
+.search-popup {
+  visibility: hidden;
+}
+.search-activate {
+  visibility: visible;
+}
+.search-popup-overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  background: rgba(0,0,0,0.2);
+}
+.search-popup-window {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  background: #fff;
+  transform: translate(-50%, -50%);
+  width: 640px;
+  height: 60%;
+  border: 2px solid #373633;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.search-result-container {
+  flex-grow: 1;
+  overflow: scroll;
+  padding: 0.75rem 0.75rem;
+}
+.search-result-container .search-result-message {
+  font-family: 'Roboto Mono', menlo, monospace;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  color: #e8e8e8;
+  text-transform: lowercase;
+  color: #afaea9;
+}
+.search-result-container .search-result-title {
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.25rem;
+  color: #373633;
+  color: #373633;
+}
+.search-result-container a {
+  background-image: linear-gradient(#fff, #fff), linear-gradient(#373633, #373633);
+  background-size: 100% 1px, 0% 1px;
+  background-position: 100% 100%, 0 100%;
+  background-repeat: no-repeat, no-repeat;
+  transition: background-size 0.6s linear;
+}
+.search-result-container a:hover {
+  background-size: 0 1px, 100% 1px;
+}
+.search-result-container li {
+  padding-bottom: 0.75rem;
+  padding-top: 1rem;
+}
+.search-result-container .search-result {
+  font-family: 'Inter', 'Noto Sans SC', helvetica, arial;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  color: #373633;
+  color: #373633;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+.search-result-container mark {
+  color: #373633;
+  background-color: #fff59b;
+}
+.search-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0.75rem 0.75rem;
+  border-bottom: 2px solid #373633;
+}
+.search-header .search-input-container {
+  flex-grow: 1;
+}
+.search-header .search-input-container .search-input {
+  width: 100%;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: #373633;
+  color: #373633;
+  background-color: #fff;
+}
+.search-header .search-input-container .search-input::placeholder {
+  color: #afaea9;
+}
+.search-header .search-close-btn {
+  flex-grow: 0;
+  margin-left: 0.75rem;
+  margin: auto;
+  cursor: pointer;
+}
+@media (max-width: 688px) {
+  .search-popup-window {
+    width: 100%;
+    height: 100%;
+  }
+}
+.post-content {
+  margin-top: 2rem;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+}
+h1 {
+  font-size: 1.75rem;
+  font-weight: 700;
+  line-height: 2.25rem;
+  color: #373633;
+}
+h2 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 2rem;
+  color: #373633;
+}
+h3 {
+  font-size: 1.125rem;
+  font-weight: 700;
+  line-height: 1.5rem;
+  color: #373633;
+}
+h4 {
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.25rem;
+  color: #373633;
+}
+h5 {
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+  color: #373633;
+}
+h6 {
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: #373633;
+}
+p {
+  font-family: 'Inter', 'Noto Sans SC', helvetica, arial;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  color: #373633;
+}
+strong {
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.5rem;
+  color: #373633;
+}
+em {
+  font-size: 1rem;
+  font-weight: 400;
+  font-style: italic;
+  line-height: 1.5rem;
+  color: #373633;
+}
+del {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  text-decoration: line-through;
+  color: #373633;
+}
+.post-content a {
+  padding-bottom: 2px;
+  background-image: linear-gradient(#373633, #373633), linear-gradient(#373633, #373633);
+  background-size: 100% 1px, 0 2px;
+  background-position: 100% 100%, 0 100%;
+  background-repeat: no-repeat, no-repeat;
+  transition: background-size 0.6s linear;
+}
+.post-content a:hover {
+  background-size: 100% 1px, 100% 2px;
+}
+blockquote {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 1rem;
+  border-left: 0.25rem solid #afaea9;
+}
+blockquote p {
+  margin-left: 1rem;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+blockquote blockquote {
+  margin-left: 1rem;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.post-content li {
+  font-family: 'Inter', 'Noto Sans SC', helvetica, arial;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5rem;
+  color: #373633;
+  margin-top: 0.5rem;
+}
+.post-content ol {
+  padding-left: 1.5rem;
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+  margin-top: 1rem;
+}
+.post-content ol ol {
+  margin-top: 0.5rem;
+}
+.post-content ul {
+  padding-left: 1.5rem;
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+  margin-top: 1rem;
+}
+.post-content ul ul {
+  margin-top: 0.5rem;
+}
+.post-content ul li {
+  list-style-type: disc;
+}
+.post-content .task-list {
+  padding-left: 0;
+}
+.post-content .task-list .task-list-item {
+  list-style: none;
+}
+dl dt {
+  padding: 0.5rem 0;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.5rem;
+  color: #373633;
+}
+dl dt::after {
+  content: " :";
+}
+dl dd {
+  margin: 0;
+}
+.post-head {
+  margin-top: 3.5rem;
+}
+.post-head .post-info {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.post-head .post-info .post-title {
+  margin-bottom: 0.75rem;
+  font-size: 1.75rem;
+  font-weight: 700;
+  line-height: 2.25rem;
+  color: #373633;
+}
+.post-head .post-info .post-date {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  color: #373633;
+}
+.post-head .post-img {
+  margin-top: 2rem;
+}
+.post-footer {
+  margin-top: 3.5rem;
+}
+.post-footer a {
+  background-image: linear-gradient(#fff, #fff), linear-gradient(#373633, #373633);
+  background-size: 100% 1px, 0% 1px;
+  background-position: 100% 100%, 0 100%;
+  background-repeat: no-repeat, no-repeat;
+  transition: background-size 0.6s linear;
+}
+.post-footer a:hover {
+  background-size: 0 1px, 100% 1px;
+}
+.post-nav {
+  margin-top: 0.75rem;
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: #373633;
+}
+.post-nav .prev-item {
+  display: flex;
+  text-align: left;
+  min-width: 50%;
+  align-items: center;
+}
+.post-nav .prev-item .arrow-left {
+  margin-right: 0.25rem;
+}
+.post-nav .next-item {
+  display: flex;
+  flex-direction: row-reverse;
+  text-align: right;
+  min-width: 50%;
+  align-items: center;
 }
-.paginator .space
-{
+.post-nav .next-item .arrow-right {
+  margin-left: 0.25rem;
+}
+.post-comment {
+  margin-top: 3.5rem;
+}
+.v[data-class="v"] .vsys {
+  display: none !important;
+}
+.vcontent p {
+  margin-top: 0 !important;
+  font-size: 0.875rem !important;
+  color: #373633 !important;
+}
+code {
+  font-family: 'Roboto Mono', menlo, monospace;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  color: #0177aa;
+}
+.code pre span {
+  font-family: 'Roboto Mono', menlo, monospace;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  color: #7d7c78;
+}
+.highlight {
+  margin: 0 0 1rem 0;
+}
+.highlight .line {
+  width: 3rem;
+}
+td.gutter {
+  width: 1rem;
+  position: -webkit-sticky;
+  position: sticky;
+  left: 0;
+}
+td.gutter span {
+  font-family: 'Roboto Mono', menlo, monospace;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  color: #bababa;
+}
+td.gutter pre {
+  overflow-x: visible;
+}
+td span {
+  line-height: 0.25rem;
+}
+pre {
+  margin: 0;
+  overflow-x: auto;
+}
+table,
+td,
+th {
+  border: #373633 solid 1px;
+  width: 100%;
+  text-align: left;
+}
+table {
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+td,
+th {
+  padding: 0.75rem;
+}
+th {
+  font-variation-settings: 'wght' 500;
+}
+td {
+  font-variation-settings: 'wght' 300;
+}
+table,
+tboby,
+tr,
+td {
+  background-color: inherit;
+}
+.highlight>table {
+  min-width: fit-content;
+}
+@media (max-width: 480px) {
+  .block-table {
     display: block;
-    padding: 8px 16px;
-    border-radius: 18px;
-    background: #fff;
-    border: none;
-}
-.paginator a
-{
-    margin: 4px;
-    color: var(--font-color-2);
-    transition: color ease-in-out .5s;
-}
-.paginator a:hover
-{
-    color: var(--font-color-0);
-    transition: color ease-in-out .5s;
-}
-.paginator .current
-{
-    color: var(--font-color-0);
-    border: 1px solid var(--font-color-0);
-}
-
-.footer
-{
-    padding: 24px 0;
-    font-size: 0.875rem;
-    color: var(--font-color-3);
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    align-content: center;
-}
-.footer span
-{
-    text-align: center;
-    margin-bottom: 8px;
-}
-.footer a
-{
-    color: var(--font-color-3);
-    transition: color ease-in-out .5s;
-}
-.footer a:hover
-{
-    color: var(--font-color-0);
-    transition: color ease-in-out .5s;
-}
-
-.post-main
-{
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: center;
-    margin-bottom: 24px;
-}
-.post-main-title
-{
-    flex: 0 0 100%;
-    margin-bottom: 12px;
-    font-size: 1.6rem;
-    font-weight: 600;
-    line-height: 1.5;
-    color: var(--font-color-1);
-}
-.post-meta
-{
-    font-size: 0.875rem;
-    color: var(--font-color-3);
-    flex: 0 0 100%;
-    margin-bottom: 32px;
-}
-
-.archive
-{
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-content: normal;
-}
-.archive li
-{
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    align-content: center;
-    padding: 12px 0;
-}
-.archive li:nth-child(odd)
-{
-    background: #fafafa;
-}
-.archive li:nth-child(even)
-{
-    background: #fff;
-}
-.archive li span
-{
-    width: 108px;
-    color: var(--font-color-2);
-}
-.archive-main
-{
-    flex: 0 1 calc( 100% - 108px );
-}
-.archive-title
-{
-    color: var(--font-color-1);
-    /*transition: color ease-in-out .5s;*/
-}
-.archive-title:hover
-{
-    color: var(--font-color-0);
-    transition: color ease-in-out .5s;
+    overflow-x: auto;
+  }
+}
+img {
+  width: 100%;
+  height: auto;
+}
+.video-container {
+  width: 100%;
+  padding-top: 56.25%;
+  position: relative;
+}
+.video-container>iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.gist td {
+  border: 0;
+}
+.gist a {
+  color: #afaea9;
+  background-image: none !important;
+}
+blockquote>footer {
+  margin: 0 1rem;
+  padding: 0.5rem 0;
+  font-size: 0.75rem;
+  color: #afaea9;
+}
+blockquote>footer cite {
+  margin-left: 0.5rem;
+}
+blockquote>footer cite::before {
+  content: " — ";
+}
+blockquote>footer strong {
+  color: #afaea9;
+  font-size: 0.75rem;
+}
+blockquote>footer a {
+  color: #afaea9;
+  background-image: none !important;
+}
+figcaption {
+  font-family: roboto-mono, menlo, monospace;
+  font-size: 0.75rem;
+  padding: 0.5rem 0;
+  color: #afaea9;
+}
+figcaption span {
+  padding-right: 0.5rem;
+}
+figcaption a {
+  color: #afaea9;
+  background-image: none !important;
+}
+blockquote.pullquote.left {
+  float: left;
+}
+blockquote.pullquote.right {
+  float: right;
+}
+ul li.task-list-item {
+  position: relative;
+}
+ul li.task-list-item>input[type=checkbox] {
+  list-style: none;
+  background: none;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 1.5rem;
+  display: inline-block;
+  border: none;
+  opacity: 1;
+}
+ul li.task-list-item>input[type=checkbox][checked]:before {
+  background: #373633;
+  -webkit-mask-image: url("../icon/checkbox-checked.svg");
+  -webkit-mask-position: center center;
+  mask-image: url("../icon/checkbox-checked.svg");
+  -webkit-mask-repeat: no-repeat;
+}
+ul li.task-list-item>input[type=checkbox]:before {
+  background: #373633;
+  -webkit-mask-image: url("../icon/checkbox-default.svg");
+  -webkit-mask-position: center center;
+  mask-image: url("../icon/checkbox-default.svg");
+  -webkit-mask-repeat: no-repeat;
+}
+ul li.task-list-item>input[type=checkbox]:after,
+ul li.task-list-item>input[type=checkbox]:before {
+  display: block;
+  position: absolute;
+  content: "X";
+  color: transparent;
+  left: 0;
+  top: 0;
+  width: 1.25rem;
+  height: 1.5rem;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position-x: 0;
+  background-position-y: center;
+  --webkit-touch-callout: none;
+}
+.icon {
+  display: block;
+  background-color: #373633;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.arrow-up {
+  -webkit-mask-image: url("../icon/arrow-up.svg");
+  mask-image: url("../icon/arrow-up.svg");
+}
+.arrow-left {
+  -webkit-mask-image: url("../icon/arrow-left.svg");
+  mask-image: url("../icon/arrow-left.svg");
+}
+.arrow-right {
+  -webkit-mask-image: url("../icon/arrow-right.svg");
+  mask-image: url("../icon/arrow-right.svg");
+}
+.close-btn {
+  -webkit-mask-image: url("../icon/close-btn.svg");
+  mask-image: url("../icon/close-btn.svg");
+}
+.h-line-primary {
+  background-color: #373633;
+  height: 1px;
+}
+.h-line-secondary {
+  background-color: #afaea9;
+  height: 1px;
+}
+hr {
+  background-color: #e8e8e8;
+  height: 1px;
+  border: 0;
+}
+.tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 0.5rem;
+}
+.tag-title {
+  margin: 0.75rem 0;
+  color: #afaea9;
+  font-size: 0.875rem;
+}
+.tag-title a {
+  color: #afaea9;
+}
+.post-tag {
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1rem;
+  border: 1px solid #373633;
+  margin-right: 0.25rem;
+  margin-bottom: 0.25rem;
+  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
+  border-radius: 1rem;
+}
+.post-tag a {
+  background-image: none !important;
+}
+.post-tag:hover {
+  background-color: #373633;
+}
+.post-tag:hover a {
+  color: #fff;
 }