Start of website styling changes (redesigned index)

build.zig

@@ -3,12 +3,12 @@ const std = @import("std");
 const pkgs = struct {
     const koino = std.build.Pkg{
         .name = "koino",
-        .path = .{ .path = "./deps/koino/src/koino.zig" },
+        .source = .{ .path = "./deps/koino/src/koino.zig" },
         .dependencies = &[_]std.build.Pkg{
-            std.build.Pkg{ .name = "libpcre", .path = .{ .path = "deps/koino/vendor/libpcre.zig/src/main.zig" } },
+            std.build.Pkg{ .name = "libpcre", .source = .{ .path = "deps/koino/vendor/libpcre.zig/src/main.zig" } },
-            std.build.Pkg{ .name = "htmlentities", .path = .{ .path = "deps/koino/vendor/htmlentities.zig/src/main.zig" } },
+            std.build.Pkg{ .name = "htmlentities", .source = .{ .path = "deps/koino/vendor/htmlentities.zig/src/main.zig" } },
-            std.build.Pkg{ .name = "clap", .path = .{ .path = "deps/koino/vendor/zig-clap/clap.zig" } },
+            std.build.Pkg{ .name = "clap", .source = .{ .path = "deps/koino/vendor/zig-clap/clap.zig" } },
-            std.build.Pkg{ .name = "zunicode", .path = .{ .path = "deps/koino/vendor/zunicode/src/zunicode.zig" } },
+            std.build.Pkg{ .name = "zunicode", .source = .{ .path = "deps/koino/vendor/zunicode/src/zunicode.zig" } },
         },
     };
 };

src/main.zig

@@ -143,7 +143,9 @@ pub fn main() anyerror!void {
         var root_dir = try std.fs.cwd().makeOpenPath("render", .{});
         defer root_dir.close();
 
-        try website.renderMarkdownFile("website/index.md", root_dir, "index.htm");
+        try root_dir.writeFile("style.css", @embedFile("style.css"));
+
+        try website.renderHtmlFile("website/index.htm", root_dir, "index.htm");
 
         try website.renderArticleIndex(root_dir, "articles.htm");
 
@@ -537,7 +539,17 @@ const Website = struct {
         try self.renderFooter(writer);
     }
 
-    /// Render the markdown body into `dst_path`.
+    /// Render a given markdown file into `dst_path`.
+    fn renderHtmlFile(self: *Self, src_path: []const u8, dst_dir: std.fs.Dir, dst_path: []const u8) !void {
+        std.debug.assert(self.is_prepared);
+
+        var html_input = try std.fs.cwd().readFileAlloc(self.allocator, src_path, 10_000_000);
+        defer self.allocator.free(html_input);
+
+        try self.renderHtml(html_input, dst_dir, dst_path);
+    }
+
+    /// Render the html body into `dst_path`.
     fn renderHtml(self: Self, source: []const u8, dst_dir: std.fs.Dir, dst_path: []const u8) !void {
         std.debug.assert(self.is_prepared);
 
@@ -561,66 +573,7 @@ const Website = struct {
             \\  <meta charset="utf-8">
             \\  <meta name="viewport" content="width=device-width, initial-scale=1">
             \\  <title>ZEG</title>
-            \\<style>
+            \\  <link rel="stylesheet" href="/style.css">
-            //  Limit the text width of the body to roughly 40 characters
-            \\  body {
-            \\    max-width: 40em;
-            \\    margin-left: auto;
-            \\    margin-right: auto;
-            \\    font-family: sans;
-            \\  }
-            \\
-            \\  @media screen and (max-width: 600px) {
-            \\    body {
-            \\      padding: 2em;
-            \\    }
-            \\  }
-            // Align top-level headings
-            \\  h1 {
-            \\    text-align: center;
-            \\  }
-            \\
-            // Make images in headings and links exactly 1 character high.
-            \\  h1 img, h2 img, h3 img, h3 img, h4 img, h5 img, h6 img, a img {
-            \\    width: 1em;
-            \\    height: 1em;
-            \\    vertical-align: middle;
-            \\  }
-            \\
-            // center images in a paragraph and display them as a block
-            \\  p > img {
-            \\    display: block;
-            \\    max-width: 100%;
-            \\    margin-left: auto;
-            \\    margin-right: auto;
-            \\  }
-            \\ 
-            // Make nice top-level codeblocks
-            \\  body > pre {
-            \\    background-color: #EEE;
-            \\    padding: 0.5em;
-            \\  }
-            \\
-            // Make nice top-level blockquotes
-            \\  body > blockquote {
-            \\    border-left: 3pt solid cornflowerblue;
-            \\    padding-left: 0.5em;
-            \\    margin-left: 0.5em;
-            \\ }
-            \\
-            // Make links in headings invisible
-            \\  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
-            \\    text-decoration: none;
-            \\    font-weight: lighter;
-            \\    color: unset;
-            \\    opacity: 10%;
-            \\    margin-left: -1.5em;
-            \\    padding-left: 0.5em;
-            \\  }
-            \\  h1:hover a, h2:hover a, h3:hover a, h4:hover a, h5:hover a, h6:hover a {
-            \\    opacity: 50%;
-            \\  }
-            \\</style>
             \\</head>
             \\<body>
         );

src/style.css

@@ -0,0 +1,172 @@
+/* Limit the text width of the body to roughly 40 characters
+body {
+    max-width: 40em;
+    margin-left: auto;
+    margin-right: auto;
+    font-family: sans;
+}
+
+@media screen and (max-width: 600px) {
+    body {
+        padding: 2em;
+    }
+}
+// Align top-level headings
+h1 {
+    text-align: center;
+}
+
+// Make images in headings and links exactly 1 character high.
+h1 img, h2 img, h3 img, h3 img, h4 img, h5 img, h6 img, a img {
+    width: 1em;
+    height: 1em;
+    vertical-align: middle;
+}
+
+// center images in a paragraph and display them as a block
+p > img {
+    display: block;
+    max-width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+// Make nice top-level codeblocks
+body > pre {
+    background-color: #EEE;
+    padding: 0.5em;
+}
+
+// Make nice top-level blockquotes
+body > blockquote {
+    border-left: 3pt solid cornflowerblue;
+    padding-left: 0.5em;
+    margin-left: 0.5em;
+}
+
+// Make links in headings invisible
+h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+    text-decoration: none;
+    font-weight: lighter;
+    color: unset;
+    opacity: 10%;
+    margin-left: -1.5em;
+    padding-left: 0.5em;
+}
+h1:hover a, h2:hover a, h3:hover a, h4:hover a, h5:hover a, h6:hover a {
+    opacity: 50%;
+}*/
+
+@import"https://rsms.me/inter/inter.css";
+
+html {
+    font-family: "Inter", "Arial", sans-serif
+}
+
+@supports(font-variation-settings: normal) {
+    html {
+        font-family: "Inter var", "Arial", sans-serif
+    }
+}
+
+* {
+    box-sizing: border-box
+}
+
+html,
+body {
+    margin: 0
+}
+
+h1 {
+    margin: 0;
+    font-size: 24pt;
+    font-weight: 700;
+    letter-spacing: -2px
+}
+
+h2 {
+    font-size: 18pt;
+    font-weight: 600
+}
+
+ul.bars {
+    margin: 0;
+    padding: 0;
+    list-style: none
+}
+
+ul.bars li {
+    border-bottom: 1px solid gray;
+    margin-bottom: 15px;
+    padding-bottom: 15px;
+    font-size: 12pt
+}
+
+a {
+    color: #5c8ebf
+}
+
+strong,
+strong a {
+    color: #f7a41d
+}
+
+#intro {
+    padding: 80px
+}
+
+#intro-nav {
+    display: flex;
+    margin-bottom: 20px;
+    justify-content: space-between
+}
+
+#intro-grid {
+    display: grid;
+    gap: 40px;
+    grid-auto-rows: 1fr;
+    grid-template-columns: 1fr 1fr 1fr
+}
+
+@media only screen and (max-width: 1200px) {
+    #intro-grid {
+        grid-template-columns: 1fr 1fr
+    }
+}
+
+@media only screen and (max-width: 700px) {
+    #intro-grid {
+        display: block
+    }
+
+    #intro-grid>* {
+        display: block;
+        margin-bottom: 40px
+    }
+}
+
+#intro-grid a {
+    text-decoration: none
+}
+
+#docs {
+    display: flex
+}
+
+#docs-nav {
+    border-right: 1px solid gray;
+    padding: 40px 0px;
+    width: 20%
+}
+
+#docs-nav-header {
+    display: flex;
+    align-items: center;
+    flex-direction: column
+}
+
+#docs-body {
+    width: 80%;
+    padding: 40px
+}

website/index.htm

@@ -0,0 +1,67 @@
+<div id="intro">
+    <nav id="intro-nav">
+        <h1>zig embedded group</h1>
+        <img src="img/ember.svg" alt="vectorized Ember, the awesome zeg mascot!">
+    </nav>
+
+    <div id="intro-grid">
+        <div>
+            <h2>goals</h2>
+    
+            <ul class="bars">
+                <li>provide documents on how to get started with embedded programming (for absolute newbies)</li>
+                <li>provide example snippets for common operations on certain architectures (LPC, STM32, AVR, ...)</li>
+                <li>provide example worked through embedded mini-projects</li>
+                <li>create register definition libraries</li>
+                <li>create a common interface/HAL over several architectures</li>
+                <li>create a performant common set of drivers for external platforms</li>
+            </ul>
+        </div>
+        
+        <div>
+            <h2>important links</h2>
+            
+            <ul class="bars">
+                <li><strong><a href="#">documentation / getting started</a></strong></li>
+                <li><a href="#">tutorials</a></li>
+                <li><a href="#">code</a></li>
+            </ul>
+        </div>
+
+        <div>
+            <h2>community</h2>
+
+            <ul class="bars">
+                <li><a href="#">zig language discord</a></li>
+                <li><a href="#">zig embedded group discord</a></li>
+            </ul>
+        </div>
+
+        <div>
+            <h2>articles</h2>
+
+            <ul class="bars">
+                <li><a href="#">article 1</a></li>
+                <li><a href="#">article 2</a></li>
+                <li><a href="#">article 3</a></li>
+                <li><a href="#">read more...</a></li>
+            </ul>
+        </div>
+
+        <div>
+            <h2>members</h2>
+            
+            <ul class="bars">
+                <li><a href="https://github.com/MasterQ32/">Felix &quot;xq&quot; Queißner</a></li>
+                <li><a href="https://github.com/mattnite/">Matthew &quot;mattnite&quot; Knight</a></li>
+                <li><a href="https://github.com/vesim987/">Vesim</a></li>
+                <li><a href="https://github.com/FireFox317">Timon &quot;FireFox317&quot; Kruiper</a></li>
+                <li><a href="https://github.com/SpexGuy">Martin &quot;SpexGuy&quot; Wickham</a></li>
+            </ul>
+        </div>
+    </div>
+
+    <footer>
+        <img src="img/ember.svg" alt="vectorized Ember, the awesome zeg mascot!">
+    </footer>
+</div>

website/index.md

@@ -1,53 +0,0 @@
-# ![](img/pager.svg) Zig Embedded Group ![](img/battery.svg)
-
-This group was formed to document and improve the embedded programming experience with the [Zig programming language](https://ziglang.org).
-
-## ![](img/goals.svg) Goals
-
-- Provide documents on how to get started with embedded programming (for absolute newbies)
-- Provide example snippets for common opperations on certain architectures (LPC, STM32, AVR, ...)
-- Provide example worked through embedded mini-projects 
-- Create register definition libraries
-- Create a common interface/HAL over several architectures
-- Create a <i>performant</i> common set of drivers for external platforms
-
-## ![](img/teacher.svg) Introduction to embedded programming
-
-If you've never done any embedded development before, it's a good point to start with one of our tutorials:
-
-- (*WIP*) [Embedded Basics](tutorials/01-embedded-basics.htm): Aims to provide a basic understanding of the embedded environment.
-- (*WIP*) [Embedded Programming for Beginners](tutorials/02-embedded-programming.htm): Aims to provide a basic understanding of embedded programming concepts.
-- *Coming soon*
-
-## ![](img/articles.svg) Latest Articles
-
-The latest articles on embedded programming with Zig:
-
-<!-- ARTICLES -->
-
-[![](img/read-more.svg) See all articles...](articles.htm)
-
-[![Atom Feed](img/atom.svg) Subscribe the Atom feed](feed.atom)
-
-## ![](img/code.svg) Code
-
-Here are some highlighted projects the ZEG provides:
-
-- *Coming soon*
-
-[![](img/read-more.svg) See all ZEG repositories...](https://github.com/ZigEmbeddedGroup/)
-
-## ![](img/community.svg) Community
-
-This group uses the already existing [community infrastructures](https://github.com/ziglang/zig/wiki/Community) that exist for Zig. More specifically:
-
-- ZEG members are active on the unofficial Zig [Discord Server](https://discord.gg/TyzJXjser6)
-- For more specific embedded advice and ZEG internal development there is a [ZEG discord server](https://discord.gg/zqa3fgv6Ma)
-
-## ![](img/members.svg) Members
-
-- [Felix "xq" Queißner](https://github.com/MasterQ32/)
-- [Matthew "mattnite" Knight](https://github.com/mattnite/)
-- [Vesim](https://github.com/vesim987/)
-- [Timon "FireFox317" Kruiper](https://github.com/FireFox317)
-- [Martin "SpexGuy" Wickham](https://github.com/SpexGuy)