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