kennethreitz.org/tuftecms/templates/error.html

{% extends "base.html" %}

{% block title %}{{ error_code }} — {{ title }}{% endblock %}

{% block extra_head %}
<style>
    .error-note {
        margin-top: 2em;
        padding-top: 1em;
        border-top: 1px solid var(--line);
        font-style: italic;
        color: var(--ink-muted);
        font-size: 0.9em;
    }

    .error-suggestions {
        list-style: none;
        padding-left: 0;
    }

    .error-suggestions li {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        max-width: 65%;
        padding: 0.45rem 0;
        border-bottom: 1px solid var(--line-soft);
    }

    .error-suggestions li:last-child {
        border-bottom: none;
    }

    .suggestion-icon {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    @media (max-width: 760px) {
        .error-suggestions li {
            max-width: 100%;
        }
    }
</style>
{% endblock %}

{% block content %}
<article class="error-page">
    <h1>{{ error_code }}</h1>

    <section>
        <p>{{ error_message }}</p>

        <p>The page you're looking for has either moved, been renamed, or never existed in
        the first place. This site has been through a few incarnations over the years — things
        shift around. It happens.</p>

        {% if suggestions %}
        <p><strong>Were you looking for one of these?</strong></p>
        <ul class="error-suggestions">
            {% for s in suggestions %}
            <li>{% if s.icon %}<img src="{{ s.icon }}" alt="" class="suggestion-icon">{% endif %}<a href="{{ s.url }}">{{ s.title }}</a></li>
            {% endfor %}
        </ul>
        {% endif %}

        <p>Here are a few ways to find your way back:</p>

        <ul>
            <li><a href="/search">Search the site</a> — probably the quickest route.</li>
            <li>Browse the <a href="/essays">essay archive</a> — something might catch your eye.</li>
            <li>Head back to <a href="/">the homepage</a> and start fresh.</li>
        </ul>

        <p class="error-note">If you followed a link here from somewhere else, the content likely still exists — it may just live at a different address now.</p>
    </section>
</article>
{% endblock %}