Add site footer

Add site footer to default template

server/src/client/assets/css/style.css

@@ -119,6 +119,28 @@ ul {
 a {
     color: unset;
     text-decoration: unset;
+
+    &:not(:has(time)):is([href^="http"], [href^="mailto"]) {
+        padding-inline-end: 0.9em;
+
+        &::after {
+            transition: all 0.3s ease;
+            position: absolute;
+            content: '';
+            display: inline-block;
+            width: 1em;
+            height: 1em;
+            margin-inline-start: -0.05em;
+            background-size: 100%;
+            transform: scale(0.8);
+            background-image: url("/assets/images/external.svg");
+        }
+
+        &:is(:hover, :active, :focus-visible)::after {
+            filter: invert(100%);
+        }
+
+    }
 }
 
 form {
@@ -135,7 +157,7 @@ input {
     margin: 0;
 }
 
-input:is([type="text"], [type="password"], [type="search"]) {
+input:is([type="text"], [type="password"], [type="search"], [type="email"], ) {
     padding: 0.5ch 1ch;
 
     &:focus,
@@ -347,7 +369,60 @@ header {
 
 }
 
+footer {
+    border-block-start: var(--border);
+    display: flex;
+    min-block-size: calc(var(--header-size) * 2.5);
+    padding: 1rem;
+    gap: 2rem;
+    flex-direction: column;
+    align-items: start;
+    justify-content: start;
+
+    &>* {
+        max-inline-size: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: start;
+    }
+
+    line-height: 1.6em;
+
+    form {
+        display: flex;
+        flex-direction: column;
+
+        & div {
+            display: flex;
+            max-inline-size: 100%;
+
+            &>* {
+                min-inline-size: 0;
+            }
+
+            input[type="submit"] {
+                min-inline-size: min-content;
+            }
+        }
+
+    }
+
+    h1,
+    ul {
+        margin-block: 0 1rem;
+    }
+
+    p,
+    li,
+    input {
+        margin-block: 0.3rem;
+    }
+
+
+}
+
 main {
+    min-block-size: 100svb;
     margin-block: var(--default-padding) 40svb;
     margin-inline: auto;
     max-inline-size: min(60ch, 80%);
@@ -422,6 +497,15 @@ main {
         }
     }
 
+    footer {
+        flex-direction: row;
+
+        &>* {
+            max-inline-size: 40ch;
+            min-inline-size: 30ch;
+        }
+    }
+
     main {
         margin-block: var(--default-padding);
     }

server/src/client/assets/images/external.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M 5 5 L 5 27 L 27 27 L 27 5 Z M 7 7 L 25 7 L 25 25 L 7 25 Z M 13 10 L 13 12 L 18.5625 12 L 9.28125 21.28125 L 10.71875 22.71875 L 20 13.4375 L 20 19 L 22 19 L 22 10 Z"/></svg>

server/src/html.rs

@@ -72,6 +72,12 @@ where
                     }
                     Ok(())
                 }),
+                element!("site-footer", |site_footer| {
+                    if settings.site_footer {
+                        site_footer.replace(template!("site-footer"), ContentType::Html);
+                    }
+                    Ok(())
+                }),
                 element!("br", |br| {
                     br.remove();
                     Ok(())
@@ -187,7 +193,7 @@ where
     .unwrap_or_default();
     make_page(
         html,
-        PageSettings::new("Editor", Some(vec!["/assets/css/editor.css"]), true),
+        PageSettings::new("Editor", Some(vec!["/assets/css/editor.css"]), true, false),
     )
 }
 
@@ -229,7 +235,7 @@ pub(crate) fn login_status(next: &str, success: bool) -> String {
     .unwrap_or_default();
     make_page(
         html,
-        PageSettings::new("Login", Some(vec!["/assets/css/login.css"]), false),
+        PageSettings::new("Login", Some(vec!["/assets/css/login.css"]), false, false),
     )
 }
 
@@ -237,7 +243,7 @@ pub(crate) async fn admin_page(session_id: i64, db: &BlogDb) -> String {
     let content = admin_widgets(template!("admin"), session_id, db).await;
     make_page(
         &content,
-        PageSettings::new("Admin", Some(vec!["/assets/css/admin.css"]), true),
+        PageSettings::new("Admin", Some(vec!["/assets/css/admin.css"]), true, false),
     )
 }
 
@@ -558,7 +564,7 @@ pub(crate) async fn blog_roll(db: &BlogDb) -> String {
 
     make_page(
         blog_roll_html,
-        PageSettings::new("Blog", Some(vec!["/assets/css/blog.css"]), true),
+        PageSettings::new("Blog", Some(vec!["/assets/css/blog.css"]), true, true),
     )
 }
 
@@ -653,6 +659,7 @@ pub(crate) async fn search_page(
             ["Results for “", &query, "”"].concat(),
             Some(vec!["/assets/css/blog.css"]),
             true,
+            true,
         ),
     )
 }
@@ -694,6 +701,7 @@ pub(crate) struct PageSettings {
     title: String,
     stylesheets: Option<Vec<String>>,
     site_header: bool,
+    site_footer: bool,
 }
 
 impl PageSettings {
@@ -705,9 +713,15 @@ impl PageSettings {
             title: title.to_string(),
             stylesheets: None,
             site_header: true,
+            site_footer: true,
         }
     }
-    pub(crate) fn new<S, T>(title: S, stylesheets: Option<Vec<T>>, site_header: bool) -> Self
+    pub(crate) fn new<S, T>(
+        title: S,
+        stylesheets: Option<Vec<T>>,
+        site_header: bool,
+        site_footer: bool,
+    ) -> Self
     where
         S: ToString,
         T: ToString,
@@ -718,6 +732,7 @@ impl PageSettings {
             title: title.to_string(),
             stylesheets,
             site_header,
+            site_footer,
         }
     }
 }
@@ -754,6 +769,12 @@ where
     .unwrap_or_default()
 }
 
+// fn footer<S>(input: S) -> String
+// where
+//     S: AsRef<str>,
+// {
+// }
+
 pub(crate) fn sanitize<S: AsRef<str>>(input: S) -> String {
     rewrite_str(
         input.as_ref(),

server/src/templates/default.html

@@ -11,6 +11,7 @@
     <site-header></site-header>
     <main>
     </main>
+    <site-footer></site-footer>
 </body>
 
 </html>

server/src/templates/site-footer.html

@@ -0,0 +1,53 @@
+<footer>
+    <div>
+        <h1>keep in touch</h1>
+        <div>
+            <form action="https://buttondown.com/api/emails/embed-subscribe/eviewrites" method="post"
+                target="popupwindow" onsubmit="window.open('https://buttondown.com/eviewrites', 'popupwindow')"
+                class="embeddable-buttondown-form">
+                <label for="bd-email">
+                    <p>Subscribe to my newsletter for updates &lt;3</p>
+                </label>
+                <div>
+                    <input type="email" name="email" id="bd-email" required />
+                    <input type="submit" value="Subscribe" style="border-inline-start: none;" />
+                </div>
+            </form>
+            <p>Or subscribe to my <a class="animated-link-underline" href="/feed.xml">RSS feed</a>! RSS rules, you can
+                learn more
+                about
+                it <a href="https://guides.library.yale.edu/keepingup/basics" class="animated-link-underline"
+                    target="_blank" rel="noreferrer">here</a>.</p>
+        </div>
+    </div>
+    <div>
+        <h1>credits</h1>
+        <div>
+            <p><a href="https://augustkline.com" class="animated-link-underline" target="_blank" rel="noreferrer">august
+                    kline</a>
+                made this website. she is the coolest in the whole world.</p>
+            <p><a href="https://www.redaction.us/" class="animated-link-underline" target="_blank"
+                    rel="noreferrer">redaction</a> and <a href="https://www.brailleinstitute.org/freefont/"
+                    class="animated-link-underline" target="_blank" rel="noreferrer">atkinson hyperlegible</a> are used
+                as display and text typefaces,
+                respectively.</p>
+        </div>
+    </div>
+    <div>
+        <h1>elsewhere</h1>
+        <nav>
+            <ul>
+                <li>
+                    <ul>
+                        <li>
+                            <a href="https://www.instagram.com/evie.evergreen.docx/" class="animated-link">insta</a>
+                        </li>
+                        <li>
+                            <a href="mailto:evieippolito@duck.com" class="animated-link">email</a>
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </nav>
+    </div>
+</footer>