diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/main.rs | 129 | ||||
| -rw-r--r-- | src/page.rs | 93 |
2 files changed, 119 insertions, 103 deletions
diff --git a/src/main.rs b/src/main.rs index 5882335..5879f83 100644 --- a/src/main.rs +++ b/src/main.rs @@ -25,13 +25,13 @@ impl page::Page for Data { let last_story = self.stories.first(); html!( @if let Some(story) = last_story { - div class="latest-story" { - h2 { "Latest Story" } + div class="latest-story" lang=(story.html_lang_value()) { + h2 lang="en" { "Latest Story" } h3 { (story.name) } p { (story.description) } - ul { + ul lang="en" { li { "Language: " (story.language) } li { a href=(&story.format_pdf_path()) download @@ -49,40 +49,41 @@ impl page::Page for Data { fn content_style() -> Markup { html!( """ - h2 { - font-size: 2.5rem; - color: #2F3C57; - text-decoration: 0.1rem solid underline black; - } +h2 { + font-size: 2.5rem; + color: #2F3C57; + text-decoration: 0.1rem solid underline black; +} - h3 { - font-size: 1.8rem; - color: #2F3C57; - padding: 2rem 0; - } +h3 { + font-size: 1.8rem; + color: #2F3C57; + padding: 2rem 0; +} - .latest-story { - padding: 3rem; - margin: 3rem; - text-align: left; - background-color: #FFD1A3; - * { - margin: 1rem 0; - } +.latest-story { + padding: 3rem; + margin: 3rem; + text-align: left; + background-color: #FFD1A3; + hyphens: auto; + * { + margin: 1rem 0; + } - p { - font-size: 1.2rem; - } - } + p { + font-size: 1.2rem; + } +} - a { - text-decoration: underline; - color: #3D1D49; - } +a { + text-decoration: underline; + color: #3D1D49; +} - ul { - list-style: none; - } +ul { + list-style: none; +} """ ) @@ -129,37 +130,38 @@ hr { .story-card { - text-align: left; - font-size: 1.2rem; - ul { - display: flex; - justify-content: start; - list-style: none; - flex-wrap: wrap; + text-align: left; + font-size: 1.2rem; + hyphens: auto; + ul { + display: flex; + justify-content: start; + list-style: none; + flex-wrap: wrap; + + li { + font-size: 1rem; + padding: 0.8rem; + margin: 0.8rem; + background-color: #2F3C57; + color: #ffd1a3; + outline: 0.2rem solid #2F3C57; - li { - font-size: 1rem; - padding: 0.8rem; - margin: 0.8rem; - background-color: #2F3C57; - color: #ffd1a3; - outline: 0.2rem solid #2F3C57; - - a { - text-decoration: underline #E1CCEB; - color: #E1CCEB; - } + a { + text-decoration: underline #E1CCEB; + color: #E1CCEB; } } + } - hr { - margin: 2rem 0; - } - padding: 3rem; - margin: 3rem; - background-color: #ffd1a3; - border-bottom: 0.1rem dotted black; + hr { + margin: 2rem 0; } + padding: 3rem; + margin: 3rem; + background-color: #ffd1a3; + border-bottom: 0.1rem dotted black; +} """ ) } @@ -189,12 +191,12 @@ struct Story { impl Story { fn render_as_card(&self) -> Markup { - html!(div class="story-card" { + html!(div class="story-card" lang=(self.html_lang_value()) { card { h2 { (self.name) } p { (self.description) } hr {} - ul { + ul lang="en" { li { "Language: " (self.language) } li { "Uploaded on: " (self.upload_date) } @if let Some(update_date) = self.update_date { @@ -219,6 +221,13 @@ impl Story { fn format_local_pdf_path(&self) -> String { format!("dist/{}", self.format_pdf_path()) } + + fn html_lang_value(&self) -> String { + match self.language { + StoryLanguage::German => String::from("de"), + StoryLanguage::English => String::from("en"), + } + } } fn main() -> Result<()> { diff --git a/src/page.rs b/src/page.rs index e473c4d..ca6abcc 100644 --- a/src/page.rs +++ b/src/page.rs @@ -55,61 +55,68 @@ pub trait Page: Sized { fn main_style() -> Markup { html!(""" - * { - padding: 0; - margin: 0; - } +* { + padding: 0; + margin: 0; +} - h1 { - padding: 0.3rem; - letter-spacing: 0.8rem; - font-size: 1.5rem; - color: #2F3C57; - display: flex; - justify-content: center; - align-items: center; - gap: 2rem; - } +h1 { + padding: 0.3rem; + letter-spacing: 0.8rem; + font-size: 1.5rem; + color: #2F3C57; + display: flex; + justify-content: center; + align-items: center; + gap: 2rem; +} - - body { - margin: 2rem 1rem; - background-color: #ffc994; - text-align: center; - } - .navbar { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0 3rem; - } +body { + margin: 2rem 1rem; + background-color: #ffc994; + text-align: center; +} - header { - display: flex; - align-items: center; - a { - margin: 0 1rem; - } +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 3rem; +} + +header { + display: flex; + align-items: center; + a { + margin: 0 1rem; } +} - nav { - display: flex; - justify-content: space-around; - width: 50%; +nav { + display: flex; + justify-content: space-around; + width: 50%; - a { - text-decoration: none; - color: #2F3C57; + a { + text-decoration: none; + color: #2F3C57; - &:hover { - text-decoration: underline; - } + &:hover { + text-decoration: underline; } } +} +@media (max-width: 800px) { + nav a:first-child { + display: none; + } - + header h1 { + display: none; + } +} """ ) } |