split css into a separate file, update actix versions

Cargo.toml

@@ -13,11 +13,11 @@ anyhow = "1.0"
 env_logger = "0.7.1"
 log = "0.4"
 
-actix = "0.9.0"
+actix = "0.10"
-actix-files = "0.2.2"
+actix-files = "0.4"
-actix-rt = "1.0.0"
+actix-rt = "1.1"
-actix-web = "2.0"
+actix-web = "3.1"
-actix_derive = "0.3.2"
+actix_derive = "0.5"
 
 pulldown-cmark = "0.8.0"
 

src/main.rs

@@ -89,6 +89,7 @@ fn main() -> anyhow::Result<()> {
         App::new()
             .wrap(middleware::Logger::default())
             .data(state.clone())
+            .service(actix_files::Files::new("/static", "templates"))
             .service(render)
     })
     .bind(&bind)?

templates/main.css

@@ -0,0 +1,97 @@
+body {
+    font-family: 'Montserrat', sans-serif;
+}
+
+h1, h2, h3, h4, h5 {
+    font-family: 'Merriweather', serif;
+}
+
+body {
+    display: flex;
+}
+
+img {
+    max-width: 100%;
+    max-height: 100vh;
+}
+
+blockquote {
+    margin: 0;
+    padding-left: 2em;
+    border-left: 3px solid lightgray;
+}
+
+aside h1 {
+    font-size: 16pt;
+    text-decoration: underline;
+    font-variant: small-caps;
+}
+
+main {
+    flex-grow: 1;
+}
+
+nav, main {
+    padding: 0 2em;
+}
+
+@media screen and (max-width: 800px) {
+    body {
+        flex-direction: column-reverse;
+    }
+
+    aside {
+        border-top: 1px solid gray;
+    }
+
+    aside h1 {
+        text-align: center;
+    }
+
+    aside li {
+        display: inline-block;
+    }
+}
+
+@media screen and (min-width: 800px) {
+    aside {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-width: 15em;
+        width: 15em;
+        min-height: 100vh;
+        border-right: 1px solid gray;
+    }
+}
+
+nav ul {
+    list-style: none;
+    padding-left: 0;
+}
+
+nav li {
+    margin: .5em 0;
+}
+
+nav .file {
+    font-style: italic;
+    opacity: .8;
+}
+
+footer {
+    padding: 1em 0;
+    color: gray;
+}
+
+aside footer {
+    text-align: center;
+}
+
+aside footer a {
+    color: gray;
+}
+
+main footer {
+    text-align: right;
+}

templates/main.html

@@ -7,105 +7,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat&display=swap"
           rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <style>
+    <link href="/static/main.css" rel="stylesheet">
-        body {
-            font-family: 'Montserrat', sans-serif;
-        }
-
-        h1, h2, h3, h4, h5 {
-            font-family: 'Merriweather', serif;
-        }
-
-        body {
-            display: flex;
-        }
-
-        @media screen and (max-width: 800px) {
-            body {
-                flex-direction: column-reverse;
-            }
-
-            aside {
-                border-top: 1px solid gray;
-            }
-
-            aside h1 {
-                text-align: center;
-            }
-
-            aside li {
-                display: inline-block;
-            }
-        }
-
-        aside h1 {
-            font-size: 16pt;
-            text-decoration: underline;
-            font-variant: small-caps;
-        }
-
-        img {
-            max-width: 100%;
-            max-height: 100vh;
-        }
-
-        blockquote {
-            margin: 0;
-            padding-left: 2em;
-            border-left: 3px solid lightgray;
-        }
-
-        main {
-            flex-grow: 1;
-        }
-
-        nav, main {
-            padding: 0 2em;
-        }
-
-        @media screen and (min-width: 800px) {
-            aside {
-                display: flex;
-                flex-direction: column;
-                justify-content: space-between;
-                min-width: 15em;
-                width: 15em;
-                min-height: 100vh;
-                border-right: 1px solid gray;
-            }
-        }
-
-        nav ul {
-            list-style: none;
-            padding-left: 0;
-        }
-
-        nav li {
-            margin: .5em 0;
-        }
-
-        nav .file {
-            font-style: italic;
-        }
-
-        footer {
-            padding: 1em 0;
-            color: gray;
-        }
-
-        aside footer {
-            text-align: center;
-        }
-
-        aside footer a {
-            color: gray;
-        }
-
-        main footer {
-            text-align: right;
-        }
-
-    </style>
 </head>
 <body>
 <aside>