Inkubator

Orgy — Sphinx

Tue, 26 May 2026 00:00:00 +0000

Details aus der Migration von Sphinx zu Orgy werden hier beschrieben.

Oft muß ein HTML-Block als Ersatz für Sphinx-spezifische Plugins verwendet werden. Siehe dazu auch unter dem »Tag«: orgy.

Blickfang -- orgy -- Bild"

Mon, 25 May 2026 00:00:00 +0000

Schirmpilz

Ich platzieren gern ein Bild zu einem Artikel, egal ob es einen Bezug zum Inhalt gibt oder es einfach nur ein Blickfang für ein insteressantes Motiv ist, wie hier die Schirmpilze. Ein Klick auf die Vorschau soll auch noch eine vergrößerte Version präsentieren. Und so funktioniert es:

Im Artikel

Das Bild platzieren ...


#+begin_export html

<figure style="float:right; width:220px; margin:20px;">
  <img src="../kenya_on_the_globe.png"
       class="thumbnail"
       onclick="openOverlay()">
  <figcaption>Kenia auf der Weltkarte</figcaption>
</figure>
<!-- Overlay -->
<div id="overlay" onclick="closeOverlay()">
  <img src="../kenya_on_the_globe.png">
</div>

#+end_export

JavaScript einbinden


function openOverlay() {
    document.getElementById("overlay").style.display = "flex";
}

function closeOverlay() {
    document.getElementById("overlay").style.display = "none";
}

CSS zum Bild

.thumbnail {
    width: 200px;
    cursor: pointer;
}

#overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);

    /* Bild zentrieren */
    justify-content: center;
    align-items: center;

    z-index: 9999;
}

#overlay img {
    max-width: 90%;
    max-height: 90%;
    cursor: pointer;
    box-shadow: 0 0 20px black;
}

Index -- orgy -- zweispaltig"

Mon, 25 May 2026 00:00:00 +0000

Schirmpilz

Im Original sind die Tags (index-Einträge) einspaltig, da ich aber viele Index-Einträge verwende, nutzt die Anordnung in zwei Spalten den Freiraum besser aus. Dazu muß in der CSS-Datei folgendes eingetragen werden:


.two-columns {
  column-count: 2;
  column-gap: 40px;
}

Und im templates/tags-index.html die ID ergänzen:


  <section>
  <h1>Tags</h1>
  <ul class="two-columns">
    {% for entry in tags %}
    <li><a href="{{lang-prefix}}/tags/{{entry.tag}}/">{{entry.tag}}</a> ({{entry.count}})</li>
    {% endfor %}
  </ul>
</section>