code.kerkeslager.com Git - wiki/blob - templates/page.html

   1 <!doctype html>
   2
   3 <html lang='en'>
   4   <head>
   5     <meta charset='utf-8'>
   6     <meta name='viewport' content='width=device-width, initial-scale=1'>
   7
   8     <title>{{ title }}</title>
   9
  10     <style>
  11       html, body, h1, h2, h3, h4, h5, p {
  12         margin: 0;
  13         padding: 0;
  14       }
  15
  16       html {
  17         font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
  18         font-size: 18px;
  19       }
  20
  21       h1, h2, h3, h4, h5 {
  22         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  23       }
  24
  25       body {
  26         width: 100%;
  27         margin: 0;
  28         padding: 0;
  29
  30         display: flex;
  31         flex-direction: column;
  32         align-items: center;
  33       }
  34
  35       body > header {
  36         width: 100%;
  37
  38         display: flex;
  39         flex-direction: row;
  40         align-items: center;
  41
  42         border-bottom: 1px solid black;
  43
  44         margin-bottom: 1rem;
  45       }
  46
  47       body > header > h1 {
  48         margin: 1rem;
  49       }
  50
  51       body > main {
  52         max-width: 40rem;
  53         width: calc(100% - 2rem);
  54       }
  55
  56       body > main > section.content > blockquote,
  57       body > main > section.content > hr,
  58       body > main > section.content > p,
  59       body > main > section.content > pre {
  60         margin-bottom: 0.8rem;
  61       }
  62
  63       body > main > section.content > :last-child {
  64         margin-bottom: 0;
  65       }
  66
  67       body > main > section.content code {
  68         font-size: 14px;
  69       }
  70
  71       body > footer {
  72         margin-top: 1rem;
  73         border-top: 1px solid black;
  74
  75         width: 100%;
  76
  77         display: flex;
  78         flex-direction: row;
  79         align-items: center;
  80         justify-content: center;
  81       }
  82
  83       body > footer section.copyright {
  84         margin: 1rem;
  85       }
  86     </style>
  87   </head>
  88
  89   <body>
  90     <header>
  91       <h1>Wiki</h1>
  92     </header>
  93
  94     <main>
  95       <h2>{{ title }}</h2>
  96       <section class='content'>
  97         {{ content | safe }}
  98       </section>
  99     </main>
 100
 101     <footer>
 102       <section class='copyright'>
 103         &copy; 2022 by David Kerkeslager
 104       </section>
 105     </footer>
 106   </body>
 107 </html>