redo styling and add a blog

content/_index.md

@@ -1,33 +1,41 @@
 +++
+title = "Home"
+template = "index.html"
 +++
 
-<header>
+<div class="hero">
-  <img src="logo.svg" alt="uutils" class="logo" />
+<img src="logo.svg">
-  <h1 class="title">uutils</h1>
+<div>uutils</div>
-</header>
+</div>
 
 The uutils project reimplements ubiquitous command line utilities in
 Rust. Our goal is to modernize the utils, while retaining full
 compatibility with the existing utilities.
 
-## Projects
+# Projects
 
 <div class="projects">
   <a class="project" href="/coreutils">
-    <span aria-hidden="true">&gt;</span>
+    <h2>coreutils</h2>
-    coreutils
+    <p>
+      The commands you use everyday: <code>ls</code>, <code>cp</code>, etc.
+    </p>
   </a>
   <a class="project" href="/findutils">
-    <span aria-hidden="true">&gt;</span>
+    <h2>findutils</h2>
-    findutils
+    <p>
+      Finding what you need: <code>find</code>, <code>locate</code>, <code>updatedb</code> &amp; <code>xargs</code>.
+    </p>
   </a>
   <a class="project" href="/diffutils">
-    <span aria-hidden="true">&gt;</span>
+    <h2>diffutils</h2>
-    diffutils
+    <p>
+      Comparing text and files: <code>diff</code>, <code>cmp</code>, <code>diff3</code>, <code>sdiff</code>.
+    </p>
   </a>
 </div>
 
-## Crates
+# Crates
 
 We maintain a variety of public crates to support our projects,
 which are published on [crates.io](https://crates.io/).
@@ -36,7 +44,7 @@ which are published on [crates.io](https://crates.io/).
 - [`parse_datetime`](https://github.com/uutils/parse_datetime)
 - [`uutils-term-grid`](https://github.com/uutils/uutils-term-grid)
 
-## Contributing
+# Contributing
 
 You can help us out by:
 
@@ -48,7 +56,7 @@ You can help us out by:
 
 You can join our [Discord server](https://discord.gg/wQVJbvJ) to discuss or ask anything concerning uutils. We're happy to help you get started with contributing!
 
-## Friends of uutils
+# Friends of uutils
 
 We collaborate with and build upon many other projects in the Rust
 community, either by using or providing crates. We highly recommend

content/blog/_index.md

@@ -0,0 +1,6 @@
++++
+template = "section.html"
+sort_by = "date"
+page_template = "post.html"
+title = "Blog"
++++

content/blog/test.md

@@ -0,0 +1,10 @@
++++
+title = "Test post"
+draft = true
+date = 2024-01-31
+authors = ["Terts Diepraam"]
++++
+
+This is a test post
+
+# Heading 1

content/gsoc.md

@@ -1,9 +1,7 @@
 +++
-title = "GSOC"
+title = "Uutils at GSOC"
 +++
 
-# Uutils at GSOC
-
 Google summer of code is:
     
 > Google Summer of Code is a global, online program focused on bringing

static/style.css

@@ -1,5 +1,3 @@
-/* All these styles are adapted from oranda to match their look */
-@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700;900&display=swap");
 :root {
   --dark-fg-color: #fff;
   --light-fg-color: #141414;
@@ -68,6 +66,8 @@ body {
 body {
   line-height: inherit;
   margin: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 .container {
@@ -80,45 +80,119 @@ body {
   flex-grow: 1;
 }
 
-/* REPO BANNER */
-.repo_banner {
-  background-color: var(--fg-color);
-  color: var(--bg-color);
-  padding-bottom: 0.375rem;
-  padding-top: 0.375rem;
-}
-
-.repo_banner > a {
-  align-items: flex-start;
-  display: flex;
-  gap: 0.5rem;
-  height: 20px;
-  justify-content: center;
-}
-.repo_banner > a,
-.repo_banner > a:hover {
-  color: rgb(248 250 252);
-}
-.repo_banner > a:hover {
-  text-decoration-color: #f8fafc;
-  text-decoration-line: underline;
-  text-underline-offset: 1px;
-}
-
 /* HEADER */
-.logo {
+header {
+  display: grid;
+  grid-template-columns: repeat(2, max-content) max-content 1fr max-content;
+  column-gap: 1em;
+  align-items: center;
+  justify-items: center;
+  padding: 0.5rem 2rem;
+  width: 100%;
+  border-bottom: 1px solid #ddd;
+  font-size: 1.2rem;
+}
+
+header .home {
+  color: black;
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+header .home:first-child {
+  display: flex;
+  align-items: center;
+  vertical-align: center;
+}
+
+header .home svg {
+  height: 3rem;
+  width: 3rem;
+}
+
+header a {
+  color: black;
+  border-bottom: 2px solid transparent;
+}
+
+header a:hover:not(.home) {
+  color: black;
+  border-bottom: 2px solid #c04828;
+}
+
+.navigation-block {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+
+header .icon {
+  display: flex;
+  align-items: center;
+}
+
+#mobile-open-navigation button {
+  display: none;
+}
+
+#mobile-open-navigation {
+  justify-self: right;
+}
+
+@media (max-width: 640px) {
+  #mobile-open-navigation button {
+    display: block;
+    flex-direction: column;
+    background-color: transparent;
+  }
+
+  #mobile-open-navigation button div {
+    margin: 0.5em 0;
+    width: 2em;
+    border-bottom: 0.25em solid black;
+  }
+
+  header {
+    grid-template-columns: max-content 1fr;
+  }
+  
+  .spacer {
+    display: none;
+  }
+
+  .navigation-block {
+    margin-top: 0.5em;
+    grid-column: auto / span 2;
+    justify-self: left;
+  }
+  
+  header:not(.open) .spacer,
+  header:not(.open) .navigation-block {
+    display: none;
+  }
+}
+
+/* HERO */
+.hero {
+  margin: 2rem 0;
+}
+
+.hero img {
   display: block;
-  height: 170px;
+  height: 14em;
   margin: auto;
 }
-.title {
+
+.hero div {
   font-size: 3.75rem;
   line-height: 1;
   text-align: center;
   padding-bottom: 0.5rem;
+  font-weight: bold;
 }
+
 @media (min-width: 640px) {
-  .title {
+  .hero div {
     font-size: 6rem;
     line-height: 1;
   }
@@ -126,8 +200,9 @@ body {
 
 /* MAIN */
 main {
-  margin: 6rem auto;
+  margin: 1rem auto;
-  max-width: 80%;
+  width: 80%;
+  flex: 1;
 }
 
 @media (min-width: 1024px) {
@@ -137,7 +212,7 @@ main {
 }
 
 h1 {
-  font-size: 1.875rem;
+  font-size: 1.5rem;
   font-weight: 900;
   line-height: 2.25rem;
   line-height: 1.25;
@@ -153,7 +228,7 @@ p {
 
 @media (min-width: 640px) {
   h1 {
-    font-size: 3.75rem;
+    font-size: 3rem;
     line-height: 1;
   }
 
@@ -216,35 +291,91 @@ footer {
   width: 1.25rem;
 }
 
+.github-icon-black {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='000' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
+  height: 1em;
+  width: 1em;
+}
+
 .projects {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   flex-wrap: wrap;
   justify-content: space-between;
   width: 100%;
-  gap: 1rem;
+  gap: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .project {
-  flex-basis: 20rem;
+  border-left: 0.3em solid gray;
-  flex-grow: 1;
+  padding: 1rem;
-  border: 3px solid #888;
-  border-radius: 6px;
-  padding: 2rem;
   text-decoration: none;
   color: var(--fg-color);
-  font-size: 2rem;
-  font-weight: 700;
   transition: text-decoration 0.3s;
   transition: border-color 0.3s;
 }
-.project > span {
+
+.project h2 {
+  margin-top: 0;
+  font-family: monospace;
+}
+
+.project p {
+  margin-bottom: 0;
+}
+
+.project>span {
   color: transparent;
   transition: color 0.3s;
 }
-.project:hover > span {
+
+.project:hover>span {
   color: black;
 }
+
 .project:hover {
-  border-color: black;
+  border-color: #c04828;
 }
+
+.title {
+  font-size: 3em;
+  font-weight: bold;
+  margin-bottom: 0.5em;
+}
+
+@media (min-width: 640px) {
+  .title {
+    font-size: 4rem;
+    line-height: 1;
+  }
+}
+
+.details {
+  margin-bottom: 1.5em;
+  color: #333;
+}
+
+.post-thingy {
+  display: block;
+  padding: 1em;
+  color: black;
+  background: #e5e5e5;
+  border-radius: 0.3em;
+  border: 0.2em solid #e5e5e5;
+  margin-bottom: 0.5em;
+}
+
+.post-thingy:hover {
+  border-color: #c04828;
+  background: transparent;
+}
+
+.post-thingy h1 {
+  margin-bottom: 0.2em;
+}
+
+blockquote {
+  border-left: 0.2em solid gray;
+  padding-left: 1em;
+}

templates/base.html

@@ -1,35 +1,55 @@
 <!DOCTYPE html>
 <html>
-  <head>
+
-    <title>
+<head>
-      {%- block title -%}
+  <title>
-        {{ config.title }}
+    {%- block title -%}
-      {%- endblock title -%}
+    {{ config.title }}
-    </title>
+    {%- endblock title -%}
-    <meta charset="utf-8">
+  </title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta charset="utf-8">
-    <link href="/style.css" rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  </head>
+  <link href="/style.css" rel="stylesheet">
-  <body>
+</head>
-    <div class="container">
+
-      <div class="page-body">
+<body>
-        <div class="repo_banner">
+  <header>
-          <a href="https://github.com/uutils">
+    <a href="/" class="home">{% include "logo.html" %}</a>
-            <div class="github-icon" aria-hidden="true"></div>
+    <div id="mobile-open-navigation">
-            Check out our GitHub!
+      <button id="open-header-button">
-          </a>
+        <div></div>
-        </div>
+        <div></div>
-        <main>
+        <div></div>
-          {%- block main -%}
+      </button>
-          {%- endblock main -%}
-        </main>
-      </div>
-      <footer>
-        <a href="https://github.com/uutils">
-          <div class="github-icon" aria-hidden="true"></div>
-        </a>
-        <span>uutils, MIT</span>
-      </footer>
     </div>
-  </body>
+    <div class="navigation-block">
-</html>
+      <a href="/coreutils">coreutils</a>
+      <a href="/findutils">findutils</a>
+      <a href="/diffutils">diffutils</a>
+    </div>
+    <div class="spacer"></div>
+    <div class="navigation-block">
+      <a href="/blog">blog</a>
+      <a href="/gsoc">GSOC</a>
+      <a href="https://github.com/uutils" class="icon">
+        <div class="github-icon-black" aria-hidden="true"></div>
+      </a>
+    </div>
+  </header>
+  <main>
+    {%- block main -%}
+    {%- endblock main -%}
+  </main>
+  <footer>
+    <a href="https://github.com/uutils">
+      <div class="github-icon" aria-hidden="true"></div>
+    </a>
+    <span>uutils, MIT</span>
+  </footer>
+  <script defer>
+    document.getElementById("open-header-button").addEventListener("click", () => {
+      document.getElementsByTagName("header")[0].classList.toggle("open");
+    });
+  </script>
+</body>
+</html>

templates/logo.html

@@ -0,0 +1,61 @@
+<svg height="106" width="106" viewbox="0 0 106 106" id="logo"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg">
+  <g id="logo" transform="translate(53, 53)">
+    <g id="gear" mask="url(#holes)">
+      <circle r="43" fill="none" stroke="var(--fg-color)" stroke-width="9" />
+      <g id="cogs">
+        <polygon id="cog" stroke="var(--fg-color)" stroke-width="3" stroke-linejoin="round" points="46,3 51,0 46,-3" />
+        <use xlink:href="#cog" transform="rotate(11.25)" />
+        <use xlink:href="#cog" transform="rotate(22.50)" />
+        <use xlink:href="#cog" transform="rotate(33.75)" />
+        <use xlink:href="#cog" transform="rotate(45.00)" />
+        <use xlink:href="#cog" transform="rotate(56.25)" />
+        <use xlink:href="#cog" transform="rotate(67.50)" />
+        <use xlink:href="#cog" transform="rotate(78.75)" />
+        <use xlink:href="#cog" transform="rotate(90.00)" />
+        <use xlink:href="#cog" transform="rotate(101.25)" />
+        <use xlink:href="#cog" transform="rotate(112.50)" />
+        <use xlink:href="#cog" transform="rotate(123.75)" />
+        <use xlink:href="#cog" transform="rotate(135.00)" />
+        <use xlink:href="#cog" transform="rotate(146.25)" />
+        <use xlink:href="#cog" transform="rotate(157.50)" />
+        <use xlink:href="#cog" transform="rotate(168.75)" />
+        <use xlink:href="#cog" transform="rotate(180.00)" />
+        <use xlink:href="#cog" transform="rotate(191.25)" />
+        <use xlink:href="#cog" transform="rotate(202.50)" />
+        <use xlink:href="#cog" transform="rotate(213.75)" />
+        <use xlink:href="#cog" transform="rotate(225.00)" />
+        <use xlink:href="#cog" transform="rotate(236.25)" />
+        <use xlink:href="#cog" transform="rotate(247.50)" />
+        <use xlink:href="#cog" transform="rotate(258.75)" />
+        <use xlink:href="#cog" transform="rotate(270.00)" />
+        <use xlink:href="#cog" transform="rotate(281.25)" />
+        <use xlink:href="#cog" transform="rotate(292.50)" />
+        <use xlink:href="#cog" transform="rotate(303.75)" />
+        <use xlink:href="#cog" transform="rotate(315.00)" />
+        <use xlink:href="#cog" transform="rotate(326.25)" />
+        <use xlink:href="#cog" transform="rotate(337.50)" />
+        <use xlink:href="#cog" transform="rotate(348.75)" />
+      </g>
+      <g id="mounts">
+        <polygon id="mount" stroke="var(--fg-color)" stroke-width="6" stroke-linejoin="round" points="-7,-42 0,-35 7,-42" />
+        <use xlink:href="#mount" transform="rotate(72)" />
+        <use xlink:href="#mount" transform="rotate(144)" />
+        <use xlink:href="#mount" transform="rotate(216)" />
+        <use xlink:href="#mount" transform="rotate(288)" />
+      </g>
+    </g>
+    <mask id="holes">
+      <rect x="-60" y="-60" width="120" height="120" fill="white" />
+      <circle id="hole" cy="-40" r="3" />
+      <use xlink:href="#hole" transform="rotate(72)" />
+      <use xlink:href="#hole" transform="rotate(144)" />
+      <use xlink:href="#hole" transform="rotate(216)" />
+      <use xlink:href="#hole" transform="rotate(288)" />
+    </mask>
+  </g>
+  <path aria-label="U" transform="matrix(1.1188958,0,0,1.3531467,106.90401,-3.0479991)" style="fill:#c04828"
+    d="m -30.914582,47.152116 c 0,-6.410851 0,-27.142255 0,-27.142255 h -9.981735 c 0,0 0,22.706465 0,27.142255 0,4.43579 -0.989404,8.475308 -7.250584,8.492265 -6.26118,0.01696 -7.308935,-4.147055 -7.308935,-8.492265 V 20.009861 h -9.981735 v 27.142255 c 0,6.425292 2.643496,15.679002 17.261495,15.679002 14.617999,0 17.261494,-9.268151 17.261494,-15.679002 z" />
+</svg>

templates/page.html

@@ -5,5 +5,6 @@
 {%- endblock title -%}
 
 {%- block main -%}
+    <div class="title">{{ page.title }}</div>
     {{ page.content | safe }}
 {%- endblock main -%}

templates/post.html

@@ -0,0 +1,14 @@
+{%- extends "base.html" -%}
+
+{%- block title -%}
+    {{ page.title }} | uutils
+{%- endblock title -%}
+
+{%- block main -%}
+    <div class="title">{{ page.title }}</div>
+    <div class="details">
+        <div class="date">{{ page.date | date(format="%b %e, %Y") }}</div>
+        <div class="authors">{{ page.authors | join(sep=", ") }}</div>
+    </div>
+    {{ page.content | safe }}
+{%- endblock main -%}

templates/section.html

@@ -0,0 +1,15 @@
+{%- extends "base.html" -%}
+
+{%- block main -%}
+    <div class="title">{{ section.title }}</div>
+    {{ section.content | safe }}
+
+    {% for post in section.pages %}
+        <a class="post-thingy" href="{{ post.permalink }}">
+            <h1>{{ post.title }}</h1>
+            <div>{{ post.date | date(format="%b %e, %Y") }}</div>
+        </a>
+    {% else %}
+    No posts yet.
+    {% endfor %}
+{%- endblock main -%}