9 files changed, 286 insertions, 0 deletions
diff --git a/css/post/code.css b/css/post/code.css
new file mode 100644
index 00000000..7bd8e748
--- /dev/null
+++ b/css/post/code.css
@@ -0,0 +1,22 @@
+.highlight {
+  margin: 0 0 $margin-m-2 0;
+}
+.highlight .line {
+  width: $margin-l-2;
+}
+td.gutter {
+  width: $margin-m-2;
+  position: -webkit-sticky;
+  position: sticky;
+  left: 0;
+}
+td.gutter pre {
+  overflow-x: visible;
+}
+td span {
+  line-height: $margin-s-2;
+}
+pre {
+  margin: 0;
+  overflow-x: auto;
+}
diff --git a/css/post/media.css b/css/post/media.css
new file mode 100644
index 00000000..c1dd9608
--- /dev/null
+++ b/css/post/media.css
@@ -0,0 +1,16 @@
+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%;
+}
diff --git a/css/post/post_comment.css b/css/post/post_comment.css
new file mode 100644
index 00000000..a1523871
--- /dev/null
+++ b/css/post/post_comment.css
@@ -0,0 +1,11 @@
+.post-comment {
+  margin-top: $margin-primary;
+}
+.v[data-class="v"] .vsys {
+  display: none !important;
+}
+.vcontent p {
+  margin-top: 0 !important;
+  font-size: $font-size-comment !important;
+  color: $color-text-primary !important;
+}
diff --git a/css/post/post_content.css b/css/post/post_content.css
new file mode 100644
index 00000000..3f5b91a3
--- /dev/null
+++ b/css/post/post_content.css
@@ -0,0 +1,70 @@
+.post-content {
+  margin-top: $margin-l-1;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: $margin-l-0;
+  margin-bottom: $margin-m-1;
+}
+blockquote {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: $margin-m-2;
+  border-left: $margin-s-2 solid $color-text-secondary;
+}
+blockquote p {
+  margin-left: $margin-m-2;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-right: $margin-m-2;
+  padding-top: $margin-m-0;
+  padding-bottom: $margin-m-0;
+}
+blockquote blockquote {
+  margin-left: $margin-m-2;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.post-content li {
+  margin-top: $margin-m-0;
+}
+.post-content ol {
+  padding-left: $margin-l-0;
+  margin-left: $margin-m-1;
+  margin-right: $margin-m-1;
+  margin-top: $margin-m-2;
+}
+.post-content ol ol {
+  margin-top: $margin-m-0;
+}
+.post-content ul {
+  padding-left: $margin-l-0;
+  margin-left: $margin-m-1;
+  margin-right: $margin-m-1;
+  margin-top: $margin-m-2;
+}
+.post-content ul ul {
+  margin-top: $margin-m-0;
+}
+.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: $margin-m-0 0;
+}
+dl dt::after {
+  content: " :";
+}
+dl dd {
+  margin: 0;
+}
diff --git a/css/post/post_footer.css b/css/post/post_footer.css
new file mode 100644
index 00000000..5ee366d0
--- /dev/null
+++ b/css/post/post_footer.css
@@ -0,0 +1,27 @@
+.post-footer {
+  margin-top: $margin-primary;
+}
+.post-nav {
+  margin-top: $margin-m-1;
+  display: flex;
+  flex-wrap: wrap;
+}
+.post-nav .prev-item {
+  display: flex;
+  text-align: left;
+  min-width: 50%;
+  align-items: center;
+}
+.post-nav .prev-item .arrow-left {
+  margin-right: $margin-s-2;
+}
+.post-nav .next-item {
+  display: flex;
+  flex-direction: row-reverse;
+  text-align: right;
+  min-width: 50%;
+  align-items: center;
+}
+.post-nav .next-item .arrow-right {
+  margin-left: $margin-s-2;
+}
diff --git a/css/post/post_head.css b/css/post/post_head.css
new file mode 100644
index 00000000..61715567
--- /dev/null
+++ b/css/post/post_head.css
@@ -0,0 +1,14 @@
+.post-head {
+  margin-top: $margin-primary;
+}
+.post-head .post-info {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.post-head .post-info .post-title {
+  margin-bottom: $margin-m-1;
+}
+.post-head .post-img {
+  margin-top: $margin-l-1;
+}
diff --git a/css/post/table.css b/css/post/table.css
new file mode 100644
index 00000000..bfefa58c
--- /dev/null
+++ b/css/post/table.css
@@ -0,0 +1,36 @@
+table,
+td,
+th {
+  border: $color-text-primary solid $line-third;
+  width: 100%;
+  text-align: left;
+}
+table {
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+td,
+th {
+  padding: $margin-m-1;
+}
+th {
+  font-variation-settings: 'wght' $font-weight-medium;
+}
+td {
+  font-variation-settings: 'wght' $font-weight-light;
+}
+table,
+tboby,
+tr,
+td {
+  background-color: inherit;
+}
+.highlight>table {
+  min-width: fit-content;
+}
+@media (max-width: 480px) {
+  .block-table {
+    display: block;
+    overflow-x: auto;
+  }
+}
diff --git a/css/post/tag_plugin.css b/css/post/tag_plugin.css
new file mode 100644
index 00000000..b15b7fe2
--- /dev/null
+++ b/css/post/tag_plugin.css
@@ -0,0 +1,46 @@
+.gist td {
+  border: 0;
+}
+.gist a {
+  color: $color-text-secondary;
+  background-image: none !important;
+}
+blockquote>footer {
+  margin: 0 $margin-m-2;
+  padding: $margin-m-0 0;
+  font-size: $font-size-blockquote-footer;
+  color: $color-text-secondary;
+}
+blockquote>footer cite {
+  margin-left: $margin-m-0;
+}
+blockquote>footer cite::before {
+  content: " — ";
+}
+blockquote>footer strong {
+  color: $color-text-secondary;
+  font-size: $font-size-blockquote-footer;
+}
+blockquote>footer a {
+  color: $color-text-secondary;
+  background-image: none !important;
+}
+figcaption {
+  font-family: roboto-mono, menlo, monospace;
+  font-size: $font-size-blockquote-footer;
+  padding: $margin-m-0 0;
+  color: $color-text-secondary;
+}
+figcaption span {
+  padding-right: $margin-m-0;
+}
+figcaption a {
+  color: $color-text-secondary;
+  background-image: none !important;
+}
+blockquote.pullquote.left {
+  float: left;
+}
+blockquote.pullquote.right {
+  float: right;
+}
diff --git a/css/post/task_list.css b/css/post/task_list.css
new file mode 100644
index 00000000..ee2ec895
--- /dev/null
+++ b/css/post/task_list.css
@@ -0,0 +1,44 @@
+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: $margin-l-0;
+  display: inline-block;
+  border: none;
+  opacity: 1;
+}
+ul li.task-list-item>input[type=checkbox][checked]:before {
+  background: $color-text-primary;
+  -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: $color-text-primary;
+  -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: $icon-size;
+  height: $line-height-body;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position-x: 0;
+  background-position-y: center;
+  --webkit-touch-callout: none;
+}