From e7adfc645c5624bc3b827d7233f6e78b33a90e79 Mon Sep 17 00:00:00 2001 From: muqiuhan Date: Sun, 15 Mar 2026 11:36:53 +0000 Subject: deploy: 18bce0f2b548121e7298c164c463df00e2f9ff78 --- css/animation.css | 43 +++ css/base.css | 1 + css/color.css | 79 ++--- css/color_mode/classic.css | 79 ++--- css/color_mode/dark.css | 80 +++-- css/color_mode/default.css | 79 ++--- css/component/button.css | 91 ++++++ css/component/component.css | 12 +- css/layout.css | 12 +- css/media.css | 9 +- css/partials/footer.css | 8 - css/partials/header.css | 57 +++- css/partials/paginator.css | 4 +- css/partials/post_gallery.css | 4 +- css/partials/post_list.css | 4 +- css/partials/profile.css | 30 +- css/partials/search.css | 6 +- css/post/code.css | 22 -- css/post/post_comment.css | 2 +- css/post/post_footer.css | 2 +- css/post/post_head.css | 2 +- css/post/table.css | 28 +- css/style.css | 674 ++++++++++++++++++++++++------------------ 23 files changed, 804 insertions(+), 524 deletions(-) (limited to 'css') diff --git a/css/animation.css b/css/animation.css index e69de29b..145b0953 100644 --- a/css/animation.css +++ b/css/animation.css @@ -0,0 +1,43 @@ +.fade-in { + animation: fadeIn 0.6s ease; +} +.post-list-item, +.post-gallery-item { + transition: opacity $transition-duration ease; +} +.post-list-item:hover, +.post-gallery-item:hover { + opacity: 0.85; +} +@-moz-keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@-webkit-keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@-o-keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} diff --git a/css/base.css b/css/base.css index 885373c3..d5bad389 100644 --- a/css/base.css +++ b/css/base.css @@ -8,6 +8,7 @@ ul { padding: 0; margin: 0; } +*, *::before, *::after { box-sizing: border-box; diff --git a/css/color.css b/css/color.css index a7ff3690..5c880459 100644 --- a/css/color.css +++ b/css/color.css @@ -1,57 +1,70 @@ .highlight { - color: #657b83; -} -.highlight table { - background: #fdf6e3; + color: #333; + background: #f8f8f8; } .highlight .code .comment, .highlight .code .quote { - color: #93a1a1; + color: #998; + font-style: italic; } .highlight .code .keyword, .highlight .code .selector-tag, -.highlight .code .addition { - color: #859900; +.highlight .code .subst { + color: #333; + font-weight: bold; } .highlight .code .number, -.highlight .code .string, -.highlight .code .meta .meta-string, .highlight .code .literal, -.highlight .code .doctag, -.highlight .code .regexp { - color: #2aa198; +.highlight .code .variable, +.highlight .code .template-variable, +.highlight .code .tag .attr { + color: #008080; +} +.highlight .code .string, +.highlight .code .doctag { + color: #d14; } .highlight .code .title, .highlight .code .section, +.highlight .code .selector-id { + color: #900; + font-weight: bold; +} +.highlight .code .subst { + font-weight: normal; +} +.highlight .code .type, +.highlight .code .class .title { + color: #458; + font-weight: bold; +} +.highlight .code .tag, .highlight .code .name, -.highlight .code .selector-id, -.highlight .code .selector-class { - color: #268bd2; +.highlight .code .attribute { + color: #000080; + font-weight: normal; } -.highlight .code .attribute, -.highlight .code .attr, -.highlight .code .variable, -.highlight .code .template-variable, -.highlight .code .class .title, -.highlight .code .type { - color: #b58900; +.highlight .code .regexp, +.highlight .code .link { + color: #009926; } .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 .bullet { + color: #990073; } .highlight .code .built_in, +.highlight .code .builtin-name { + color: #0086b3; +} +.highlight .code .meta { + color: #999; + font-weight: bold; +} .highlight .code .deletion { - color: #dc322f; + background: #fdd; } -.highlight .code .formula { - background: #eee8d5; +.highlight .code .addition { + background: #dfd; } .highlight .code .emphasis { font-style: italic; diff --git a/css/color_mode/classic.css b/css/color_mode/classic.css index a7ff3690..5c880459 100644 --- a/css/color_mode/classic.css +++ b/css/color_mode/classic.css @@ -1,57 +1,70 @@ .highlight { - color: #657b83; -} -.highlight table { - background: #fdf6e3; + color: #333; + background: #f8f8f8; } .highlight .code .comment, .highlight .code .quote { - color: #93a1a1; + color: #998; + font-style: italic; } .highlight .code .keyword, .highlight .code .selector-tag, -.highlight .code .addition { - color: #859900; +.highlight .code .subst { + color: #333; + font-weight: bold; } .highlight .code .number, -.highlight .code .string, -.highlight .code .meta .meta-string, .highlight .code .literal, -.highlight .code .doctag, -.highlight .code .regexp { - color: #2aa198; +.highlight .code .variable, +.highlight .code .template-variable, +.highlight .code .tag .attr { + color: #008080; +} +.highlight .code .string, +.highlight .code .doctag { + color: #d14; } .highlight .code .title, .highlight .code .section, +.highlight .code .selector-id { + color: #900; + font-weight: bold; +} +.highlight .code .subst { + font-weight: normal; +} +.highlight .code .type, +.highlight .code .class .title { + color: #458; + font-weight: bold; +} +.highlight .code .tag, .highlight .code .name, -.highlight .code .selector-id, -.highlight .code .selector-class { - color: #268bd2; +.highlight .code .attribute { + color: #000080; + font-weight: normal; } -.highlight .code .attribute, -.highlight .code .attr, -.highlight .code .variable, -.highlight .code .template-variable, -.highlight .code .class .title, -.highlight .code .type { - color: #b58900; +.highlight .code .regexp, +.highlight .code .link { + color: #009926; } .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 .bullet { + color: #990073; } .highlight .code .built_in, +.highlight .code .builtin-name { + color: #0086b3; +} +.highlight .code .meta { + color: #999; + font-weight: bold; +} .highlight .code .deletion { - color: #dc322f; + background: #fdd; } -.highlight .code .formula { - background: #eee8d5; +.highlight .code .addition { + background: #dfd; } .highlight .code .emphasis { font-style: italic; diff --git a/css/color_mode/dark.css b/css/color_mode/dark.css index 3f60a6a2..7de98ec3 100644 --- a/css/color_mode/dark.css +++ b/css/color_mode/dark.css @@ -1,63 +1,53 @@ .highlight { - background: #474949; - color: #d1d9e1; + padding: 0.5em; + color: #333; } .highlight .code .comment, -.highlight .code .quote { +.highlight .code .meta { color: #969896; - font-style: italic; -} -.highlight .code .keyword, -.highlight .code .selector-tag, -.highlight .code .literal, -.highlight .code .type, -.highlight .code .addition { - color: #c9c; -} -.highlight .code .number, -.highlight .code .selector-attr, -.highlight .code .selector-pseudo { - color: #f99157; } .highlight .code .string, -.highlight .code .doctag, -.highlight .code .regexp { - color: #8abeb7; -} -.highlight .code .title, -.highlight .code .name, -.highlight .code .section, -.highlight .code .built_in { - color: #b5bd68; -} .highlight .code .variable, .highlight .code .template-variable, -.highlight .code .selector-id, -.highlight .code .class .title { - color: #fc6; +.highlight .code .strong, +.highlight .code .emphasis, +.highlight .code .quote { + color: #df5000; } -.highlight .code .section, -.highlight .code .name, -.highlight .code .strong { - font-weight: bold; +.highlight .code .keyword, +.highlight .code .selector-tag, +.highlight .code .type { + color: #a71d5d; } +.highlight .code .literal, .highlight .code .symbol, .highlight .code .bullet, -.highlight .code .subst, -.highlight .code .meta, -.highlight .code .link { - color: #f99157; +.highlight .code .attribute { + color: #0086b3; } -.highlight .code .deletion { - color: #dc322f; +.highlight .code .section, +.highlight .code .name { + color: #63a35c; } -.highlight .code .formula { - background: #eee8d5; +.highlight .code .tag { + color: #333; } +.highlight .code .title, .highlight .code .attr, -.highlight .code .attribute { - color: #81a2be; +.highlight .code .selector-id, +.highlight .code .selector-class, +.highlight .code .selector-attr, +.highlight .code .selector-pseudo { + color: #795da3; +} +.highlight .code .addition { + color: #55a532; + background-color: #eaffea; +} +.highlight .code .deletion { + color: #bd2c00; + background-color: #ffecec; } -.highlight .code .emphasis { - font-style: italic; +.highlight .code .link { + text-decoration: underline; } diff --git a/css/color_mode/default.css b/css/color_mode/default.css index a7ff3690..5c880459 100644 --- a/css/color_mode/default.css +++ b/css/color_mode/default.css @@ -1,57 +1,70 @@ .highlight { - color: #657b83; -} -.highlight table { - background: #fdf6e3; + color: #333; + background: #f8f8f8; } .highlight .code .comment, .highlight .code .quote { - color: #93a1a1; + color: #998; + font-style: italic; } .highlight .code .keyword, .highlight .code .selector-tag, -.highlight .code .addition { - color: #859900; +.highlight .code .subst { + color: #333; + font-weight: bold; } .highlight .code .number, -.highlight .code .string, -.highlight .code .meta .meta-string, .highlight .code .literal, -.highlight .code .doctag, -.highlight .code .regexp { - color: #2aa198; +.highlight .code .variable, +.highlight .code .template-variable, +.highlight .code .tag .attr { + color: #008080; +} +.highlight .code .string, +.highlight .code .doctag { + color: #d14; } .highlight .code .title, .highlight .code .section, +.highlight .code .selector-id { + color: #900; + font-weight: bold; +} +.highlight .code .subst { + font-weight: normal; +} +.highlight .code .type, +.highlight .code .class .title { + color: #458; + font-weight: bold; +} +.highlight .code .tag, .highlight .code .name, -.highlight .code .selector-id, -.highlight .code .selector-class { - color: #268bd2; +.highlight .code .attribute { + color: #000080; + font-weight: normal; } -.highlight .code .attribute, -.highlight .code .attr, -.highlight .code .variable, -.highlight .code .template-variable, -.highlight .code .class .title, -.highlight .code .type { - color: #b58900; +.highlight .code .regexp, +.highlight .code .link { + color: #009926; } .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 .bullet { + color: #990073; } .highlight .code .built_in, +.highlight .code .builtin-name { + color: #0086b3; +} +.highlight .code .meta { + color: #999; + font-weight: bold; +} .highlight .code .deletion { - color: #dc322f; + background: #fdd; } -.highlight .code .formula { - background: #eee8d5; +.highlight .code .addition { + background: #dfd; } .highlight .code .emphasis { font-style: italic; diff --git a/css/component/button.css b/css/component/button.css index e69de29b..cf0f8624 100644 --- a/css/component/button.css +++ b/css/component/button.css @@ -0,0 +1,91 @@ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + white-space: nowrap; + border-radius: $margin-m-2; + font-size: $font-size-header; + font-weight: $font-weight-medium; + transition: all $transition-duration ease; + cursor: pointer; + border: none; + text-decoration: none; + user-select: none; + outline: none; + padding: $margin-m-0 $margin-l-0; +} +.btn:focus-visible { + outline: 2px solid $color-accent; + outline-offset: 2px; +} +.btn:disabled { + pointer-events: none; + opacity: 0.5; +} +.btn-default { + background-color: $color-text-primary; + color: $color-background; +} +.btn-default:hover { + opacity: 0.9; +} +.btn-default:active { + opacity: 0.95; +} +.btn-outline { + border: 1px solid $color-border; + background-color: transparent; + color: $color-text-primary; +} +.btn-outline:hover { + border-color: $color-accent; + color: $color-accent; +} +.btn-ghost { + background-color: transparent; + color: $color-text-primary; +} +.btn-ghost:hover { + background-color: $color-text-fourth; +} +.btn-link { + background-color: transparent; + color: $color-accent; + text-decoration: underline; + text-underline-offset: 4px; +} +.btn-link:hover { + text-decoration: none; +} +@-moz-keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +@-webkit-keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +@-o-keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/css/component/component.css b/css/component/component.css index dd96ae94..ec22636f 100644 --- a/css/component/component.css +++ b/css/component/component.css @@ -3,11 +3,11 @@ height: $line-third; } .h-line-secondary { - background-color: $color-text-secondary; + background-color: $color-border; height: $line-third; } hr { - background-color: $color-text-third; + background-color: $color-border; height: $line-third; border: 0; } @@ -25,18 +25,20 @@ hr { color: $color-text-secondary; } .post-tag { - border: $line-third solid $color-text-primary; + border: 1px solid $color-border; margin-right: $margin-s-2; margin-bottom: $margin-s-2; padding: $margin-s-2 $margin-m-0 $margin-s-2 $margin-m-0; border-radius: $margin-m-2; + transition: all $transition-duration ease; } .post-tag a { background-image: none !important; } .post-tag:hover { - background-color: $color-text-primary; + border-color: $color-accent; + background-color: $color-accent; } .post-tag:hover a { - color: $color-background; + color: #fff; } diff --git a/css/layout.css b/css/layout.css index 27e4545a..f49e315d 100644 --- a/css/layout.css +++ b/css/layout.css @@ -1,21 +1,11 @@ body { margin: 0; } -.mask-border::before { - content: ''; - width: 100%; - height: 100vh; - border: $line-primary $color-text-primary solid; - position: fixed; - top: 0; - left: 0; - pointer-events: none; - z-index: 8; -} .wrapper { display: flex; flex-direction: column; min-height: 100vh; + padding-top: $header-height; } .main { flex-grow: 1; diff --git a/css/media.css b/css/media.css index 803fdfbd..f56dfd64 100644 --- a/css/media.css +++ b/css/media.css @@ -22,10 +22,13 @@ html { } } @media (max-width: 688px) { + html { + font-size: 16px; + } .flex-container { display: block; - width: calc(100% - 48px); - padding-left: 24px; - padding-right: 24px; + width: calc(100% - 32px); + padding-left: 16px; + padding-right: 16px; } } diff --git a/css/partials/footer.css b/css/partials/footer.css index 7767cafc..e69de29b 100644 --- a/css/partials/footer.css +++ b/css/partials/footer.css @@ -1,8 +0,0 @@ -.footer { - margin-top: $margin-primary; - border: $line-secondary $color-text-primary solid; -} -.footer .footer-text { - margin-top: $margin-l-0; - margin-bottom: $margin-l-0; -} diff --git a/css/partials/header.css b/css/partials/header.css index 01960f3c..6606b3f0 100644 --- a/css/partials/header.css +++ b/css/partials/header.css @@ -1,12 +1,24 @@ .header { - border: $line-secondary solid $color-text-primary; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 100; + background: $color-glass; + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-bottom: 1px solid $color-border; +} +@supports not (backdrop-filter: blur(12px)) { + .header { + background: $color-background; + } } .header-inner { display: flex; flex-wrap: nowrap; align-items: center; - margin-top: $margin-m-2; - margin-bottom: $margin-m-2; + height: $header-height; } .header-inner #menu-btn { display: none; @@ -15,20 +27,24 @@ flex-grow: 1; overflow-x: auto; } +.site-brand-container a { + font-weight: $font-weight-semibold; + color: $color-text-primary; +} .menu-list { text-align: right; display: flex; } -.menu-list .menu-item { - position: relative; - margin-left: $margin-l-0; -} .menu-list:before { content: ""; flex-grow: 1; } +.menu-item { + position: relative; + margin-left: $margin-l-0; +} .menu-item-active:after { - border-bottom: solid $line-secondary; + border-bottom: solid $line-secondary $color-accent; width: 100%; } .logo-img { @@ -40,17 +56,25 @@ @media (max-width: 688px) { .header-inner { flex-wrap: wrap; + align-items: center; + height: $header-height; + padding-top: 0; + padding-bottom: 0; } .header-inner #menu-btn { - display: block !important; - text-align: right; + display: flex !important; + align-items: center; + justify-content: flex-end; width: 50%; - } - .header-inner #menu-btn .icon { - float: right; + height: 100%; + cursor: pointer; + color: $color-text-primary; } .header-inner .site-brand-container { + display: flex; + align-items: center; width: 50%; + height: 100%; } .header-inner .site-nav { width: 100%; @@ -58,14 +82,17 @@ .header-inner .site-nav .menu-list { height: 0; overflow: hidden; + margin-top: 0; } .header-inner .site-nav .menu-list .menu-item { margin-right: 0; margin-left: auto; - margin-top: $margin-m-0; + margin-top: $margin-s-1; + padding: $margin-s-1 0; } .header-inner .site-nav .active { - margin-top: $margin-m-1; + margin-top: $margin-s-0; + margin-bottom: $margin-s-0; height: auto; flex-direction: column; } diff --git a/css/partials/paginator.css b/css/partials/paginator.css index bf9bb2a6..57c51a33 100644 --- a/css/partials/paginator.css +++ b/css/partials/paginator.css @@ -1,5 +1,5 @@ .paginator { - margin-top: $margin-primary; + margin-top: $margin-l-1; } .pagination { margin-top: $margin-m-1; @@ -14,7 +14,7 @@ margin-left: $margin-l-0; } .pagination .current:after { - border-bottom: solid $line-secondary; + border-bottom: solid $line-secondary $color-accent; width: 100%; } .pagination .space { diff --git a/css/partials/post_gallery.css b/css/partials/post_gallery.css index 663b46fe..d687d94e 100644 --- a/css/partials/post_gallery.css +++ b/css/partials/post_gallery.css @@ -6,8 +6,8 @@ } .post-gallery-item { display: flex; - margin-top: $margin-primary; - margin-bottom: $margin-m-1; + margin-top: $margin-l-1; + margin-bottom: $margin-m-0; } .post-gallery-item .post-info { margin-right: $margin-l-0; diff --git a/css/partials/post_list.css b/css/partials/post_list.css index b4771102..3aee41e5 100644 --- a/css/partials/post_list.css +++ b/css/partials/post_list.css @@ -1,11 +1,11 @@ .year-title { - margin-top: $margin-primary; + margin-top: $margin-l-1; margin-bottom: $margin-m-1; } .post-list-item { display: flex; flex-wrap: nowrap; - margin-top: $margin-m-1; + margin-top: $margin-m-0; align-items: top; } .post-list-item .post-title { diff --git a/css/partials/profile.css b/css/partials/profile.css index 310500f0..368a309c 100644 --- a/css/partials/profile.css +++ b/css/partials/profile.css @@ -1,7 +1,8 @@ .profile { - margin-top: $margin-primary; + margin-top: $margin-l-0; display: flex; flex-direction: row-reverse; + align-items: center; } .profile .profile-content { width: 50%; @@ -13,24 +14,45 @@ } .profile .profile-content .profile-body { margin-top: 0; - margin-bottom: $margin-l-1; + margin-bottom: $margin-m-1; + color: $color-text-secondary; } .profile .profile-content .profile-link { margin-top: 0; - margin-bottom: $margin-m-1; + margin-bottom: $margin-m-0; +} +.profile .profile-content .profile-link a { + text-decoration: underline; + text-underline-offset: 3px; + transition: color $transition-duration ease; +} +.profile .profile-content .profile-link a:hover { + color: $color-accent; } .profile .profile-image { width: 50%; + display: flex; + align-items: center; + justify-content: center; +} +.profile .profile-image img { + max-width: 100%; + max-height: 35vh; + object-fit: contain; } @media (max-width: 480px) { .profile { flex-wrap: wrap; + align-items: flex-start; } .profile .profile-content { width: 100%; - margin-top: $margin-m-1; + margin-top: $margin-m-0; } .profile .profile-image { width: 100%; } + .profile .profile-image img { + max-height: 25vh; + } } diff --git a/css/partials/search.css b/css/partials/search.css index 506f0cc4..4b3ac735 100644 --- a/css/partials/search.css +++ b/css/partials/search.css @@ -20,7 +20,7 @@ transform: translate(-50%, -50%); width: 640px; height: 60%; - border: $line-secondary solid $color-text-primary; + border: 1px solid $color-border; overflow: hidden; display: flex; flex-direction: column; @@ -54,7 +54,7 @@ flex-direction: row; align-items: center; padding: $margin-m-1 $margin-m-1; - border-bottom: $line-secondary solid $color-text-primary; + border-bottom: 1px solid $color-border; } .search-header .search-input-container { flex-grow: 1; @@ -77,5 +77,7 @@ .search-popup-window { width: 100%; height: 100%; + top: $header-height; + transform: translate(-50%, 0); } } diff --git a/css/post/code.css b/css/post/code.css index 7bd8e748..e69de29b 100644 --- a/css/post/code.css +++ b/css/post/code.css @@ -1,22 +0,0 @@ -.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/post_comment.css b/css/post/post_comment.css index a1523871..b37fcc29 100644 --- a/css/post/post_comment.css +++ b/css/post/post_comment.css @@ -1,5 +1,5 @@ .post-comment { - margin-top: $margin-primary; + margin-top: $margin-l-1; } .v[data-class="v"] .vsys { display: none !important; diff --git a/css/post/post_footer.css b/css/post/post_footer.css index 5ee366d0..ffdecf3b 100644 --- a/css/post/post_footer.css +++ b/css/post/post_footer.css @@ -1,5 +1,5 @@ .post-footer { - margin-top: $margin-primary; + margin-top: $margin-l-1; } .post-nav { margin-top: $margin-m-1; diff --git a/css/post/post_head.css b/css/post/post_head.css index 61715567..f71f025a 100644 --- a/css/post/post_head.css +++ b/css/post/post_head.css @@ -1,5 +1,5 @@ .post-head { - margin-top: $margin-primary; + margin-top: $margin-l-1; } .post-head .post-info { width: 100%; diff --git a/css/post/table.css b/css/post/table.css index bfefa58c..b8fd1da8 100644 --- a/css/post/table.css +++ b/css/post/table.css @@ -1,32 +1,34 @@ -table, -td, -th { +.post-content table { border: $color-text-primary solid $line-third; width: 100%; text-align: left; -} -table { border-collapse: collapse; table-layout: fixed; } -td, -th { +.post-content table td, +.post-content table th { padding: $margin-m-1; } -th { +.post-content table th { font-variation-settings: 'wght' $font-weight-medium; } -td { +.post-content table td { font-variation-settings: 'wght' $font-weight-light; } -table, -tboby, -tr, -td { +.post-content table table, +.post-content table tboby, +.post-content table tr, +.post-content table td { background-color: inherit; } .highlight>table { + width: auto; min-width: fit-content; + border: none; +} +.highlight>table td { + padding: 0; + border: none; } @media (max-width: 480px) { .block-table { diff --git a/css/style.css b/css/style.css index 9f9a5019..b237ca5b 100644 --- a/css/style.css +++ b/css/style.css @@ -22,11 +22,14 @@ html { } } @media (max-width: 688px) { + html { + font-size: 16px; + } .flex-container { display: block; - width: calc(100% - 48px); - padding-left: 24px; - padding-right: 24px; + width: calc(100% - 32px); + padding-left: 16px; + padding-right: 16px; } } /* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ @@ -174,59 +177,72 @@ template { display: none; } .highlight { - color: #657b83; -} -.highlight table { - background: #fdf6e3; + color: #333; + background: #f8f8f8; } .highlight .code .comment, .highlight .code .quote { - color: #93a1a1; + color: #998; + font-style: italic; } .highlight .code .keyword, .highlight .code .selector-tag, -.highlight .code .addition { - color: #859900; +.highlight .code .subst { + color: #333; + font-weight: bold; } .highlight .code .number, -.highlight .code .string, -.highlight .code .meta .meta-string, .highlight .code .literal, -.highlight .code .doctag, -.highlight .code .regexp { - color: #2aa198; +.highlight .code .variable, +.highlight .code .template-variable, +.highlight .code .tag .attr { + color: #008080; +} +.highlight .code .string, +.highlight .code .doctag { + color: #d14; } .highlight .code .title, .highlight .code .section, +.highlight .code .selector-id { + color: #900; + font-weight: bold; +} +.highlight .code .subst { + font-weight: normal; +} +.highlight .code .type, +.highlight .code .class .title { + color: #458; + font-weight: bold; +} +.highlight .code .tag, .highlight .code .name, -.highlight .code .selector-id, -.highlight .code .selector-class { - color: #268bd2; +.highlight .code .attribute { + color: #000080; + font-weight: normal; } -.highlight .code .attribute, -.highlight .code .attr, -.highlight .code .variable, -.highlight .code .template-variable, -.highlight .code .class .title, -.highlight .code .type { - color: #b58900; +.highlight .code .regexp, +.highlight .code .link { + color: #009926; } .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 .bullet { + color: #990073; } .highlight .code .built_in, +.highlight .code .builtin-name { + color: #0086b3; +} +.highlight .code .meta { + color: #999; + font-weight: bold; +} .highlight .code .deletion { - color: #dc322f; + background: #fdd; } -.highlight .code .formula { - background: #eee8d5; +.highlight .code .addition { + background: #dfd; } .highlight .code .emphasis { font-style: italic; @@ -237,21 +253,11 @@ template { 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; + padding-top: 3rem; } .main { flex-grow: 1; @@ -268,24 +274,25 @@ ul { padding: 0; margin: 0; } +*, *::before, *::after { box-sizing: border-box; } a { text-decoration: none; - color: #373633; + color: #09090b; } input { outline: none; border: none; } body { - font-family: 'Carrois Song'; - font-size: 1rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 0.9375rem; font-weight: 400; - line-height: 1.5rem; - color: #373633; + line-height: 1.375rem; + color: #09090b; background-color: #fff; } input[type=search]::-ms-clear { @@ -305,19 +312,31 @@ input[type="search"]::-webkit-search-results-decoration { display: none; } .header { - border: 2px solid #373633; - font-family: 'Carrois Song'; - font-size: 0.875rem; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 100; + background: rgba(255,255,255,0.92); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-bottom: 1px solid #e4e4e7; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 0.8125rem; font-weight: 500; - line-height: 1.25rem; - color: #373633; + line-height: 1.125rem; + color: #09090b; +} +@supports not (backdrop-filter: blur(12px)) { + .header { + background: #fff; + } } .header-inner { display: flex; flex-wrap: nowrap; align-items: center; - margin-top: 1rem; - margin-bottom: 1rem; + height: 3rem; } .header-inner #menu-btn { display: none; @@ -326,37 +345,40 @@ input[type="search"]::-webkit-search-results-decoration { flex-grow: 1; overflow-x: auto; } +.site-brand-container a { + font-weight: 600; + color: #09090b; +} .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 { + position: relative; + margin-left: 1.5rem; +} .menu-item:after { content: ""; - -webkit-transition: width 0.4s ease-in-out; - transition: width 0.4s ease-in-out; + transition: width 200ms ease; position: absolute; left: 0; bottom: 0; width: 0; - border-bottom: solid 1px #373633; + border-bottom: solid 1px #2563eb; } .menu-item:hover:after { width: 100%; } .menu-item-active:after { - border-bottom: solid 2px; + border-bottom: solid 2px #2563eb; width: 100%; } .logo-img { - max-height: 2.25rem; + max-height: 2rem; width: auto; max-width: 100%; display: flex; @@ -364,17 +386,25 @@ input[type="search"]::-webkit-search-results-decoration { @media (max-width: 688px) { .header-inner { flex-wrap: wrap; + align-items: center; + height: 3rem; + padding-top: 0; + padding-bottom: 0; } .header-inner #menu-btn { - display: block !important; - text-align: right; + display: flex !important; + align-items: center; + justify-content: flex-end; width: 50%; - } - .header-inner #menu-btn .icon { - float: right; + height: 100%; + cursor: pointer; + color: #09090b; } .header-inner .site-brand-container { + display: flex; + align-items: center; width: 50%; + height: 100%; } .header-inner .site-nav { width: 100%; @@ -382,76 +412,86 @@ input[type="search"]::-webkit-search-results-decoration { .header-inner .site-nav .menu-list { height: 0; overflow: hidden; + margin-top: 0; } .header-inner .site-nav .menu-list .menu-item { margin-right: 0; margin-left: auto; - margin-top: 0.5rem; + margin-top: 0.125rem; + padding: 0.125rem 0; } .header-inner .site-nav .active { - margin-top: 0.75rem; + margin-top: 0.0625rem; + margin-bottom: 0.0625rem; height: auto; flex-direction: column; } } .footer { - margin-top: 3.5rem; - border: 2px #373633 solid; - font-family: 'Carrois Song'; - font-size: 0.75rem; + margin-top: auto; + border-top: 1px solid #e4e4e7; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 0.6875rem; font-weight: 400; - line-height: 1.25rem; - color: #373633; + line-height: 1.125rem; + color: #71717a; } .footer .footer-text { - margin-top: 1.5rem; - margin-bottom: 1.5rem; + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} +@media (max-width: 688px) { + .footer .footer-text { + font-size: 0.625rem; + margin-top: 0.125rem; + margin-bottom: 0.125rem; + } } .post-list a { - background-image: linear-gradient(#fff, #fff), linear-gradient(#373633, #373633); + background-image: linear-gradient(#fff, #fff), linear-gradient(#2563eb, #2563eb); background-size: 100% 1px, 0% 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat, no-repeat; - transition: background-size 0.6s linear; + transition: background-size 200ms ease; } .post-list a:hover { background-size: 0 1px, 100% 1px; } .year-title { - margin-top: 3.5rem; + margin-top: 2rem; margin-bottom: 0.75rem; - font-family: 'Carrois Song'; - font-size: 1.75rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 1.625rem; font-weight: 700; - line-height: 2.25rem; - color: #e8e8e8; + line-height: 2rem; + color: #a1a1aa; } .post-list-item { display: flex; flex-wrap: nowrap; - margin-top: 0.75rem; + margin-top: 0.5rem; align-items: top; } .post-list-item .post-title { flex-grow: 1; - font-family: 'Carrois Song'; - font-size: 1rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 0.9375rem; font-weight: 400; - line-height: 1.5rem; - color: #373633; + line-height: 1.375rem; + color: #09090b; font-variation-settings: 'wght' 500; } .post-list-item .post-date { margin-left: 1.5rem; min-width: 8rem; text-align: right; - font-family: 'Carrois Song'; - font-size: 0.875rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 0.8125rem; font-weight: 400; - line-height: 1.25rem; - color: #373633; - line-height: 1.5rem; - color: #afaea9; + line-height: 1.125rem; + color: #71717a; + line-height: 1.375rem; + color: #71717a; } @media (max-width: 480px) { .post-list-item { @@ -474,8 +514,8 @@ input[type="search"]::-webkit-search-results-decoration { } .post-gallery-item { display: flex; - margin-top: 3.5rem; - margin-bottom: 0.75rem; + margin-top: 2rem; + margin-bottom: 0.5rem; } .post-gallery-item .post-info { margin-right: 1.5rem; @@ -485,28 +525,28 @@ input[type="search"]::-webkit-search-results-decoration { } .post-gallery-item .post-info .post-title { margin-bottom: 0.75rem; - font-family: 'Carrois Song'; - font-size: 1.75rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 1.625rem; font-weight: 700; - line-height: 2.25rem; - color: #373633; + line-height: 2rem; + color: #09090b; } .post-gallery-item .post-info .post-date { - font-family: 'Carrois Song'; - font-size: 0.875rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 0.8125rem; font-weight: 400; - line-height: 1.25rem; - color: #373633; + line-height: 1.125rem; + color: #71717a; } .post-gallery-item .post-img { width: 50%; } .post-gallery-item a { - background-image: linear-gradient(#fff, #fff), linear-gradient(#373633, #373633); + background-image: linear-gradient(#fff, #fff), linear-gradient(#2563eb, #2563eb); background-size: 100% 1px, 0% 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat, no-repeat; - transition: background-size 0.6s linear; + transition: background-size 200ms ease; } .post-gallery-item a:hover { background-size: 0 1px, 100% 1px; @@ -524,15 +564,15 @@ input[type="search"]::-webkit-search-results-decoration { } } .paginator { - margin-top: 3.5rem; + margin-top: 2rem; } .pagination { margin-top: 0.75rem; - font-family: 'Carrois Song'; - font-size: 0.875rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 0.8125rem; font-weight: 500; - line-height: 1.25rem; - color: #373633; + line-height: 1.125rem; + color: #09090b; display: flex; } .pagination:before { @@ -545,28 +585,28 @@ input[type="search"]::-webkit-search-results-decoration { } .page-number:after { content: ""; - -webkit-transition: width 0.4s ease-in-out; - transition: width 0.4s ease-in-out; + transition: width 200ms ease; position: absolute; left: 0; bottom: 0; width: 0; - border-bottom: solid 1px #373633; + border-bottom: solid 1px #2563eb; } .page-number:hover:after { width: 100%; } .pagination .current:after { - border-bottom: solid 2px; + border-bottom: solid 2px #2563eb; width: 100%; } .pagination .space { margin-left: 1.5rem; } .profile { - margin-top: 3.5rem; + margin-top: 1.5rem; display: flex; flex-direction: row-reverse; + align-items: center; } .profile .profile-content { width: 50%; @@ -578,45 +618,66 @@ input[type="search"]::-webkit-search-results-decoration { } .profile .profile-content .profile-body { margin-top: 0; - margin-bottom: 2rem; + margin-bottom: 0.75rem; + color: #71717a; } .profile .profile-content .profile-title { - font-family: 'Carrois Song'; - font-size: 1.75rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 1.625rem; font-weight: 700; - line-height: 2.25rem; - color: #373633; + line-height: 2rem; + color: #09090b; } .profile .profile-content .profile-body { - font-family: 'Carrois Song'; - font-size: 1rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 0.9375rem; font-weight: 400; - line-height: 1.5rem; - color: #373633; + line-height: 1.375rem; + color: #09090b; } .profile .profile-content .profile-link { margin-top: 0; - margin-bottom: 0.75rem; - font-family: 'Carrois Song'; - font-size: 0.875rem; + margin-bottom: 0.5rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 0.8125rem; font-weight: 500; - line-height: 1.25rem; - color: #373633; + line-height: 1.125rem; + color: #09090b; +} +.profile .profile-content .profile-link a { + text-decoration: underline; + text-underline-offset: 3px; + transition: color 200ms ease; +} +.profile .profile-content .profile-link a:hover { + color: #2563eb; } .profile .profile-image { width: 50%; + display: flex; + align-items: center; + justify-content: center; +} +.profile .profile-image img { + max-width: 100%; + max-height: 35vh; + object-fit: contain; } @media (max-width: 480px) { .profile { flex-wrap: wrap; + align-items: flex-start; } .profile .profile-content { width: 100%; - margin-top: 0.75rem; + margin-top: 0.5rem; } .profile .profile-image { width: 100%; } + .profile .profile-image img { + max-height: 25vh; + } } .search-popup { visibility: hidden; @@ -630,7 +691,7 @@ input[type="search"]::-webkit-search-results-decoration { top: 0; height: 100%; width: 100%; - background: rgba(0,0,0,0.2); + background: rgba(0,0,0,0.4); } .search-popup-window { position: absolute; @@ -640,7 +701,7 @@ input[type="search"]::-webkit-search-results-decoration { transform: translate(-50%, -50%); width: 640px; height: 60%; - border: 2px solid #373633; + border: 1px solid #e4e4e7; overflow: hidden; display: flex; flex-direction: column; @@ -651,27 +712,28 @@ input[type="search"]::-webkit-search-results-decoration { padding: 0.75rem 0.75rem; } .search-result-container .search-result-message { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-family: monospace; - font-size: 0.875rem; - line-height: 1rem; - color: #e8e8e8; + font-size: 0.8125rem; + line-height: 0.9375rem; + color: #a1a1aa; text-transform: lowercase; - color: #afaea9; + color: #71717a; } .search-result-container .search-result-title { - font-family: 'Carrois Song'; - font-size: 1rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 0.9375rem; font-weight: 700; line-height: 1.25rem; - color: #373633; - color: #373633; + color: #09090b; + color: #09090b; } .search-result-container a { - background-image: linear-gradient(#fff, #fff), linear-gradient(#373633, #373633); + background-image: linear-gradient(#fff, #fff), linear-gradient(#2563eb, #2563eb); background-size: 100% 1px, 0% 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat, no-repeat; - transition: background-size 0.6s linear; + transition: background-size 200ms ease; } .search-result-container a:hover { background-size: 0 1px, 100% 1px; @@ -681,41 +743,41 @@ input[type="search"]::-webkit-search-results-decoration { padding-top: 1rem; } .search-result-container .search-result { - font-family: 'Carrois Song'; - font-size: 1rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 0.9375rem; font-weight: 400; - line-height: 1.5rem; - color: #373633; - color: #373633; + line-height: 1.375rem; + color: #09090b; + color: #09090b; margin-top: 0.5rem; margin-bottom: 0.5rem; } .search-result-container mark { - color: #373633; - background-color: #fff59b; + color: #09090b; + background-color: #fde68a; } .search-header { display: flex; flex-direction: row; align-items: center; padding: 0.75rem 0.75rem; - border-bottom: 2px solid #373633; + border-bottom: 1px solid #e4e4e7; } .search-header .search-input-container { flex-grow: 1; } .search-header .search-input-container .search-input { width: 100%; - font-family: 'Carrois Song'; - font-size: 1rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 0.875rem; font-weight: 500; - line-height: 1.25rem; - color: #373633; - color: #373633; + line-height: 1.125rem; + color: #09090b; + color: #09090b; background-color: #fff; } .search-header .search-input-container .search-input::placeholder { - color: #afaea9; + color: #71717a; } .search-header .search-close-btn { flex-grow: 0; @@ -727,6 +789,8 @@ input[type="search"]::-webkit-search-results-decoration { .search-popup-window { width: 100%; height: 100%; + top: 3rem; + transform: translate(-50%, 0); } } .post-content { @@ -742,84 +806,84 @@ h6 { margin-bottom: 0.75rem; } h1 { - font-family: 'Carrois Song'; - font-size: 1.75rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 1.625rem; font-weight: 700; - line-height: 2.25rem; - color: #373633; + line-height: 2rem; + color: #09090b; } h2 { - font-family: 'Carrois Song'; - font-size: 1.5rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 1.375rem; font-weight: 700; - line-height: 2rem; - color: #373633; + line-height: 1.75rem; + color: #09090b; } h3 { - font-family: 'Carrois Song'; - font-size: 1.125rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 1.0625rem; font-weight: 700; - line-height: 1.5rem; - color: #373633; + line-height: 1.375rem; + color: #09090b; } h4 { - font-family: 'Carrois Song'; - font-size: 1rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 0.9375rem; font-weight: 700; line-height: 1.25rem; - color: #373633; + color: #09090b; } h5 { - font-family: 'Carrois Song'; - font-size: 1rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 0.875rem; font-weight: 600; - line-height: 1.25rem; - color: #373633; + line-height: 1.125rem; + color: #09090b; } h6 { - font-family: 'Carrois Song'; - font-size: 1rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 0.875rem; font-weight: 500; - line-height: 1.25rem; - color: #373633; + line-height: 1.125rem; + color: #09090b; } p { - font-family: 'Carrois Song'; - font-size: 1rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 0.9375rem; font-weight: 400; - line-height: 1.5rem; - color: #373633; + line-height: 1.375rem; + color: #09090b; } strong { - font-family: 'Carrois Song'; - font-size: 1rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 0.9375rem; font-weight: 700; - line-height: 1.5rem; - color: #373633; + line-height: 1.375rem; + color: #09090b; } em { - font-family: 'Carrois Song'; - font-size: 1rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 0.9375rem; font-weight: 400; font-style: italic; - line-height: 1.5rem; - color: #373633; + line-height: 1.375rem; + color: #09090b; } del { - font-family: 'Carrois Song'; - font-size: 1rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 0.9375rem; font-weight: 400; - line-height: 1.5rem; + line-height: 1.375rem; text-decoration: line-through; - color: #373633; + color: #09090b; } .post-content a { padding-bottom: 2px; - background-image: linear-gradient(#373633, #373633), linear-gradient(#373633, #373633); + background-image: linear-gradient(#09090b, #09090b), linear-gradient(#2563eb, #2563eb); background-size: 100% 1px, 0 2px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat, no-repeat; - transition: background-size 0.6s linear; + transition: background-size 200ms ease; } .post-content a:hover { background-size: 100% 1px, 100% 2px; @@ -828,7 +892,7 @@ blockquote { margin-left: 0; margin-right: 0; margin-top: 1rem; - border-left: 0.25rem solid #afaea9; + border-left: 0.25rem solid #71717a; } blockquote p { margin-left: 1rem; @@ -844,11 +908,11 @@ blockquote blockquote { margin-bottom: 0; } .post-content li { - font-family: 'Carrois Song'; - font-size: 1rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 0.9375rem; font-weight: 400; - line-height: 1.5rem; - color: #373633; + line-height: 1.375rem; + color: #09090b; margin-top: 0.5rem; } .post-content ol { @@ -880,11 +944,11 @@ blockquote blockquote { } dl dt { padding: 0.5rem 0; - font-family: 'Carrois Song'; - font-size: 1rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 0.9375rem; font-weight: 700; - line-height: 1.5rem; - color: #373633; + line-height: 1.375rem; + color: #09090b; } dl dt::after { content: " :"; @@ -893,7 +957,7 @@ dl dd { margin: 0; } .post-head { - margin-top: 3.5rem; + margin-top: 2rem; } .post-head .post-info { width: 100%; @@ -902,31 +966,31 @@ dl dd { } .post-head .post-info .post-title { margin-bottom: 0.75rem; - font-family: 'Carrois Song'; - font-size: 1.75rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 1.625rem; font-weight: 700; - line-height: 2.25rem; - color: #373633; + line-height: 2rem; + color: #09090b; } .post-head .post-info .post-date { - font-family: 'Carrois Song'; - font-size: 0.875rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 0.8125rem; font-weight: 400; - line-height: 1.25rem; - color: #373633; + line-height: 1.125rem; + color: #71717a; } .post-head .post-img { margin-top: 2rem; } .post-footer { - margin-top: 3.5rem; + margin-top: 2rem; } .post-footer a { - background-image: linear-gradient(#fff, #fff), linear-gradient(#373633, #373633); + background-image: linear-gradient(#fff, #fff), linear-gradient(#2563eb, #2563eb); background-size: 100% 1px, 0% 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat, no-repeat; - transition: background-size 0.6s linear; + transition: background-size 200ms ease; } .post-footer a:hover { background-size: 0 1px, 100% 1px; @@ -935,11 +999,11 @@ dl dd { margin-top: 0.75rem; display: flex; flex-wrap: wrap; - font-family: 'Carrois Song'; - font-size: 0.875rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 0.8125rem; font-weight: 500; - line-height: 1.25rem; - color: #373633; + line-height: 1.125rem; + color: #09090b; } .post-nav .prev-item { display: flex; @@ -961,85 +1025,116 @@ dl dd { margin-left: 0.25rem; } .post-comment { - margin-top: 3.5rem; + margin-top: 2rem; } .v[data-class="v"] .vsys { display: none !important; } .vcontent p { margin-top: 0 !important; - font-size: 0.875rem !important; - color: #373633 !important; + font-size: 0.8125rem !important; + color: #09090b !important; } code { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-family: monospace; - font-size: 0.875rem; - line-height: 1rem; - color: #0177aa; + font-size: 0.8125rem; + line-height: 0.9375rem; + color: #2563eb; } .code pre span { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-family: monospace; - font-size: 0.875rem; - line-height: 1rem; - color: #7d7c78; + font-size: 0.8125rem; + line-height: 0.9375rem; + color: #52525b; } .highlight { margin: 0 0 1rem 0; + overflow-x: auto; + border: 1px solid #e4e4e7; + border-radius: 0.125rem; + padding: 0.5rem; } .highlight .line { - width: 3rem; + width: 2.5rem; +} +.highlight table { + margin: 0; + border-spacing: 0; + border: none; +} +.highlight td.code { + padding: 0 0.125rem 0 0.5rem; } td.gutter { - width: 1rem; + width: 1.5rem; + padding: 0 0.5rem; + vertical-align: top; position: -webkit-sticky; position: sticky; left: 0; -} -td.gutter span { - font-family: monospace; - font-size: 0.875rem; - line-height: 1rem; - color: #bababa; + background: #fff; } td.gutter pre { - overflow-x: visible; + margin: 0; + color: #a1a1aa; + font-size: 0.8125rem; } -td span { - line-height: 0.25rem; +td.code { + vertical-align: top; +} +td.code pre { + margin: 0; } pre { margin: 0; overflow-x: auto; } -table, -td, -th { - border: #373633 solid 1px; +@media (max-width: 688px) { + code { + font-size: 0.75rem; + } + .highlight pre { + font-size: 0.75rem; + } + .highlight td.gutter { + width: 1rem; + padding-right: 0.25rem; + font-size: 0.6875rem; + } +} +.post-content table { + border: #09090b solid 1px; width: 100%; text-align: left; -} -table { border-collapse: collapse; table-layout: fixed; } -td, -th { +.post-content table td, +.post-content table th { padding: 0.75rem; } -th { +.post-content table th { font-variation-settings: 'wght' 500; } -td { +.post-content table td { font-variation-settings: 'wght' 300; } -table, -tboby, -tr, -td { +.post-content table table, +.post-content table tboby, +.post-content table tr, +.post-content table td { background-color: inherit; } .highlight>table { + width: auto; min-width: fit-content; + border: none; +} +.highlight>table td { + padding: 0; + border: none; } @media (max-width: 480px) { .block-table { @@ -1067,14 +1162,14 @@ img { border: 0; } .gist a { - color: #afaea9; + color: #71717a; background-image: none !important; } blockquote>footer { margin: 0 1rem; padding: 0.5rem 0; - font-size: 0.75rem; - color: #afaea9; + font-size: 0.6875rem; + color: #71717a; } blockquote>footer cite { margin-left: 0.5rem; @@ -1083,24 +1178,24 @@ blockquote>footer cite::before { content: " — "; } blockquote>footer strong { - color: #afaea9; - font-size: 0.75rem; + color: #71717a; + font-size: 0.6875rem; } blockquote>footer a { - color: #afaea9; + color: #71717a; background-image: none !important; } figcaption { font-family: monospace; - font-size: 0.75rem; + font-size: 0.6875rem; padding: 0.5rem 0; - color: #afaea9; + color: #71717a; } figcaption span { padding-right: 0.5rem; } figcaption a { - color: #afaea9; + color: #71717a; background-image: none !important; } blockquote.pullquote.left { @@ -1124,14 +1219,14 @@ ul li.task-list-item>input[type=checkbox] { opacity: 1; } ul li.task-list-item>input[type=checkbox][checked]:before { - background: #373633; + background: #09090b; -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; + background: #09090b; -webkit-mask-image: url("../icon/checkbox-default.svg"); -webkit-mask-position: center center; mask-image: url("../icon/checkbox-default.svg"); @@ -1146,7 +1241,7 @@ ul li.task-list-item>input[type=checkbox]:before { left: 0; top: 0; width: 1.25rem; - height: 1.5rem; + height: 1.375rem; background-size: contain; background-repeat: no-repeat; background-position-x: 0; @@ -1155,7 +1250,7 @@ ul li.task-list-item>input[type=checkbox]:before { } .icon { display: block; - background-color: #373633; + background-color: #09090b; width: 1.25rem; height: 1.25rem; } @@ -1176,15 +1271,15 @@ ul li.task-list-item>input[type=checkbox]:before { mask-image: url("../icon/close-btn.svg"); } .h-line-primary { - background-color: #373633; + background-color: #09090b; height: 1px; } .h-line-secondary { - background-color: #afaea9; + background-color: #e4e4e7; height: 1px; } hr { - background-color: #e8e8e8; + background-color: #e4e4e7; height: 1px; border: 0; } @@ -1195,28 +1290,31 @@ hr { } .tag-title { margin: 0.75rem 0; - color: #afaea9; - font-size: 0.875rem; + color: #71717a; + font-size: 0.8125rem; } .tag-title a { - color: #afaea9; + color: #71717a; } .post-tag { - font-family: 'Carrois Song'; - font-size: 0.75rem; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-size: 0.6875rem; font-weight: 500; - line-height: 1rem; - border: 1px solid #373633; + line-height: 0.875rem; + color: #71717a; + border: 1px solid #e4e4e7; margin-right: 0.25rem; margin-bottom: 0.25rem; padding: 0.25rem 0.5rem 0.25rem 0.5rem; border-radius: 1rem; + transition: all 200ms ease; } .post-tag a { background-image: none !important; } .post-tag:hover { - background-color: #373633; + border-color: #2563eb; + background-color: #2563eb; } .post-tag:hover a { color: #fff; -- cgit v1.2.3