add mono css framework, add some boiler plate, get started on responsive design fixes

2025-07-26 04:48:30 -04:00
parent 378c8e09fb
commit bde72d0e93
25 changed files with 2077 additions and 32 deletions
--- a/_site/about/index.html
+++ b/_site/about/index.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http_equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>
+      Llmex Blog
+    </title>
+
+    <link rel="stylesheet" href="/css/mono.css">
+    <link rel="stylesheet" href="/css/responsive.css">
+    <meta name="description" content="A simple blog built with Elixir and Tableau">
+  </head>
+
+  <body class="mono-all">
+    <aside>
+      <nav>
+        <h1><a href="/">Llmex Blog</a></h1>
+        <ul>
+          <li><a href="/">Home</a></li>
+          <li><a href="/posts">Posts</a></li>
+          <li><a href="/about">About</a></li>
+        </ul>
+      </nav>
+    </aside>
+
+    <main>
+      <section>
+  <h2>About</h2>
+  <p>
+    Welcome to Llmex Blog, a demonstration of building static sites with Elixir's Tableau generator.
+    This blog showcases the power and elegance of functional programming applied to web development.
+  </p>
+</section>
+
+<section>
+  <h2>Technology Stack</h2>
+  <p>This blog is built using:</p>
+  <ul>
+    <li><a href="https://github.com/elixir-tools/tableau" target="_blank">Tableau</a> - Static site generator for Elixir</li>
+    <li><a href="https://github.com/artalar/mono" target="_blank">Mono</a> - A brutalist CSS framework for clean, semantic styling</li>
+  </ul>
+</section>
+
+<section>
+  <h2>Our Philosophy</h2>
+  <p>
+    We believe in the power of functional programming to create maintainable,
+    scalable, and elegant solutions. Through this blog, we aim to share insights,
+    tutorials, and experiences from the world of Elixir and functional web development.
+  </p>
+</section>
+
+<section class="about-contact">
+  <h2>Get in Touch</h2>
+  <p>
+    Interested in contributing or have questions? Feel free to reach out through
+    our community channels or open an issue on our GitHub repository.
+  </p>
+</section>
+
+      <footer>
+        <p>&copy; 2025 Llmex Blog. Built with <a href="https://github.com/artalar/mono" target="_blank">Mono</a> and <a href="https://github.com/elixir-tools/tableau" target="_blank">Tableau</a></p>
+      </footer>
+    </main>
+  </body>
+
+  
+    <script>
+  function log(message) {
+    if (true) {
+      console.log(`[web_dev_utils] ${message}`)
+    }
+  }
+  function connect() {
+    try {
+      window.socket = new WebSocket('ws://' + location.host + '/ws');
+
+      window.socket.onmessage = function(e) {
+        if (e.data === "reload") {
+          log("reloading!");
+          location.reload();
+        } else if (e.data === "subscribed") {
+          log("connected and subscribed!");
+        }
+      }
+
+      window.socket.onopen = () => {
+        waitForConnection(() => {
+          log("sending 'subscribe' message");
+          window.socket.send("subscribe")
+        }
+        , 300);
+      };
+
+      window.socket.onclose = () => {
+        setTimeout(() => connect(), 500);
+      };
+
+      function waitForConnection(callback, interval) {
+        log("waiting for connection!")
+        if (window.socket.readyState === 1) {
+          callback();
+        } else {
+          log("setting a timeout")
+          setTimeout(() => waitForConnection(callback, interval), interval);
+        }
+      }
+    } catch (e) {
+      log(e);
+      setTimeout(() => connect(), 500);
+    }
+  }
+
+  log("about to connect");
+  connect();
+</script>
+
+  
+</html>