Progress update: syncing current setup

2025-07-02 21:43:17 -04:00
parent f5f43578ec
commit 7aded68457
3 changed files with 155 additions and 4 deletions
--- a/public/css/style.css
+++ b/public/css/style.css
@ -0,0 +1,117 @@
+:root {
+  --navbar-height: 96px;
+  --footer-height: 24px;
+
+  /* Unused - just for reference */
+  --teal: 162, 223, 203;
+  --black: 25, 23, 30;
+  --brown: 81, 73, 65;
+  --tan: 158, 144, 112;
+  --lightblue: 147, 225, 242;
+
+  --background-color: white;
+  --header-color: rgb(var(--lightblue));
+  --footer-color: rgba(var(--teal));
+}
+
+html, body {
+  height: 100vh;
+  width: 100vw;
+  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+}
+
+html, body, p, h1, h2, h3, h4, h5, h6 {
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  display: grid;
+  grid-template-rows: var(--navbar-height) calc(100% - var(--navbar-height) - var(--footer-height)) var(--footer-height);
+  background-color: var(--background-color);
+}
+
+header {
+  background-color: var(--header-color);
+}
+
+footer {
+  background-color: var(--footer-color);
+}
+
+.container {
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.h-100 {
+  height: 100%;
+}
+
+nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.nav-logo > img {
+  width: 64px;
+  height: 64px;
+}
+
+.nav-logo > p {
+  color: red;
+}
+.nav-logo > p > span {
+  color: blue;
+}
+
+.nav-title {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+.nav-title > ul {
+  list-style: none;
+  margin: 0.5rem 0;
+  padding: 0;
+}
+.nav-title > ul > li {
+  display: inline;
+  float: left;
+}
+.nav-title > ul > li > a {
+  padding: 0 1rem;
+}
+
+/* -xs */
+@media (min-width: 576px) {
+  .container {
+    max-width: 540px;
+  }
+}
+/* -sm */
+@media (min-width: 768px) {
+  .container {
+    max-width: 720px;
+  }
+}
+/* -md */
+@media (min-width: 992px) {
+  .container {
+    max-width: 960px;
+  }
+}
+/* -lg */
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1140px;
+  }
+}
+/* -xl */
+@media (min-width: 1400px) {
+  .container {
+    max-width: 1320px;
+  }
+}
--- a/public/img/logo.png
+++ b/public/img/logo.png
--- a/src/_includes/layout.html
+++ b/src/_includes/layout.html
@ -3,15 +3,49 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
+  <meta name="generator" content="{{ eleventy.generator }}">
+
+  <!-- TODO: Meta tags for embedding -->
+
+  <link rel="stylesheet" href="css/style.css">
+
+  <title>CyBySide - Cyper's Blog</title>
 </head>
 <body>
  <header>
-    <h1>{{ title | default: "Bloggy" }}</h1>
+    <nav class="container h-100">
+      <div class="nav-logo">
+        <img class="site-logo" src="/img/logo.png" alt="CyBySide logo" />
+      </div>
+      <div class="nav-title">
+        <h1>{{ metadata.title }}</h1>
+        <ul>
+          <li><a href="/">Home</a></li>
+          <li><a href="/posts">Posts</a></li>
+          <li><a href="/about">About</a></li>
+        </ul>
+      </div>
+      <div class="nav-socials">
+        <i data-lucide="twitter"></i>
+        <i data-lucide="youtube"></i>
+        <i data-lucide="rss"></i>
+      </div>
+    </nav>
  </header>
  <main>
+    <div class="container">
      {{ content }}
+    </div>
  </main>
-  <footer></footer>
+  <footer>
+    <div class="container">
+      <a style="text-decoration: none;" href="{{ metadata.author.url }}">{{ metadata.author.name }}</a> &copy; {{ metadata.year }}
+    </div>
+  </footer>
+
+  <script src="https://unpkg.com/lucide@latest"></script>
+  <script>
+    lucide.createIcons();
+  </script>
 </body>
 </html>