├── screenshot.png
├── 404.php
├── page.php
├── README.md
├── post.php
├── footer.php
├── functions.php
├── index.php
├── archive.php
├── header.php
├── comments.php
├── comments.css
└── style.css


/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hoytzhang/typecho-theme-final/HEAD/screenshot.png


--------------------------------------------------------------------------------
/404.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | if (!defined("__TYPECHO_ROOT_DIR__")) {
 3 |     error_log("__TYPECHO_ROOT_DIR__ is not defined.");
 4 |     exit();
 5 | }
 6 | 
 7 | if (!function_exists("_e")) {
 8 |     function _e($text)
 9 |     {
10 |         return $text;
11 |     }
12 | }
13 | 
14 | $this->need("header.php");
15 | ?>
16 | <main>
17 |     <h1> 404 - <?php _e("页面没找到"); ?></h1>
18 |     <h3> <?php _e("你想查看的页面已被转移或删除了"); ?></h3>
19 | </main>
20 | <?php $this->need("footer.php");
21 | ?>
22 | 


--------------------------------------------------------------------------------
/page.php:
--------------------------------------------------------------------------------
 1 | <?php if (!defined("__TYPECHO_ROOT_DIR__")) {
 2 |     exit();
 3 | } ?>
 4 | <?php $this->need("header.php"); ?>
 5 | <main>
 6 |     <h1><?php $this->title(); ?></h1>
 7 |     <p>
 8 |         <i>
 9 |             <time datetime="<?php $this->date("c"); ?>">
10 |                 <?php $this->date("Y-m-d H:i"); ?>
11 |             </time>
12 |         </i>
13 |     </p>
14 |     <article>
15 |     <?php if ($this->content): ?>
16 |         <?php $this->content(); ?>
17 |     <?php else: ?>
18 |         <p>此页面内容尚未发布。</p>
19 |     <?php endif; ?>
20 |     </article>
21 | </main>
22 | <?php $this->need("footer.php"); ?>
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # typecho-theme-final
 2 | 
 3 | 经常换主题是不好的事情。但是如果你需要，可以试试我这款。
 4 | 
 5 | ### 介绍
 6 | 
 7 | 这是我业余时间做出来的，很简单简洁。如果CSS和HTML压缩之后，页面可以到2K以内。
 8 | 
 9 | 使用本主题，不需要声明主题来源，不保留任何权限。
10 | 
11 | 并且我认为final应该是结构最简单的Typecho主题了，所以修改成本很低，有什么问题可以直接提issue，或者你可以试试自己修改。
12 | 
13 | ### 预览
14 | 
15 | [https://final.linkpark.site](https://final.linkpark.site)
16 | 
17 | 我打开了Under Attack 模式，访问可能比较慢
18 | 
19 | ### Pagespeed Insights
20 | 
21 | 全100， [报告链接](https://pagespeed.web.dev/analysis/https-final-linkpark-site/6g63dloic6?hl=zh-cn&form_factor=mobile)
22 | 
23 | ### hexo版本
24 | 
25 | 我刚刚制作了这个主题的hexo同款，如果你有兴趣可以点这里查看
26 | 
27 | [hexo-theme-final](https://github.com/hoytzhang/hexo-theme-final)
28 | 


--------------------------------------------------------------------------------
/post.php:
--------------------------------------------------------------------------------
 1 | <?php if (!defined("__TYPECHO_ROOT_DIR__")) {
 2 |     exit();
 3 | } ?>
 4 | <?php $this->need("header.php"); ?>
 5 | <main>
 6 |     <h1><a href="<?php $this->options->siteUrl(); ?>"><?php $this->title(); ?></a></h1>
 7 |     <p>
 8 |         <i>
 9 |             <time datetime="<?php $this->date("c"); ?>">
10 |                 <?php $this->date("Y-m-d H:i"); ?>
11 |             </time>
12 |             · 
13 |         </i>
14 |         <?php $this->category(" · "); ?>
15 |     </p>
16 |     <article>
17 |     <?php if ($this->content): ?>
18 |         <?php $this->content(); ?>
19 |     <?php else: ?>
20 |         <p>此文章内容尚未发布。</p>
21 |     <?php endif; ?>
22 |     </article>
23 |     <p class="tags">
24 |         <?php $this->tags(" · ", true, " "); ?>
25 |     </p>
26 | </main>
27 | <?php $this->need("footer.php"); ?>
28 | 


--------------------------------------------------------------------------------
/footer.php:
--------------------------------------------------------------------------------
 1 | <?php if (!defined("__TYPECHO_ROOT_DIR__")) {
 2 |     exit();
 3 | } ?>
 4 | 
 5 | <footer style="margin:50px 0px">
 6 | 
 7 | <span id="footer-directive">
 8 | <nav>
 9 |        <a href="<?php $this->options->siteUrl(); ?>"><?php _e("首页"); ?></a>
10 |        <?php \Widget\Contents\Page\Rows::alloc()->to($pages); ?>
11 |        <?php while ($pages->next()): ?>
12 |            <a<?php if (
13 |                $this->is("page", $pages->slug)
14 |            ): ?> <?php endif; ?> href="<?php $pages->permalink(); ?>" title="<?php $pages->title(); ?>"><?php $pages->title(); ?></a>
15 |        <?php endwhile; ?>
16 | </nav>
17 | <?php $this->options->addfoot(); ?>
18 | 
19 | </span>
20 | 
21 | <span>
22 | &copy; 2024 <a href="<?php $this->options->siteUrl(); ?>"><?php $this->options->title(); ?></a>
23 | </span>
24 | 
25 | </footer>
26 | 
27 | </body>
28 | 
29 | </html>


--------------------------------------------------------------------------------
/functions.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | if (!defined("__TYPECHO_ROOT_DIR__")) {
 3 |     exit();
 4 | }
 5 | 
 6 | function themeConfig($form)
 7 | {
 8 |     $logoUrl = new \Typecho\Widget\Helper\Form\Element\Text(
 9 |         "logoUrl",
10 |         null,
11 |         "default-logo.png",
12 |         _t("站点 LOGO 地址"),
13 |         _t("在这里填入一个图片 URL 地址")
14 |     );
15 |     $form->addInput($logoUrl);
16 | 
17 |     $addhead = new \Typecho\Widget\Helper\Form\Element\Textarea(
18 |         "addhead",
19 |         null,
20 |         null,
21 |         _t("头部代码"),
22 |         _t("可填写自定义 CSS、JS 代码等")
23 |     );
24 |     $form->addInput($addhead);
25 | 
26 |     $addfoot = new \Typecho\Widget\Helper\Form\Element\Textarea(
27 |         "addfoot",
28 |         null,
29 |         null,
30 |         _t("页脚代码"),
31 |         _t("支持 HTML，可填写备案、统计等信息")
32 |     );
33 |     $form->addInput($addfoot);
34 | }
35 | 


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * 或许是你的最终选择，接下来请专心写作吧。
 4 |  * Your final choice. Please focus on writing next.
 5 |  *
 6 |  * @package final
 7 |  * @author HoytZhang
 8 |  * @version 1.6
 9 |  * @link https://banzhuanriji.com
10 |  */
11 | if (!defined("__TYPECHO_ROOT_DIR__")) {
12 |     exit();
13 | }
14 | $this->need("header.php");
15 | ?>
16 | <a class="title" href="/">
17 |     <h1><?php $this->options->title(); ?></h1>
18 | </a>
19 | <main>
20 | 
21 | <?php if ($this->have()): ?>
22 | <?php while ($this->next()): ?>
23 |     <div class="post-item">
24 |     <a href="<?php $this->permalink(); ?>"><?php $this->title(); ?></a><time datetime="<?php $this->date(
25 |     "c"
26 | ); ?>" itemprop="datePublished"><?php $this->date(); ?></time>
27 |     </div>
28 | <?php endwhile; ?>
29 | 
30 | <?php if ($this->is("archive") || $this->is("index")) { ?>
31 | <div class="post-pagination">
32 | <?php $this->pageNav("&nbsp;←&nbsp;", "&nbsp;→&nbsp;", "5", "…"); ?>
33 | </div>
34 | <?php } ?>
35 | <?php else: ?><article><em>空空如也 ...</em></article><?php endif; ?>
36 | 
37 | </main>
38 | <?php $this->need("footer.php"); ?>
39 | 


--------------------------------------------------------------------------------
/archive.php:
--------------------------------------------------------------------------------
 1 | <?php if (!defined("__TYPECHO_ROOT_DIR__")) {
 2 |     exit();
 3 | } ?>
 4 | <?php $this->need("header.php"); ?>
 5 | <main>
 6 | <h3 style="margin-bottom:0"><?php $this->archiveTitle(
 7 |     [
 8 |         "category" => _t("分类 %s 下的文章"),
 9 |         "search" => _t("包含关键字 %s 的文章"),
10 |         "tag" => _t("标签 %s 下的文章"),
11 |         "author" => _t("%s 发布的文章"),
12 |     ],
13 |     "",
14 |     ""
15 | ); ?></h3>
16 | <ul class="blog-posts">
17 | <?php if ($this->have()): ?>
18 |     <?php while ($this->next()): ?>
19 |         <li>
20 |             <span>
21 |                 <i>
22 |                     <time datetime="<?php $this->date("c"); ?>">
23 |                         <?php $this->date(); ?>
24 |                     </time>
25 |                 </i>
26 |             </span>
27 |             <a href="<?php $this->permalink(); ?>"><?php $this->title(); ?></a>
28 |         </li>
29 |     <?php endwhile; ?>
30 | <?php else: ?>
31 |     <article class="post">
32 |         <h2 class="post-title"><?php _e("没有找到内容"); ?></h2>
33 |     </article>
34 | <?php endif; ?>
35 | </ul>
36 | 
37 | <?php if ($this->is("archive") || $this->is("index")) { ?>
38 | <div class="post-pagination">
39 | <?php $this->pageNav("&nbsp;←&nbsp;", "&nbsp;→&nbsp;", "5", "…"); ?>
40 | </div>
41 | <?php } ?>
42 | 
43 | 
44 | </main>
45 | <?php $this->need("footer.php"); ?>
46 | 


--------------------------------------------------------------------------------
/header.php:
--------------------------------------------------------------------------------
 1 | <?php if (!defined("__TYPECHO_ROOT_DIR__")) {
 2 |     exit();
 3 | } ?>
 4 | <!DOCTYPE html>
 5 | <html lang="zh">
 6 | <head>
 7 |     <meta charset="<?php $this->options->charset(); ?>">
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5">
 9 |     <title><?php
10 |     $this->archiveTitle(
11 |         [
12 |             "category" => _t("分类 %s 下的文章"),
13 |             "search" => _t("包含关键字 %s 的文章"),
14 |             "tag" => _t("标签 %s 下的文章"),
15 |             "author" => _t("%s 发布的文章"),
16 |         ],
17 |         "",
18 |         " - "
19 |     );
20 |     $this->options->title();
21 |     ?></title>
22 |     <link rel="canonical" href="<?php $this->options->siteUrl(); ?>">
23 |     <meta name="title" content="<?php $this->options->title(); ?>">
24 |     <meta name="description" content="<?php echo $this->options->description(); ?>">
25 |     <link rel="alternate" type="application/atom+xml" href="<?php $this->options->siteUrl(); ?>feed/">
26 |     <link rel="shortcut icon" type="image/svg+xml" href="<?php $this->options->logoUrl(); ?>">
27 |     <link rel="stylesheet" href="<?php $this->options->themeUrl(
28 |         "style.css"
29 |     ); ?>">
30 | 
31 |     <?php if (method_exists($this, "header")): ?>
32 |         <?php $this->header(); ?>
33 |     <?php endif; ?>
34 | 
35 |     <?php if ($this->options->addhead): ?>
36 |         <?php echo $this->options->addhead; ?>
37 |     <?php endif; ?>
38 | </head>
39 | <body class="home">
40 | <header>
41 | 
42 | </header>


--------------------------------------------------------------------------------
/comments.php:
--------------------------------------------------------------------------------
 1 | <link rel="stylesheet" href="/usr/themes/final/comments.css">
 2 | <hr>
 3 | 
 4 | <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
 5 | <div id="comments">
 6 |     <?php $this->comments()->to($comments); ?>
 7 |     <?php if ($comments->have()): ?>
 8 |         <h3><?php $this->commentsNum(_t('暂无评论'), _t('仅有一条评论'), _t('已有 %d 条评论')); ?></h3>
 9 | 
10 |         <?php $comments->listComments(); ?>
11 | 
12 |         <?php $comments->pageNav('&laquo; 前一页', '后一页 &raquo;'); ?>
13 | 
14 |     <?php endif; ?>
15 | 
16 |     <?php if ($this->allow('comment')): ?>
17 |         <div id="<?php $this->respondId(); ?>" class="respond">
18 |             <div class="cancel-comment-reply">
19 |                 <?php $comments->cancelReply(); ?>
20 |             </div>
21 | 
22 |             <h3 id="response"><?php _e('添加新评论'); ?></h3>
23 |             <form method="post" action="<?php $this->commentUrl() ?>" id="comment-form" role="form">
24 |                 <?php if ($this->user->hasLogin()): ?>
25 |                     <p><?php _e('登录身份: '); ?><a
26 |                             href="<?php $this->options->profileUrl(); ?>"><?php $this->user->screenName(); ?></a>. <a
27 |                             href="<?php $this->options->logoutUrl(); ?>" title="Logout"><?php _e('退出'); ?> &raquo;</a>
28 |                     </p>
29 |                 <?php else: ?>
30 |                     <p>
31 |                         <label for="author" class="required"><?php _e('称呼'); ?></label>
32 |                         <input type="text" name="author" id="author" class="text"
33 |                                value="<?php $this->remember('author'); ?>" required/>
34 |                     </p>
35 |                     <p>
36 |                         <label
37 |                             for="mail"<?php if ($this->options->commentsRequireMail): ?> class="required"<?php endif; ?>><?php _e('Email'); ?></label>
38 |                         <input type="email" name="mail" id="mail" class="text"
39 |                                value="<?php $this->remember('mail'); ?>"<?php if ($this->options->commentsRequireMail): ?> required<?php endif; ?> />
40 |                     </p>
41 |                     <p>
42 |                         <label
43 |                             for="url"<?php if ($this->options->commentsRequireURL): ?> class="required"<?php endif; ?>><?php _e('网站'); ?></label>
44 |                         <input type="url" name="url" id="url" class="text" placeholder="<?php _e('http://'); ?>"
45 |                                value="<?php $this->remember('url'); ?>"<?php if ($this->options->commentsRequireURL): ?> required<?php endif; ?> />
46 |                     </p>
47 |                 <?php endif; ?>
48 |                 <p>
49 |                     <label for="textarea" class="required"><?php _e('内容'); ?></label>
50 |                     <textarea rows="8" cols="50" name="text" id="textarea" class="textarea"
51 |                               required><?php $this->remember('text'); ?></textarea>
52 |                 </p>
53 |                 <p>
54 |                     <button type="submit" class="submit"><?php _e('提交评论'); ?></button>
55 |                 </p>
56 |             </form>
57 |         </div>
58 |     <?php else: ?>
59 |         <h3><?php _e('评论已关闭'); ?></h3>
60 |     <?php endif; ?>
61 | </div>
62 | 


--------------------------------------------------------------------------------
/comments.css:
--------------------------------------------------------------------------------
  1 | input[type="text"],
  2 | input[type="email"],
  3 | input[type="url"],
  4 | textarea {
  5 |     padding: 8px 12px;
  6 |     border: 1px solid #999999;
  7 |     width: 100%;
  8 |     border-radius: 4px;
  9 |     box-sizing: border-box;
 10 |     font-size: 14px;
 11 |     background-color: var(--background-color);
 12 |     transition: border-color 0.2s ease, box-shadow 0.2s ease;
 13 | }
 14 | 
 15 | input[type="text"]:focus,
 16 | input[type="email"]:focus,
 17 | input[type="url"]:focus,
 18 | textarea:focus {
 19 |     border-color: #474747;
 20 |     outline: none;
 21 |     box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
 22 | }
 23 | 
 24 | textarea {
 25 |     resize: vertical;
 26 | }
 27 | 
 28 | .comment-content a {
 29 |     border-bottom: 1px solid #E5E7EB;
 30 | }
 31 | 
 32 | .comment-content a:hover {
 33 |     border-bottom-color: transparent;
 34 | }
 35 | 
 36 | #comments {
 37 |     padding-top: 24px;
 38 | }
 39 | 
 40 | .comment-list,
 41 | .comment-list ol {
 42 |     list-style: none;
 43 |     margin: 0;
 44 |     padding: 0;
 45 | }
 46 | 
 47 | .comment-list li {
 48 |     padding: 16px;
 49 |     margin-top: 16px;
 50 |     border: 1px solid #999999;
 51 |     border-radius: 8px;
 52 |     background-color: var(--background-color);
 53 |     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 54 |     transition: box-shadow 0.2s ease;
 55 | }
 56 | 
 57 | .comment-list li:hover {
 58 |     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 59 | }
 60 | 
 61 | .comment-list li.comment-level-odd {
 62 |     background-color: var(--code-background-color);
 63 | }
 64 | 
 65 | .comment-list li.comment-level-even {
 66 |     background-color: var(--background-color);
 67 | }
 68 | 
 69 | .comment-list li .comment-reply {
 70 |     text-align: right;
 71 |     font-size: 0.875rem;
 72 |     color: #6B7280;
 73 | }
 74 | 
 75 | .comment-meta a {
 76 |     color: #6B7280;
 77 |     font-size: 0.875rem;
 78 | }
 79 | 
 80 | .comment-author {
 81 |     display: flex;
 82 |     align-items: center;
 83 |     margin-bottom: 8px;
 84 | }
 85 | 
 86 | .comment-author .avatar {
 87 |     width: 32px;
 88 |     height: 32px;
 89 |     border-radius: 50%;
 90 |     margin-right: 8px;
 91 |     object-fit: cover;
 92 | }
 93 | 
 94 | .comment-author cite {
 95 |     font-weight: 600;
 96 |     color: var(--text-color);
 97 | }
 98 | 
 99 | .comment-list .respond {
100 |     margin-top: 24px;
101 |     border-top: 1px solid #E5E7EB;
102 |     padding-top: 24px;
103 | }
104 | 
105 | .respond .cancel-comment-reply {
106 |     float: right;
107 |     margin-top: 16px;
108 |     font-size: 0.875rem;
109 |     color: #6B7280;
110 | }
111 | 
112 | #comment-form label {
113 |     display: block;
114 |     margin-bottom: 8px;
115 |     font-weight: 500;
116 |     color: var(--text-color);
117 | }
118 | 
119 | #comment-form .required:after {
120 |     content: " *";
121 |     color: #DC2626;
122 | }
123 | 
124 | .comment-content {
125 |     line-height: 1.6;
126 |     color: var(--text-color);
127 | }
128 | 
129 | .comment-content h2 {
130 |     font-size: 1.25rem;
131 |     margin-top: 1.5rem;
132 |     margin-bottom: 0.75rem;
133 | }
134 | 
135 | .comment-content img {
136 |     max-width: 100%;
137 |     border-radius: 4px;
138 | }
139 | 
140 | .comment-content a img {
141 |     background-color: var(--background-color);
142 |     position: relative;
143 |     bottom: -4px;
144 | }
145 | 
146 | .comment-content hr {
147 |     margin: 2rem auto;
148 |     width: 100px;
149 |     border: 0;
150 |     border-top: 1px solid #E5E7EB;
151 | }
152 | 
153 | button[type="submit"] {
154 |     padding: 8px 16px;
155 |     background-color: #474747;
156 |     color: #fff;
157 |     border: none;
158 |     border-radius: 4px;
159 |     font-size: 14px;
160 |     font-weight: 500;
161 |     cursor: pointer;
162 |     transition: background-color 0.2s ease;
163 | }
164 | 
165 | button[type="submit"]:hover {
166 |     background-color: #222222;
167 | }
168 | 
169 | button[type="submit"]:focus {
170 |     outline: none;
171 |     box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.5);
172 | }


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |     --width: 720px;
  3 |     --font-scale: 1.1rem;
  4 |     --background-color: #fff;
  5 |     --heading-color: #222;
  6 |     --text-color: #222;
  7 |     --link-color: #222;
  8 |     --visited-color: #222;
  9 |     --code-background-color: #F0F0F0;
 10 |     --code-color: #222;
 11 |     --blockquote-color: #222;
 12 |     --gray-color: #666;
 13 | }
 14 | 
 15 | 
 16 | @media (prefers-color-scheme: dark) {
 17 |     :root {
 18 |         --width: 780px;
 19 |         --font-scale: 1.1rem;
 20 |         --background-color: #1c1c1c;
 21 |         --heading-color: #e0e0e0;
 22 |         --text-color: #e0e0e0;
 23 |         --link-color: #e0e0e0;
 24 |         --visited-color: #e0e0e0;
 25 |         --code-background-color: #2d2d2d;
 26 |         --code-color: #e0e0e0;
 27 |         --blockquote-color: #e0e0e0;
 28 |         --gray-color: #aaa;
 29 |     }
 30 | }
 31 | 
 32 | body {
 33 |     font-size: var(--font-scale);
 34 |     margin: auto;
 35 |     max-width: var(--width);
 36 |     text-align: left;
 37 |     background-color: var(--background-color);
 38 |     word-wrap: break-word;
 39 |     overflow-wrap: break-word;
 40 |     line-height: 1.7;
 41 |     font-weight: 400;
 42 |     color: var(--text-color);
 43 |     font-family: sans-serif;
 44 |     height: 100%;
 45 |     word-break: break-all;
 46 | }
 47 | 
 48 | html {
 49 |     scroll-behavior: smooth;
 50 |     height: 100%;
 51 | }
 52 | 
 53 | time {
 54 |     font-family: consolas, monospace;
 55 |     font-style: normal;
 56 | }
 57 | 
 58 | h1,
 59 | h2,
 60 | h3,
 61 | h4,
 62 | h5,
 63 | h6 {
 64 |     color: var(--heading-color);
 65 |     display: inherit;
 66 | }
 67 | 
 68 | a {
 69 |     color: var(--link-color);
 70 |     cursor: pointer;
 71 |     text-decoration: none;
 72 |     border-bottom: 1px solid transparent;
 73 | }
 74 | 
 75 | a:hover,
 76 | nav .current {
 77 |     color: var(--gray-color);
 78 |     text-decoration: underline;
 79 | }
 80 | 
 81 | nav a {
 82 |     margin-right: 8px;
 83 | }
 84 | 
 85 | article a {
 86 |     text-decoration: underline;
 87 | }
 88 | 
 89 | strong,
 90 | b {
 91 |     color: var(--heading-color);
 92 | }
 93 | 
 94 | pre {
 95 |     padding: 5px 12px;
 96 |     overflow: auto;
 97 |     max-height: 400px;
 98 | }
 99 | 
100 | hr {
101 |     border: 0;
102 |     border-top: 1px solid;
103 | }
104 | 
105 | article hr {
106 |     border: 0;
107 |     border-top: 1px dashed;
108 | }
109 | 
110 | img {
111 |     max-width: 100%;
112 |     height: auto;
113 |     border-radius: 0.3rem;
114 | }
115 | 
116 | time,
117 | .intro {
118 |     color: var(--gray-color);
119 | }
120 | 
121 | pre,
122 | code {
123 |     font-size: 0.9em;
124 |     font-family: sans-serif;
125 |     background-color: var(--code-background-color);
126 |     color: var(--code-color);
127 |     border-radius: 0.3rem;
128 | }
129 | 
130 | code {
131 |     padding: 2px 3px;
132 | }
133 | 
134 | pre code {
135 |     padding: 3px 0px;
136 | }
137 | 
138 | blockquote {
139 |     border-left: 5px solid var(--heading-color);
140 |     padding: 10px 15px;
141 |     margin: 10px 0;
142 |     font-weight: bold;
143 |     color: var(--blockquote-color);
144 |     background-color: var(--code-background-color);
145 |     border-radius: 0.3rem;
146 | }
147 | 
148 | blockquote footer {
149 |     text-align: right;
150 |     font-size: 0.9em;
151 |     color: #777;
152 | }
153 | 
154 | header,
155 | footer {
156 |     padding: 10px 0;
157 | }
158 | 
159 | .title h1,
160 | .title h2 {
161 |     font-size: 3.5em;
162 | }
163 | 
164 | .title:hover {
165 |     text-decoration: none;
166 | }
167 | 
168 | main {
169 |     margin-top: 50px;
170 |     flex: 1;
171 |     box-sizing: border-box;
172 | }
173 | 
174 | nav a {
175 |     font-size: 1.2em;
176 | }
177 | 
178 | ul.posts {
179 |     list-style-type: none;
180 |     padding: unset;
181 | }
182 | 
183 | ul.posts li {
184 |     display: flex;
185 |     margin: 3px 0;
186 | }
187 | 
188 | ul.posts li span {
189 |     flex: 0 0 115px;
190 | }
191 | 
192 | ul.posts li a:visited {
193 |     color: var(--visited-color);
194 | }
195 | 
196 | .tags {
197 |     margin-top: 30px;
198 |     color: var(--gray-color);
199 | }
200 | 
201 | .tags a {
202 |     color: #888;
203 |     margin: 0 5px 0 2px;
204 | }
205 | 
206 | .post-item {
207 |     display: flex;
208 |     justify-content: space-between;
209 |     margin-bottom: 10px;
210 | }
211 | 
212 | .post-item a {
213 |     flex: 1;
214 | }
215 | 
216 | .post-item time {
217 |     margin-left: 10px;
218 |     white-space: nowrap;
219 | }
220 | 
221 | footer,
222 | footer a {
223 |     letter-spacing: 0;
224 |     line-height: 2;
225 |     color: var(--gray-color);
226 |     text-decoration: none;
227 |     font-size: 13px;
228 | }
229 | 
230 | .home {
231 |     display: flex;
232 |     flex-direction: column;
233 |     min-height: 100vh;
234 | }
235 | 
236 | @media (max-width:768px) {
237 |     body {
238 |         padding: 0px 20px;
239 |     }
240 | }
241 | 
242 | @media (min-width:769px) {
243 |     body {
244 |         padding: 0;
245 |     }
246 | }
247 | 
248 | .post-pagination ol {
249 |     list-style: none;
250 |     display: inline-flex;
251 |     padding: 0;
252 | }
253 | 
254 | .post-pagination .page-numbers,
255 | .post-pagination ol a {
256 |     width: 35px;
257 |     height: 35px;
258 |     line-height: 35px;
259 |     margin-right: 8px;
260 |     display: inline-block;
261 |     text-align: center;
262 |     border-radius: 4px;
263 | }
264 | 
265 | .post-pagination .pagination a:hover,
266 | .post-pagination .pagination .current,
267 | .post-pagination ol a:hover,
268 | .post-pagination ol .current a {
269 |     background: #333;
270 |     color: #fff;
271 |     text-decoration: none;
272 | }
273 | 
274 | .post-pagination .page-numbers,
275 | .post-pagination ol a {
276 |     background: #f8f8f8;
277 |     color: #555;
278 | }
279 | 
280 | .post-pagination {
281 |     margin: 80px 0 50px;
282 | }
283 | 
284 | table {
285 |     width: 100%;
286 |     border-collapse: collapse;
287 |     margin: 20px 0;
288 | }
289 | 
290 | th,
291 | td {
292 |     padding: 12px;
293 |     text-align: left;
294 |     border: 1px solid #ddd;
295 | }
296 | 
297 | th {
298 |     position: sticky;
299 |     top: 0;
300 |     z-index: 10;
301 | }
302 | 
303 | @media (max-width:600px) {
304 | 
305 |     th,
306 |     td {
307 |         display: block;
308 |         width: 100%;
309 |     }
310 | 
311 |     th {
312 |         position: static;
313 |     }
314 | 
315 |     tr {
316 |         display: flex;
317 |         flex-direction: column;
318 |         margin-bottom: 10px;
319 |     }
320 | }


--------------------------------------------------------------------------------