Turned variables into constants for generating global styles
This commit is contained in:
parent
2ab6babf6e
commit
011a687c2c
47
src/vn.rs
47
src/vn.rs
@ -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("")))
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user