From febc1778ff6425317a60759be80bb03422df987b Mon Sep 17 00:00:00 2001 From: MetroWind Date: Fri, 27 Sep 2024 23:35:17 -0700 Subject: [PATCH] Add the default series of themes. --- statics/theme-selector.js | 10 +++ themes/generic/0-reset.css | 48 +++++++++++++ themes/generic/1-styles.css | 56 +++++++++++++++ themes/generic/info.yaml | 0 themes/planck-light/info.yaml | 1 + themes/planck-light/styles.css | 8 +++ themes/planck/info.yaml | 1 + themes/planck/styles.css | 123 +++++++++++++++++++++++++++++++++ 8 files changed, 247 insertions(+) create mode 100644 statics/theme-selector.js create mode 100644 themes/generic/0-reset.css create mode 100644 themes/generic/1-styles.css create mode 100644 themes/generic/info.yaml create mode 100644 themes/planck-light/info.yaml create mode 100644 themes/planck-light/styles.css create mode 100644 themes/planck/info.yaml create mode 100644 themes/planck/styles.css diff --git a/statics/theme-selector.js b/statics/theme-selector.js new file mode 100644 index 0000000..d70b287 --- /dev/null +++ b/statics/theme-selector.js @@ -0,0 +1,10 @@ +function selectTheme(new_theme) +{ + fetch(SELECT_THEME_ENDPOINT, { + method: "POST", + body: JSON.stringify({theme: new_theme}) + }).then((_) => location.reload()); +} + +const theme_selector = document.getElementById("SelectTheme"); +theme_selector.addEventListener("change", () => selectTheme(theme_selector.value)); diff --git a/themes/generic/0-reset.css b/themes/generic/0-reset.css new file mode 100644 index 0000000..ed11813 --- /dev/null +++ b/themes/generic/0-reset.css @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/themes/generic/1-styles.css b/themes/generic/1-styles.css new file mode 100644 index 0000000..9c6c6ec --- /dev/null +++ b/themes/generic/1-styles.css @@ -0,0 +1,56 @@ +body +{ + line-height: 1.5; +} + +h1, h2, h3, h4, h5, h6 +{ + margin: 1.5em 0; +} + +h1 +{ + font-size: 1.728rem; +} + +h2 +{ + font-size: 1.44rem; +} + +h3 +{ + font-size: 1.2rem; +} + +p +{ + margin: 1em 0; +} + +em +{ + font-style: italic; +} + +ul +{ + list-style: square outside; +} + +ol +{ + list-style: decimal outside; +} + +ul, ol +{ + margin-left: 1.5em; +} + +code, pre +{ + font-family: monospace; + white-space: pre-wrap; + word-break: break-all; +} diff --git a/themes/generic/info.yaml b/themes/generic/info.yaml new file mode 100644 index 0000000..e69de29 diff --git a/themes/planck-light/info.yaml b/themes/planck-light/info.yaml new file mode 100644 index 0000000..3d2e80e --- /dev/null +++ b/themes/planck-light/info.yaml @@ -0,0 +1 @@ +parent: planck diff --git a/themes/planck-light/styles.css b/themes/planck-light/styles.css new file mode 100644 index 0000000..2aa3715 --- /dev/null +++ b/themes/planck-light/styles.css @@ -0,0 +1,8 @@ +:root +{ + --color-bg: #c4cdd3; + --color-fg: #4c5256; + --color-alt-bg: #a9b5bd; + --color-accent: #616b72; + --color-thin: #83919a; +} diff --git a/themes/planck/info.yaml b/themes/planck/info.yaml new file mode 100644 index 0000000..0db4038 --- /dev/null +++ b/themes/planck/info.yaml @@ -0,0 +1 @@ +parent: generic diff --git a/themes/planck/styles.css b/themes/planck/styles.css new file mode 100644 index 0000000..f75c9f0 --- /dev/null +++ b/themes/planck/styles.css @@ -0,0 +1,123 @@ +@import url("../../statics/fonts/iosevka-etoile/IosevkaEtoile.css"); +@import url("../../statics/fonts/iosevka/IosevkaSS10.css"); + +body +{ + background-color: var(--color-bg); + color: var(--color-fg); + font-family: "Iosevka Etoile Web", "Source Han Sans", "Noto Sans CJK", sans-serif; + font-size: 19px; +} + +nav +{ + background-color: var(--color-alt-bg); + font-size: 80%; + padding: 4px 1em; +} + +a +{ + color: var(--color-accent); + text-decoration: underline; +} + +a:hover +{ + color: var(--color-bg); + background-color: var(--color-accent); +} + +code, pre +{ + font-family: "Iosevka SS10 Web", monospace; + font-size: 95%; +} + +p +{ + margin: unset; + text-indent: 1.5em; +} + +p:first-of-type, pre p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p +{ + text-indent: unset; +} + +.paragraph > p +{ + text-indent: 1.5em; +} + +.paragraph:first-of-type > p +{ + text-indent: unset; +} + +#Post[lang^="zh-"] p, #Post[lang="zh"] p +{ + text-indent: 2em; +} + +#Post[lang^="zh-"] li > p, #Post[lang="zh"] li > p +{ + text-indent: unset; +} + +main, #BlogTitle +{ + max-width: 700px; + margin: 0 auto; +} + +#BlogTitle +{ + font-size: 2rem; + font-style: italic; +} + +#PostList +{ + text-align: center; + list-style: none; +} + +#PostList > li +{ + margin: 3.5em 0; +} + +h1.PostTitle +{ + margin: 0.75em 0; +} + +h1.PostTitle > a +{ + text-decoration: none; +} + +#Post > h1 +{ + text-align: center; + margin: 2.5em 0 1em 0; +} + +#Post > #Metadata +{ + color: var(--color-thin); + font-size: 0.8rem; + text-align: center; + font-weight: bold; +} + +#Post[lang^="zh-"], #Post[lang="zh"] +{ + line-height: 1.65; +} + +#Post[lang^="zh-"] ul, #Post[lang^="zh-"] ol, #Post[lang="zh"] ul, #Post[lang="zh"] ol +{ + margin-left: 2em; +}