Initial commit

.forgejo/workflows/build.yml

@@ -0,0 +1,23 @@
+name: Build
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+
+      - name: Set up zola
+        uses: https://github.com/taiki-e/install-action@v2
+        with:
+          tool: zola@0.22.1
+
+      - name: Build project
+        run: zola build

.gitignore

@@ -0,0 +1 @@
+build

README.md

@@ -0,0 +1,3 @@
+# rgebee-info
+
+Personal website.

config.toml

@@ -0,0 +1,15 @@
+base_url = "https://rgebee.quartznet.info"
+author = "Rgebee"
+title = "Rgebee"
+description = "Personal website"
+output_dir = "build"
+compile_sass = false
+generate_feeds = true
+build_search_index = false
+
+[markdown]
+
+[markdown.highlighting]
+theme = "catppuccin-macchiato"
+
+[extra]

content/blog/_index.md

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

content/blog/post-content-styles.md

@@ -0,0 +1,75 @@
++++
+title = "Testing post content styles"
+date = 2026-01-03
++++
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum neque eget
+nunc mattis eu sollicitudin enim tincidunt. Vestibulum lacus tortor, ultricies id
+dignissim ac, bibendum in velit.
+
+# Test subheading (h1)
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+## Test subheading (h2)
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+### Test subheading (h3)
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+#### Test subheading (h4)
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+##### Test subheading (h5)
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+## Test unordered list
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+* Bullet point in the list
+  * Bullet point in the list
+* Bullet point in the list
+  * Bullet point in the list
+* Bullet point in the list
+
+## Test ordered list
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+1. First item in the list
+2. Second item in the list
+3. Third item in the list
+4. Fourth item in the list
+
+## Test code
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+```html
+<html>
+  <head>
+    <title>Test title</title>
+  </head>
+  <body>
+    <p>Hello, World!</p>
+  </body>
+</html>
+```
+
+## Test image
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+![xkcd computer problems](/images/computer-problems.png)
+
+## Test blockquote
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+> Lorem ipsum dolor sit amet, consectetur adipiscing elit.

static/global.css

@@ -0,0 +1,278 @@
+:root {
+  --background-color: #212529;
+  --text-color: #ededed;
+  --primary-color: #133b6e;
+  --accent-color: #dc7c28;
+  --link-color: #569cd6;
+  --border1-color: #dc7c28;
+  --border2-color: #3d444d;
+}
+
+body {
+  box-sizing: border-box;
+  background-color: var(--background-color);
+  color: var(--text-color);
+  font-family: sans-serif;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0 auto;
+}
+
+html {
+  min-height: 100%;
+  scroll-behavior: smooth;
+  font-size: 100%;
+}
+
+h1 {
+  font-size: 1.8rem;
+}
+
+h2 {
+  font-size: 1.5rem;
+}
+
+h3 {
+  font-size: 1.25rem;
+}
+
+h4 {
+  font-size: 1.1rem;
+}
+
+h5 {
+  font-size: 1rem;
+}
+
+small {
+  font-size: 0.667rem; /* 10.72px */
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 24px;
+  margin-bottom: 10px;
+  color: var(--text-color);
+  line-height: 1.2;
+  font-weight: 700;
+}
+
+p {
+  margin-top: 8px;
+}
+
+ul {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+ul,
+ol {
+  list-style-position: inside;
+  padding-left: 0px;
+}
+
+ul {
+  list-style-type: disc;
+}
+
+ul ul {
+  list-style-type: disc;
+  padding-left: 10px;
+}
+
+.container {
+  max-width: 34rem;
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding: 10px;
+}
+
+@media (min-width: 576px) {
+  .container {
+    width: 540px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    width: 720px;
+  }
+}
+
+@media (min-width: 992px) {
+  .container {
+    width: 960px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container {
+    width: 1140px;
+  }
+}
+
+hr {
+  background-color: var(--border1-color);
+}
+
+blockquote {
+  border-left: 4px solid var(--border1-color);
+  margin-left: 0px;
+  padding-left: 10px;
+}
+
+a {
+  border-bottom: 2px solid transparent;
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+a:hover {
+  border-bottom: 2px solid var(--link-color);
+  text-decoration: none;
+}
+
+main {
+  color: var(--text-color);
+  font-size: 1rem;
+}
+
+main img {
+  max-width: 100%;
+}
+
+/* code blocks */
+figure {
+  margin: 0;
+}
+
+pre {
+  padding: 8px;
+  border: 1px solid var(--border2-color);
+}
+
+pre code {
+  overflow-x: scroll;
+  display: block;
+  border-radius: 0;
+  color: #e1e4e8;
+}
+
+.title h1 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+/* header/footer */
+header {
+  color: var(--text-color);
+  margin-bottom: 5px;
+}
+
+nav {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+nav ul {
+  list-style-type: none;
+  flex-direction: row;
+  gap: 25px;
+}
+
+nav li {
+  font-weight: bold;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border-top: 3px solid var(--border1-color);
+  color: var(--text-color);
+}
+
+
+/* blog-list */
+.blog-list {
+  flex-direction: column;
+  gap: 5px;
+  margin-top: 0;
+  margin-bottom: 10px;
+  list-style: none;
+  padding: 0;
+}
+
+.blog-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 6px 0px;
+}
+
+.blog-item a {
+  font-size: 1.063rem;
+  font-weight: bold;
+}
+
+.blog-item-meta {
+  font-size: 0.875rem;
+}
+
+
+/* index content */
+.index-content .title {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.index-content .title img {
+  width: 64px;
+  height: 64px;
+  border-radius: 5px;
+}
+
+
+/* blog content */
+.blog-content .title {
+  margin-bottom: 10px;
+}
+
+
+/* blog-page content */
+.blog-page-content .title {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  border-bottom: 3px solid var(--border1-color);
+  margin-bottom: 20px;
+}
+
+.blog-page-content .title h1 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+.blog-page-content .title span {
+  margin-bottom: 10px;
+  font-size: 0.875rem;
+  font-weight: normal;
+  color: var(--text-color);
+}

templates/404.html

@@ -0,0 +1,9 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="404-content">
+  <div class="title">
+    <h1>404 Page Not Found</h1>
+  </div>
+</div>
+{% endblock content %}

templates/base.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>
+      {% if page.title %}
+        {{ page.title }}
+      {% elif section.title %}
+        {{ config.title }} - {{ section.title }}
+      {% else %}
+        {{ config.title }}
+      {% endif %}
+    </title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <meta name="description" content="{{ config.description }}">
+    <link rel="stylesheet" href="/global.css">
+    <link rel="icon" type="image/svg+xml" href="/images/favicon.svg">
+    <link
+      rel="alternate"
+      type="application/atom+xml"
+      title="RSS"
+      href="{{ config.base_url }}/atom.xml"
+    >
+  </head>
+
+  <body>
+    <header class="container">
+      <nav>
+        <ul>
+          <li>
+            <a href="/">Home</a>
+          </li>
+          <li>
+            <a href="/blog">Blog</a>
+          </li>
+        </ul>
+      </nav>
+    </header>
+
+    <main class="container">
+      {% block content %} {% endblock content %}
+    </main>
+
+    <footer class="container">
+      <a href="/atom.xml" target="_blank" rel="noopener">RSS</a>
+    </footer>
+  </body>
+</html>

templates/blog-page.html

@@ -0,0 +1,12 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="blog-page-content">
+  <div class="title">
+    <h1>{{ page.title }}</h1>
+    <span>{{ page.date }}</span>
+  </div>
+  {{ page.content | safe }}
+  </div>
+</div>
+{% endblock content %}

templates/blog.html

@@ -0,0 +1,21 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="blog-content">
+  <div class="title">
+    <h1>{{ section.title }}</h1>
+  </div>
+  <div>
+    <ul class="blog-list">
+      {% for page in section.pages %}
+        <li class="blog-item">
+          <div>
+            <a href="{{ page.permalink | safe }}">{{ page.title }}</a>
+          </div>
+          <span class="blog-item-meta">{{ page.date }}</span>
+        </li>
+      {% endfor %}
+    </ul>
+  </div>
+</div>
+{% endblock content %}

templates/index.html

@@ -0,0 +1,29 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="index-content">
+  <div class="title">
+    <img src="/images/logo.png" alt="logo" />
+    <h1>{{ config.title }}</h1>
+  </div>
+  <div>
+    <p>
+      I'm a software developer interested in game development and design.
+    </p>
+  </div>
+  <div>
+    <h2>Latest blog posts</h2>
+    <ul class="blog-list">
+      {% set blog = get_section(path="blog/_index.md") %}
+      {% for page in blog.pages | slice(end=5) %}
+        <li class="blog-item">
+          <div>
+            <a href="{{ page.permalink | safe }}">{{ page.title }}</a>
+          </div>
+          <span class="blog-item-meta">{{ page.date }}</span>
+        </li>
+      {% endfor %}
+    </ul>
+  </div>
+</div>
+{% endblock content %}