Update .gitea/workflows/deploy.yml

- Convert template.html to a pandoc template ($title$/$body$)
- Update CI deploy and docs to use --template template.html
- Fix header.html title to match canonical
- Ignore generated index.html (regenerated by CI)
- Update AGENTS.md build commands and file structure

.gitea/README.md

@@ -5,5 +5,5 @@ This site is a silly basic html css webpage
 Uses pandoc to generate the page.
 
 ```
-pandoc index.md -s -o index.html --css styles.css
+pandoc index.md -s -o index.html --template template.html
 ```

.gitea/workflows/deploy.yml

@@ -15,13 +15,15 @@ jobs:
         run: apt-get update && apt-get install -y pandoc
 
       - name: Generate HTML
-        run: pandoc index.md -s -o index.html --css styles.css
+        run: pandoc index.md -s -o index.html --template template.html
 
       - name: Setup SSH key
         run: |
           mkdir -p ~/.ssh
           echo "${{ secrets.SSH_KEY }}" > ~/.ssh/id_ed25519
           chmod 600 ~/.ssh/id_ed25519
+          echo "Key Added"
+          ls ~/.ssh
 
       - name: Deploy to server via SCP
         run: |

.gitignore

@@ -1,2 +1,4 @@
-index.html
 package-lock.json
+
+# Generated by pandoc from index.md (see AGENTS.md); regenerated in CI
+index.html

AGENTS.md

@@ -0,0 +1,174 @@
+# AGENTS.md - Developer Guidelines for ahmza.dad
+
+## Project Overview
+
+This is a simple personal static website hosted at ahmza.dad. The site consists of:
+- `index.md` - Source markdown content
+- `index.html` - Generated HTML (via pandoc)
+- `styles.css` - Styling (retro terminal aesthetic with lime on black)
+- `nginx.conf` - Nginx server configuration
+
+## Build Commands
+
+### Generate HTML from Markdown
+
+```bash
+pandoc index.md -s -o index.html --template template.html
+```
+
+This single command regenerates `index.html` from the markdown source using
+the custom `template.html` layout (header, menu, content, footer grid). Do NOT
+use the plain `--css styles.css` form without `--template`, as pandoc's default
+template omits the custom grid layout and the page will render as a near-blank
+black screen.
+
+### Development Workflow
+
+1. Edit `index.md` to change content
+2. Run the pandoc command above to regenerate HTML
+3. Test locally by opening `index.html` in a browser
+
+### Automated Deployment (CI)
+
+Pushing to the `main` branch triggers `.gitea/workflows/deploy.yml`, which
+installs pandoc, regenerates `index.html` from `index.md` using
+`template.html`, then copies the artifacts to the server and reloads nginx.
+Because CI regenerates `index.html`, any hand-edits to `index.html` will be
+overwritten on the next push.
+
+### Deployment
+
+This is a static site served by nginx. The `nginx.conf` shows the configuration:
+- Serves from `/usr/share/nginx/html`
+- Uses `index.html` as the default index
+- Has gzip compression enabled
+- Caches static assets (images, CSS, JS) for 1 year
+
+To deploy, copy the files to the nginx html directory:
+```bash
+# Copy files to nginx directory (adjust path as needed)
+cp index.html styles.css /usr/share/nginx/html/
+# Reload nginx
+nginx -s reload
+```
+
+## Code Style Guidelines
+
+### General Principles
+
+- Keep it simple - this is a minimal static site
+- No JavaScript required unless absolutely necessary
+- No build tools, no frameworks
+
+### Markdown (index.md)
+
+- Use standard Markdown syntax
+- Front matter (YAML) goes at the top between `---` delimiters
+- Keep paragraphs concise and readable
+- Use minimal formatting - the site doesn't need complex markdown features
+
+### HTML (index.html)
+
+This file is GENERATED by pandoc - DO NOT EDIT DIRECTLY. All changes should be made to `index.md` and then regenerated.
+
+If you must hand-edit HTML:
+- Use 2 spaces for indentation
+- Lowercase tags and attributes
+- Quote all attribute values
+- Self-closing tags for void elements (`<meta />`, `<link />`, etc.)
+- Keep attributes in consistent order: `class`, `id`, `src`, `alt`, `href`, etc.
+
+### CSS (styles.css)
+
+The existing style uses a retro terminal aesthetic:
+- Background: black (`#000`)
+- Text: lime green (`lime` or `#00FF00`)
+- Font: Verdana/sans-serif, 14px base size
+
+When modifying:
+- Use 2 spaces for indentation
+- One selector per line, properties on new lines
+- Properties: value with space after colon
+- Use hex colors or named colors (like `lime`)
+- Group related styles together
+- Keep specificity low - avoid overly specific selectors
+
+Example:
+```css
+body {
+    background: #000;
+    color: lime;
+}
+
+.title {
+    color: lime;
+    padding: 10px;
+}
+```
+
+### Naming Conventions
+
+- Files: lowercase with hyphens (e.g., `styles.css`, `index.html`)
+- CSS classes: lowercase with hyphens (e.g., `.title`, `.text`)
+- IDs: lowercase with hyphens when needed
+
+### Error Handling
+
+There is no error handling in this static site. If the page doesn't load:
+1. Check that `index.html` exists and is valid
+2. Verify `styles.css` is linked correctly
+3. Check nginx error logs: `/var/log/nginx/error.log`
+
+## File Structure
+
+```
+ahmza-dad/
+├── index.md        # SOURCE - edit this file
+├── index.html      # GENERATED - do not edit directly (CI regenerates on push)
+├── template.html   # Pandoc template ($title$/$body$) - the page layout
+├── header.html     # Header partial (reference snippet)
+├── nav.html        # Menu/nav partial (reference snippet)
+├── footer.html     # Footer partial (reference snippet)
+├── styles.css      # Stylesheet
+├── nginx.conf      # Nginx configuration
+├── .gitignore      # Git ignore rules
+└── .gitea/
+    ├── README.md   # Project notes
+    └── workflows/
+        └── deploy.yml  # CI: regenerate HTML + deploy on push to main
+```
+
+Note: `header.html`, `nav.html`, and `footer.html` are standalone reference
+snippets. The actual page layout lives in `template.html`, which is what
+pandoc uses to build `index.html`.
+
+## Common Tasks
+
+### Adding a new page
+
+1. Create new markdown file (e.g., `about.md`)
+2. Add front matter with title
+3. Run: `pandoc about.md -s -o about.html --template template.html`
+4. Add to nginx.conf or link from existing pages
+
+### Adding images
+
+1. Place images in the same directory as `index.html`
+2. Reference with relative path: `<img src="image.png" alt="description">`
+3. Images are cached for 1 year per nginx.conf
+
+### Changing the theme
+
+Edit `styles.css`. The current theme is:
+- Black background with lime green text
+- Verdana font
+- Centered content with padding
+
+## Notes for Agents
+
+- This is a very simple project - no complexity is needed
+- Always edit `index.md` not `index.html` for content changes
+- Run the pandoc command after any markdown changes
+- No tests exist - manual verification is sufficient
+- No linting configured
+- Commit messages should be clear but brief

footer.html

@@ -0,0 +1,3 @@
+<div class="footer">
+  <p>ahmza</p>
+</div>

header.html

@@ -0,0 +1,3 @@
+<div class="header">
+  <h1>I want to be a dad!</h1>
+</div>

nav.html

@@ -0,0 +1,6 @@
+<div class="menu">
+  <ul>
+    <li><a href="https://ahmza.dad">ahmza.dad</a></li>
+    <li><a href="https://blog.ahmza.com">blog.ahmza.com</a></li>
+  </ul>
+</div>

styles.css

@@ -1,27 +1,143 @@
-body {
-	background: #000;
-	color: lime;
-	font-family: Verdana, Geneva, Tahoma, sans-serif;
-	font-size: 14px;
+* {
+	box-sizing: border-box;
 }
 
-.title {
+body {
+	font-family: Verdana, Geneva, Tahoma, sans-serif;
+	font-size: 14px;
+	background-color: #000;
+}
+
+.grid-container {
+	display: grid;
+	grid-template-areas:
+		'header'
+		'menu'
+		'main'
+		'footer';
+	color: lime;
+	gap: 10px;
+}
+
+.header {
+	grid-area: header;
+	text-align: center;
+	color: lime;
+}
+
+.header>h1 {
 	color: lime;
 	padding: 10px;
 	margin-bottom: 10px;
 	text-transform: uppercase;
-	text-decoration: underline double grey;
+	text-decoration: underline double green;
 }
 
-h1 {
+.menu {
+	grid-area: menu;
+	border-right: dashed;
+	margin-right: 10px;
+}
+
+.menu ul {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+}
+
+.menu li {
+	padding: 8px;
+	margin-bottom: 7px;
+}
+
+.menu li a {
+	color: lime;
+	text-decoration: none;
+}
+
+.menu li a:hover {
+	color: green;
+}
+
+.content {
+	grid-area: main;
+}
+
+.content>h1 {
 	font-size: 2em;
-	text-align: center;
+	margin-bottom: 10px;
 }
 
-p {
-	text-align: center;
+.content>p {
+	margin-bottom: 7px;
 }
 
-.text {
-	padding: 20px;
+.footer {
+	grid-area: footer;
+	color: lightgrey;
+	text-align: center;
+	position: fixed;
+	width: 100%;
+	left: 0;
+	bottom: 0;
+
+}
+
+/* Extra small devices (phones, 600px and down) */
+@media only screen and (max-width: 600px) {
+	.header {
+		grid-area: 1 / span 6;
+	}
+
+	.menu {
+		grid-area: 2 / span 1;
+	}
+
+	.content {
+		grid-area: 2 / span 4;
+	}
+
+	.footer {
+		grid-area: 4 / span 6;
+	}
+}
+
+/* Small devices (portrait tablets and large phones, 600px and up) */
+@media only screen and (min-width: 600px) {
+	body {
+		font-size: 18px;
+	}
+}
+
+/* Medium devices (landscape tablets, 768px and up) */
+@media only screen and (min-width: 768px) {
+	.header {
+		grid-area: 1 / span 6;
+	}
+
+	.menu {
+		grid-area: 2 / span 1;
+	}
+
+	.content {
+		grid-area: 2 / span 4;
+	}
+
+	.footer {
+		grid-area: 3 / span 6;
+	}
+
+}
+
+/* Large devices (laptops/desktops, 992px and up) */
+@media only screen and (min-width: 992px) {}
+
+/* Extra large devices (large laptops and desktops, 1200px and up) */
+@media only screen and (min-width: 1200px) {}
+
+@media (prefers-reduced-motion: reduce) {
+	* {
+		animation: none !important;
+		transition: none !important;
+	}
 }

template.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="generator" content="pandoc" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <title>$title$</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <div class="grid-container">
+
+    <div class="header">
+      <h1>$title$</h1>
+    </div>
+
+    <div class="menu">
+      <ul>
+        <li><a href="https://ahmza.dad">ahmza.dad</a></li>
+        <li><a href="https://blog.ahmza.com">blog.ahmza.com</a></li>
+      </ul>
+    </div>
+
+    <div class="content">
+      $body$
+    </div>
+
+    <div class="footer">
+      <p>ahmza</p>
+    </div>
+
+  </div>
+</body>
+
+</html>