postcards/inst/pandoc_templates/onofre.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
133
134
<!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=Open+Sans&display=swap" rel="stylesheet">
    <style type="text/css">
      body {
        font-family: 'Open Sans', sans-serif;
        background: $color1$;
        background: linear-gradient($angle$deg, $color1$ 25%, $color2$ 75%);
        color: white;
      }
    </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 min-vh-100 d-none d-md-block d-lg-block d-xl-block">
      <div class="row min-vh-100 align-items-center">
        <div class="col-12 col-lg-6">
          <div class="pl-5 pb-4">
            <img src=$image$ style="height:12rem" class="rounded-circle">
          </div>
          <div class="pl-5 py-1">
            <h1>$title$</h1>
          </div>
          <div class="pl-5 py-3">
            <div style="border: thin solid lightgray; width: 100px;"></div>
          </div>
          <div class="px-5 py-1">
            $body$
          </div>
          <div class="pl-5 pt-4" 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-light mb-2">
                    $links.label$
                  </button>
                </a>
              </li>
              $endfor$
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="container-fluid min-vh-100 d-block d-md-none d-lg-none d-xl-none">
      <div class="row pt-5 align-items-center">
        <div class="col-12 col-lg-6">
          <div class="pl-5 pb-4">
            <img src=$image$ style="height:12rem" class="rounded-circle">
          </div>
          <div class="pl-5 py-1">
            <h1>$title$</h1>
          </div>
          <div class="pl-5 py-3">
            <div style="border: thin solid lightgray; width: 100px;"></div>
          </div>
          <div class="px-5 py-1">
            $body$
          </div>
        </div>
      </div>
      <div class="row justify-content-center align-items-center pb-4">
          <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" style="background-color: Transparent; color:white; border-color: white;">
                    $links.label$
                    </button>
                </a>
                $endfor$
              </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>