<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{{garden_title}} - {{page_title}}</title> <link href="https://necolas.github.io/normalize.css/8.0.1/normalize.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat&display=swap" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: 'Montserrat', sans-serif; } h1, h2, h3, h4, h5 { font-family: 'Merriweather', serif; } body { display: flex; } @media screen and (max-width: 800px) { body { flex-direction: column-reverse; } aside { border-top: 1px solid gray; } aside h1 { text-align: center; } aside li { display: inline-block; } } aside h1 { font-size: 16pt; text-decoration: underline; font-variant: small-caps; } img { max-width: 100%; max-height: 100vh; } blockquote { margin: 0; padding-left: 2em; border-left: 3px solid lightgray; } main { flex-grow: 1; } nav, main { padding: 0 2em; } @media screen and (min-width: 800px) { aside { display: flex; flex-direction: column; justify-content: space-between; min-width: 15em; width: 15em; min-height: 100vh; border-right: 1px solid gray; } } nav ul { list-style: none; padding-left: 0; } nav li { margin: .5em 0; } nav .file { font-style: italic; } footer { padding: 1em 0; color: gray; } aside footer { text-align: center; } aside footer a { color: gray; } main footer { text-align: right; } </style> </head> <body> <aside> <nav> <h1>{{garden_title}}</h1> <ul> {% for file in files %} <li class="{% if file is containing(" .md ") %}page{% else %}file{% endif %}"><a href="/{{file}}">{{file}}</a></li> {% endfor %} </ul> </nav> <footer><a href="https://gitlab.com/tmladek/gardenserver">gardenserver {{version}}</a></footer> </aside> <main> {{content | safe}} <footer> Last modified at {{mtime}} </footer> </main> </body> </html>