aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--static/css/custom.css325
-rw-r--r--templates/base.html11
-rw-r--r--templates/note.html77
-rw-r--r--templates/orphan.html7
-rw-r--r--templates/page.html13
5 files changed, 95 insertions, 338 deletions
diff --git a/static/css/custom.css b/static/css/custom.css
index 97459be..b13de2c 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -1,173 +1,62 @@
+/* Base styles */
body {
margin: 0;
font-family: sans-serif;
font-size: 1rem;
line-height: 1.6;
+ color: black;
+ background-color: white;
}
-.container {
- display: flex;
- max-width: 60rem;
- margin: 0 auto;
- padding: 1em;
-}
-
-.menu {
- flex: 0 0 auto;
- margin-right: 2em;
-}
-
-.content {
- flex: 1;
+main {
max-width: 46rem;
+ margin: 0 auto;
+ padding: 0 1em;
}
-.menu ul {
- list-style-type: none;
- padding: 0;
- margin: 0;
-}
-
-.menu li:first-child {
- margin-top: 0;
-}
-
-.menu li {
- margin-bottom: 0.3em;
-}
-
-.menu a {
- text-decoration: none;
- color: #333;
- padding: 0.2em 0.5em;
- display: inline-block;
- white-space: nowrap;
-}
-
-.menu a:hover {
- text-decoration: underline;
- background-color: #f0f0f0;
-}
-
-.section {
- margin-top: 0;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- margin-top: 0;
- margin-bottom: 0.5em;
+/* Typography */
+h1, h2, h3 {
+ margin: 0 0 0.5em;
line-height: 1.25;
font-weight: 600;
}
-p {
- margin-top: 0;
- margin-bottom: 1em;
-}
-
-.post-list {
- list-style-type: none;
- padding: 0;
- margin: 0;
-}
-
-.post-list li {
- display: flex;
- justify-content: space-between;
- align-items: baseline;
- margin-bottom: 0.5em;
-}
+h1 { font-size: 1.4rem; }
+h2 { font-size: 1.3rem; }
+h3 { font-size: 1.2rem; }
-.post-list a {
- text-decoration: none;
- color: #333;
- max-width: 70%;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
+p {
+ margin: 0 0 1em;
}
-.post-list a:hover {
+/* Links */
+a {
+ color: #047bc2;
text-decoration: underline;
}
-.post-date {
- font-size: 0.9em;
- color: #666;
-}
-
-@media (max-width: 768px) {
- .container {
- flex-direction: column;
- }
-
- .menu {
- width: 100%;
- margin-right: 0;
- margin-bottom: 1em;
- }
-
- .menu ul {
- display: flex;
- flex-wrap: wrap;
- justify-content: flex-start;
- }
-
- .menu li {
- margin-right: 1em;
- margin-bottom: 0.5em;
- }
-
- .post-list li {
- flex-direction: column;
- align-items: flex-start;
- }
-
- .post-list a {
- max-width: 100%;
- margin-bottom: 0.2em;
- }
-}
-
-h1 {
- font-size: 1.4rem;
-}
-h2 {
- font-size: 1.3rem;
-}
-h3 {
- font-size: 1.2rem;
-}
-
-a {
- color: rgb(56, 115, 173);
+a:hover, a:focus, a:active {
+ text-decoration: underline;
}
-a:link,
-a:hover,
-a:focus,
-a:active {
- text-decoration: underline;
+/* Lists */
+ul {
+ display: block;
+ padding-left: 1em;
}
+/* Code blocks */
code {
font-family: monospace;
font-size: 90%;
- overflow-x: auto;
-
border-radius: 4px;
}
pre {
padding: 0.2rem 0.5rem;
- overflow: auto;
overflow-x: auto;
font-size: 90%;
+ background-color: #f5f5f5;
}
pre > code {
@@ -175,52 +64,32 @@ pre > code {
}
p > code {
- background: #eee;
-}
-
-section.times time {
- font-style: oblique;
- float: right;
-}
-
-section.times h3 {
- display: inline;
- font-size: 1em;
-}
-
-p.date {
- display: row;
- font-style: italic;
- font-size: 0.9rem;
+ background: #f5f5f5;
+ padding: 0.1em 0.3em;
}
+/* Tables */
table {
width: 100%;
border-collapse: collapse;
- word-break: normal;
}
-th,
-td {
+th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
+
th {
- background-color: #f2f2f2;
+ background-color: #f5f5f5;
+ font-weight: bold;
}
+
tr:nth-child(even) {
background-color: #f9f9f9;
}
-tr:nth-child(odd) {
- background-color: #ffffff;
-}
-thead {
- color: #000;
- font-style: bold;
- text-align: left;
-}
+/* Blockquotes */
blockquote {
font-style: italic;
margin: 0 0 1.5em;
@@ -228,118 +97,82 @@ blockquote {
border-left: 0.2em solid #bdbdbd;
}
-ul {
- display: block;
- list-style-type: disc;
-}
-
-li {
- display: list-item;
+/* Post list */
+.post-list {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
}
-/* Note layout */
-.note-container {
+.post-list li {
display: flex;
justify-content: space-between;
- max-width: 60rem; /* Keep this for overall container max-width */
- margin: 0 auto;
- padding: 1em;
+ align-items: baseline;
+ margin-bottom: 0.5em;
}
-.note-content {
- flex: 0 0 736px; /* Set a fixed width */
- max-width: 736px; /* Ensure it doesn't exceed this width */
- width: 100%; /* Allow it to shrink on smaller screens */
+.post-list a {
+ color: black;
+ max-width: 70%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ text-decoration: none;
}
-/* Table of Contents styles */
-.toc-container {
- background-color: #f9f9f9;
- border: 1px solid #ccc;
+.post-list a:hover {
+ text-decoration: underline;
}
-.toc-header {
- background-color: #f0f0f0;
- padding: 0.5em 1em;
- font-weight: bold;
+.post-date {
+ font-size: 0.9em;
+ color: #666;
}
-.toc {
- padding: 1em;
+/* Navigation */
+.main-nav {
+ padding: 1em 0;
+ margin-bottom: 2em;
}
-.toc ul {
+.main-nav ul {
list-style-type: none;
- padding-left: 0;
+ padding: 0;
margin: 0;
+ display: flex;
+ flex-wrap: wrap;
}
-.toc ul ul {
- padding-left: 1.5em;
-}
-
-.toc li {
- margin-bottom: 0.5em;
+.main-nav li {
+ margin: 0 1.5em 0.5em 0;
}
-.toc a {
- text-decoration: none;
- color: #333;
+.main-nav a {
+ color: #047bc2;
transition: color 0.3s;
}
-.toc a:hover {
- color: #ffc832;
-}
-
-/* Desktop styles */
-.desktop-toc {
- flex: 0 0 200px;
- margin-left: 2em;
- position: sticky;
- top: 1em;
- align-self: flex-start;
- max-height: calc(100vh - 2em);
- overflow-y: auto;
-}
-
-/* Mobile styles */
-.mobile-toc {
- display: none;
- margin-bottom: 2em;
-}
-
-.mobile-toc .toc-header {
- cursor: pointer;
- display: flex;
- align-items: center;
-}
-
-.mobile-toc .toc-arrow {
- margin-right: 0.5em;
- transition: transform 0.3s;
-}
-
-.mobile-toc .toc {
- display: none;
+.main-nav a:hover {
+ color: #035891;
}
/* Responsive layout */
-@media (max-width: 968px) {
- .note-container {
- flex-direction: column;
+@media (max-width: 768px) {
+ .main-nav {
+ padding: 0.5em 1em;
}
- .note-content {
- flex: 1;
- max-width: 100%;
+ .main-nav li {
+ margin-right: 1em;
}
- .desktop-toc {
- display: none;
+ .post-list li {
+ flex-direction: column;
+ align-items: flex-start;
}
- .mobile-toc {
- display: block;
+ .post-list a {
+ max-width: 100%;
+ margin-bottom: 0.2em;
}
}
diff --git a/templates/base.html b/templates/base.html
index b903da3..add20f0 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -16,8 +16,9 @@
</head>
<body>
- <div class="container">
- <nav class="menu">
+
+ <main>
+ <nav class="main-nav">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
@@ -27,10 +28,8 @@
</ul>
</nav>
- <div class="content">
- {% block content %}{% endblock content %}
- </div>
- </div>
+ {% block content %}{% endblock content %}
+ </main>
</body>
</html>
diff --git a/templates/note.html b/templates/note.html
index ccd21a6..7eee854 100644
--- a/templates/note.html
+++ b/templates/note.html
@@ -1,79 +1,12 @@
{% extends "base.html" %}
+
{% block title %}{{ page.title }} - {{ config.title }}{% endblock title %}
-{% block content -%}
-<div class="note-container">
- <main role="main" class="note-content">
- <h1>{{ page.title }}</h1>
+{% block content -%}
+<h1>{{ page.title }}</h1>
- {% if page.toc %}
- <div class="toc-container mobile-toc">
- <div class="toc-header" id="mobile-toc-toggle">
- <span class="toc-arrow">&#9656;</span> Table of Contents
- </div>
- <div id="mobile-toc" class="toc">
- <ul>
- {% for h1 in page.toc %}
- <li>
- <a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
- {% if h1.children %}
- <ul>
- {% for h2 in h1.children %}
- <li>
- <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
- </li>
- {% endfor %}
- </ul>
- {% endif %}
- </li>
- {% endfor %}
- </ul>
- </div>
- </div>
- {% endif %}
-
- {{ page.content | safe }}
-
- <p class="date">{{ page.date | date(format="%B %d, %Y") }}</p>
- </main>
-
- {% if page.toc %}
- <aside class="toc-container desktop-toc">
- <div class="toc-header">Table of Contents</div>
- <div class="toc">
- <ul>
- {% for h1 in page.toc %}
- <li>
- <a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
- {% if h1.children %}
- <ul>
- {% for h2 in h1.children %}
- <li>
- <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
- </li>
- {% endfor %}
- </ul>
- {% endif %}
- </li>
- {% endfor %}
- </ul>
- </div>
- </aside>
- {% endif %}
-</div>
+{{ page.content | safe }}
-<script>
- document.getElementById('mobile-toc-toggle').addEventListener('click', function() {
- var toc = document.getElementById('mobile-toc');
- var arrow = this.querySelector('.toc-arrow');
- if (toc.style.display === 'none' || toc.style.display === '') {
- toc.style.display = 'block';
- arrow.innerHTML = '&#9662;'; // Down-pointing triangle
- } else {
- toc.style.display = 'none';
- arrow.innerHTML = '&#9656;'; // Right-pointing triangle
- }
- });
-</script>
+<p class="date">{{ page.date | date(format="%B %d, %Y") }}</p>
{%- endblock content %}
diff --git a/templates/orphan.html b/templates/orphan.html
index 020c8a6..db8634a 100644
--- a/templates/orphan.html
+++ b/templates/orphan.html
@@ -3,9 +3,8 @@
{% block title %}{{ page.title }} - {{ config.title }}{% endblock title %}
{% block content -%}
-<main>
- <h1>{{- page.title -}}</h1>
+<h1>{{- page.title -}}</h1>
+
+{{ page.content | safe -}}
- {{ page.content | safe -}}
-</main>
{%- endblock content -%}
diff --git a/templates/page.html b/templates/page.html
index 53a7be3..ab19904 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -3,17 +3,10 @@
{% block title %}{{ page.title }} - {{ config.title }}{% endblock title %}
{% block content -%}
-<main>
- <h1>{{ page.title }}</h1>
+<h1>{{ page.title }}</h1>
- {{ page.content | safe -}}
+{{ page.content | safe -}}
- <p class="date">
- <time datetime="{{ page.date | date(format="%+") }}">
- {{- page.date | date(format="%B %m, %Y") -}}
- </time>
- </p>
-
-</main>
+<p class="date">{{ page.date | date(format="%B %d, %Y") }}</p>
{%- endblock content %}
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-06 16:48:47 +0000