novel refine wip

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 */

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;
+}

assets/views/novel.jet.html

@@ -1,10 +1,11 @@
 {{- extends "layout/default" }}
+{{- import "blocks/underlinenav" }}
 {{- block body() }}
 <div class="row justify-content-center g-4">
 
   <div class="col-12 col-lg-9">
     <div class="custom-card">
-      <div class="card-body bg-charcoal-surface1 rounded-5 p-4">
+      <div class="custom-card-body bg-charcoal-surface1 p-4">
         <div class="row g-4">
           <div class="col-12 col-md-4">
             <!-- Cover art -->
@@ -92,11 +93,12 @@
     </div>
   </div>
 
+  <!-- Series navigation, if present -->
   {{- if .Novel.SeriesNavData }}
   <div class="col-12 col-lg-9">
     <div class="custom-card">
-      <div class="card-body bg-charcoal-surface1 rounded-5 p-4">
-        <h3 class="mb-3">Series</h3>
+      <div class="custom-card-body bg-charcoal-surface1 p-4">
+        <h2>Series</h2>
         <div class="list-group">
           {{- range i,v := .NovelSeriesContentTitles }}
             {{- if v.ID == .Novel.ID  }}
@@ -114,48 +116,78 @@
   <div class="col-12 col-lg-9">
     <div class="custom-card">
       <div class="custom-card-body bg-charcoal-surface1 p-4">
-        <h3 class="mb-3">Settings</h3>
-        <div class="d-flex justify-content-start align-items-center">
-          <div class="dropdown me-3">
-            <button class="custom-btn-secondary bg-charcoal-surface2 dropdown-toggle" type="button" id="fontTypeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
-              <i class="bi bi-fonts me-2"></i>Font Type
-            </button>
-            <ul class="dropdown-menu" aria-labelledby="fontTypeDropdown">
-              <li><a class="dropdown-item" href="/settings/novelFontType?font-type=gothic">Gothic</a></li>
-              <li><a class="dropdown-item" href="/settings/novelFontType?font-type=mincho">Mincho</a></li>
-            </ul>
-          </div>
-          <div class="dropdown me-3">
-            <button class="custom-btn-secondary bg-charcoal-surface2 dropdown-toggle" type="button" id="fontSizeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
-              <i class="bi bi-text-size me-2"></i>Font Size
-            </button>
-            <ul class="dropdown-menu" aria-labelledby="fontSizeDropdown">
-              <li><a class="dropdown-item" href="#">Small</a></li>
-              <li><a class="dropdown-item" href="#">Medium</a></li>
-              <li><a class="dropdown-item" href="#">Large</a></li>
-            </ul>
-          </div>
-          <div class="dropdown">
-            <button class="custom-btn-secondary bg-charcoal-surface2 dropdown-toggle" type="button" id="viewModeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
-              <i class="bi bi-layout-text-window-reverse me-2"></i>View Mode
-            </button>
-            <ul class="dropdown-menu" aria-labelledby="viewModeDropdown">
-              <li><a class="dropdown-item" href="/settings/novelViewMode?view-mode=1">Horizontal</a></li>
-              <li><a class="dropdown-item" href="/settings/novelViewMode?view-mode=2">Vertical</a></li>
-              <li><a class="dropdown-item" href="/settings/novelViewMode?view-mode=">Don't force</a></li>
-            </ul>
-          </div>
-        </div>
+        <h2><i class="bi bi-gear-fill me-2"></i>Options</h2>
+
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item bg-charcoal-surface1 pt-0 pb-4 px-0">
+            <h3>Font family</h3>
+            <p>Choose the font style for displaying novels. This affects the readability and aesthetic of the text.</p>
+            <form id="novel-font-form" hx-post="/settings/novelFontType" hx-target="#novel-font-response" hx-swap="outerHTML">
+              <div class="form-check mb-3">
+                <input class="form-check-input" type="radio" name="font-type" id="font-type-mincho" value="mincho" />
+                <label class="form-check-label fw-bold" for="font-type-mincho">Mincho</label>
+                <div id="font-type-mincho-help" class="form-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.</div>
+              </div>
+              <div class="form-check mb-3">
+                <input class="form-check-input" type="radio" name="font-type" id="font-type-gothic" value="gothic" checked />
+                <label class="form-check-label fw-bold" for="font-type-gothic">Gothic</label>
+                <div id="font-type-gothic-help" class="form-text">A sans-serif font style that's clean and modern. It's commonly used for easy readability on digital screens, offering a contemporary appearance.</div>
+              </div>
+
+              <button type="submit" class="custom-btn-secondary bg-charcoal-surface2">Save</button>
+            </form>
+            <div id="novel-font-response"></div>
+          </li>
+
+          <li class="list-group-item bg-charcoal-surface1 pt-4 pb-0 px-0">
+            <h3>Force text orientation</h3>
+            <p>Set the text orientation for novels. This affects how the text is displayed and read on the page.</p>
+            <form id="novel-view-mode-form" hx-post="/settings/novelViewMode" hx-target="#novel-view-mode-response" hx-swap="outerHTML">
+              <div class="form-check mb-3">
+                <input class="form-check-input" type="radio" name="view-mode" id="tx-ori-h" value="1" />
+                <label class="form-check-label fw-bold" for="tx-ori-h">Horizontal</label>
+                <div id="tx-ori-h-help" class="form-text">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.</div>
+              </div>
+              <div class="form-check mb-3">
+                <input class="form-check-input" type="radio" name="view-mode" id="tx-ori-v" value="2" />
+                <label class="form-check-label fw-bold" for="tx-ori-v">Vertical</label>
+                <div id="tx-ori-v-help" class="form-text">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.</div>
+              </div>
+              <div class="form-check mb-3">
+                <input class="form-check-input" type="radio" name="view-mode" id="tx-ori-n" value="" checked />
+                <label class="form-check-label fw-bold" for="tx-ori-n">Don't force (default from Pixiv)</label>
+                <div id="tx-ori-n-help" class="form-text">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.</div>
+              </div>
+              <button type="submit" class="custom-btn-secondary bg-charcoal-surface2">Save</button>
+            </form>
+            <div id="novel-view-mode-response"></div>
+          </li>
+        </ul>
+
       </div>
     </div>
   </div>
 
   <div class="col-12 col-lg-9">
     <div class="custom-card">
-      <div class="card-body bg-charcoal-surface1 rounded-5 p-4">
-        <div id="content" data-font="{{ .FontType }}" data-lang="{{ .Language }}" data-view="{{ .ViewMode }}">
-          {{- raw: renderNovel(.Novel.Content) }}
+      <div class="custom-card-body bg-charcoal-surface1 p-4">
+
+        <!-- The novel title and settings button -->
+        <div class="d-flex flex-row align-items-center justify-content-between mb-4" aria-label="Ranking options">
+          <h2 class="mb-0">{{ .Novel.Title }}</h2>
+          <button class="js-required custom-btn-secondary bg-charcoal-surface2" type="button" data-bs-toggle="modal" data-bs-target="#NovelOptionsModal">
+            <i class="bi bi-gear-fill me-2"></i>Options
+          </button>
         </div>
+
+        <!-- The actual novel itself -->
+        <!-- TODO: make background color configurable (need to update backend source files etc) -->
+        <div id="content" class="card-body bg-off-white text-dark rounded">
+          <p data-font="{{ .FontType }}" data-lang="{{ .Language }}" data-view="{{ .ViewMode }}">
+            {{- raw: renderNovel(.Novel.Content) }}
+          </p>
+        </div>
+
       </div>
     </div>
   </div>
@@ -163,8 +195,8 @@
   <div class="col-12 col-lg-9">
     {{- if .Novel.SeriesNavData }}
     <div class="custom-card">
-      <div class="card-body bg-charcoal-surface1 rounded-5 p-4">
-        <h3 class="mb-3">Series Navigation</h3>
+      <div class="custom-card-body bg-charcoal-surface1 p-4">
+        <h2>Series Navigation</h2>
         <p>Series: <a href="/novel/series/{{ .Novel.SeriesNavData.SeriesID }}" class="text-decoration-none">{{ .Novel.SeriesNavData.Title }}</a></p>
         {{- if .Novel.SeriesNavData.Next }}
         <p>Next: <a href="/novel/{{.Novel.SeriesNavData.Next.ID}}" class="text-decoration-none">#{{- .Novel.SeriesNavData.Next.Order }} {{ .Novel.SeriesNavData.Next.Title }}</a></p>
@@ -179,7 +211,7 @@
 
   <div class="col-12 col-lg-9">
     <div class="custom-card">
-      <div class="card-body bg-charcoal-surface1 rounded-5 p-4">
+      <div class="custom-card-body bg-charcoal-surface1 p-4">
         <div class="d-flex align-items-center">
           <a href="/users/{{ .User.ID }}" class="me-3">
             <img src="{{ .User.Avatar }}" alt="{{ .User.Name }}" class="rounded-circle" style="width: 64px; height: 64px;" />