Improve CSS a little bit and add proper page titles

src/errors/internal_server_error/mod.rs

@@ -18,6 +18,7 @@ pub fn handler<B: 'static>(
 
     let response = response.set_body(
         cube::create(
+            Some("Error"),
             asset::Css::Shared("not-found.css"),
             array::from_fn(|_| {
                 (html! {

src/errors/not_found/mod.rs

@@ -18,6 +18,7 @@ pub fn handler<B: 'static>(
 
     let response = response.set_body(
         cube::create(
+            Some("404"),
             asset::Css::Shared("not-found.css"),
             array::from_fn(|_| {
                 (html! {

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 {

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 */
+  /* Black on a white background. */
-  color: #000000;
+  color: black;
-  font-weight: bold;
+}
-  text-decoration-line: none;
+
+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);
-}
+}

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)

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))

src/page/page.css

@@ -13,7 +13,23 @@
 }
 
 html {
-  background-color: #000000;
+  background-color: black;
-  color: #FFFFFF;
+  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;
+}

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 {
+            .not-flex {
-                a href="/" { "HOME" }
+                nav {
-                a href="/about" { "ABOUT" }
+                    a.home href="/" { "HOME" }
-                a href="/blog" { "BLOG" }
+                    a.about href="/about" { "ABOUT" }
-                a href="/contact" { "CONTACT" }
+                    a.blog href="/blog" { "BLOG" }
+                    a.contact href="/contact" { "CONTACT" }
+                }
 
-                span.title { (title) }
+                (body)
-            }
 
-            (body)
+                footer {
-
+                    "Served by "
-            footer {
+                    (env::current_exe().unwrap_or_else(|_| PathBuf::from("the toaster in my bathtub")).display())
-                "Served by "
+                }
-                (env::current_exe().unwrap_or_else(|_| PathBuf::from("asd")).display())
             }
         },
     )

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;
+}

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<Markup> {
+    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" }
+            }
+        },
+    ))
+}

src/routes/index/index.css

@@ -1,5 +1,9 @@
+a:hover {
+  font-style: normal;
+}
+
 .frame:hover {
-  background-color: #FFFF00;
+  background-color: yellow;
 }
 
 .face::after {

src/routes/index/mod.rs

@@ -12,6 +12,7 @@ use crate::{
 #[get("/")]
 pub async fn handler() -> actix_web::Result<Markup> {
     Ok(cube::create(
+        None,
         asset::css::owned!("index.css"),
         [
             html! {

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)
 }