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