diff options
| author | Arslaan Pathan <[email protected]> | 2026-08-20 22:14:41 +1200 |
|---|---|---|
| committer | Arslaan Pathan <[email protected]> | 2026-08-20 22:14:41 +1200 |
| commit | 5ceaef62b0dc9a3de50d0b18700945192709c51b (patch) | |
| tree | 653821cc8fa32cff194a6619a093b74ec019190b | |
| parent | cebbf0d0c0356712df61265520b1841c130e79a6 (diff) | |
| download | arslaancodes-5ceaef62b0dc9a3de50d0b18700945192709c51b.tar.xz arslaancodes-5ceaef62b0dc9a3de50d0b18700945192709c51b.zip | |
[fix] make it a bit more mobile responsive and add a 404 page
| -rw-r--r-- | static/style.css | 50 | ||||
| -rw-r--r-- | templates/404.html | 9 | ||||
| -rw-r--r-- | templates/base.html | 10 |
3 files changed, 64 insertions, 5 deletions
diff --git a/static/style.css b/static/style.css index 3c3e6ce..d9bd157 100644 --- a/static/style.css +++ b/static/style.css @@ -324,3 +324,53 @@ a { .projects-entry ol { margin: 0.3rem 0; } + +@media screen and (max-width: 768px) { + body { + font-size: 16px; + line-height: 1.2; + } + + .header-inner { + flex-direction: column; + align-items: flex-start; + gap: 10px; + } + + .hey { + padding-top: 30px; + } + + nav { + flex-wrap: wrap; + gap: 8px; + } + + nav a { + font-size: 1.1em; + padding: 4px 8px; + } + + .site-title { + font-size: 1.2em; + } + + .blog-content { + font-size: 1.05em; + } + + pre, code { + font-size: 0.9em; + word-wrap: break-word; + white-space: pre-wrap; + } + + .blog-image-wrap img { + max-width: 100%; + height: auto; + } + + .container { + padding: 0 15px; + } +} diff --git a/templates/404.html b/templates/404.html new file mode 100644 index 0000000..a56acbf --- /dev/null +++ b/templates/404.html @@ -0,0 +1,9 @@ +{% extends "base.html" %} + +{% block content %} +<div> + <h1>404 unlucky 🥀</h1> + <p>get better smh</p> + <p><a href="/">try again</a></p> +</div> +{% endblock content %} diff --git a/templates/base.html b/templates/base.html index 8487e14..c8706b5 100644 --- a/templates/base.html +++ b/templates/base.html @@ -15,11 +15,11 @@ <a href="/"><span class="pink">arslaan</span><span class="white">@</span><span class="yellow">thinkpad-e16-void</span><span class="white">:</span><span class="green bold">~{% if section and section.extra.header_title %}/{{ section.extra.header_title }}{% elif page and page.extra.header_title %}/{{ page.extra.header_title }}{% endif %}</span> </div> <nav> - <a href="/" class="{% if current_path == '/' %}active{% else %}purple{% endif %}">home</a> - <a href="/projects" class="{% if current_path is starting_with(pat='/projects') %}active{% else %}purple{% endif %}">projects</a> - <a href="/blog" class="{% if current_path is starting_with(pat='/blog') %}active{% else %}purple{% endif %}">blog</a> - <a href="/licenses" class="{% if current_path is starting_with(pat='/licenses') %}active{% else %}purple{% endif %}">licenses</a> - <a href="/pgp" class="{% if current_path is starting_with(pat='/pgp') %}active{% else %}purple{% endif %}">pgp</a> + <a href="/" class="{% if current_path and current_path == '/' %}active{% else %}purple{% endif %}">home</a> + <a href="/projects" class="{% if current_path and current_path is starting_with(pat='/projects') %}active{% else %}purple{% endif %}">projects</a> + <a href="/blog" class="{% if current_path and current_path is starting_with(pat='/blog') %}active{% else %}purple{% endif %}">blog</a> + <a href="/licenses" class="{% if current_path and current_path is starting_with(pat='/licenses') %}active{% else %}purple{% endif %}">licenses</a> + <a href="/pgp" class="{% if current_path and current_path is starting_with(pat='/pgp') %}active{% else %}purple{% endif %}">pgp</a> </nav> </div> </header> |