Turned variables into constants for generating global styles

This commit is contained in:
p11 2025-04-20 23:47:39 +02:00
parent 2ab6babf6e
commit 011a687c2c

View File

@ -79,7 +79,7 @@ fn generate_html(mut scenes: Vec<Markup>, sections: Vec<Markup>, choices: Markup
} }
fn global_styles() -> Markup { fn global_styles() -> Markup {
let base_styles = r" const BASE_STYLES: &str = r"
:root { :root {
--border-color: #3a3a3a; --border-color: #3a3a3a;
--box-shadow: 0 0.4vw 0.6vw rgba(0, 0, 0, 0.1); --box-shadow: 0 0.4vw 0.6vw rgba(0, 0, 0, 0.1);
@ -88,7 +88,7 @@ fn global_styles() -> Markup {
--border-radius: 1vw; --border-radius: 1vw;
}"; }";
let navigation = r" const NAVIGATION: &str = r"
.nav-controls { .nav-controls {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -112,13 +112,6 @@ fn global_styles() -> Markup {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.nav-button:hover {
background: #e0e0e0;
transform: scale(1.1);
}
.nav-button:active {
transform: scale(0.95);
}
#section-counter { #section-counter {
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
font-size: 0.9rem; font-size: 0.9rem;
@ -126,14 +119,21 @@ fn global_styles() -> Markup {
margin: 0 1rem; margin: 0 1rem;
padding: 0; padding: 0;
line-height: 1; line-height: 1;
}
.nav-button:hover {
background: #e0e0e0;
transform: scale(1.1);
}
.nav-button:active {
transform: scale(0.95);
}"; }";
let container_styles = r" const CONTAINER_STYLES: &str = r"
.textbox-container { .textbox-container {
width: 75%; width: 75%;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
padding-top: 42.1875%; /* 16:9 Aspect Ratio */ padding-top: 42.1875%;
background: #f8f8f8; background: #f8f8f8;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
@ -147,7 +147,7 @@ fn global_styles() -> Markup {
z-index: 1; z-index: 1;
}"; }";
let scene_styles = r" const SCENE_STYLES: &str = r"
.scene-section { .scene-section {
position: absolute; position: absolute;
top: 0; top: 0;
@ -178,7 +178,7 @@ fn global_styles() -> Markup {
transform: translateX(-50%); transform: translateX(-50%);
}"; }";
let textbox_styles = r" const TEXTBOX_STYLES: &str = r"
.textbox-content { .textbox-content {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -213,7 +213,7 @@ fn global_styles() -> Markup {
opacity: 0.5; opacity: 0.5;
}"; }";
let character_styles = r" const CHARACTER_STYLES: &str = r"
.character-name, .choice-name { .character-name, .choice-name {
font-family: 'Georgia', serif; font-family: 'Georgia', serif;
font-size: 1.8vw; font-size: 1.8vw;
@ -239,7 +239,7 @@ fn global_styles() -> Markup {
padding: 1vh 0.5vw; padding: 1vh 0.5vw;
}"; }";
let choice_styles = r" const CHOICE_STYLES: &str = r"
.choices-section { .choices-section {
position: absolute; position: absolute;
top: 0; top: 0;
@ -293,7 +293,7 @@ fn global_styles() -> Markup {
z-index: 1; z-index: 1;
}"; }";
let responsive = r" const RESPONSIVE: &str = r"
@media (max-width: 768px) { @media (max-width: 768px) {
.choice-name { .choice-name {
font-size: 1.2rem; font-size: 1.2rem;
@ -315,16 +315,11 @@ fn global_styles() -> Markup {
html! { html! {
style { style {
(maud::PreEscaped([ (maud::PreEscaped(
base_styles, [BASE_STYLES, NAVIGATION, CONTAINER_STYLES, SCENE_STYLES,
navigation, TEXTBOX_STYLES, CHARACTER_STYLES, CHOICE_STYLES, RESPONSIVE]
container_styles, .join("")
scene_styles, ))
textbox_styles,
character_styles,
choice_styles,
responsive
].join("")))
} }
} }
} }