From fee81f47cec62b568fce0ae17bc02bb948465a80 Mon Sep 17 00:00:00 2001 From: RGBCube Date: Fri, 5 Jan 2024 23:01:21 +0300 Subject: [PATCH] Improve CSS a little bit and add proper page titles --- src/errors/internal_server_error/mod.rs | 1 + src/errors/not_found/mod.rs | 1 + src/errors/not_found/not-found.css | 6 ++- src/page/cube/cube.css | 24 ++++------ src/page/cube/mod.rs | 3 +- src/page/mod.rs | 21 ++++++++- src/page/page.css | 20 +++++++- src/page/text/mod.rs | 32 ++++++++----- src/page/text/text.css | 39 +++++++++++++++ src/routes/about.rs | 63 +++++++++++++++++++++++++ src/routes/index/index.css | 6 ++- src/routes/index/mod.rs | 1 + src/routes/mod.rs | 4 +- 13 files changed, 184 insertions(+), 37 deletions(-) create mode 100644 src/routes/about.rs diff --git a/src/errors/internal_server_error/mod.rs b/src/errors/internal_server_error/mod.rs index 703011c..b6a7ecb 100644 --- a/src/errors/internal_server_error/mod.rs +++ b/src/errors/internal_server_error/mod.rs @@ -18,6 +18,7 @@ pub fn handler( let response = response.set_body( cube::create( + Some("Error"), asset::Css::Shared("not-found.css"), array::from_fn(|_| { (html! { diff --git a/src/errors/not_found/mod.rs b/src/errors/not_found/mod.rs index 1d20407..7b5b6d4 100644 --- a/src/errors/not_found/mod.rs +++ b/src/errors/not_found/mod.rs @@ -18,6 +18,7 @@ pub fn handler( let response = response.set_body( cube::create( + Some("404"), asset::Css::Shared("not-found.css"), array::from_fn(|_| { (html! { diff --git a/src/errors/not_found/not-found.css b/src/errors/not_found/not-found.css index 92ab48d..0c4845a 100644 --- a/src/errors/not_found/not-found.css +++ b/src/errors/not_found/not-found.css @@ -1,8 +1,12 @@ +html { + font-weight: bold; +} + .face { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); - box-shadow: 0 0 10px #AAAAAA; + box-shadow: 0 0 10px whitesmoke; } .square { diff --git a/src/page/cube/cube.css b/src/page/cube/cube.css index 0629d17..63bd393 100644 --- a/src/page/cube/cube.css +++ b/src/page/cube/cube.css @@ -1,9 +1,3 @@ -body, -html { - height: 100%; - margin: 0; -} - html { font-size: 450%; overscroll-behavior: none; @@ -22,14 +16,17 @@ html { } a { - /* Black on a white background */ - color: #000000; - font-weight: bold; - text-decoration-line: none; + /* Black on a white background. */ + color: black; +} + +a:hover { + /* The frame changes color only. */ + color: black; } .frame { - background-color: #FFFFFF; + background-color: white; width: min-content; @@ -61,9 +58,6 @@ a { } .face { - background-size: cover; - background-position: center; - width: 5em; height: 5em; @@ -98,4 +92,4 @@ a { .left { transform: rotateY(-89.99999999999999deg) translateZ(2.498em); -} +} \ No newline at end of file diff --git a/src/page/cube/mod.rs b/src/page/cube/mod.rs index 1755b5e..11da31a 100644 --- a/src/page/cube/mod.rs +++ b/src/page/cube/mod.rs @@ -12,8 +12,9 @@ use crate::{ /// order of the faces are as so: /// /// front, top, back, bottom, right, left. -pub fn create(css: Css, faces: [Markup; 6]) -> Markup { +pub fn create(title: Option<&str>, css: Css, faces: [Markup; 6]) -> Markup { crate::page::create( + title, html! { (asset::Css::Shared("cube.css")) (css) diff --git a/src/page/mod.rs b/src/page/mod.rs index 8406977..6372ed2 100644 --- a/src/page/mod.rs +++ b/src/page/mod.rs @@ -30,12 +30,23 @@ pub enum Page { Other, } +impl Page { + pub fn as_str(self) -> &'static str { + match self { + Self::Home => "home", + Self::About => "about", + Self::Blog => "blog", + Self::Contact => "contact", + Self::Other => "other", + } + } +} /// Creates a page with the given head and body. /// /// This is the most low level function for page creation /// as all pages use this, as this function provides the /// page title, OpenGraph and other information. -pub fn create(head: Markup, body: Markup) -> Markup { +pub fn create(title: Option<&str>, head: Markup, body: Markup) -> Markup { html! { (DOCTYPE) @@ -47,7 +58,13 @@ pub fn create(head: Markup, body: Markup) -> Markup { @let name = &MANIFEST.package.as_ref().unwrap().authors()[0]; - title { (name) } + title { ({ + if let Some(title) = title { + format!("{title} - {name}") + } else { + name.clone() + } + }) } (pname("author", name)) (property("og:site_name", name)) diff --git a/src/page/page.css b/src/page/page.css index fcc5eb9..73a2177 100644 --- a/src/page/page.css +++ b/src/page/page.css @@ -13,7 +13,23 @@ } html { - background-color: #000000; - color: #FFFFFF; + background-color: black; + color: white; font-family: "BaiJam"; } + +body, +html { + height: 100%; + margin: 0; +} + +a { + color: yellow; + font-weight: bold; + text-decoration-line: none; +} + +a:hover { + font-style: italic; +} \ No newline at end of file diff --git a/src/page/text/mod.rs b/src/page/text/mod.rs index 0a2bcd8..134c968 100644 --- a/src/page/text/mod.rs +++ b/src/page/text/mod.rs @@ -14,26 +14,32 @@ use crate::page::{ }; /// Creates a simple text page. -pub fn create(page: Page, title: &str, body: Markup) -> Markup { +pub fn create(title: Option<&str>, page: Page, body: Markup) -> Markup { crate::page::create( + title, html! { (asset::Css::Shared("text.css")) + (asset::Css::Owned(format!(r" + .{page} {{ + font-style: italic !important; + }} + ", page = page.as_str()))) }, html! { - nav { - a href="/" { "HOME" } - a href="/about" { "ABOUT" } - a href="/blog" { "BLOG" } - a href="/contact" { "CONTACT" } + .not-flex { + nav { + a.home href="/" { "HOME" } + a.about href="/about" { "ABOUT" } + a.blog href="/blog" { "BLOG" } + a.contact href="/contact" { "CONTACT" } + } - span.title { (title) } - } + (body) - (body) - - footer { - "Served by " - (env::current_exe().unwrap_or_else(|_| PathBuf::from("asd")).display()) + footer { + "Served by " + (env::current_exe().unwrap_or_else(|_| PathBuf::from("the toaster in my bathtub")).display()) + } } }, ) diff --git a/src/page/text/text.css b/src/page/text/text.css index e69de29..e73dd6d 100644 --- a/src/page/text/text.css +++ b/src/page/text/text.css @@ -0,0 +1,39 @@ +html, +body { + width: 100%; + height: 100%; + + display: flex; + justify-content: center; +} + +.not-flex { + display: block; + width: min(100vh, 80em); + + margin: 0 1em; +} + +nav { + font-size: 150%; + + background-color: white; + padding: .3em .6em; + + border-bottom-left-radius: 1em; + border-bottom-right-radius: 1em; +} + +nav a { + color: black; + font-style: normal; + margin-right: .6em; +} + +nav a:last-child { + margin-right: 0; +} + +footer { + margin-bottom: 3em; +} \ No newline at end of file diff --git a/src/routes/about.rs b/src/routes/about.rs new file mode 100644 index 0000000..e46dbf6 --- /dev/null +++ b/src/routes/about.rs @@ -0,0 +1,63 @@ +use actix_web::get; +use maud::{ + html, + Markup, +}; + +use crate::page::{ + text, + Page, +}; + +#[get("/about")] +pub async fn handler() -> actix_web::Result { + Ok(text::create( + Some("About"), + Page::About, + html! { + h1 { "Lorem Ipsum" } + p { + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget justo nec libero finibus facilisis. Curabitur fermentum quam et neque faucibus, nec pharetra nunc hendrerit." + } + h2 { "Section 1" } + p { + "Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec auctor velit id lectus vehicula molestie." + } + h3 { "Subsection 1.1" } + p { + "Nullam mollis nunc non nisl fermentum, a varius eros viverra. Fusce condimentum felis vitae nibh vehicula, a tincidunt ipsum eleifend." + } + h2 { "Section 2" } + p { + "Phasellus euismod eros a elit volutpat, sed volutpat eros placerat. Sed dictum est et metus consectetur, quis fringilla nunc venenatis." + } + h3 { "Subsection 2.1" } + p { + "Integer ac libero id nisi posuere bibendum. Vivamus ut enim auctor, scelerisque quam a, fermentum ligula." + } + h3 { "Subsection 2.2" } + p { + "Morbi ut ex vel odio congue lobortis sit amet vel lacus. Duis rhoncus risus eget justo tincidunt vehicula." + } + h2 { "Section 3" } + p { + "Etiam quis sapien quis lacus malesuada vestibulum. Nam bibendum risus sed dui maximus, sed posuere lorem ultricies." + } + h3 { "Subsection 3.1" } + p { + "Cras interdum arcu at dolor dictum, a posuere urna aliquam. Vestibulum nec tortor nec nunc cursus lobortis sit amet a arcu." + } + h3 { "Subsection 3.2" } + p { + "Nunc auctor mauris quis lacus molestie lobortis. Vivamus eu sapien vel ligula congue convallis." + } + p { + a href="#" { "Link 1" } + " | " + a href="#" { "Link 2" } + " | " + a href="#" { "Link 3" } + } + }, + )) +} diff --git a/src/routes/index/index.css b/src/routes/index/index.css index 68ae63f..6131dc0 100644 --- a/src/routes/index/index.css +++ b/src/routes/index/index.css @@ -1,5 +1,9 @@ +a:hover { + font-style: normal; +} + .frame:hover { - background-color: #FFFF00; + background-color: yellow; } .face::after { diff --git a/src/routes/index/mod.rs b/src/routes/index/mod.rs index 89b443a..5daf77e 100644 --- a/src/routes/index/mod.rs +++ b/src/routes/index/mod.rs @@ -12,6 +12,7 @@ use crate::{ #[get("/")] pub async fn handler() -> actix_web::Result { Ok(cube::create( + None, asset::css::owned!("index.css"), [ html! { diff --git a/src/routes/mod.rs b/src/routes/mod.rs index b38c8d2..6b4bdcf 100644 --- a/src/routes/mod.rs +++ b/src/routes/mod.rs @@ -1,4 +1,4 @@ -// mod about; +mod about; mod assets; mod index; @@ -10,6 +10,6 @@ use actix_web::{ pub fn handler() -> Scope { web::scope("") .service(index::handler) - // .service(about::handler) + .service(about::handler) .service(assets::handler) }