Cecil/resources/layouts/_default/page.html.twig at master · Cecilapp/Cecil · GitHub

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
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="{{ site.language }}">
  <head>
    {%- block head ~%}
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {%- block head_metatags ~%}
    {{- include('partials/metatags.html.twig', {page, site}, with_context = false) ~}}
    {%- endblock head_metatags ~%}
    <meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">
    {%- endblock head ~%}
    {%- block head_css ~%}
    <style>{% apply minify_css ~%}
      {{- include('partials/pico.css.twig') }}
      /* Pico CSS overrides */
      body > header,
      body > main,
      body > footer {
        max-width: 700px;
      }
      nav, nav ul {
        display: flex;
        flex-wrap: wrap;
      }
      img {
        margin-bottom: calc(var(--pico-spacing) / 2);
      }
      .site-title {
        --pico-font-weight: 700;
        --pico-font-size: 2rem;
        --pico-line-height: 1.125;
        --pico-typography-spacing-top: 3rem;
        --pico-color: var(--pico-h1-color);
        margin-top: 0;
        margin-bottom: 0;
        color: var(--pico-color);
        font-weight: var(--pico-font-weight);
        font-size: var(--pico-font-size);
        line-height: var(--pico-line-height);
        font-family: var(--pico-font-family);
      }
      /* Cecil features */
      .page-nav {
        display: flex;
      }
      .page-nav a {
        text-decoration: none;
      }
      .page-nav .prev:before {
        content: "\002039";
        margin-right: .5rem;
      }
      .page-nav .next {
        margin-left: auto;
      }
      .page-nav .next:after {
        content: "\00203A";
        margin-left: .5rem;
      }
      .term:before {
        content: "#";
      }
      /* Notes */
      main .note {
        position: relative;
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 0.25rem;
        border: 1px solid var(--pico-color);
        border-left-width: 4px;
      }
      main .note > p {
        margin: 0;
      }
      main .note-info {
        border: 1px solid blue;
        border-left-width: 4px;
      }
      main .note-tip {
        border: 1px solid green;
        border-left-width: 4px;
      }
      main .note-important {
        border: 1px solid purple;
        border-left-width: 4px;
      }
      main .note-warning {
        border: 1px solid orange;
        border-left-width: 4px;
      }
      main .note-caution {
        border: 1px solid red;
        border-left-width: 4px;
      }
    {% endapply %}</style>
    {%- endblock head_css ~%}
  </head>
  <body>
    <header>
      {%- block header ~%}
      <hgroup>
        {%- if page.type == 'homepage' ~%}
        <h1>{{ site.title }}</h1>
        {%- else ~%}
        <div class="site-title">{{ site.title }}</div>
        {%- endif ~%}
        <p>{{ site.baseline }}</p>
      </hgroup>
      {{- include('partials/navigation.html.twig', {menu: site.menus.main}, with_context = false) ~}}
      {%- endblock header ~%}
    </header>
    <main>
      {%- block content ~%}
      {{- page.content ~}}
      {%- endblock content ~%}
      {%- if getenv('CECIL_DEBUG') %}{{ d(page) }}{% endif ~%}
    </main>
    <footer>
      {%- block footer ~%}
      {%- set powered_by -%}
      <a href="{{ cecil.url }}">Cecil</a> &amp; <a href="https://picocss.com">Pico CSS</a>
      {%- endset ~%}
      <small>{% trans %}Powered by %powered_by%{% endtrans %}</small>
      {%- endblock footer ~%}
    </footer>
  </body>
</html>