summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--assets/css/components/_animation.scss9
-rw-r--r--assets/css/components/_content.scss89
-rw-r--r--assets/css/components/_footer.scss44
-rw-r--r--assets/css/components/_header.scss68
-rw-r--r--assets/css/components/_markdown.scss90
-rw-r--r--assets/css/components/_pages.scss216
-rw-r--r--assets/css/components/_reset.scss32
-rw-r--r--assets/css/components/_shortcodes.scss202
-rw-r--r--assets/css/components/_variables.scss44
-rw-r--r--assets/css/flexbox.css (renamed from assets/css/flexboxgrid-6.3.1.min.css)0
-rw-r--r--assets/css/index.css825
-rw-r--r--assets/css/index.scss9
-rw-r--r--layouts/index.html2
-rw-r--r--layouts/partials/head/css.html4
14 files changed, 806 insertions, 828 deletions
diff --git a/assets/css/components/_animation.scss b/assets/css/components/_animation.scss
new file mode 100644
index 00000000..a47bfafc
--- /dev/null
+++ b/assets/css/components/_animation.scss
@@ -0,0 +1,9 @@
+/* transition swup */
+
+html.is-changing .transition-fade {
+ transition: opacity 0.25s;
+ opacity: 1;
+}
+html.is-animating .transition-fade {
+ opacity: 0;
+}
diff --git a/assets/css/components/_content.scss b/assets/css/components/_content.scss
new file mode 100644
index 00000000..6c5815cb
--- /dev/null
+++ b/assets/css/components/_content.scss
@@ -0,0 +1,89 @@
+/* toc */
+
+#toc-container {
+ position: absolute;
+ bottom: 0;
+ right: calc(50% + var(--page-width) / 2);
+ left: auto;
+ height: 100%;
+ top: 12rem;
+}
+
+@media screen and (max-width: 1200px) {
+ #toc-container {
+ display: none
+ }
+}
+
+#toc {
+ /* position */
+ position: sticky;
+ top: 3rem;
+ /* styling */
+ font-size: 1rem;
+ padding: 0 2rem;
+}
+
+@media screen and (max-width: 1700px) {
+ #toc {
+ font-size: 0.9rem;
+ }
+}
+
+@media screen and (max-width: 1500px) {
+ #toc {
+ font-size: 0.825rem;
+ }
+}
+
+#toc ul, #toc ol {
+ margin-block-start: 0;
+ margin-block-end: 0;
+ padding-inline-start: 1rem;
+}
+
+#toc li {
+ list-style: none;
+}
+
+#toc li > a {
+ color: var(--secondary-text-color);
+ text-decoration: none;
+ transition: color .3s;
+ display: inline-flex;
+ align-items: center;
+ gap: .5rem;
+}
+
+#toc li > a::before {
+ content: '';
+ display: inline-block;
+ width: 1rem;
+ height: .3rem;
+ background-color: var(--block-background-color);
+ border-radius: .2rem;
+ transition: background .3s;
+}
+
+#toc li a:hover,
+#toc li.is-active-li > a {
+ color: var(--text-color);
+}
+
+#toc li.is-active-li > a::before {
+ background-color: var(--secondary-text-color);
+}
+
+#toc .toc-list {
+ overflow: hidden;
+ position: relative;
+}
+
+#toc .toc-list .toc-list {
+ max-height: 25rem;
+ overflow-y: auto
+}
+
+#toc .toc-list.is-collapsed {
+ max-height: 0
+}
diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss
new file mode 100644
index 00000000..44811c6c
--- /dev/null
+++ b/assets/css/components/_footer.scss
@@ -0,0 +1,44 @@
+/* site footer */
+
+#footer {
+ width: var(--page-width);
+ margin: 2rem auto;
+ font-family: var(--mono-font-family);
+}
+
+@media screen and (min-width: 768px) {
+ #footer {
+ display: flex;
+ justify-content: space-between;
+ }
+}
+
+#footer-links {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+}
+
+#footer-links ul.footer-navigation {
+ list-style: none;
+ display: flex;
+ gap: 0.2rem;
+ justify-content: flex-end;
+ padding-inline-start: 0;
+}
+
+#footer-links ul.footer-navigation li {
+ display: inline-flex;
+ align-items: center;
+}
+
+#footer-links ul.footer-navigation li img {
+ height: 1rem;
+ width: auto
+}
+
+#footer-copyright .word-count {
+ font-family: var(--serif-font-family);
+ font-size: .9rem;
+ color: var(--secondary-text-color)
+}
diff --git a/assets/css/components/_header.scss b/assets/css/components/_header.scss
new file mode 100644
index 00000000..9e3d4454
--- /dev/null
+++ b/assets/css/components/_header.scss
@@ -0,0 +1,68 @@
+/* header */
+
+.header-title {
+ font-size: 2rem;
+ font-weight: 900;
+ margin-top: 32px;
+ text-align: center;
+ letter-spacing: .15rem;
+}
+.header-title a {
+ text-decoration: none;
+}
+
+.header-subtitle {
+ color: var(--secondary-text-color);
+}
+
+.header-line {
+ width: 100%;
+ border-width: 1px;
+ border-color: var(--border-color);
+ border-style: solid none none none;
+}
+
+/* navigation */
+
+#navigation-bar {
+ --gap: .75rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: var(--gap);
+ padding-left: calc(1rem + var(--gap))
+}
+
+.navigation {
+ margin: 1rem 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: fit-content;
+ border-radius: 1rem;
+ overflow: hidden;
+}
+
+.navigation-item a {
+ display: inline-block;
+ color: var(--background-color);
+ padding: 0.25rem 0.5rem;
+ background-color: var(--text-color);
+}
+
+.navigation-item:first-child a {
+ padding-left: 0.75rem
+}
+
+.navigation-item:last-child a {
+ padding-right: 0.75rem
+}
+
+.navigation-item.active a {
+ color: var(--text-color);
+ background-color: var(--block-background-color);
+}
+
+.navigation-item a:hover {
+ text-decoration: none;
+}
diff --git a/assets/css/components/_markdown.scss b/assets/css/components/_markdown.scss
new file mode 100644
index 00000000..9ed1c967
--- /dev/null
+++ b/assets/css/components/_markdown.scss
@@ -0,0 +1,90 @@
+// Variables (can be moved to a separate variables file if needed)
+$font-size: var(--content-font-size);
+$link-color: var(--link-color);
+$secondary-text-color: var(--secondary-text-color);
+$border-color: var(--border-color);
+$block-background-color: var(--block-background-color);
+
+// Mixin for block styles
+@mixin block-style($margin, $padding, $color: null, $border-left: null) {
+ margin: $margin;
+ padding: $padding;
+ @if $color {
+ color: $color;
+ }
+ @if $border-left {
+ border-left: $border-left;
+ }
+}
+
+// Main styles
+.markdown-body {
+ font-size: $font-size;
+ max-width: 100%;
+
+ // Nested styles for child elements
+ a {
+ text-decoration: underline;
+ color: $link-color;
+ }
+
+ blockquote {
+ @include block-style(0, 0 1em, $secondary-text-color, 0.25em solid $border-color);
+ }
+
+ pre {
+ padding: 16px;
+ overflow: auto;
+ border-radius: 10px;
+ }
+
+ code {
+ padding: 0.2em 0.4em;
+ font-size: 85%;
+ background-color: $block-background-color;
+ border-radius: 6px;
+ }
+
+ pre > code {
+ padding: 0;
+ font-size: 100%;
+ background-color: inherit;
+ border: 0;
+ }
+
+ p {
+ hyphens: auto;
+ text-justify: ideographic;
+ margin-bottom: 1em;
+ }
+
+ strong {
+ color: var(--strong-text-color)
+ }
+
+ em {
+ color: var(--em-text-color)
+ }
+
+ hr {
+ margin: 2.5rem auto;
+ border: 0.1rem dashed var(--border-color);
+ }
+
+ img {
+ max-width: 100%;
+ display: block;
+ margin-right: auto;
+ margin-top: 6px;
+ }
+
+ figure {
+ margin: 0;
+ }
+
+ figure figcaption h4 {
+ font-size: 0.9rem;
+ color: var(--secondary-text-color);
+ font-weight: 400;
+ }
+}
diff --git a/assets/css/components/_pages.scss b/assets/css/components/_pages.scss
new file mode 100644
index 00000000..61a88aae
--- /dev/null
+++ b/assets/css/components/_pages.scss
@@ -0,0 +1,216 @@
+/* posts list */
+
+#posts-list {
+ min-height: 600px;
+}
+
+#posts-list ul {
+ list-style-type: none;
+ padding-inline-start: 1em;
+}
+
+.featured-post a.posts-title-link {
+ font-weight: 800;
+ display: block;
+}
+
+.posts-line {
+ font-size: 1.2rem;
+ margin: 12px 0;
+}
+
+#posts-list > section:nth-child(1) > ul:nth-child(3) > li.first-post > div > div.posts-title.col-xs-9.col-sm-10 > div {
+ align-items: flex-start;
+}
+
+.posts-categories {
+ font-size: 0.8rem;
+ text-align: center;
+}
+
+.posts-category {
+ padding: 3px 0;
+ border: var(--border-color) 2px solid;
+ border-radius: 5px;
+ background-color: var(--background-color);
+}
+
+.posts-date {
+ font-family: var(--mono-font-family);
+ color: var(--secondary-text-color)
+}
+
+.posts-year-section {
+ --section-height: 9rem;
+ min-height: var(--section-height);
+ position: relative;
+ margin: 2rem 0;
+}
+
+.posts-year-title {
+ font-size: 2rem;
+ font-weight: 900;
+ position: absolute;
+ right: 0;
+ color: var(--text-color);
+ opacity: 0.25;
+ font-size: calc(var(--section-height) / 2);
+ margin: 0;
+ line-height: 1;
+ z-index: -1;
+}
+
+#posts-list hr {
+ border: 1px solid var(--border-color);
+ margin: 3rem 0;
+}
+
+.posts-subtitle {
+ color: var(--secondary-text-color)
+}
+
+/* post */
+
+.post-header {
+ margin-bottom: 2rem;
+}
+
+.post-title {
+ font-size: 2rem;
+ font-weight: 900;
+}
+
+.post-subtitle {
+ display: block;
+ color: var(--secondary-text-color);
+ font-style: italic;
+ font-size: 1.2rem;
+}
+
+.post-tags a {
+ display: inline-block;
+ color: var(--secondary-text-color);
+ font-size: var(--content-font-size);
+}
+
+.post-date {
+ color: var(--secondary-text-color)
+}
+
+.post-author {
+ float: right;
+ font-weight: 600;
+}
+
+.page-content {
+ min-height: 60%;
+}
+
+.post-content {
+ margin-bottom: 50px;
+ line-height: 2
+}
+
+/* termlist */
+
+.termlist-title {
+ font-size: 2rem;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ background-color: var(--block-background-color);
+ padding: 0.5rem 1rem;
+ border-radius: 1rem;
+ width: fit-content;
+ margin: 2rem auto;
+ margin-bottom: 0;
+}
+
+.termlist-title::before,
+.termlist-title::after {
+ margin: 0.5rem 0;
+ color: var(--secondary-text-color);
+ font-size: 0.75em
+}
+
+.termlist-title::before {
+ content: "《";
+}
+
+.termlist-title::after {
+ content: "》";
+}
+
+.termlist-subscribe {
+ text-align: center;
+ font-size: .9rem
+}
+
+.termlist-subscribe a {
+ color: var(--secondary-text-color)
+}
+
+.termlist-subscribe a:hover {
+ text-decoration: none
+}
+
+/* category page */
+
+section.taxonomy {
+ margin: 2rem 0;
+}
+
+.taxonomy-tags {
+ display: flex;
+ flex-wrap: wrap;
+ gap: .5rem
+}
+
+.taxonomy-tags-item {
+ display: inline-flex;
+ align-items: center;
+ gap: .3rem;
+
+ padding: .25rem .75rem;
+ background-color: var(--block-background-color);
+ transition: color, background .3s;
+ border-radius: .3rem;
+}
+
+.taxonomy-tags-item:hover {
+ text-decoration: none;
+ background-color: var(--text-color);
+ color: var(--block-background-color);
+}
+
+.taxonomy-tags-item .tag-count {
+ font-size: .8rem;
+ color: var(--secondary-text-color);
+}
+
+@media screen and (max-width: 600px) {
+ .posts-line {
+ font-size: 16px;
+ }
+
+ .markdown-body {
+ font-size: 16px;
+ }
+ .post-title {
+ font-size: 2rem;
+ }
+ .post-content p {
+ letter-spacing: 0.05em;
+ }
+ .post-content .post-gallery img {
+ width: 100%;
+ }
+}
+
+@media screen and (max-width: 48em) {
+ .posts-category {
+ display: none;
+ }
+}
diff --git a/assets/css/components/_reset.scss b/assets/css/components/_reset.scss
new file mode 100644
index 00000000..8d29ea32
--- /dev/null
+++ b/assets/css/components/_reset.scss
@@ -0,0 +1,32 @@
+body {
+ font-family: var(--serif-font-family);
+ -webkit-font-smoothing: antialiased;
+ margin: 0 20px;
+ color: var(--text-color);
+ position: relative;
+ /* background */
+ background-image: linear-gradient(to bottom, var(--block-background-color), transparent);
+ background-size: 100% 5rem;
+ background-position: top left;
+ background-repeat: no-repeat;
+ background-color: var(--background-color);
+}
+
+article {
+ max-width: var(--page-width);
+ margin: 0 auto
+}
+
+a {
+ color: var(--text-color);
+ text-decoration: none;
+ text-underline-offset: 0.25rem;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+ul {
+ list-style-type: square;
+}
diff --git a/assets/css/components/_shortcodes.scss b/assets/css/components/_shortcodes.scss
new file mode 100644
index 00000000..48074923
--- /dev/null
+++ b/assets/css/components/_shortcodes.scss
@@ -0,0 +1,202 @@
+/* callouts */
+
+.callout {
+ background-color: var(--block-background-color);
+ border-radius: .25rem;
+ padding: 1rem 1.25rem;
+ line-height: 1.75;
+
+ display: flex;
+ gap: .75rem;
+
+ margin: 0.5rem 0;
+}
+
+.callout .callout-content p {
+ margin: 0;
+}
+
+/* quote shortcode */
+
+.quote-card {
+ --card-bg: rgba(255,255,255,0.25);
+ --card-bg-lighter: rgba(255,255,255,0.1);
+ --card-noise: rgba(255,255,255,0.04);
+
+ font-size: 1.5rem;
+ font-style: italic;
+ text-align: center;
+ margin: 5rem 3rem;
+ padding: 1rem;
+ border: 1px solid var(--border-color);
+ border-radius: 1rem;
+ box-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;
+ transform: rotate(3deg);
+ background-color: rgba(255,255,255,0.35);
+
+ background: linear-gradient(var(--card-bg-lighter), var(--card-bg-lighter)),
+ repeating-radial-gradient(var(--card-bg) 0 0.0001%, var(--card-noise) 0 0.0002%) 50% 0 / 2500px 2500px,
+ repeating-conic-gradient(var(--card-bg) 0 0.0001%, var(--card-noise) 0 0.0002%) 60% 60% / 2500px 2500px;
+ background-blend-mode: normal, difference;
+}
+
+@media screen and (max-width: 768px) {
+ .quote-card {
+ font-size: 1.2rem;
+ margin: 3rem 1rem;
+ }
+}
+
+/* blog links */
+
+div.blog-links {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1rem;
+}
+
+a.blog-link {
+ position: relative;
+ background-color: var(--block-background-color);
+ text-decoration: none;
+ color: var(--text-color);
+ padding: 1rem 2rem;
+ padding-right: 4rem;
+ border-radius: 1rem;
+ width: calc(50% - 2rem);
+ box-sizing: border-box;
+ overflow: hidden
+}
+
+@media screen and (max-width: 768px) {
+ a.blog-link {
+ font-size: 1.2rem;
+ padding: 0.5rem 1rem;
+ padding-right: 2rem;
+ width: 100%;
+ }
+}
+
+a.blog-link h4,
+a.blog-link p {
+ margin: 0;
+ font-size: 1.2rem;
+}
+
+a.blog-link p {
+ line-height: 1.5;
+}
+
+a.blog-link .blog-link-content {
+ z-index: 10;
+}
+
+a.blog-link-image {
+ z-index: 0;
+}
+
+a.blog-link img {
+ --size: 5rem;
+ display: block;
+ position: absolute;
+ right: -1rem;
+ bottom: -1rem;
+ width: var(--size);
+ height: var(--size);
+ border-radius: 100%;
+ z-index: 0;
+}
+
+/* book showcase shortcode */
+
+.book-showcase {
+ display: flex;
+ gap: 2rem;
+ line-height: 1.5;
+ margin: 2rem 0
+}
+
+.book-showcase .book-cover {
+ width: 25%;
+ flex-shrink: 0;
+}
+
+.book-description-header .book-title {
+ margin: 0
+}
+
+.book-description-header p {
+ font-size: 1rem;
+ margin: 0.1rem
+}
+
+/* inline-image shortcode */
+
+.inline-image {
+ display: flex;
+ overflow-x: auto;
+ scroll-behavior: smooth;
+ gap: 1rem;
+ white-space: nowrap;
+}
+
+.inline-image > figure {
+ display: inline-block;
+ margin: 0;
+ flex-shrink: 0;
+}
+
+.inline-image > figure img {
+ height: 20rem;
+ object-fit: cover;
+ display: block;
+}
+
+
+/* gallery */
+
+.gallery-img {
+ text-align: center;
+}
+
+.gallery-img span {
+ text-align: center;
+}
+
+.gallery-img-desc {
+ font-size: 0.8em;
+ font-weight: 800;
+}
+
+/* sidenote shortcode */
+
+@media screen and (max-width: 1199px) {
+ .sidenote {
+ border: 1px solid var(--block-background-color);
+ padding: .75rem 1rem;
+ border-radius: 0.5rem;
+ line-height: 1.5;
+ }
+ .sidenote-title {
+ font-size: 1rem;
+ text-align: right;
+ font-style: italic
+ }
+}
+
+@media screen and (min-width: 1200px) {
+ .sidenote {
+ position: absolute;
+ left: calc(50% + var(--page-width) / 2);
+ margin-left: 2rem;
+ max-width: 20rem
+ }
+}
+
+.sidenote-title {
+ margin: 0.5rem 0
+}
+
+.sidenote-content {
+ font-size: 1rem
+}
diff --git a/assets/css/components/_variables.scss b/assets/css/components/_variables.scss
new file mode 100644
index 00000000..11eded55
--- /dev/null
+++ b/assets/css/components/_variables.scss
@@ -0,0 +1,44 @@
+:root {
+ /* colors */
+ --background-color: #F5F5F7;
+ --block-background-color: #E9E8ED;
+ --border-color: #d0d7de;
+ --text-color: #1D1D1F;
+ --secondary-text-color: #6E6E73;
+ --link-color: #277BD9;
+
+ --strong-text-color: #B6506A;
+ --em-text-color: #0271A4;
+
+ /* fonts */
+ --mono-font-family: "Courier New", Courier, "Menlo", "Monaco", Consolas, "Liberation Mono", "Lucida Console", monospace;
+ --serif-font-family: "Noto Serif SC", serif;
+ --content-font-size: 20px;
+
+ /* waline */
+ --waline-font-size: 20px;
+ --waline-border-color: var(--border-color);
+ --waline-bg-color: var(--background-color);
+
+ --page-width: 700px;
+}
+
+.dark {
+ --background-color: #1D2021;
+ --block-background-color: #181A1B;
+ --border-color: rgba(255,255,255,0.2);
+ --text-color: #D2CEC9;
+ --secondary-text-color: #A1998D;
+ --link-color: #277BD9
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --background-color: #1D2021;
+ --block-background-color: #181A1B;
+ --border-color: rgba(255,255,255,0.2);
+ --text-color: #D2CEC9;
+ --secondary-text-color: #A1998D;
+ --link-color: #277BD9;
+ }
+}
diff --git a/assets/css/flexboxgrid-6.3.1.min.css b/assets/css/flexbox.css
index 7e27ea94..7e27ea94 100644
--- a/assets/css/flexboxgrid-6.3.1.min.css
+++ b/assets/css/flexbox.css
diff --git a/assets/css/index.css b/assets/css/index.css
deleted file mode 100644
index 5ba6d04a..00000000
--- a/assets/css/index.css
+++ /dev/null
@@ -1,825 +0,0 @@
-/* global */
-
-:root {
- /* colors */
- --background-color: #F5F5F7;
- --block-background-color: #E9E8ED;
- --border-color: #d0d7de;
- --text-color: #1D1D1F;
- --secondary-text-color: #6E6E73;
- --link-color: #277BD9;
-
- --strong-text-color: #B6506A;
- --em-text-color: #0271A4;
-
- /* fonts */
- --mono-font-family: "Courier New", Courier, "Menlo", "Monaco", Consolas, "Liberation Mono", "Lucida Console", monospace;
- --serif-font-family: "Noto Serif SC", serif;
- --content-font-size: 20px;
-
- /* waline */
- --waline-font-size: 20px;
- --waline-border-color: var(--border-color);
- --waline-bg-color: var(--background-color);
-
- --page-width: 700px;
-}
-
-.dark {
- --background-color: #1D2021;
- --block-background-color: #181A1B;
- --border-color: rgba(255,255,255,0.2);
- --text-color: #D2CEC9;
- --secondary-text-color: #A1998D;
- --link-color: #277BD9
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --background-color: #1D2021;
- --block-background-color: #181A1B;
- --border-color: rgba(255,255,255,0.2);
- --text-color: #D2CEC9;
- --secondary-text-color: #A1998D;
- --link-color: #277BD9;
- }
-}
-
-body {
- font-family: var(--serif-font-family);
- -webkit-font-smoothing: antialiased;
- margin: 0 20px;
- color: var(--text-color);
- position: relative;
- /* background */
- background-image: linear-gradient(to bottom, var(--block-background-color), transparent);
- background-size: 100% 5rem;
- background-position: top left;
- background-repeat: no-repeat;
- background-color: var(--background-color);
-}
-
-article {
- max-width: var(--page-width);
- margin: 0 auto
-}
-
-a {
- color: var(--text-color);
- text-decoration: none;
- text-underline-offset: 0.25rem;
-}
-
-a:hover {
- text-decoration: underline;
-}
-
-ul {
- list-style-type: square;
-}
-
-.markdown-body {
- font-size: var(--content-font-size);
- max-width: 100%;
-}
-
-.markdown-body a {
- text-decoration: underline;
- color: var(--link-color);
-}
-
-.markdown-body blockquote {
- margin: 0;
- padding: 0 1em;
- color: var(--secondary-text-color);
- border-left: 0.25em solid var(--border-color);
-}
-
-.markdown-body pre {
- padding: 16px;
- overflow: auto;
- border-radius: 10px;
-}
-
-.markdown-body code {
- padding: 0.2em 0.4em;
- font-size: 85%;
- background-color: var(--block-background-color);
- border-radius: 6px;
-}
-
-.markdown-body img {
- max-width: 100%
-}
-
-/* reset code */
-
-.markdown-body pre > code {
- padding: 0;
- font-size: 100%;
- background-color: inherit;
- border: 0;
-}
-
-/* i18n */
-
-.Chinese .markdown-body {
- line-height: 200%;
-}
-
-/* header */
-
-.site-date-catalog {
- font-size: 2rem;
-}
-
-.header-title {
- font-size: 2rem;
- font-weight: 900;
- margin-top: 32px;
- text-align: center;
- letter-spacing: .15rem;
-}
-.header-title a {
- text-decoration: none;
-}
-
-.header-subtitle {
- color: var(--secondary-text-color);
-}
-
-/* Navigation */
-
-#navigation-bar {
- --gap: .75rem;
- display: flex;
- justify-content: center;
- align-items: center;
- gap: var(--gap);
- padding-left: calc(1rem + var(--gap))
-}
-
-.navigation {
- margin: 1rem 0;
- display: flex;
- justify-content: center;
- align-items: center;
- width: fit-content;
- border-radius: 1rem;
- overflow: hidden;
-}
-
-.navigation-item a {
- display: inline-block;
- color: var(--background-color);
- padding: 0.25rem 0.5rem;
- background-color: var(--text-color);
-}
-
-.navigation-item:first-child a {
- padding-left: 0.75rem
-}
-
-.navigation-item:last-child a {
- padding-right: 0.75rem
-}
-
-.navigation-item.active a {
- color: var(--text-color);
- background-color: var(--block-background-color);
-}
-
-.navigation-item a:hover {
- text-decoration: none;
-}
-
-.header-line {
- width: 100%;
- border-width: 1px;
- border-color: var(--border-color);
- border-style: solid none none none;
-}
-
-/* posts list */
-
-#posts-list {
- min-height: 600px;
-}
-
-#posts-list ul {
- list-style-type: none;
- padding-inline-start: 1em;
-}
-
-.featured-post a.posts-title-link {
- font-weight: 800;
- display: block;
-}
-
-.posts-line {
- font-size: 1.2rem;
- margin: 12px 0;
-}
-
-#posts-list > section:nth-child(1) > ul:nth-child(3) > li.first-post > div > div.posts-title.col-xs-9.col-sm-10 > div {
- align-items: flex-start;
-}
-
-.posts-categories {
- font-size: 0.8rem;
- text-align: center;
-}
-
-.posts-category {
- padding: 3px 0;
- border: var(--border-color) 2px solid;
- border-radius: 5px;
- background-color: var(--background-color);
-}
-
-.posts-date {
- font-family: var(--mono-font-family);
- color: var(--secondary-text-color)
-}
-
-.posts-year-section {
- --section-height: 9rem;
- min-height: var(--section-height);
- position: relative;
- margin: 2rem 0;
-}
-
-.posts-year-title {
- font-weight: 900;
- position: absolute;
- right: 0;
- color: var(--text-color);
- opacity: 0.25;
- font-size: calc(var(--section-height) / 2);
- margin: 0;
- line-height: 1;
- z-index: -1;
-}
-
-#posts-list hr {
- border: 1px solid var(--border-color);
- margin: 3rem 0;
-}
-
-.posts-subtitle {
- color: var(--secondary-text-color)
-}
-
-/* post */
-
-.post-header {
- margin-bottom: 2rem;
-}
-
-.post-title {
- font-size: 2rem;
- font-weight: 900;
-}
-
-.post-subtitle {
- display: block;
- color: var(--secondary-text-color);
- font-style: italic;
- font-size: 1.2rem;
-}
-
-.post-tags a {
- display: inline-block;
- color: var(--secondary-text-color);
- font-size: var(--content-font-size);
-}
-
-.post-date {
- color: var(--secondary-text-color)
-}
-
-.post-author {
- float: right;
- font-weight: 600;
-}
-
-.page-content {
- min-height: 60%;
-}
-
-.post-content {
- margin-bottom: 50px;
- line-height: 2
-}
-
-.post-content p {
- hyphens: auto;
- text-justify: ideographic;
- margin-bottom: 1em;
-}
-
-.post-content strong {
- color: var(--strong-text-color)
-}
-
-.post-content em {
- color: var(--em-text-color)
-}
-
-.post-content hr {
- margin: 2.5rem auto;
- border: 0.1rem dashed var(--border-color);
-}
-
-.post-content img {
- max-width: 100%;
- display: block;
- margin-right: auto;
- margin-top: 6px;
-}
-
-.post-content .post-gallery {
- display: flex;
- flex-wrap: wrap;
- gap: 6px;
-}
-
-.post-content .post-gallery img {
- margin-right: auto;
- margin-top: auto;
- width: calc(50% - 3px);
-}
-
-.post-content figure {
- margin: 0;
-}
-
-.post-content figure figcaption h4 {
- font-size: 0.9rem;
- color: var(--secondary-text-color);
- font-weight: 400;
-}
-
-.related-content {
- border-width: 3px;
- border-style: solid;
- border-color: #000;
- padding: 0 10px;
- margin-bottom: 50px;
- margin-top: 100px;
-}
-
-.related-content li {
- margin: 5px 0;
-}
-
-/* termlist */
-
-.termlist-title {
- font-size: 2rem;
- text-align: center;
- display: flex;
- justify-content: center;
- align-items: center;
-
- background-color: var(--block-background-color);
- padding: 0.5rem 1rem;
- border-radius: 1rem;
- width: fit-content;
- margin: 2rem auto;
- margin-bottom: 0;
-}
-
-.termlist-title::before,
-.termlist-title::after {
- margin: 0.5rem 0;
- color: var(--secondary-text-color);
- font-size: 0.75em
-}
-
-.termlist-title::before {
- content: "《";
-}
-
-.termlist-title::after {
- content: "》";
-}
-
-.termlist-subscribe {
- text-align: center;
- font-size: .9rem
-}
-
-.termlist-subscribe a {
- color: var(--secondary-text-color)
-}
-
-.termlist-subscribe a:hover {
- text-decoration: none
-}
-
-/* category page */
-
-section.taxonomy {
- margin: 2rem 0;
-}
-
-.taxonomy-tags {
- display: flex;
- flex-wrap: wrap;
- gap: .5rem
-}
-
-.taxonomy-tags-item {
- display: inline-flex;
- align-items: center;
- gap: .3rem;
-
- padding: .25rem .75rem;
- background-color: var(--block-background-color);
- transition: color, background .3s;
- border-radius: .3rem;
-}
-
-.taxonomy-tags-item:hover {
- text-decoration: none;
- background-color: var(--text-color);
- color: var(--block-background-color);
-}
-
-.taxonomy-tags-item .tag-count {
- font-size: .8rem;
- color: var(--secondary-text-color);
-}
-
-/* gallery */
-
-.gallery-img {
- text-align: center;
-}
-
-.gallery-img span {
- text-align: center;
-}
-
-.gallery-img-desc {
- font-size: 0.8em;
- font-weight: 800;
-}
-
-@media screen and (max-width: 600px) {
- .posts-line {
- font-size: 16px;
- }
-
- .markdown-body {
- font-size: 16px;
- }
- .post-title {
- font-size: 2rem;
- }
- .post-content p {
- letter-spacing: 0.05em;
- }
- .post-content .post-gallery img {
- width: 100%;
- }
-}
-
-@media screen and (max-width: 48em) {
- .posts-category {
- display: none;
- }
-}
-
-/* callouts */
-
-.callout {
- background-color: var(--block-background-color);
- border-radius: .25rem;
- padding: 1rem 1.25rem;
- line-height: 1.75;
-
- display: flex;
- gap: .75rem;
-
- margin: 0.5rem 0;
-}
-
-.callout .callout-content p {
- margin: 0;
-}
-
-/* quote shortcode */
-
-.quote-card {
- --card-bg: rgba(255,255,255,0.25);
- --card-bg-lighter: rgba(255,255,255,0.1);
- --card-noise: rgba(255,255,255,0.04);
-
- font-size: 1.5rem;
- font-style: italic;
- text-align: center;
- margin: 5rem 3rem;
- padding: 1rem;
- border: 1px solid var(--border-color);
- border-radius: 1rem;
- box-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;
- transform: rotate(3deg);
- background-color: rgba(255,255,255,0.35);
-
- background: linear-gradient(var(--card-bg-lighter), var(--card-bg-lighter)),
- repeating-radial-gradient(var(--card-bg) 0 0.0001%, var(--card-noise) 0 0.0002%) 50% 0 / 2500px 2500px,
- repeating-conic-gradient(var(--card-bg) 0 0.0001%, var(--card-noise) 0 0.0002%) 60% 60% / 2500px 2500px;
- background-blend-mode: normal, difference;
-}
-
-@media screen and (max-width: 768px) {
- .quote-card {
- font-size: 1.2rem;
- margin: 3rem 1rem;
- }
-}
-
-/* blog links */
-
-div.blog-links {
- display: flex;
- flex-wrap: wrap;
- gap: 1rem;
-}
-
-a.blog-link {
- position: relative;
- background-color: var(--block-background-color);
- text-decoration: none;
- color: var(--text-color);
- padding: 1rem 2rem;
- padding-right: 4rem;
- border-radius: 1rem;
- width: calc(50% - 2rem);
- box-sizing: border-box;
- overflow: hidden
-}
-
-@media screen and (max-width: 768px) {
- a.blog-link {
- font-size: 1.2rem;
- padding: 0.5rem 1rem;
- padding-right: 2rem;
- width: 100%;
- }
-}
-
-a.blog-link h4,
-a.blog-link p {
- margin: 0;
- font-size: 1.2rem;
-}
-
-a.blog-link p {
- line-height: 1.5;
-}
-
-a.blog-link .blog-link-content {
- z-index: 10;
-}
-
-a.blog-link-image {
- z-index: 0;
-}
-
-a.blog-link img {
- --size: 5rem;
- display: block;
- position: absolute;
- right: -1rem;
- bottom: -1rem;
- width: var(--size);
- height: var(--size);
- border-radius: 100%;
- z-index: 0;
-}
-
-/* book showcase shortcode */
-
-.book-showcase {
- display: flex;
- gap: 2rem;
- line-height: 1.5;
- margin: 2rem 0
-}
-
-.book-showcase .book-cover {
- width: 25%;
- flex-shrink: 0;
-}
-
-.book-description-header .book-title {
- margin: 0
-}
-
-.book-description-header p {
- font-size: 1rem;
- margin: 0.1rem
-}
-
-/* inline-image shortcode */
-
-.inline-image {
- display: flex;
- overflow-x: auto;
- scroll-behavior: smooth;
- gap: 1rem;
- white-space: nowrap;
-}
-
-.inline-image > figure {
- display: inline-block;
- margin: 0;
- flex-shrink: 0;
-}
-
-.inline-image > figure img {
- height: 20rem;
- object-fit: cover;
- display: block;
-}
-
-/* sidenote shortcode */
-
-@media screen and (max-width: 1199px) {
- .sidenote {
- border: 1px solid var(--block-background-color);
- padding: .75rem 1rem;
- border-radius: 0.5rem;
- line-height: 1.5;
- }
- .sidenote-title {
- font-size: 1rem;
- text-align: right;
- font-style: italic
- }
-}
-
-@media screen and (min-width: 1200px) {
- .sidenote {
- position: absolute;
- left: calc(50% + var(--page-width) / 2);
- margin-left: 2rem;
- max-width: 20rem
- }
-}
-
-.sidenote-title {
- margin: 0.5rem 0
-}
-
-.sidenote-content {
- font-size: 1rem
-}
-
-/* toc */
-
-#toc-container {
- position: absolute;
- bottom: 0;
- right: calc(50% + var(--page-width) / 2);
- left: auto;
- height: 100%;
- top: 12rem;
-}
-
-@media screen and (max-width: 1200px) {
- #toc-container {
- display: none
- }
-}
-
-#toc {
- /* position */
- position: sticky;
- top: 3rem;
- /* styling */
- font-size: 1rem;
- padding: 0 2rem;
-}
-
-@media screen and (max-width: 1700px) {
- #toc {
- font-size: 0.9rem;
- }
-}
-
-@media screen and (max-width: 1500px) {
- #toc {
- font-size: 0.825rem;
- }
-}
-
-#toc ul, #toc ol {
- margin-block-start: 0;
- margin-block-end: 0;
- padding-inline-start: 1rem;
-}
-
-#toc li {
- list-style: none;
-}
-
-#toc li > a {
- color: var(--secondary-text-color);
- text-decoration: none;
- transition: color .3s;
- display: inline-flex;
- align-items: center;
- gap: .5rem;
-}
-
-#toc li > a::before {
- content: '';
- display: inline-block;
- width: 1rem;
- height: .3rem;
- background-color: var(--block-background-color);
- border-radius: .2rem;
- transition: background .3s;
-}
-
-#toc li a:hover,
-#toc li.is-active-li > a {
- color: var(--text-color);
-}
-
-#toc li.is-active-li > a::before {
- background-color: var(--secondary-text-color);
-}
-
-#toc .toc-list {
- overflow: hidden;
- position: relative;
-}
-
-#toc .toc-list .toc-list {
- max-height: 25rem;
- overflow-y: auto
-}
-
-#toc .toc-list.is-collapsed {
- max-height: 0
-}
-
-/* transition swup */
-
-html.is-changing .transition-fade {
- transition: opacity 0.25s;
- opacity: 1;
-}
-html.is-animating .transition-fade {
- opacity: 0;
-}
-
-/* site footer */
-
-#footer {
- width: var(--page-width);
- margin: 2rem auto;
- font-family: var(--mono-font-family);
-}
-
-@media screen and (min-width: 768px) {
- #footer {
- display: flex;
- justify-content: space-between;
- }
-}
-
-#footer-links {
- display: flex;
- flex-direction: column;
- align-items: flex-end;
-}
-
-#footer-links ul.footer-navigation {
- list-style: none;
- display: flex;
- gap: 0.2rem;
- justify-content: flex-end;
- padding-inline-start: 0;
-}
-
-#footer-links ul.footer-navigation li {
- display: inline-flex;
- align-items: center;
-}
-
-#footer-links ul.footer-navigation li img {
- height: 1rem;
- width: auto
-}
-
-#footer-copyright .word-count {
- font-family: var(--serif-font-family);
- font-size: .9rem;
- color: var(--secondary-text-color)
-}
diff --git a/assets/css/index.scss b/assets/css/index.scss
new file mode 100644
index 00000000..fc9f6f4e
--- /dev/null
+++ b/assets/css/index.scss
@@ -0,0 +1,9 @@
+@import 'components/variables';
+@import 'components/reset';
+@import 'components/markdown';
+@import 'components/header';
+@import 'components/pages';
+@import 'components/content';
+@import 'components/shortcodes';
+@import 'components/footer';
+@import 'components/animation';
diff --git a/layouts/index.html b/layouts/index.html
index 8ded46d5..eddfebb9 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -8,7 +8,7 @@
{{ range (where site.RegularPages "Type" "in" site.Params.mainSections).GroupByDate "2006" -}}
<section class="posts-year-section">
- <h1 class="site-date-catalog posts-year-title">{{ .Key }}</h1>
+ <h1 class="posts-year-title">{{ .Key }}</h1>
{{ range .Pages.GroupByDate "01" }}
<h2>{{ .Key }} 月</h2>
diff --git a/layouts/partials/head/css.html b/layouts/partials/head/css.html
index b2193666..c3fc5aaf 100644
--- a/layouts/partials/head/css.html
+++ b/layouts/partials/head/css.html
@@ -1,8 +1,8 @@
<!-- theme css -->
-{{ with resources.Get "css/index.css" | minify }}
+{{ with resources.Get "css/flexbox.css" | minify }}
<style>{{ .Content | safeCSS }}</style>
{{ end }}
-{{ with resources.Get "css/flexboxgrid-6.3.1.min.css" | minify }}
+{{ with resources.Get "css/index.scss" | css.Sass | minify }}
<style>{{ .Content | safeCSS }}</style>
{{ end }}