macroblog.rs @ b4472b41214eeeacce071df41bf0f782e1f16d6d

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
  1diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
  2deleted file mode 100644
  3index dd3bba47c37ec95c989d8367cae13b63402c66d7..0000000000000000000000000000000000000000
  4--- a/.gitlab-ci.yml
  5+++ /dev/null
  6@@ -1,62 +0,0 @@
  7-stages:
  8-    - test
  9-    - production
 10-    - prepare
 11-    - release
 12-
 13-test:
 14-    image: rust:alpine
 15-    stage: test
 16-    script:
 17-        - apk add musl-dev
 18-        - cargo install cargo2junit
 19-        - cargo test -- -Z unstable-options --format json --report-time | cargo2junit > results.xml
 20-    only:
 21-        - master
 22-    artifacts:
 23-        reports:
 24-            junit: results.xml
 25-
 26-production:
 27-    stage: production
 28-    image: ruby:latest
 29-    needs:
 30-      - test
 31-    script:
 32-        - apt-get update -qy
 33-        - apt-get install -y ruby-dev
 34-        - gem install dpl
 35-        - gem install faraday -v 1.8.0
 36-        - dpl --provider=heroku --app=$HEROKU_APP --api-key=$HEROKU_API_KEY
 37-    only:
 38-        - master
 39-
 40-prepare_job:
 41-  stage: prepare
 42-  image: rust:alpine
 43-  rules:
 44-    - if: $CI_COMMIT_TAG
 45-  script:
 46-    - echo "running release_job"
 47-    - apk add musl-dev
 48-    - cargo build --release
 49-  artifacts:
 50-    paths:
 51-      - target/release/hyper
 52-      - target/release/actix
 53-
 54-release_job:
 55-  stage: release
 56-  image: registry.gitlab.com/gitlab-org/release-cli:latest
 57-  rules:
 58-    - if: $CI_COMMIT_TAG
 59-  script:
 60-    - echo "running release_job for $TAG"
 61-  needs:
 62-    - job: prepare_job
 63-      artifacts: true
 64-  release:
 65-    name: 'Release $CI_COMMIT_TAG'
 66-    description: 'New macroblog version'
 67-    tag_name: '$CI_COMMIT_TAG'
 68-    ref: '$CI_COMMIT_TAG'
 69diff --git a/Procfile b/Procfile
 70deleted file mode 100644
 71index 51c4728eb99f1e7da51cd1de9cc2b6ef2d19578e..0000000000000000000000000000000000000000
 72--- a/Procfile
 73+++ /dev/null
 74@@ -1 +0,0 @@
 75-web: ./target/release/actix
 76diff --git a/content/posts/2020-07-12Road_to_local_K8S.html b/content/posts/2020-07-12Road_to_local_K8S.html
 77index 5d34b27775f6d3c0c5d80da76ab4d5372aba440d..52820b3a59f6fcff401ca6c19b6990cf0a36c485 100644
 78--- a/content/posts/2020-07-12Road_to_local_K8S.html
 79+++ b/content/posts/2020-07-12Road_to_local_K8S.html
 80@@ -1,43 +1,43 @@
 81 <section>
 82-  <h3>Goal</h3>
 83-  <p>
 84+    <h3>Goal</h3>
 85+    <p>
 86     The goal is to deploy kubernetes on my local networks, and keep everything
 87     as reproducible as possible.
 88-  </p>
 89-  <h3>Stack</h3>
 90-  <p>
 91+    </p>
 92+    <h3>Stack</h3>
 93+    <p>
 94     I'll use Fedora Core OS, Matchbox and Terraform
 95     <sup><a href="#footnotes">1</a></sup>, a match the requirements for
 96     Tectonic<sup><a href="#footnotes">2</a></sup>.</p>
 97-  <h3>Steps</h3>
 98-  <ul>
 99-    <li>Network Setup DHCP/TFTP/DNS<sup><a href="#footnotes">3</a></sup></li>
100-    <li>Matchbox<sup><a href="#footnotes">4</a></sup></li>
101-    <li>PXE nextwork boot evnrionment</li>
102-    <li>Terraform Tectonic<sup><a href="#footnotes">5</a></sup></li>
103-  </ul>
104-  <h3>Network Setup DHCP/TFTP/DNS</h3>
105-  <p>First learning the basics</p>
106-  <ul>
107-    <li>
108-      <a href="https://linuxhint.com/install_dhcp_server_ubuntu/">
109-        https://linuxhint.com/install_dhcp_server_ubuntu/
110-      </a>
111-    </li>
112-    <li>
113-      <a href="https://www.youtube.com/watch?v=XQ3T14SIlV4">
114-        https://www.youtube.com/watch?v=XQ3T14SIlV4
115-      </a>
116-    </li>
117-  </ul>
118-  <p>
119+    <h3>Steps</h3>
120+    <ul>
121+        <li>Network Setup DHCP/TFTP/DNS<sup><a href="#footnotes">3</a></sup></li>
122+        <li>Matchbox<sup><a href="#footnotes">4</a></sup></li>
123+        <li>PXE nextwork boot evnrionment</li>
124+        <li>Terraform Tectonic<sup><a href="#footnotes">5</a></sup></li>
125+    </ul>
126+    <h3>Network Setup DHCP/TFTP/DNS</h3>
127+    <p>First learning the basics</p>
128+    <ul>
129+        <li>
130+            <a href="https://linuxhint.com/install_dhcp_server_ubuntu/">
131+                https://linuxhint.com/install_dhcp_server_ubuntu/
132+            </a>
133+        </li>
134+        <li>
135+            <a href="https://www.youtube.com/watch?v=XQ3T14SIlV4">
136+                https://www.youtube.com/watch?v=XQ3T14SIlV4
137+            </a>
138+        </li>
139+    </ul>
140+    <p>
141     To check open ports
142-<pre><code>lsof -Pni | grep LISTEN</code></pre>
143-  </p>
144-  <p>
145+    <pre><code>lsof -Pni | grep LISTEN</code></pre>
146+    </p>
147+    <p>
148     Run the provided<sup><a href="#footnotes">6</a></sup> image with dnsmasq and
149     PXE toolkit
150-<pre><code>docker run --rm --cap-add=NET_ADMIN --net=host quay.io/coreos/dnsmasq \
151+    <pre><code>docker run --rm --cap-add=NET_ADMIN --net=host quay.io/coreos/dnsmasq \
152   -d -q \
153   --dhcp-range=192.168.1.3,192.168.1.254 \
154   --enable-tftp --tftp-root=/var/lib/tftpboot \
155@@ -54,48 +54,48 @@   --dhcp-boot=tag:ipxe,http://matchbox.example.com:8080/boot.ipxe \
156   --address=/matchbox.example/192.168.1.2 \
157   --log-queries \
158   --log-dhcp</code></pre>
159-  </p>
160-  <h3>Matchbox</h3>
161-  <p>...</p>
162-  <h3>PXE network boot enviroment</h3>
163-  <p>...</p>
164-  <h3>Terraform Tectonic</h3>
165-  <p>...</p>
166-  <h3 id="footnotes">Links</h3>
167-  <div >
168-    <sup>1</sup>
169-    <a href="https://coreos.com/tectonic/docs/latest/install/bare-metal/metal-terraform.html">
170-      https://coreos.com/tectonic/docs/latest/install/bare-metal/metal-terraform.html
171-    </a>
172-  <div>
173-  <div>
174-    <sup>2</sup>
175-    <a href="https://coreos.com/tectonic/docs/latest/install/bare-metal/requirements.html">
176-      https://coreos.com/tectonic/docs/latest/install/bare-metal/requirements.html
177-    </a>
178-  <div>
179-  <div>
180-    <sup>3</sup>
181-    <a href="https://coreos.com/matchbox/docs/latest/network-setup.html">
182-      https://coreos.com/matchbox/docs/latest/network-setup.html
183-    </a>
184-  <div>
185-  <div>
186-    <sup>4</sup>
187-    <a href="https://coreos.com/matchbox/docs/latest/deployment.html">
188-      https://coreos.com/matchbox/docs/latest/deployment.html
189-    </a>
190-  <div>
191-  <div>
192-    <sup>5</sup>
193-    <a href="https://coreos.com/tectonic/releases/">
194-      https://coreos.com/tectonic/releases/
195-    </a>
196-  <div>
197-  <div>
198-    <sup>6</sup>
199-    <a href="https://github.com/poseidon/matchbox/tree/v0.7.0/contrib/dnsmasq">
200-      https://github.com/poseidon/matchbox/tree/v0.7.0/contrib/dnsmasq
201-    </a>
202-  <div>
203+    </p>
204+    <h3>Matchbox</h3>
205+    <p>...</p>
206+    <h3>PXE network boot enviroment</h3>
207+    <p>...</p>
208+    <h3>Terraform Tectonic</h3>
209+    <p>...</p>
210+    <h3 id="footnotes">Links</h3>
211+    <div >
212+        <sup>1</sup>
213+        <a href="https://coreos.com/tectonic/docs/latest/install/bare-metal/metal-terraform.html">
214+            https://coreos.com/tectonic/docs/latest/install/bare-metal/metal-terraform.html
215+        </a>
216+        <div>
217+            <div>
218+                <sup>2</sup>
219+                <a href="https://coreos.com/tectonic/docs/latest/install/bare-metal/requirements.html">
220+                    https://coreos.com/tectonic/docs/latest/install/bare-metal/requirements.html
221+                </a>
222+                <div>
223+                    <div>
224+                        <sup>3</sup>
225+                        <a href="https://coreos.com/matchbox/docs/latest/network-setup.html">
226+                            https://coreos.com/matchbox/docs/latest/network-setup.html
227+                        </a>
228+                        <div>
229+                            <div>
230+                                <sup>4</sup>
231+                                <a href="https://coreos.com/matchbox/docs/latest/deployment.html">
232+                                    https://coreos.com/matchbox/docs/latest/deployment.html
233+                                </a>
234+                                <div>
235+                                    <div>
236+                                        <sup>5</sup>
237+                                        <a href="https://coreos.com/tectonic/releases/">
238+                                            https://coreos.com/tectonic/releases/
239+                                        </a>
240+                                        <div>
241+                                            <div>
242+                                                <sup>6</sup>
243+                                                <a href="https://github.com/poseidon/matchbox/tree/v0.7.0/contrib/dnsmasq">
244+                                                    https://github.com/poseidon/matchbox/tree/v0.7.0/contrib/dnsmasq
245+                                                </a>
246+                                                <div>
247 </section>
248diff --git a/src/blog.rs b/src/blog.rs
249index 6bbda4996f521103a23a5b6667ed3db8c9388ae1..0fa9543d0587f6369870ffe56a30084a0beec241 100644
250--- a/src/blog.rs
251+++ b/src/blog.rs
252@@ -1,16 +1,15 @@
253+use chrono::NaiveDate;
254+use regex::Regex;
255 use rust_embed::RustEmbed;
256 use sailfish::TemplateOnce;
257-use chrono::NaiveDate;
258-use regex::{Regex};
259+use std::cmp::{Eq, Ord, PartialEq, PartialOrd};
260 use std::str;
261-use std::cmp::{PartialOrd, Ord, PartialEq, Eq};
262 
263 const BLOG_REGEX: &str = r"(?P<date>[\d]{4}-[\d]{2}-[\d]{2})(?P<title>[a-zA-Z0-9-_]*)";
264 
265 #[derive(RustEmbed)]
266 #[folder = "content/posts/"]
267 struct PostAsset;
268-
269 
270 #[derive(TemplateOnce)]
271 #[template(path = "index.html")]
272@@ -23,7 +22,7 @@ #[template(path = "post.html")]
273 struct PostTemplate {
274     content: String,
275     title: String,
276-    date: String
277+    date: String,
278 }
279 
280 #[derive(PartialEq, Eq, PartialOrd, Ord)]
281@@ -43,12 +42,11 @@
282         BlogEntry {
283             title: String::from(title),
284             file: String::from(path),
285-            datetime: NaiveDate::parse_from_str(date, "%Y-%m-%d").unwrap()
286+            datetime: NaiveDate::parse_from_str(date, "%Y-%m-%d").unwrap(),
287         }
288     }
289 
290     pub fn read_assets() -> Vec<BlogEntry> {
291-
292         let mut entries: Vec<BlogEntry> = PostAsset::iter()
293             .map(|e| format!("{}", e))
294             .map(|e| BlogEntry::new(&e))
295@@ -61,14 +59,10 @@     }
296 }
297 
298 fn get_file_content(path: &str) -> String {
299-    let buffer = PostAsset::get(path)
300-        .unwrap()
301-        .data
302-        .into_owned();
303+    let buffer = PostAsset::get(path).unwrap().data.into_owned();
304 
305     return String::from_utf8(buffer).unwrap();
306 }
307-
308 
309 pub fn render_post_page(path: &String) -> String {
310     let blog = BlogEntry::new(path);
311@@ -76,14 +70,16 @@
312     PostTemplate {
313         content: get_file_content(path),
314         title: blog.title,
315-        date: blog.datetime.format("%Y-%m-%d").to_string()
316+        date: blog.datetime.format("%Y-%m-%d").to_string(),
317     }
318-        .render_once()
319-        .unwrap()
320+    .render_once()
321+    .unwrap()
322 }
323 
324 pub fn render_index_page() -> String {
325-    IndexTemplate { posts: BlogEntry::read_assets() }
326-        .render_once()
327-        .unwrap()
328+    IndexTemplate {
329+        posts: BlogEntry::read_assets(),
330+    }
331+    .render_once()
332+    .unwrap()
333 }
334diff --git a/src/router.rs b/src/router.rs
335index 0bba091cb8533672e794fd3b48c9dac9cdd2e6a0..35fdf3e8bed96a76bda385f0242e4757bfa06553 100644
336--- a/src/router.rs
337+++ b/src/router.rs
338@@ -1,4 +1,4 @@
339-use regex::{Regex};
340+use regex::Regex;
341 
342 const ACTION_REGEX: &str = r"/{0,1}(?P<action>\w*)/(?P<id>.+)";
343 
344@@ -14,14 +14,15 @@         let re = Regex::new(ACTION_REGEX).unwrap();
345         let caps = re.captures(path);
346         let action = match caps {
347             Some(ref value) => &value["action"],
348-            None => "index"
349+            None => "index",
350         };
351 
352         match action {
353-            "posts" => Router::Post { page: caps.unwrap()["id"].to_string() },
354+            "posts" => Router::Post {
355+                page: caps.unwrap()["id"].to_string(),
356+            },
357             "index" => Router::Index,
358-            _ => Router::NotFound
359+            _ => Router::NotFound,
360         }
361     }
362 }
363-
364diff --git a/templates/head.html b/templates/head.html
365index c054157d1cca5c47cf8b8fc57f0cb15d5c9753d7..3492eda3a3d46094ceefe503b72da649081712b5 100644
366--- a/templates/head.html
367+++ b/templates/head.html
368@@ -3,5 +3,5 @@ <meta name="viewport" content="width=device-width, initial-scale=1">
369 <title>Yet Another Blog</title>
370 <link rel="icon" type="image/x-icon" href="data:image/x-icon;base64,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">
371 <style>
372-    <% include!("pico.min.css"); %>
373+<% include!("main.css"); %>
374 </style>
375diff --git a/templates/header.html b/templates/header.html
376index 1340aa1711011046f6730f8e278513acd64228b5..c830273fec5e96c3e65e4832315f6ab9d164aec4 100644
377--- a/templates/header.html
378+++ b/templates/header.html
379@@ -1,10 +1,12 @@
380 <header class="container">
381-    <nav class="container-fluid">
382-        <ul>
383-            <li><h2><a href="/">Yet Another Blog</a></h2></li>
384-        </ul>
385-        <ul>
386-            <li><a href="https://gitlab.com/gabrielgio/cv/-/raw/main/cv.pdf?inline=false" class="secondary">Resume</a></li>
387-        </ul>
388-    </nav>
389+    <div class="title-wrapper">
390+        <a href="/">
391+            <h2 class="title">Yet Another Blog</h2>
392+        </a>
393+        <nav class="container-fluid">
394+            <ul>
395+                <li><a href="https://gitlab.com/gabrielgio/cv/-/raw/main/cv.pdf?inline=false" class="secondary">Resume</a></li>
396+            </ul>
397+        </nav>
398+    </div>
399 </header>
400diff --git a/templates/index.html b/templates/index.html
401index 006643a237521f0b87c035d7114c6e2e3faf5aaa..f6f3ca982b6751d9de2f0c3d94df228b02b95591 100644
402--- a/templates/index.html
403+++ b/templates/index.html
404@@ -1,22 +1,28 @@
405 <!DOCTYPE html>
406 <html data-theme="light" lang="en">
407-<head>
408-    <% include!("head.html"); %>
409-</head>
410-<body>
411-<% include!("header.html"); %>
412-<main class="container">
413-    <section>
414-            A gathering of information about some things I do on my spare time.
415-            You can find me on gitlab, twitter and linkedin.
416-    </section>
417-    <section>
418-        <ul>
419-        <% for p in &posts { %>
420-            <li><a href="/posts/<%- p.file %>"><%- p.title %></a></li>
421-        <% } %>
422-        </ul>
423-    </section>
424-</main>
425-</body>
426+    <head>
427+        <% include!("head.html"); %>
428+    </head>
429+    <body>
430+        <div class="layout">
431+            <% include!("header.html"); %>
432+            <main>
433+                <div class="slim-description">
434+                    A gathering of information about some things I do on my
435+                    spare time. You can find me on gitlab, twitter and
436+                    linkedin.
437+                </div>
438+                <div class="blog-list">
439+                    <% for p in &posts { %>
440+                    <article class="list-item">
441+                        <div class="post-title">
442+                            <a href="/posts/<%- p.file %>"><%- p.title %></a>
443+                        </div>
444+                        <span classname="data-label"><%- p.datetime | disp %></span>
445+                    </article>
446+                    <% } %>
447+                </div>
448+            </main>
449+        </div>
450+    </body>
451 </html>
452diff --git a/templates/main.css b/templates/main.css
453new file mode 100644
454index 0000000000000000000000000000000000000000..f056a50c86db44dcce5364e35447b7733d795510
455--- /dev/null
456+++ b/templates/main.css
457@@ -0,0 +1,263 @@
458+* {
459+    box-sizing: border-box;
460+    font-family: dejavu sans;
461+}
462+body {
463+    margin: 0;
464+}
465+h1,
466+h2,
467+h3,
468+h4 {
469+    font-weight: 400;
470+}
471+code[class*="language-"],
472+nav,
473+.blog-list {
474+    font-style: normal;
475+    font-weight: 400;
476+    font-size: 1.025rem;
477+}
478+code {
479+    font-family: dejavu sans mono;
480+}
481+tags {
482+    font-family: dejavu sans mono;
483+}
484+.list-item {
485+    font-family: dejavu sans mono;
486+}
487+html {
488+    font-size: 16px;
489+}
490+body {
491+    line-height: 1.8em;
492+    color: #333;
493+    background: #fefefe;
494+}
495+.post-title,
496+.date-label {
497+    letter-spacing: 0.025rem;
498+}
499+p,
500+sub,
501+nav {
502+    letter-spacing: 0.05rem;
503+}
504+.title-wrapper,
505+.title {
506+    letter-spacing: 0.075rem;
507+}
508+a {
509+    text-decoration: none;
510+}
511+.brand-icon {
512+    color: #f93a3a;
513+    display: inline-flex;
514+    border-bottom: 1px solid;
515+}
516+.brand-icon:hover {
517+    border-bottom: none;
518+}
519+.layout {
520+    max-width: 48rem;
521+    margin-left: auto;
522+    margin-right: auto;
523+    padding: 2.625rem 1.3125rem;
524+}
525+.layout .title-wrapper {
526+    display: flex;
527+    flex-direction: column;
528+    align-items: center;
529+    margin-bottom: 0.5rem;
530+}
531+.layout .title {
532+    color: #333;
533+    text-align: left;
534+    display: block;
535+    font-size: 1.875rem;
536+    margin: 0;
537+}
538+nav {
539+    font-size: 1.025rem;
540+    text-align: center;
541+}
542+nav ul {
543+    display: block;
544+    padding: 0;
545+}
546+nav ul li {
547+    display: inline;
548+    list-style-type: none;
549+}
550+nav ul li a {
551+    color: #333;
552+    display: inline-block;
553+    padding-top: 0.5rem;
554+    padding-bottom: 0.5rem;
555+    border-bottom: 1px solid #fefefe;
556+}
557+nav ul li a:hover {
558+    color: #f93a3a;
559+}
560+nav ul li:not(:last-child) {
561+    padding: 0 1rem 0 0;
562+}
563+.slim-description {
564+    margin-bottom: calc(16px * 2);
565+    color: #666;
566+}
567+.blog-post-content a {
568+    color: #f93a3a;
569+    text-decoration: none;
570+    border-bottom: 1px solid;
571+}
572+.blog-post-content a:hover {
573+    border-bottom: none;
574+}
575+.blog-list .list-item {
576+    display: flex;
577+    flex-direction: column-reverse;
578+    align-items: baseline;
579+    padding: 0.5rem 0.5rem 0.5rem 0;
580+}
581+.blog-list .post-title a {
582+    text-decoration: none;
583+    color: #333;
584+    border-bottom: none;
585+}
586+.blog-list .post-title a:hover {
587+    border-bottom: 1px solid;
588+}
589+.blog-list .date-label {
590+    font-size: 80%;
591+    margin-right: 1rem;
592+}
593+.content .title {
594+    font-size: 1.275rem;
595+}
596+.blog-post-content a {
597+    color: #f93a3a;
598+    text-decoration: none;
599+    border-bottom: 1px solid;
600+}
601+.blog-post-content a:hover {
602+    border-bottom: none;
603+}
604+.blog-post-content img {
605+    width: 100%;
606+}
607+.post-image {
608+    margin-left: calc(-1.3125rem);
609+    margin-right: calc(-1.3125rem);
610+}
611+.post-image img {
612+    width: 100%;
613+}
614+.tags {
615+    font-size: 0.9em;
616+    text-align: left;
617+}
618+.tags ul {
619+    display: block;
620+    padding: 0;
621+}
622+.tags ul li {
623+    display: inline;
624+    list-style-type: none;
625+    text-align: center;
626+}
627+.tags ul li a {
628+    border: 1px solid #f93a3a;
629+    border-radius: 3px;
630+    background: #f93a3a;
631+    padding: 0.2em;
632+    color: #fff;
633+    margin: 10px 2px 10px 0;
634+    line-height: 1em;
635+}
636+.tags ul li a:hover {
637+    background: #fefefe;
638+    color: #f93a3a;
639+}
640+.tags ul li:not(:last-child) {
641+    padding: 0 0.1rem 0 0;
642+}
643+.highlight {
644+    margin-left: calc(-1.3125rem);
645+    margin-right: calc(-1.3125rem);
646+}
647+.highlight pre {
648+    line-height: 1.2rem;
649+    border: 1px solid #ddd;
650+    border-radius: 5px;
651+    overflow: auto;
652+    padding: 1.3125rem;
653+    margin: 0;
654+}
655+.highlight pre code[class*="language-"] {
656+    font-size: 0.9em;
657+}
658+.highlight pre .token.comment {
659+    font-style: italic;
660+}
661+blockquote {
662+    background: #f9f9f9;
663+    border-left: 5px solid #333;
664+    margin: 1.5em 10px;
665+    padding: 0.5em 10px;
666+    quotes: "“" "”" "‘" "’";
667+}
668+blockquote:before {
669+    color: #333;
670+    content: open-quote;
671+    font-size: 4em;
672+    line-height: 0.1em;
673+    margin-right: 0.25em;
674+    vertical-align: -0.4em;
675+}
676+blockquote p {
677+    display: inline;
678+}
679+time {
680+    font-size: 80%;
681+    margin-right: 1rem;
682+}
683+@media only screen and (min-width: 600px) {
684+    .layout .title-wrapper {
685+        display: flex;
686+        justify-content: space-between;
687+        align-items: center;
688+        flex-direction: row;
689+    }
690+    .layout .title {
691+        margin-block-start: 0.83em;
692+        margin-block-end: 0.83em;
693+        margin-inline-start: 0;
694+        margin-inline-end: 0;
695+    }
696+    .blog-list .list-item {
697+        display: flex;
698+        justify-content: space-between;
699+        align-items: center;
700+        flex-direction: unset;
701+        padding: 0;
702+        margin-bottom: 0.5rem;
703+    }
704+    .blog-list .date-label {
705+        font-size: 100%;
706+        margin-right: 0;
707+    }
708+    .project-board {
709+        grid-template-columns: 1fr 1fr;
710+    }
711+    .highlight {
712+        margin-left: 0;
713+        margin-right: 0;
714+    }
715+    .post-image {
716+        margin-left: 0;
717+        margin-right: 0;
718+    }
719+}
720+
721diff --git a/templates/post.html b/templates/post.html
722index 7e0a909a4d894a4bb21020e25283e8a3fff97dcc..99a7852ec2df5ca8c82cd5af3fde2abf6bc2a5b1 100644
723--- a/templates/post.html
724+++ b/templates/post.html
725@@ -1,18 +1,20 @@
726 <!DOCTYPE html>
727 <html data-theme="light" lang="en">
728-<head>
729-    <% include!("head.html"); %>
730-</head>
731-<body>
732-<% include!("header.html"); %>
733-<main class="container">
734-    <h2><%- title %></h2>
735-    <h5>Created At: <%- date %></h2>
736-    <%- content %>
737-    </section>
738-</main>
739-</body>
740-
741-<script>
742-</script>
743+    <head>
744+        <% include!("head.html"); %>
745+    </head>
746+    <body>
747+        <div class="layout">
748+            <% include!("header.html"); %>
749+            <main>
750+                <article>
751+                    <h1><%- title %></h1>
752+                    <time>Created At: <%- date %></time>
753+                    <div class="blog-post-content">
754+                        <%- content %>
755+                    </div>
756+                </article>
757+            </main>
758+        </div>
759+    </body>
760 </html>