feat: Move from pico to custom css

Use css from my current blog, which is a lot smaller. The text itself
looks good but the code still breaks the page.

Metrics:

- hyper: 16.37 KB / 16.47 KB transferred
- 1 request

10 files changed, 411 insertions, 204 deletions

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
deleted file mode 100644
index dd3bba4..0000000
--- a/.gitlab-ci.yml
+++ /dev/null
@@ -1,62 +0,0 @@
-stages:
-    - test
-    - production
-    - prepare
-    - release
-
-test:
-    image: rust:alpine
-    stage: test
-    script:
-        - apk add musl-dev
-        - cargo install cargo2junit
-        - cargo test -- -Z unstable-options --format json --report-time | cargo2junit > results.xml
-    only:
-        - master
-    artifacts:
-        reports:
-            junit: results.xml
-
-production:
-    stage: production
-    image: ruby:latest
-    needs:
-      - test
-    script:
-        - apt-get update -qy
-        - apt-get install -y ruby-dev
-        - gem install dpl
-        - gem install faraday -v 1.8.0
-        - dpl --provider=heroku --app=$HEROKU_APP --api-key=$HEROKU_API_KEY
-    only:
-        - master
-
-prepare_job:
-  stage: prepare
-  image: rust:alpine
-  rules:
-    - if: $CI_COMMIT_TAG
-  script:
-    - echo "running release_job"
-    - apk add musl-dev
-    - cargo build --release
-  artifacts:
-    paths:
-      - target/release/hyper
-      - target/release/actix
-
-release_job:
-  stage: release
-  image: registry.gitlab.com/gitlab-org/release-cli:latest
-  rules:
-    - if: $CI_COMMIT_TAG
-  script:
-    - echo "running release_job for $TAG"
-  needs:
-    - job: prepare_job
-      artifacts: true
-  release:
-    name: 'Release $CI_COMMIT_TAG'
-    description: 'New macroblog version'
-    tag_name: '$CI_COMMIT_TAG'
-    ref: '$CI_COMMIT_TAG'
diff --git a/Procfile b/Procfile
deleted file mode 100644
index 51c4728..0000000
--- a/Procfile
+++ /dev/null
@@ -1 +0,0 @@
-web: ./target/release/actix
diff --git a/content/posts/2020-07-12Road_to_local_K8S.html b/content/posts/2020-07-12Road_to_local_K8S.html
index 5d34b27..52820b3 100644
--- a/content/posts/2020-07-12Road_to_local_K8S.html
+++ b/content/posts/2020-07-12Road_to_local_K8S.html
@@ -1,43 +1,43 @@
 <section>
-  <h3>Goal</h3>
-  <p>
+    <h3>Goal</h3>
+    <p>
     The goal is to deploy kubernetes on my local networks, and keep everything
     as reproducible as possible.
-  </p>
-  <h3>Stack</h3>
-  <p>
+    </p>
+    <h3>Stack</h3>
+    <p>
     I'll use Fedora Core OS, Matchbox and Terraform
     <sup><a href="#footnotes">1</a></sup>, a match the requirements for
     Tectonic<sup><a href="#footnotes">2</a></sup>.</p>
-  <h3>Steps</h3>
-  <ul>
-    <li>Network Setup DHCP/TFTP/DNS<sup><a href="#footnotes">3</a></sup></li>
-    <li>Matchbox<sup><a href="#footnotes">4</a></sup></li>
-    <li>PXE nextwork boot evnrionment</li>
-    <li>Terraform Tectonic<sup><a href="#footnotes">5</a></sup></li>
-  </ul>
-  <h3>Network Setup DHCP/TFTP/DNS</h3>
-  <p>First learning the basics</p>
-  <ul>
-    <li>
-      <a href="https://linuxhint.com/install_dhcp_server_ubuntu/">
-        https://linuxhint.com/install_dhcp_server_ubuntu/
-      </a>
-    </li>
-    <li>
-      <a href="https://www.youtube.com/watch?v=XQ3T14SIlV4">
-        https://www.youtube.com/watch?v=XQ3T14SIlV4
-      </a>
-    </li>
-  </ul>
-  <p>
+    <h3>Steps</h3>
+    <ul>
+        <li>Network Setup DHCP/TFTP/DNS<sup><a href="#footnotes">3</a></sup></li>
+        <li>Matchbox<sup><a href="#footnotes">4</a></sup></li>
+        <li>PXE nextwork boot evnrionment</li>
+        <li>Terraform Tectonic<sup><a href="#footnotes">5</a></sup></li>
+    </ul>
+    <h3>Network Setup DHCP/TFTP/DNS</h3>
+    <p>First learning the basics</p>
+    <ul>
+        <li>
+            <a href="https://linuxhint.com/install_dhcp_server_ubuntu/">
+                https://linuxhint.com/install_dhcp_server_ubuntu/
+            </a>
+        </li>
+        <li>
+            <a href="https://www.youtube.com/watch?v=XQ3T14SIlV4">
+                https://www.youtube.com/watch?v=XQ3T14SIlV4
+            </a>
+        </li>
+    </ul>
+    <p>
     To check open ports
-<pre><code>lsof -Pni | grep LISTEN</code></pre>
-  </p>
-  <p>
+    <pre><code>lsof -Pni | grep LISTEN</code></pre>
+    </p>
+    <p>
     Run the provided<sup><a href="#footnotes">6</a></sup> image with dnsmasq and
     PXE toolkit
-<pre><code>docker run --rm --cap-add=NET_ADMIN --net=host quay.io/coreos/dnsmasq \
+    <pre><code>docker run --rm --cap-add=NET_ADMIN --net=host quay.io/coreos/dnsmasq \
   -d -q \
   --dhcp-range=192.168.1.3,192.168.1.254 \
   --enable-tftp --tftp-root=/var/lib/tftpboot \
@@ -54,48 +54,48 @@
   --address=/matchbox.example/192.168.1.2 \
   --log-queries \
   --log-dhcp</code></pre>
-  </p>
-  <h3>Matchbox</h3>
-  <p>...</p>
-  <h3>PXE network boot enviroment</h3>
-  <p>...</p>
-  <h3>Terraform Tectonic</h3>
-  <p>...</p>
-  <h3 id="footnotes">Links</h3>
-  <div >
-    <sup>1</sup>
-    <a href="https://coreos.com/tectonic/docs/latest/install/bare-metal/metal-terraform.html">
-      https://coreos.com/tectonic/docs/latest/install/bare-metal/metal-terraform.html
-    </a>
-  <div>
-  <div>
-    <sup>2</sup>
-    <a href="https://coreos.com/tectonic/docs/latest/install/bare-metal/requirements.html">
-      https://coreos.com/tectonic/docs/latest/install/bare-metal/requirements.html
-    </a>
-  <div>
-  <div>
-    <sup>3</sup>
-    <a href="https://coreos.com/matchbox/docs/latest/network-setup.html">
-      https://coreos.com/matchbox/docs/latest/network-setup.html
-    </a>
-  <div>
-  <div>
-    <sup>4</sup>
-    <a href="https://coreos.com/matchbox/docs/latest/deployment.html">
-      https://coreos.com/matchbox/docs/latest/deployment.html
-    </a>
-  <div>
-  <div>
-    <sup>5</sup>
-    <a href="https://coreos.com/tectonic/releases/">
-      https://coreos.com/tectonic/releases/
-    </a>
-  <div>
-  <div>
-    <sup>6</sup>
-    <a href="https://github.com/poseidon/matchbox/tree/v0.7.0/contrib/dnsmasq">
-      https://github.com/poseidon/matchbox/tree/v0.7.0/contrib/dnsmasq
-    </a>
-  <div>
+    </p>
+    <h3>Matchbox</h3>
+    <p>...</p>
+    <h3>PXE network boot enviroment</h3>
+    <p>...</p>
+    <h3>Terraform Tectonic</h3>
+    <p>...</p>
+    <h3 id="footnotes">Links</h3>
+    <div >
+        <sup>1</sup>
+        <a href="https://coreos.com/tectonic/docs/latest/install/bare-metal/metal-terraform.html">
+            https://coreos.com/tectonic/docs/latest/install/bare-metal/metal-terraform.html
+        </a>
+        <div>
+            <div>
+                <sup>2</sup>
+                <a href="https://coreos.com/tectonic/docs/latest/install/bare-metal/requirements.html">
+                    https://coreos.com/tectonic/docs/latest/install/bare-metal/requirements.html
+                </a>
+                <div>
+                    <div>
+                        <sup>3</sup>
+                        <a href="https://coreos.com/matchbox/docs/latest/network-setup.html">
+                            https://coreos.com/matchbox/docs/latest/network-setup.html
+                        </a>
+                        <div>
+                            <div>
+                                <sup>4</sup>
+                                <a href="https://coreos.com/matchbox/docs/latest/deployment.html">
+                                    https://coreos.com/matchbox/docs/latest/deployment.html
+                                </a>
+                                <div>
+                                    <div>
+                                        <sup>5</sup>
+                                        <a href="https://coreos.com/tectonic/releases/">
+                                            https://coreos.com/tectonic/releases/
+                                        </a>
+                                        <div>
+                                            <div>
+                                                <sup>6</sup>
+                                                <a href="https://github.com/poseidon/matchbox/tree/v0.7.0/contrib/dnsmasq">
+                                                    https://github.com/poseidon/matchbox/tree/v0.7.0/contrib/dnsmasq
+                                                </a>
+                                                <div>
 </section>
diff --git a/src/blog.rs b/src/blog.rs
index 6bbda49..0fa9543 100644
--- a/src/blog.rs
+++ b/src/blog.rs
@@ -1,9 +1,9 @@
+use chrono::NaiveDate;
+use regex::Regex;
 use rust_embed::RustEmbed;
 use sailfish::TemplateOnce;
-use chrono::NaiveDate;
-use regex::{Regex};
+use std::cmp::{Eq, Ord, PartialEq, PartialOrd};
 use std::str;
-use std::cmp::{PartialOrd, Ord, PartialEq, Eq};
 
 const BLOG_REGEX: &str = r"(?P<date>[\d]{4}-[\d]{2}-[\d]{2})(?P<title>[a-zA-Z0-9-_]*)";
 
@@ -11,7 +11,6 @@ const BLOG_REGEX: &str = r"(?P<date>[\d]{4}-[\d]{2}-[\d]{2})(?P<title>[a-zA-Z0-9
 #[folder = "content/posts/"]
 struct PostAsset;
 
-
 #[derive(TemplateOnce)]
 #[template(path = "index.html")]
 struct IndexTemplate {
@@ -23,7 +22,7 @@ struct IndexTemplate {
 struct PostTemplate {
     content: String,
     title: String,
-    date: String
+    date: String,
 }
 
 #[derive(PartialEq, Eq, PartialOrd, Ord)]
@@ -43,12 +42,11 @@ impl BlogEntry {
         BlogEntry {
             title: String::from(title),
             file: String::from(path),
-            datetime: NaiveDate::parse_from_str(date, "%Y-%m-%d").unwrap()
+            datetime: NaiveDate::parse_from_str(date, "%Y-%m-%d").unwrap(),
         }
     }
 
     pub fn read_assets() -> Vec<BlogEntry> {
-
         let mut entries: Vec<BlogEntry> = PostAsset::iter()
             .map(|e| format!("{}", e))
             .map(|e| BlogEntry::new(&e))
@@ -61,29 +59,27 @@ impl BlogEntry {
 }
 
 fn get_file_content(path: &str) -> String {
-    let buffer = PostAsset::get(path)
-        .unwrap()
-        .data
-        .into_owned();
+    let buffer = PostAsset::get(path).unwrap().data.into_owned();
 
     return String::from_utf8(buffer).unwrap();
 }
 
-
 pub fn render_post_page(path: &String) -> String {
     let blog = BlogEntry::new(path);
 
     PostTemplate {
         content: get_file_content(path),
         title: blog.title,
-        date: blog.datetime.format("%Y-%m-%d").to_string()
+        date: blog.datetime.format("%Y-%m-%d").to_string(),
     }
-        .render_once()
-        .unwrap()
+    .render_once()
+    .unwrap()
 }
 
 pub fn render_index_page() -> String {
-    IndexTemplate { posts: BlogEntry::read_assets() }
-        .render_once()
-        .unwrap()
+    IndexTemplate {
+        posts: BlogEntry::read_assets(),
+    }
+    .render_once()
+    .unwrap()
 }
diff --git a/src/router.rs b/src/router.rs
index 0bba091..35fdf3e 100644
--- a/src/router.rs
+++ b/src/router.rs
@@ -1,4 +1,4 @@
-use regex::{Regex};
+use regex::Regex;
 
 const ACTION_REGEX: &str = r"/{0,1}(?P<action>\w*)/(?P<id>.+)";
 
@@ -14,14 +14,15 @@ impl Router {
         let caps = re.captures(path);
         let action = match caps {
             Some(ref value) => &value["action"],
-            None => "index"
+            None => "index",
         };
 
         match action {
-            "posts" => Router::Post { page: caps.unwrap()["id"].to_string() },
+            "posts" => Router::Post {
+                page: caps.unwrap()["id"].to_string(),
+            },
             "index" => Router::Index,
-            _ => Router::NotFound
+            _ => Router::NotFound,
         }
     }
 }
-
diff --git a/templates/head.html b/templates/head.html
index c054157..3492eda 100644
--- a/templates/head.html
+++ b/templates/head.html
@@ -3,5 +3,5 @@
 <title>Yet Another Blog</title>
 <link rel="icon" type="image/x-icon" href="data:image/x-icon;base64,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">
 <style>
-    <% include!("pico.min.css"); %>
+<% include!("main.css"); %>
 </style>
diff --git a/templates/header.html b/templates/header.html
index 1340aa1..c830273 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -1,10 +1,12 @@
 <header class="container">
-    <nav class="container-fluid">
-        <ul>
-            <li><h2><a href="/">Yet Another Blog</a></h2></li>
-        </ul>
-        <ul>
-            <li><a href="https://gitlab.com/gabrielgio/cv/-/raw/main/cv.pdf?inline=false" class="secondary">Resume</a></li>
-        </ul>
-    </nav>
+    <div class="title-wrapper">
+        <a href="/">
+            <h2 class="title">Yet Another Blog</h2>
+        </a>
+        <nav class="container-fluid">
+            <ul>
+                <li><a href="https://gitlab.com/gabrielgio/cv/-/raw/main/cv.pdf?inline=false" class="secondary">Resume</a></li>
+            </ul>
+        </nav>
+    </div>
 </header>
diff --git a/templates/index.html b/templates/index.html
index 006643a..f6f3ca9 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,22 +1,28 @@
 <!DOCTYPE html>
 <html data-theme="light" lang="en">
-<head>
-    <% include!("head.html"); %>
-</head>
-<body>
-<% include!("header.html"); %>
-<main class="container">
-    <section>
-            A gathering of information about some things I do on my spare time.
-            You can find me on gitlab, twitter and linkedin.
-    </section>
-    <section>
-        <ul>
-        <% for p in &posts { %>
-            <li><a href="/posts/<%- p.file %>"><%- p.title %></a></li>
-        <% } %>
-        </ul>
-    </section>
-</main>
-</body>
+    <head>
+        <% include!("head.html"); %>
+    </head>
+    <body>
+        <div class="layout">
+            <% include!("header.html"); %>
+            <main>
+                <div class="slim-description">
+                    A gathering of information about some things I do on my
+                    spare time. You can find me on gitlab, twitter and
+                    linkedin.
+                </div>
+                <div class="blog-list">
+                    <% for p in &posts { %>
+                    <article class="list-item">
+                        <div class="post-title">
+                            <a href="/posts/<%- p.file %>"><%- p.title %></a>
+                        </div>
+                        <span classname="data-label"><%- p.datetime | disp %></span>
+                    </article>
+                    <% } %>
+                </div>
+            </main>
+        </div>
+    </body>
 </html>
diff --git a/templates/main.css b/templates/main.css
new file mode 100644
index 0000000..f056a50
--- /dev/null
+++ b/templates/main.css
@@ -0,0 +1,263 @@
+* {
+    box-sizing: border-box;
+    font-family: dejavu sans;
+}
+body {
+    margin: 0;
+}
+h1,
+h2,
+h3,
+h4 {
+    font-weight: 400;
+}
+code[class*="language-"],
+nav,
+.blog-list {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 1.025rem;
+}
+code {
+    font-family: dejavu sans mono;
+}
+tags {
+    font-family: dejavu sans mono;
+}
+.list-item {
+    font-family: dejavu sans mono;
+}
+html {
+    font-size: 16px;
+}
+body {
+    line-height: 1.8em;
+    color: #333;
+    background: #fefefe;
+}
+.post-title,
+.date-label {
+    letter-spacing: 0.025rem;
+}
+p,
+sub,
+nav {
+    letter-spacing: 0.05rem;
+}
+.title-wrapper,
+.title {
+    letter-spacing: 0.075rem;
+}
+a {
+    text-decoration: none;
+}
+.brand-icon {
+    color: #f93a3a;
+    display: inline-flex;
+    border-bottom: 1px solid;
+}
+.brand-icon:hover {
+    border-bottom: none;
+}
+.layout {
+    max-width: 48rem;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 2.625rem 1.3125rem;
+}
+.layout .title-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+.layout .title {
+    color: #333;
+    text-align: left;
+    display: block;
+    font-size: 1.875rem;
+    margin: 0;
+}
+nav {
+    font-size: 1.025rem;
+    text-align: center;
+}
+nav ul {
+    display: block;
+    padding: 0;
+}
+nav ul li {
+    display: inline;
+    list-style-type: none;
+}
+nav ul li a {
+    color: #333;
+    display: inline-block;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid #fefefe;
+}
+nav ul li a:hover {
+    color: #f93a3a;
+}
+nav ul li:not(:last-child) {
+    padding: 0 1rem 0 0;
+}
+.slim-description {
+    margin-bottom: calc(16px * 2);
+    color: #666;
+}
+.blog-post-content a {
+    color: #f93a3a;
+    text-decoration: none;
+    border-bottom: 1px solid;
+}
+.blog-post-content a:hover {
+    border-bottom: none;
+}
+.blog-list .list-item {
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: baseline;
+    padding: 0.5rem 0.5rem 0.5rem 0;
+}
+.blog-list .post-title a {
+    text-decoration: none;
+    color: #333;
+    border-bottom: none;
+}
+.blog-list .post-title a:hover {
+    border-bottom: 1px solid;
+}
+.blog-list .date-label {
+    font-size: 80%;
+    margin-right: 1rem;
+}
+.content .title {
+    font-size: 1.275rem;
+}
+.blog-post-content a {
+    color: #f93a3a;
+    text-decoration: none;
+    border-bottom: 1px solid;
+}
+.blog-post-content a:hover {
+    border-bottom: none;
+}
+.blog-post-content img {
+    width: 100%;
+}
+.post-image {
+    margin-left: calc(-1.3125rem);
+    margin-right: calc(-1.3125rem);
+}
+.post-image img {
+    width: 100%;
+}
+.tags {
+    font-size: 0.9em;
+    text-align: left;
+}
+.tags ul {
+    display: block;
+    padding: 0;
+}
+.tags ul li {
+    display: inline;
+    list-style-type: none;
+    text-align: center;
+}
+.tags ul li a {
+    border: 1px solid #f93a3a;
+    border-radius: 3px;
+    background: #f93a3a;
+    padding: 0.2em;
+    color: #fff;
+    margin: 10px 2px 10px 0;
+    line-height: 1em;
+}
+.tags ul li a:hover {
+    background: #fefefe;
+    color: #f93a3a;
+}
+.tags ul li:not(:last-child) {
+    padding: 0 0.1rem 0 0;
+}
+.highlight {
+    margin-left: calc(-1.3125rem);
+    margin-right: calc(-1.3125rem);
+}
+.highlight pre {
+    line-height: 1.2rem;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    overflow: auto;
+    padding: 1.3125rem;
+    margin: 0;
+}
+.highlight pre code[class*="language-"] {
+    font-size: 0.9em;
+}
+.highlight pre .token.comment {
+    font-style: italic;
+}
+blockquote {
+    background: #f9f9f9;
+    border-left: 5px solid #333;
+    margin: 1.5em 10px;
+    padding: 0.5em 10px;
+    quotes: "“" "”" "‘" "’";
+}
+blockquote:before {
+    color: #333;
+    content: open-quote;
+    font-size: 4em;
+    line-height: 0.1em;
+    margin-right: 0.25em;
+    vertical-align: -0.4em;
+}
+blockquote p {
+    display: inline;
+}
+time {
+    font-size: 80%;
+    margin-right: 1rem;
+}
+@media only screen and (min-width: 600px) {
+    .layout .title-wrapper {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-direction: row;
+    }
+    .layout .title {
+        margin-block-start: 0.83em;
+        margin-block-end: 0.83em;
+        margin-inline-start: 0;
+        margin-inline-end: 0;
+    }
+    .blog-list .list-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-direction: unset;
+        padding: 0;
+        margin-bottom: 0.5rem;
+    }
+    .blog-list .date-label {
+        font-size: 100%;
+        margin-right: 0;
+    }
+    .project-board {
+        grid-template-columns: 1fr 1fr;
+    }
+    .highlight {
+        margin-left: 0;
+        margin-right: 0;
+    }
+    .post-image {
+        margin-left: 0;
+        margin-right: 0;
+    }
+}
+
diff --git a/templates/post.html b/templates/post.html
index 7e0a909..99a7852 100644
--- a/templates/post.html
+++ b/templates/post.html
@@ -1,18 +1,20 @@
 <!DOCTYPE html>
 <html data-theme="light" lang="en">
-<head>
-    <% include!("head.html"); %>
-</head>
-<body>
-<% include!("header.html"); %>
-<main class="container">
-    <h2><%- title %></h2>
-    <h5>Created At: <%- date %></h2>
-    <%- content %>
-    </section>
-</main>
-</body>
-
-<script>
-</script>
+    <head>
+        <% include!("head.html"); %>
+    </head>
+    <body>
+        <div class="layout">
+            <% include!("header.html"); %>
+            <main>
+                <article>
+                    <h1><%- title %></h1>
+                    <time>Created At: <%- date %></time>
+                    <div class="blog-post-content">
+                        <%- content %>
+                    </div>
+                </article>
+            </main>
+        </div>
+    </body>
 </html>