+++
+title = "second post"
+date = "2026-06-01"
+++
+
+so, what does this mean?
text-decoration: underline;
}
+h1 a {
+ color: #000;
+ text-decoration: none;
+}
+
+h1 a:hover {
+ text-decoration: underline;
+}
+
h1 {
font-size: 2.5em;
margin-bottom: 10px;
color: #000;
}
+.content-body,
+.post,
+.about-section,
+.project-section,
+.more-section {
+ position: relative;
+ padding: 40px;
+ margin-left: 20px;
+ background: transparent;
+}
+
+.content-body::before,
+.post::before {
+ content: '';
+ position: absolute;
+ top: -20px;
+ left: -60px;
+ width: calc(100% + 120px);
+ height: 2px;
+ background: #000;
+ transform-origin: center;
+}
+
+.content-body::before {
+ transform: rotate(4deg);
+}
+
+.post::before {
+ transform: rotate(-4deg);
+}
+
+.section-title {
+ font-size: 2.1em;
+ margin-bottom: 24px;
+}
+
+.post-list {
+ list-style: none;
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+
+.post-list-item {
+ position: relative;
+ padding-bottom: 20px;
+}
+
+.post-list-item::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ height: 1px;
+ background: #000;
+ transform: rotate(-1deg);
+}
+
+.post-list-item a {
+ color: #000;
+ text-decoration: none;
+ font-size: 1.3em;
+}
+
+.post-list-item a:hover {
+ text-decoration: underline;
+}
+
+.post-excerpt,
+.post-content {
+ margin-top: 12px;
+}
+
+.subtitle {
+ margin-bottom: 20px;
+}
+
+.miniblog-post {
+ padding-top: 28px;
+ padding-bottom: 28px;
+}
+
@media (max-width: 768px) {
.project-section {
grid-template-columns: 1fr;
}
+
+ .content-body,
+ .post,
+ .about-section,
+ .project-section,
+ .more-section {
+ padding: 24px;
+ }
}
.decorations .stronk {
<head>
<meta charset="utf-8">
- <title>MyBlog</title>
+ <title>{% block title %}MyBlog{% endblock title %}</title>
+ <link rel="icon" type="image/x-icon" href="{{ get_url(path='favicon.ico') }}">
+ <link rel="stylesheet" href="{{ get_url(path='styles.css') }}">
</head>
<body>
- <section class="section">
- <div class="container">
- {% block content %} {% endblock content %}
+ <div class="container">
+ <div class="kaomoji-sidebar kaomoji-left">
+ <div class="scroll-text" id="kaomoji-left"></div>
</div>
- </section>
+
+ <main class="content">
+ <header class="header">
+ <h1><a href="/">My Blog</a></h1>
+ <nav class="nav">
+ <a href="/">Home</a>
+ <a href="/blog">Blog</a>
+ <a href="/miniblog">Miniblog</a>
+ <a href="/boo" target="_blank">Fun</a>
+ </nav>
+ </header>
+
+ <section class="content-body">
+ {% block content %}{% endblock content %}
+ </section>
+ </main>
+
+ <div class="kaomoji-sidebar kaomoji-right">
+ <div class="scroll-text" id="kaomoji-right"></div>
+ </div>
+ </div>
+
+ <script>
+ // Smooth scrolling for internal links
+ document.querySelectorAll('nav a').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ const href = this.getAttribute('href');
+ if (href && href.startsWith('#')) {
+ e.preventDefault();
+ document.querySelector(href).scrollIntoView({ behavior: 'smooth' });
+ }
+ });
+ });
+
+ // Fetch kaomoji text if available
+ fetch('{{ get_url(path="kaomoji.txt") }}').then(r => { if (r.ok) return r.text(); }).then(data => {
+ if (data) {
+ const l = document.getElementById('kaomoji-left');
+ const rgt = document.getElementById('kaomoji-right');
+ if (l) l.textContent = data;
+ if (rgt) rgt.textContent = data;
+ }
+ }).catch(()=>{});
+ </script>
</body>
</html>
{% extends "base.html" %}
+{% block title %}{{ page.title }} - MyBlog{% endblock title %}
+
{% block content %}
-<h1 class="title">
- {{ page.title }}
-</h1>
-<p class="subtitle"><strong>{{ page.date }}</strong></p>
-{{ page.content | safe }}
+ <article class="post">
+ <h1 class="title">{{ page.title }}</h1>
+ <p class="subtitle"><strong>{{ page.date }}</strong></p>
+ <div class="post-content">{{ page.content | safe }}</div>
+ </article>
{% endblock content %}
{% extends "base.html" %}
+{% block title %}{{ section.title }} - MyBlog{% endblock title %}
+
{% block content %}
-<h1 class="title">
- {{ section.title }}
-</h1>
-<ul>
- <!-- If you are using pagination, section.pages will be empty.
- You need to use the paginator object -->
- {% for page in section.pages %}
- <li><a href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
- {% endfor %}
-</ul>
+ <h2 class="section-title">{{ section.title }}</h2>
+ <ul class="post-list">
+ {% for page in section.pages %}
+ <li class="post-list-item">
+ <a href="{{ page.permalink | safe }}">{{ page.title }}</a>
+ {% if page.summary %}<div class="post-excerpt">{{ page.summary | safe }}</div>{% endif %}
+ </li>
+ {% endfor %}
+ </ul>
{% endblock content %}
{% extends "base.html" %}
+{% block title %}{{ page.title }} - MyBlog{% endblock title %}
+
{% block content %}
-<h1 class="title">
- {{ page.title }}
-</h1>
-<p class="subtitle"><strong>{{ page.date }}</strong></p>
-{{ page.content | safe }}
+ <article class="post miniblog-post">
+ <h1 class="title">{{ page.title }}</h1>
+ <p class="subtitle"><strong>{{ page.date }}</strong></p>
+ <div class="post-content">{{ page.content | safe }}</div>
+ </article>
{% endblock content %}