code.kerkeslager.com Git - txt.house/blob - txt_house/templates/base.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3   <head>
   4     <meta charset="utf-8"/>
   5     <meta name="viewport" content="width=device-width, initial-scale=1"/>
   6     <title>txt.house</title>
   7
   8     <style>
   9       html {
  10         margin: 0;
  11         padding: 0;
  12
  13         font-size: 16px;
  14
  15         display: flex;
  16         flex-direction: column;
  17         align-items: center;
  18       }
  19
  20       body {
  21         margin: 0 3rem;
  22         padding: 0;
  23
  24         display: flex;
  25         flex-direction: column;
  26         align-items: center;
  27
  28         font-family: Candara, Roboto, "Lucida Sans Unicode", "Lucida Grande", Verdana, sans-serif;
  29
  30         width: calc(100% - 6rem);
  31         max-width: 40rem;
  32       }
  33
  34       @media only screen and (max-width: 30rem) {
  35         body {
  36           margin: 0 2rem;
  37           width: calc(100% - 4rem);
  38         }
  39       }
  40
  41       @media only screen and (max-width: 20rem) {
  42         body {
  43           margin: 0 1rem;
  44           width: calc(100% - 2rem);
  45         }
  46       }
  47
  48       nav {
  49         display: flex;
  50         flex-direction: row;
  51         align-items: center;
  52
  53         width: 100%;
  54         height: 5rem;
  55       }
  56
  57       nav a {
  58         margin-right: 2rem;
  59       }
  60
  61       nav a:active,
  62       nav a:hover,
  63       nav a:link,
  64       nav a:visited {
  65         color: black;
  66       }
  67
  68       nav a:hover {
  69         text-decoration-thickness: 2px;
  70       }
  71
  72       nav label {
  73         margin-right: 0.2rem;
  74       }
  75
  76       nav select {
  77         border: none;
  78         font-size: 16px;
  79         font-family: Candara, Roboto, "Lucida Sans Unicode", "Lucida Grande", Verdana, sans-serif;
  80       }
  81
  82       form.editor {
  83         margin-top: 3.6rem;
  84         width: 100%;
  85
  86         display: flex;
  87         flex-direction: column;
  88         align-items: center;
  89       }
  90
  91       nav + form.editor {
  92         margin-top: 2.2rem;
  93       }
  94
  95       form.editor div.edit-key-area {
  96         width: 100%;
  97         display: flex;
  98         flex-direction: column;
  99         align-items: center;
 100         margin-bottom: 3.6rem;
 101       }
 102
 103       form.editor span.field {
 104         display: flex;
 105         flex-direction: row;
 106         align-items: center;
 107
 108         margin-bottom: 1rem;
 109         width: 100%;
 110       }
 111
 112       form.editor label {
 113         margin-right: 0.5rem;
 114       }
 115
 116       form.editor input[type=text] {
 117         flex-grow: 1;
 118         border: 1.5px solid black;
 119         border-radius: 0;
 120         padding: 0.3rem;
 121       }
 122
 123       form.editor textarea {
 124         width: calc(100% - 3px - 1rem);
 125         height: 20rem;
 126
 127         border: 1.5px solid black;
 128
 129         padding: 0.5rem;
 130         margin: 0;
 131         margin-bottom: 3rem;
 132       }
 133
 134       form.editor input[type=submit] {
 135         border: 1.5px solid black;
 136         border-radius: 8px;
 137         padding: 1rem;
 138
 139         font-family: Roboto, "Lucida Sans Unicode", "Lucida Grande", Verdana, sans-serif;
 140         font-size: 16px;
 141
 142         color: black;
 143         background: white;
 144
 145         cursor: pointer;
 146       }
 147
 148       form.editor input[type=submit]:hover {
 149         background: #dddddd;
 150       }
 151     </style>
 152   </head>
 153
 154   <body>
 155     {% block body %}{% endblock %}
 156   </body>
 157 </html>