From ffdfd7cd1f8c1624205e27d2f225e3aeb3876c7c Mon Sep 17 00:00:00 2001 From: perennial Date: Sun, 6 Oct 2024 19:21:09 +1100 Subject: [PATCH] novel refine wip --- assets/css/bootstrap-style.css | 210 ++++++++++++++++++++++++++++++++ assets/css/bootstrap-style.scss | 124 +++++++++++++++++++ assets/views/novel.jet.html | 114 ++++++++++------- 3 files changed, 407 insertions(+), 41 deletions(-) diff --git a/assets/css/bootstrap-style.css b/assets/css/bootstrap-style.css index ee8c560..27c1a8c 100644 --- a/assets/css/bootstrap-style.css +++ b/assets/css/bootstrap-style.css @@ -40,6 +40,8 @@ --bs-custom-color: #7aa2f7; --bs-charcoal-surface1: #1f1f1f; --bs-charcoal-surface2: #3a3a3a; + --bs-beige: #f5f5dc; + --bs-off-white: #fff8eb; --bs-primary-rgb: 13, 110, 253; --bs-secondary-rgb: 108, 117, 125; --bs-success-rgb: 25, 135, 84; @@ -51,6 +53,8 @@ --bs-custom-color-rgb: 122, 162, 247; --bs-charcoal-surface1-rgb: 31, 31, 31; --bs-charcoal-surface2-rgb: 58, 58, 58; + --bs-beige-rgb: 245, 245, 220; + --bs-off-white-rgb: 255, 248, 235; --bs-primary-text-emphasis: #052c65; --bs-secondary-text-emphasis: #2b2f32; --bs-success-text-emphasis: #0a3622; @@ -3188,6 +3192,40 @@ textarea.form-control-lg { --bs-btn-disabled-border-color: #3a3a3a; } +.btn-beige { + --bs-btn-color: #000; + --bs-btn-bg: #f5f5dc; + --bs-btn-border-color: #f5f5dc; + --bs-btn-hover-color: #000; + --bs-btn-hover-bg: #f7f7e1; + --bs-btn-hover-border-color: #f6f6e0; + --bs-btn-focus-shadow-rgb: 208, 208, 187; + --bs-btn-active-color: #000; + --bs-btn-active-bg: #f7f7e3; + --bs-btn-active-border-color: #f6f6e0; + --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + --bs-btn-disabled-color: #000; + --bs-btn-disabled-bg: #f5f5dc; + --bs-btn-disabled-border-color: #f5f5dc; +} + +.btn-off-white { + --bs-btn-color: #000; + --bs-btn-bg: #fff8eb; + --bs-btn-border-color: #fff8eb; + --bs-btn-hover-color: #000; + --bs-btn-hover-bg: #fff9ee; + --bs-btn-hover-border-color: #fff9ed; + --bs-btn-focus-shadow-rgb: 217, 211, 200; + --bs-btn-active-color: #000; + --bs-btn-active-bg: #fff9ef; + --bs-btn-active-border-color: #fff9ed; + --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + --bs-btn-disabled-color: #000; + --bs-btn-disabled-bg: #fff8eb; + --bs-btn-disabled-border-color: #fff8eb; +} + .btn-outline-primary { --bs-btn-color: #0d6efd; --bs-btn-border-color: #0d6efd; @@ -3375,6 +3413,40 @@ textarea.form-control-lg { --bs-gradient: none; } +.btn-outline-beige { + --bs-btn-color: #f5f5dc; + --bs-btn-border-color: #f5f5dc; + --bs-btn-hover-color: #000; + --bs-btn-hover-bg: #f5f5dc; + --bs-btn-hover-border-color: #f5f5dc; + --bs-btn-focus-shadow-rgb: 245, 245, 220; + --bs-btn-active-color: #000; + --bs-btn-active-bg: #f5f5dc; + --bs-btn-active-border-color: #f5f5dc; + --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + --bs-btn-disabled-color: #f5f5dc; + --bs-btn-disabled-bg: transparent; + --bs-btn-disabled-border-color: #f5f5dc; + --bs-gradient: none; +} + +.btn-outline-off-white { + --bs-btn-color: #fff8eb; + --bs-btn-border-color: #fff8eb; + --bs-btn-hover-color: #000; + --bs-btn-hover-bg: #fff8eb; + --bs-btn-hover-border-color: #fff8eb; + --bs-btn-focus-shadow-rgb: 255, 248, 235; + --bs-btn-active-color: #000; + --bs-btn-active-bg: #fff8eb; + --bs-btn-active-border-color: #fff8eb; + --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + --bs-btn-disabled-color: #fff8eb; + --bs-btn-disabled-bg: transparent; + --bs-btn-disabled-border-color: #fff8eb; + --bs-gradient: none; +} + .btn-link { --bs-btn-font-weight: 400; --bs-btn-color: var(--bs-link-color); @@ -5067,6 +5139,20 @@ textarea.form-control-lg { --bs-alert-link-color: var(--bs-charcoal-surface2-text-emphasis); } +.alert-beige { + --bs-alert-color: var(--bs-beige-text-emphasis); + --bs-alert-bg: var(--bs-beige-bg-subtle); + --bs-alert-border-color: var(--bs-beige-border-subtle); + --bs-alert-link-color: var(--bs-beige-text-emphasis); +} + +.alert-off-white { + --bs-alert-color: var(--bs-off-white-text-emphasis); + --bs-alert-bg: var(--bs-off-white-bg-subtle); + --bs-alert-border-color: var(--bs-off-white-border-subtle); + --bs-alert-link-color: var(--bs-off-white-text-emphasis); +} + @keyframes progress-bar-stripes { 0% { background-position-x: 1rem; @@ -5511,6 +5597,32 @@ textarea.form-control-lg { --bs-list-group-active-border-color: var(--bs-charcoal-surface2-text-emphasis); } +.list-group-item-beige { + --bs-list-group-color: var(--bs-beige-text-emphasis); + --bs-list-group-bg: var(--bs-beige-bg-subtle); + --bs-list-group-border-color: var(--bs-beige-border-subtle); + --bs-list-group-action-hover-color: var(--bs-emphasis-color); + --bs-list-group-action-hover-bg: var(--bs-beige-border-subtle); + --bs-list-group-action-active-color: var(--bs-emphasis-color); + --bs-list-group-action-active-bg: var(--bs-beige-border-subtle); + --bs-list-group-active-color: var(--bs-beige-bg-subtle); + --bs-list-group-active-bg: var(--bs-beige-text-emphasis); + --bs-list-group-active-border-color: var(--bs-beige-text-emphasis); +} + +.list-group-item-off-white { + --bs-list-group-color: var(--bs-off-white-text-emphasis); + --bs-list-group-bg: var(--bs-off-white-bg-subtle); + --bs-list-group-border-color: var(--bs-off-white-border-subtle); + --bs-list-group-action-hover-color: var(--bs-emphasis-color); + --bs-list-group-action-hover-bg: var(--bs-off-white-border-subtle); + --bs-list-group-action-active-color: var(--bs-emphasis-color); + --bs-list-group-action-active-bg: var(--bs-off-white-border-subtle); + --bs-list-group-active-color: var(--bs-off-white-bg-subtle); + --bs-list-group-active-bg: var(--bs-off-white-text-emphasis); + --bs-list-group-active-border-color: var(--bs-off-white-text-emphasis); +} + .btn-close { --bs-btn-close-color: #000; --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e"); @@ -7044,6 +7156,16 @@ textarea.form-control-lg { background-color: RGBA(var(--bs-charcoal-surface2-rgb), var(--bs-bg-opacity, 1)) !important; } +.text-bg-beige { + color: #000 !important; + background-color: RGBA(var(--bs-beige-rgb), var(--bs-bg-opacity, 1)) !important; +} + +.text-bg-off-white { + color: #000 !important; + background-color: RGBA(var(--bs-off-white-rgb), var(--bs-bg-opacity, 1)) !important; +} + .link-primary { color: RGBA(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important; @@ -7143,6 +7265,24 @@ textarea.form-control-lg { text-decoration-color: RGBA(46, 46, 46, var(--bs-link-underline-opacity, 1)) !important; } +.link-beige { + color: RGBA(var(--bs-beige-rgb), var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(var(--bs-beige-rgb), var(--bs-link-underline-opacity, 1)) !important; +} +.link-beige:hover, .link-beige:focus { + color: RGBA(247, 247, 227, var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(247, 247, 227, var(--bs-link-underline-opacity, 1)) !important; +} + +.link-off-white { + color: RGBA(var(--bs-off-white-rgb), var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(var(--bs-off-white-rgb), var(--bs-link-underline-opacity, 1)) !important; +} +.link-off-white:hover, .link-off-white:focus { + color: RGBA(255, 249, 239, var(--bs-link-opacity, 1)) !important; + text-decoration-color: RGBA(255, 249, 239, var(--bs-link-underline-opacity, 1)) !important; +} + .link-body-emphasis { color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1)) !important; @@ -7586,6 +7726,14 @@ textarea.form-control-lg { --bs-focus-ring-color: rgba(var(--bs-charcoal-surface2-rgb), var(--bs-focus-ring-opacity)); } +.focus-ring-beige { + --bs-focus-ring-color: rgba(var(--bs-beige-rgb), var(--bs-focus-ring-opacity)); +} + +.focus-ring-off-white { + --bs-focus-ring-color: rgba(var(--bs-off-white-rgb), var(--bs-focus-ring-opacity)); +} + .position-static { position: static !important; } @@ -7761,6 +7909,16 @@ textarea.form-control-lg { border-color: rgba(var(--bs-charcoal-surface2-rgb), var(--bs-border-opacity)) !important; } +.border-beige { + --bs-border-opacity: 1; + border-color: rgba(var(--bs-beige-rgb), var(--bs-border-opacity)) !important; +} + +.border-off-white { + --bs-border-opacity: 1; + border-color: rgba(var(--bs-off-white-rgb), var(--bs-border-opacity)) !important; +} + .border-black { --bs-border-opacity: 1; border-color: rgba(var(--bs-black-rgb), var(--bs-border-opacity)) !important; @@ -8727,6 +8885,16 @@ textarea.form-control-lg { color: rgba(var(--bs-charcoal-surface2-rgb), var(--bs-text-opacity)) !important; } +.text-beige { + --bs-text-opacity: 1; + color: rgba(var(--bs-beige-rgb), var(--bs-text-opacity)) !important; +} + +.text-off-white { + --bs-text-opacity: 1; + color: rgba(var(--bs-off-white-rgb), var(--bs-text-opacity)) !important; +} + .text-black { --bs-text-opacity: 1; color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important; @@ -8944,6 +9112,16 @@ textarea.form-control-lg { text-decoration-color: rgba(var(--bs-charcoal-surface2-rgb), var(--bs-link-underline-opacity)) !important; } +.link-underline-beige { + --bs-link-underline-opacity: 1; + text-decoration-color: rgba(var(--bs-beige-rgb), var(--bs-link-underline-opacity)) !important; +} + +.link-underline-off-white { + --bs-link-underline-opacity: 1; + text-decoration-color: rgba(var(--bs-off-white-rgb), var(--bs-link-underline-opacity)) !important; +} + .link-underline { --bs-link-underline-opacity: 1; text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-underline-opacity, 1)) !important; @@ -9052,6 +9230,16 @@ textarea.form-control-lg { background-color: rgba(var(--bs-charcoal-surface2-rgb), var(--bs-bg-opacity)) !important; } +.bg-beige { + --bs-bg-opacity: 1; + background-color: rgba(var(--bs-beige-rgb), var(--bs-bg-opacity)) !important; +} + +.bg-off-white { + --bs-bg-opacity: 1; + background-color: rgba(var(--bs-off-white-rgb), var(--bs-bg-opacity)) !important; +} + .bg-black { --bs-bg-opacity: 1; background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important; @@ -12800,5 +12988,27 @@ h6, .h6 { display: none !important; } } +[data-font=mincho][data-font=jp] { + font-family: "Source Han Serif JP", "Noto Serif JP", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Source Han Serif", "BIZ UDMincho Medium", "Source Serif Pro", "Source Serif", "Noto Serif", "Times New Roman", "Georgia Pro", Georgia, Simsun, PMingLiu, AppleMyungjo, "Source Han Serif K", "Source Han Serif KR", "Noto Serif KR", Batang, serif; +} + +[data-font=mincho][data-font=zh-cn], +[data-font=mincho][data-font=zh-hans] { + font-family: "Songti SC", "Source Han Serif SC", "Noto Serif SC", "Source Han Serif CN", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Source Han Serif", "BIZ UDMincho Medium", "Source Serif Pro", "Source Serif", "Noto Serif", "Times New Roman", "Georgia Pro", Georgia, Simsun, PMingLiu, AppleMyungjo, "Source Han Serif K", "Source Han Serif KR", "Noto Serif KR", Batang, serif; +} + +[data-font=mincho][data-font=zh-tw], +[data-font=mincho][data-font=zh-hk], +[data-font=mincho][data-font=zh-hant] { + font-family: "Songti TC", "Source Han Serif TC", "Noto Serif TC", "Source Han Serif TW", "Source Han Serif HK", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Source Han Serif", "BIZ UDMincho Medium", "Source Serif Pro", "Source Serif", "Noto Serif", "Times New Roman", "Georgia Pro", Georgia, Simsun, PMingLiu, AppleMyungjo, "Source Han Serif K", "Source Han Serif KR", "Noto Serif KR", Batang, serif; +} + +[data-font=mincho] { + font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Source Han Serif", "BIZ UDMincho Medium", "Source Serif Pro", "Source Serif", "Noto Serif", "Times New Roman", "Georgia Pro", Georgia, Simsun, PMingLiu, AppleMyungjo, "Source Han Serif K", "Source Han Serif KR", "Noto Serif KR", Batang, serif; +} + +[data-font=gothic] { + font-family: YuGothic, "Hiragino Kaku Gothic Pro", Meiryo, "Source Han Sans", "Source Han Sans JP", "Noto Sans CJK JP", "Avenir Next", Avenir, "Source Sans", "Noto Sans", Roboto, Verdana, "Pingfang TC", "Pingfang HK", "Hiragino Sans CNS", "Lantinghei TC", "Source Han Sans TW", "Source Han Sans HK", "Noto Sans CJK TC", "Microsoft JhengHei", "Pingfang SC", "Hiragino Sans GB", "Lantinghei SC", "Source Han Sans CN", "Noto Sans CJK SC", "Microsoft Yahei", DengXian, "Apple SD Gothic Neo", "Source Han Sans K", "Source Han Sans KR", "Noto Sans CJK KR", "Malgun Gothic", sans-serif; +} /*# sourceMappingURL=bootstrap-style.css.map */ diff --git a/assets/css/bootstrap-style.scss b/assets/css/bootstrap-style.scss index 03443a0..61bae2e 100644 --- a/assets/css/bootstrap-style.scss +++ b/assets/css/bootstrap-style.scss @@ -1,3 +1,79 @@ +$font-fallback-serif: "Yu Mincho", + YuMincho, + "Hiragino Mincho ProN", + "Hiragino Mincho Pro", + "Source Han Serif", + "BIZ UDMincho Medium", + "Source Serif Pro", + "Source Serif", + "Noto Serif", + "Times New Roman", + "Georgia Pro", + Georgia, + Simsun, + PMingLiu, + AppleMyungjo, + "Source Han Serif K", + "Source Han Serif KR", + "Noto Serif KR", + Batang, + serif; + +$font-fallback-sans: YuGothic, + "Hiragino Kaku Gothic Pro", + Meiryo, + "Source Han Sans", + "Source Han Sans JP", + "Noto Sans CJK JP", + "Avenir Next", + Avenir, + "Source Sans", + "Noto Sans", + Roboto, + Verdana, + "Pingfang TC", + "Pingfang HK", + "Hiragino Sans CNS", + "Lantinghei TC", + "Source Han Sans TW", + "Source Han Sans HK", + "Noto Sans CJK TC", + "Microsoft JhengHei", + "Pingfang SC", + "Hiragino Sans GB", + "Lantinghei SC", + "Source Han Sans CN", + "Noto Sans CJK SC", + "Microsoft Yahei", + DengXian, + "Apple SD Gothic Neo", + "Source Han Sans K", + "Source Han Sans KR", + "Noto Sans CJK KR", + "Malgun Gothic", + sans-serif; + +$font-fallback-serif: "Yu Mincho", + YuMincho, + "Hiragino Mincho ProN", + "Hiragino Mincho Pro", + "Source Han Serif", + "BIZ UDMincho Medium", + "Source Serif Pro", + "Source Serif", + "Noto Serif", + "Times New Roman", + "Georgia Pro", + Georgia, + Simsun, + PMingLiu, + AppleMyungjo, + "Source Han Serif K", + "Source Han Serif KR", + "Noto Serif KR", + Batang, + serif; + /// Bootstrap limits grid-row-columns to 6 by default /// src: https://github.com/twbs/bootstrap/issues/36691 $grid-row-columns: 7; @@ -23,6 +99,8 @@ $custom-colors: ( "custom-color": #7aa2f7, "charcoal-surface1": #1f1f1f, "charcoal-surface2": #3a3a3a, + "beige": #f5f5dc, + "off-white": #fff8eb, ); $theme-colors: map-merge($theme-colors, $custom-colors); @@ -147,3 +225,49 @@ h6 { display: none !important; } } + +/// Novel preference setup +[data-font=mincho][data-font=jp] { + font-family: + "Source Han Serif JP", + "Noto Serif JP", + $font-fallback-serif; +} + +[data-font=mincho][data-font=zh-cn], +[data-font=mincho][data-font=zh-hans] { + font-family: + "Songti SC", + "Source Han Serif SC", + "Noto Serif SC", + "Source Han Serif CN", + $font-fallback-serif; +} + +// TODO: technically, zh-hk > zh-hant > zh +// Noto Sans have +// CJK HK +// CJK JP +// CJK KR +// CJK SC +// CJK TC + +[data-font=mincho][data-font=zh-tw], +[data-font=mincho][data-font=zh-hk], +[data-font=mincho][data-font=zh-hant] { + font-family: + "Songti TC", + "Source Han Serif TC", + "Noto Serif TC", + "Source Han Serif TW", + "Source Han Serif HK", + $font-fallback-serif; +} + +[data-font=mincho] { + font-family: $font-fallback-serif; +} + +[data-font=gothic] { + font-family: $font-fallback-sans; +} diff --git a/assets/views/novel.jet.html b/assets/views/novel.jet.html index 46d4e2d..1d18a88 100644 --- a/assets/views/novel.jet.html +++ b/assets/views/novel.jet.html @@ -1,10 +1,11 @@ {{- extends "layout/default" }} +{{- import "blocks/underlinenav" }} {{- block body() }}
-
+
@@ -92,11 +93,12 @@
+ {{- if .Novel.SeriesNavData }}
-
-

Series

+
+

Series

{{- range i,v := .NovelSeriesContentTitles }} {{- if v.ID == .Novel.ID }} @@ -114,48 +116,78 @@
-

Settings

-
-
- - -
-
- - -
-
- - -
-
+

Options

+ +
    +
  • +

    Font family

    +

    Choose the font style for displaying novels. This affects the readability and aesthetic of the text.

    +
    +
    + + +
    A serif font style that resembles traditional Japanese printing. It's often used for formal or literary content, providing a classic and elegant look.
    +
    +
    + + +
    A sans-serif font style that's clean and modern. It's commonly used for easy readability on digital screens, offering a contemporary appearance.
    +
    + + +
    +
    +
    • + +
  • +

    Force text orientation

    +

    Set the text orientation for novels. This affects how the text is displayed and read on the page.

    +
    +
    + + +
    Forces the text to be displayed horizontally, left-to-right. This is common for most languages and easier to read on smaller screens or for those more accustomed to Western text layouts.
    +
    +
    + + +
    Forces the text to be displayed vertically, top-to-bottom and right-to-left. This is traditional for some East Asian languages and can provide a unique reading experience, especially for longer texts.
    +
    +
    + + +
    Uses the original text orientation as set by the author on Pixiv. This is the default option and respects the intended layout of the novel.
    +
    + +
    +
    +
    • +
+
-
-
- {{- raw: renderNovel(.Novel.Content) }} +
+ + +
+

{{ .Novel.Title }}

+
+ + + +
+

+ {{- raw: renderNovel(.Novel.Content) }} +

+
+
@@ -163,8 +195,8 @@
{{- if .Novel.SeriesNavData }}
-
-

Series Navigation

+
+

Series Navigation

Series: {{ .Novel.SeriesNavData.Title }}

{{- if .Novel.SeriesNavData.Next }}

Next: #{{- .Novel.SeriesNavData.Next.Order }} {{ .Novel.SeriesNavData.Next.Title }}

@@ -179,7 +211,7 @@
-
+
{{ .User.Name }}