postcards/inst/pandoc_templates/trestles.html at 9c10dfe3c1782148aefcb21d008f852b895e0f72 · seankross/postcards · 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
129
130
131
132
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap" rel="stylesheet">
    <style type="text/css">body {font-family: 'Roboto Slab', serif;}</style>

    <title>$title$</title>

    $if(meta)$
    <meta name="description" content="$meta.description$"></meta>
      <meta name="twitter:description" content="$meta.description$"></meta>
      <meta name="og:description" content="$meta.description$"></meta>
      <meta name="twitter:title" content="$title$"></meta>
      <meta name="og:title" content="$title$"></meta>
      <meta name="twitter:url" content="$meta.url$"></meta>
      <meta property="og:url" content="$meta.url$"></meta>
      <meta name="twitter:image:src" content="$meta.url$/$image$"></meta>
      <meta property="og:image" content="$meta.url$/$image$"></meta>
      <meta name="twitter:card" content="summary"></meta>
      $if(twitter)$
      <meta name="twitter:creator" content="@$meta.twitter$"></meta>
      <meta name="twitter:site" content="@$meta.twitter$"></meta>
    $endif$
    $endif$

    $if(favicon)$
      <link rel="shortcut icon" href=$favicon$>
    $endif$

    $for(header-includes)$
      $header-includes$
    $endfor$

    $for(css)$
      <link rel="stylesheet" href="$css$" $if(html5)$$else$type="text/css" $endif$/>
    $endfor$

  </head>
  <body>

    $for(include-before)$
      $include-before$
    $endfor$

    <div class="container-fluid d-none d-lg-block d-xl-block">
      <div class="d-flex row flex-row vh-100">
        <div class="d-flex flex-column col-5 align-items-center text-center align-self-center">
          <div class="mx-auto text-center">
            <div class="p-3">
              <img src=$image$ style="height:15rem" class="rounded">
            </div>
            <div class="p-2">
              <h1>$title$</h1>
            </div>
            <hr style="width:60%;"/>
            <div class="p-2">
              <div id="icon-list">
                <ul class="list-inline">
                  $for(links)$
                  <li class="list-inline-item">
                    <a href=$links.url$>
                      <button type="button" class="btn btn-outline-dark mb-2">
                        $links.label$
                      </button>
                    </a>
                  </li>
                  $endfor$
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="d-flex flex-column vh-100 border-left"></div>
        <div class="d-flex flex-column col px-5 align-items-center align-self-center mh-100" style="overflow-y: scroll;">
          <div class="my-5" id="content">
            $body$
          </div>
        </div>
      </div>
    </div>

    <div class="container-flex min-vh-100 d-block d-lg-none d-xl-none">
      <div class="d-flex flex-row justify-content-center">
        <div class="d-flex flex-col">
          <div class="mx-auto">
            <div class="p-3 mt-3 text-center">
              <img src=$image$ style="height:15rem" class="rounded">
            </div>
            <div class="p-2 text-center">
              <h1>$title$</h1>
            </div>
            <hr style="width:60%;"/>

            <div class="row justify-content-center align-items-center">
              <div class="col-8 p-1 text-center">
                <div class="list-group">
                  $for(links)$
                  <a href=$links.url$>
                    <button type="button" class="list-group-item list-group-item-action my-1 rounded">
                      $links.label$
                    </button>
                  </a>
                  $endfor$
                </div>
              </div>
            </div>
            <div class="p pt-4 px-5">
              $body$
            </div>
        </div>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

  $for(include-after)$
    $include-after$
  $endfor$

  </body>
</html>