tonybtw.com

tonybtw.com

https://git.tonybtw.com/tonybtw.com.git git://git.tonybtw.com/tonybtw.com.git
tonybtw.com / layouts / tutorial / single.html
1,991 bytes raw
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 
    <meta name="author" content="Tony, btw." />
7 
    <link rel="icon" type="image/png" href="/img/favicon.png" />
8 
    <!-- <link rel="stylesheet" href="/css/code.css" /> -->
9 
    <link rel="stylesheet" href="/css/site.css" />
10 
    <title>{{ .Title }}</title>
11 
  </head>
12 
  <body>
13
14 
    {{ partial "header.html" . }}
15
16 
    <main class="container">
17 
      <div class="row" style="display: flex; align-items: flex-start; gap: 2rem;">
18
19 
        <!-- Main Content -->
20 
        <div class="column" style="flex: 1;">
21 
          <article class="site-post">
22 
            <h1 class="site-post-title center">{{ .Title }}</h1>
23 
            {{ with .Params.date }}
24 
              <p class="site-post-meta center">{{ time.Format "01/02/2006" . }}</p>
25 
            {{ end }}
26
27
28 
            {{ with .Params.image }}
29 
              <div class="post-hero">
30 
                <img src="{{ . | relURL }}" alt="{{ $.Title }}" loading="lazy" />
31 
              </div>
32 
            {{ end }}
33
34 
            {{ if .Params.video }}
35 
            <div class="video">
36 
              <iframe src="https://www.youtube.com/embed/{{ .Params.video }}" allowfullscreen></iframe>
37 
            </div>
38 
            {{ end }}
39
40 
            <div id="content" class="mb-10">
41 
              {{ .Content }}
42 
            </div>
43 
          </article>
44 
        </div>
45
46 
        <!-- Sidebar TOC -->
47 
        {{ if gt (len .TableOfContents) 80 }}
48 
        <aside class="content-panel" style="flex: 0 0 250px; max-width: 250px; position: sticky; top: 100px; align-self: flex-start;">
49 
          <div class="pb-3">
50 
            <strong class="text-xl">Table of Contents</strong>
51 
          </div>
52 
          <div id="tableOfContentContainer" style="max-height: calc(100vh - 8rem); overflow-y: auto;">
53 
            {{ .TableOfContents }}
54 
          </div>
55 
        </aside>
56 
        {{ end }}
57
58 
      </div>
59 
    </main>
60 
  </body>
61 
</html>