diff options
Diffstat (limited to 'public/css')
| -rw-r--r-- | public/css/fonts.css | 31 | ||||
| -rw-r--r-- | public/css/style.css | 239 | ||||
| -rw-r--r-- | public/css/theme-override.css | 1 |
3 files changed, 271 insertions, 0 deletions
diff --git a/public/css/fonts.css b/public/css/fonts.css new file mode 100644 index 0000000..da969a7 --- /dev/null +++ b/public/css/fonts.css @@ -0,0 +1,31 @@ +@import url('https://rsms.me/inter/inter.css'); +html { font-family: + 'Inter', + sans-serif, + 'Apple Color Emoji', + 'Segoe UI Emoji', + 'Segoe UI Symbol'; + } +@supports (font-variation-settings: normal) { + html { font-family: + 'Inter var', + sans-serif, + 'Apple Color Emoji', + 'Segoe UI Emoji', + 'Segoe UI Symbol'; + } +} + +code { + font-family: + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Helvetica, + Arial, + sans-serif, + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol"; + font-size: 85%; +} diff --git a/public/css/style.css b/public/css/style.css new file mode 100644 index 0000000..c68c01c --- /dev/null +++ b/public/css/style.css @@ -0,0 +1,239 @@ +/* Dark mode */ +@media (prefers-color-scheme: dark) { + body { + background-color: #393E41; + color: white; + } + + blockquote { + background: #393E41; + } + + a { + color: #EBC3DB; + } + + header { + background: #393E41; + border-bottom: 2px dotted #EBC3DB; + + } + + .article-meta, .menu a { + background: #393E41; + color: white; + } + + table { + margin: auto; + border-top: 1px solid #666; + border-bottom: 1px solid #666; + } + table thead th { border-bottom: 1px solid #666; } + th, td { padding: 5px; } + tr:nth-child(even) { background: #666 } + +} + + +/* Light mode */ +@media (prefers-color-scheme: light) { + blockquote { + background: #f9f9f9; + } + + a { + color: #613DC1; + } + + header { + background: #613DC1; + } + + .article-meta, .menu a { + background: #E8DBC5; + color: #000; + } + + table { + margin: auto; + border-top: 1px solid #666; + border-bottom: 1px solid #666; + } + table thead th { border-bottom: 1px solid #ddd; } + th, td { padding: 5px; } + tr:nth-child(even) { background: #eee } + +} + + +body { + max-width: 800px; + margin: auto; + padding: .2em; + line-height: 1.5em; +} + +h1 { + line-height: 1.5em; +} + +/* Table of Contents, if wanted + +Add to yaml: + +output: + blogdown::html_page: + toc: true + + */ + +#TableOfContents, #TOC { + border: 1px solid #eee; + border-radius: 5px; +} + +/* Header and Footer */ +.menu li { display: inline-block; } +.article-meta, .menu a { + text-decoration: none; + padding: 5px; + border-radius: 5px; + border-style: dotted; + border-width: 1px; + margin: 20px 0px 20px 0px; +} + +.terms { font-size: .9em; } +.menu, .article-meta, footer { text-align: center; } +.title { font-size: 1.1em; } +footer a { text-decoration: none; } + +.pull-left { + float: left +} +.pull-right { + float: right +} + +a { + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +/* Adjust background at your leisure! */ +header { + position: relative; + width: 100%; + height: 1.75rem; + font-size: 1rem; +} + +header ul, +header ol { + margin: 0; + padding: 0; + list-style: none +} +header nav { + padding: 0 0.5rem +} + +header a { + color: #fff; + line-height: 1.75rem; + padding: 0 0.5rem +} +header a:hover, +header .current a { + color: #fff +} + +/* Code Boxes */ +pre { + border: 2px solid #EBC3DB; + padding: 1em; + overflow-x: auto; +} +pre code { background: none; } + +code { + background-color: light-dark(#D6D6D6, #888); + border-radius: 3px; + padding: 0.2em; + overflow-x: auto; +} + +/* Images, tables, misc. */ +img, iframe, video { + max-width: 100%; + height: auto; + display: block; + margin-left: auto; + margin-right: auto; +} + +main { + hyphens: auto; + max-width: 650px; + margin-left: auto; + margin-right: auto; + line-height: 1.7em; + hyphens: auto; + display: block; + font-size: 1.1em; +} +main a { + font-weight: bold; +} + +blockquote { + + border-left: 5px solid #ccc; + padding: 3px 1em 3px; +} + +.content-wrapper { + padding: 0px 12px 0px 12px; +} +#foxy { + min-width: 40px; + float: right; + padding: 10px; + display: block; +} + + +#table-of-contents { +} + +/* Small devices, phones */ +@media only screen and (min-width : 480px) { + #foxy { + min-width: 40px; + float: center; + padding: 10px 10px 10px 20px; + display: block; + } + +} + +/* 在大屏幕上应用特定样式 */ +@media screen and (min-width: 768px) { + #table-of-contents { + position: fixed; /* 固定定位，使其悬浮在页面上 */ + top: 50%; /* 上边距为50% */ + right: 15px; /* 右边距为0，将其放在右侧 */ + transform: translateY(-50%); /* 使用transform来垂直居中 */ + background-color: #f0f0f0; /* 设置背景颜色 */ + padding: 10px; /* 添加一些内边距以增加可读性 */ + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */ + width: 250px; /* 设置宽度 */ + max-height: 70vh; /* 设置最大高度为视口的70% */ + overflow-y: auto; /* 添加垂直滚动条 */ + } +} + diff --git a/public/css/theme-override.css b/public/css/theme-override.css new file mode 100644 index 0000000..1e8f759 --- /dev/null +++ b/public/css/theme-override.css @@ -0,0 +1 @@ +footer { font-size: 90%; } |