diff options
Diffstat (limited to '')
-rw-r--r-- | static/css/custom.css | 325 | ||||
-rw-r--r-- | templates/base.html | 11 | ||||
-rw-r--r-- | templates/note.html | 77 | ||||
-rw-r--r-- | templates/orphan.html | 7 | ||||
-rw-r--r-- | templates/page.html | 13 |
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">▸</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 = '▾'; // Down-pointing triangle - } else { - toc.style.display = 'none'; - arrow.innerHTML = '▸'; // 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 %} |