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         min-height: 100%;
  20       }
  21
  22       h1, h2, h3, h4, h5 {
  23         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  24       }
  25
  26       body {
  27         min-height: 100%;
  28         position: absolute;
  29
  30         width: 100%;
  31         margin: 0;
  32         padding: 0;
  33
  34         display: flex;
  35         flex-direction: column;
  36         align-items: center;
  37       }
  38
  39       body > header {
  40         width: 100%;
  41
  42         display: flex;
  43         flex-direction: row;
  44         align-items: center;
  45
  46         border-bottom: 1px solid black;
  47
  48         margin-bottom: 1rem;
  49       }
  50
  51       body > header > h1 {
  52         margin: 1rem;
  53       }
  54
  55       body > main {
  56         max-width: 40rem;
  57         width: calc(100% - 2rem);
  58         margin-bottom: 1rem;
  59       }
  60
  61       body > main > section.content > blockquote,
  62       body > main > section.content > hr,
  63       body > main > section.content > p,
  64       body > main > section.content > pre {
  65         margin-bottom: 0.8rem;
  66       }
  67
  68       body > main > section.content > :last-child {
  69         margin-bottom: 0;
  70       }
  71
  72       body > main > section.content code {
  73         font-size: 14px;
  74       }
  75
  76       body > footer {
  77         margin-top: auto;
  78         border-top: 1px solid black;
  79
  80         width: 100%;
  81
  82         display: flex;
  83         flex-direction: row;
  84         align-items: center;
  85         justify-content: center;
  86       }
  87
  88       body > footer section.copyright {
  89         margin: 1rem;
  90       }
  91     </style>
  92   </head>
  93
  94   <body>
  95     <header>
  96       <h1>Wiki</h1>
  97     </header>
  98
  99     <main>
 100       <h2>{{ title }}</h2>
 101       <section class='content'>
 102         {{ content | safe }}
 103       </section>
 104     </main>
 105
 106     <footer>
 107       <section class='copyright'>
 108         &copy; 2022 by David Kerkeslager
 109       </section>
 110     </footer>
 111   </body>
 112 </html>