Generalized global style

src/vn.rs

@@ -79,9 +79,16 @@ fn generate_html(mut scenes: Vec<Markup>, sections: Vec<Markup>, choices: Markup
 }
 
 fn global_styles() -> Markup {
-    html! {
+    let base_styles = r"
-        style {
+        :root {
-            (maud::PreEscaped(r"
+            --border-color: #3a3a3a;
+            --box-shadow: 0 0.4vw 0.6vw rgba(0, 0, 0, 0.1);
+            --character-bg: #4a6b8a;
+            --transition-duration: 0.2s;
+            --border-radius: 1vw;
+        }";
+
+    let navigation = r"
         .nav-controls {
             display: flex;
             justify-content: center;
@@ -90,7 +97,6 @@ fn global_styles() -> Markup {
             margin: 2rem 0;
             padding: 1rem 0;
         }
-
         .nav-button {
             width: 2.5rem;
             height: 2.5rem;
@@ -102,11 +108,17 @@ fn global_styles() -> Markup {
             display: flex;
             align-items: center;
             justify-content: center;
-                    transition: all 0.2s ease;
+            transition: all var(--transition-duration) ease;
             margin: 0;
             padding: 0;
         }
-
+        .nav-button:hover {
+            background: #e0e0e0;
+            transform: scale(1.1);
+        }
+        .nav-button:active {
+            transform: scale(0.95);
+        }
         #section-counter {
             font-family: system-ui, sans-serif;
             font-size: 0.9rem;
@@ -114,17 +126,9 @@ fn global_styles() -> Markup {
             margin: 0 1rem;
             padding: 0;
             line-height: 1;
-                }
+        }";
-
-                .nav-button:hover {
-                    background: #e0e0e0;
-                    transform: scale(1.1);
-                }
-
-                .nav-button:active {
-                    transform: scale(0.95);
-                }
 
+    let container_styles = r"
         .textbox-container {
             width: 75%;
             margin: 0 auto;
@@ -134,7 +138,6 @@ fn global_styles() -> Markup {
             border-radius: 8px;
             overflow: hidden;
         }
-
         .scene-container {
             position: absolute;
             top: 0;
@@ -142,15 +145,9 @@ fn global_styles() -> Markup {
             right: 0;
             bottom: 0;
             z-index: 1;
-                }
+        }";
-
-                .scene-content {
-                    width: 100%;
-                    height: 100%;
-                    position: relative;
-                    overflow: hidden;
-                }
 
+    let scene_styles = r"
         .scene-section {
             position: absolute;
             top: 0;
@@ -160,13 +157,17 @@ fn global_styles() -> Markup {
             display: none;
             aspect-ratio: 16/9;
         }
-
         .scene-section[style*='block'] {
             display: flex !important;
             align-items: center;
             justify-content: center;
         }
-
+        .scene-content {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            overflow: hidden;
+        }
         .scene-section img {
             height: 100%;
             width: auto;
@@ -175,8 +176,9 @@ fn global_styles() -> Markup {
             top: 0;
             left: 50%;
             transform: translateX(-50%);
-                }
+        }";
 
+    let textbox_styles = r"
         .textbox-content {
             position: absolute;
             bottom: 0;
@@ -186,14 +188,13 @@ fn global_styles() -> Markup {
             background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 30%);
             padding: 2rem;
         }
-
         .visual-novel-box {
-                    border: 0.2vw solid #3a3a3a;
+            border: 0.2vw solid var(--border-color);
-                    border-radius: 1vw;
+            border-radius: var(--border-radius);
             padding: 2vw;
             margin: 1vh 0;
             background: rgba(255, 255, 255, 0.9);
-                    box-shadow: 0 0.4vw 0.6vw rgba(0, 0, 0, 0.1);
+            box-shadow: var(--box-shadow);
             width: 90%;
             min-width: 85%;
             font-size: 1.6vw;
@@ -202,30 +203,6 @@ fn global_styles() -> Markup {
             left: 50%;
             transform: translateX(-50%);
         }
-
-                .character-name {
-                    font-family: 'Georgia', serif;
-                    font-size: 1.8vw;
-                    font-weight: bold;
-                    padding: 0 1.5vw;
-                    background: #4a6b8a;
-                    color: white;
-                    border-radius: 0.5vw;
-                    margin: 0;
-                    transform: translateY(-60%);
-                    position: absolute;
-                    top: 0;
-                    left: 1vw;
-                }
-
-                .dialog-content {
-                    font-size: 1.6vw;
-                    line-height: 1.4;
-                    max-height: 20vh;
-                    overflow-y: auto;
-                    padding: 1vh 0.5vw;
-                }
-
         .visual-novel-box::after {
             content: '';
             position: absolute;
@@ -234,8 +211,35 @@ fn global_styles() -> Markup {
             width: 20px;
             height: 20px;
             opacity: 0.5;
-                }
+        }";
 
+    let character_styles = r"
+        .character-name, .choice-name {
+            font-family: 'Georgia', serif;
+            font-size: 1.8vw;
+            font-weight: bold;
+            padding: 0 1.5vw;
+            background: var(--character-bg);
+            color: white;
+            border-radius: 0.5vw;
+            margin: 0;
+            transform: translateY(-60%);
+            width: max-content;
+        }
+        .character-name {
+            position: absolute;
+            top: 0;
+            left: 1vw;
+        }
+        .dialog-content {
+            font-size: 1.6vw;
+            line-height: 1.4;
+            max-height: 20vh;
+            overflow-y: auto;
+            padding: 1vh 0.5vw;
+        }";
+
+    let choice_styles = r"
         .choices-section {
             position: absolute;
             top: 0;
@@ -250,63 +254,27 @@ fn global_styles() -> Markup {
             flex-direction: column;
             align-items: center;
         }
-
+        .choice-box {
+            width: 90%;
+            min-width: 85%;
+            border: 0.2vw solid var(--border-color);
+            border-radius: var(--border-radius);
+            padding: 2vw;
+            margin: 1vh auto;
+            background: rgba(255, 255, 255, 0.9);
+            box-shadow: var(--box-shadow);
+            position: relative;
+            transform: translateX(-50%);
+            left: 50%;
+            transition: all var(--transition-duration) ease;
+        }
         .choice-box:hover {
             transform: translateX(-50%) translateY(-0.5vh);
             box-shadow: 0 0.6vw 0.8vw rgba(0, 0, 0, 0.15);
         }
-
-                .choices-section input[type='submit'] {
-                    width: 100%;
-                    padding: 1rem;
-                    border: none;
-                    background: none;
-                    cursor: pointer;
-                    font-size: 1.1rem;
-                    text-align: left;
-                }
-
-                .choice-name {
-                    font-family: 'Georgia', serif;
-                    font-size: 1.8vw;
-                    font-weight: bold;
-                    padding: 0 1.5vw;
-                    background: #4a6b8a;
-                    color: white;
-                    border-radius: 0.5vw;
-                    margin: -1.2vw 0 1vw 0;
-                    transform: translateY(-60%);
-                    position: relative;
-                    z-index: 1;
-                    width: max-content;
-                }
-
-                .choice-box {
-                    width: 90%;
-                    min-width: 85%;
-                    border: 0.2vw solid #3a3a3a;
-                    border-radius: 1vw;
-                    padding: 2vw;
-                    margin: 1vh auto;
-                    background: rgba(255, 255, 255, 0.9);
-                    box-shadow: 0 0.4vw 0.6vw rgba(0, 0, 0, 0.1);
-                    position: relative;
-                    transform: translateX(-50%);
-                    left: 50%;
-                }
-
-                @media (max-width: 768px) {
-                    .choice-name {
-                        font-size: 1.2rem;
-                        margin: -1rem 0 0.8rem 0;
-                        transform: translateY(-40%);
-                    }
-                }
-
         .choice-box:has(.choice-name) {
             padding-top: 2.5vw;
         }
-
         .choice-button {
             width: 100%;
             background: none;
@@ -319,23 +287,44 @@ fn global_styles() -> Markup {
             text-align: left;
             font-family: inherit;
         }
+        .choice-name {
+            margin: -1.2vw 0 1vw 0;
+            position: relative;
+            z-index: 1;
+        }";
 
+    let responsive = r"
         @media (max-width: 768px) {
+            .choice-name {
+                font-size: 1.2rem;
+                margin: -1rem 0 0.8rem 0;
+                transform: translateY(-40%);
+            }
             .choices-section {
                 padding: 1rem;
             }
-
             .choice-box {
                 width: 95%;
                 padding: 3vw;
             }
-
             .choice-button {
                 font-size: 1.2rem;
                 padding: 1rem;
             }
-                }
+        }";
-            "))
+
+    html! {
+        style {
+            (maud::PreEscaped([
+                base_styles,
+                navigation,
+                container_styles,
+                scene_styles,
+                textbox_styles,
+                character_styles,
+                choice_styles,
+                responsive
+            ].join("")))
         }
     }
 }