~glyph/website

ref: b89b0cc819376c18d8007f7abd0f1d99b8b89d97 website/templates/base.html.tera -rw-r--r-- 2.3 KiB
b89b0cc8glyph Add minor style changes to improve layout and readibility 6 months ago
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/png" href="favicon.png"/>
    <title>{% block title %}{% endblock title %}</title>
    <meta name="author" content="glyph">
    <meta name="description" content="The personal website of glyph.">
    <meta name="keywords" content="botany, coding, electronics, fermentation, fungi, meditation, mycology, plants">
    <style>
      a {
        color: #111;
        padding: 0.2rem;
      }
      
      a:focus {
        background-color: #111;
        color: #fff;
      }

      a:hover {
        background-color: #111;
        color: #fff;
      }
      
      article {
        max-width: 700px;
      }
      
      body {
        max-width: 900px;
        font-family: monospace;
        line-height: 1.4;
        margin: 2rem;
      }
      
      code {
        background-color: #111;
        color: #fff;
        margin-left: 0.5rem;
      }
      
      .col {
        flex: 1;
        padding: 1rem;
      }
      
      @media (max-width: 400px) {
        .col {
          flex: 1;
          padding: 1rem;
          width: 90%;
        }
      }
      
      .flex-grid {
        display: flex;
      }
      
      @media (max-width: 400px) {
        .flex-grid {
          display: block;
        }
      }
      
      html {
        background-color: #fefefe;
        color: #111;
        font-size: 14px;
      }
      
      h1 {
        color: #222;
      }

      h2 {
        color: #222;
      }

      li {
        padding-bottom: 0.5rem;
      }
      
      .list-item {
        list-style-type: none;
        padding: 0.5rem;
      }
      
      .nav-bar {
        list-style-type: none;
        display: inline-block;
        padding-left: 0;
      }

      .nav-item {
        border: solid 1px #111;
        color: #111;
        display: inline-block;
        margin-top: 0.2rem;
        padding: 0.5rem;
      }

      .nav-item a {
        text-decoration: none;
      }
      
      p.bordered {
        border: solid 1px #111;
        padding: 2rem;
      }

      figure {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    {% block nav %}{% endblock %}
  </body>
</html>