layout.pug

doctype
head
  meta(charset="utf-8")
  meta(name="viewport" content="width=device-width, initial-scale=1.0")
  //- meta(name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0")
  meta(name='ir-site-verification-token' value='-676786771')

  if renderData && renderData.title
    title #[= renderData.title ] | #[= meta.siteTitle ]
  else if title
    title #[= title ] | #[= meta.siteTitle ]
  else
    title #[= meta.siteTitle ]

  link(rel="apple-touch-icon-precomposed" sizes="57x57" href="/assets/favicon/apple-touch-icon-57x57.png")
  link(rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/favicon/apple-touch-icon-114x114.png")
  link(rel="apple-touch-icon-precomposed" sizes="72x72" href="/assets/favicon/apple-touch-icon-72x72.png")
  link(rel="apple-touch-icon-precomposed" sizes="144x144" href="/assets/favicon/apple-touch-icon-144x144.png")
  link(rel="apple-touch-icon-precomposed" sizes="60x60" href="/assets/favicon/apple-touch-icon-60x60.png")
  link(rel="apple-touch-icon-precomposed" sizes="120x120" href="/assets/favicon/apple-touch-icon-120x120.png")
  link(rel="apple-touch-icon-precomposed" sizes="76x76" href="/assets/favicon/apple-touch-icon-76x76.png")
  link(rel="apple-touch-icon-precomposed" sizes="152x152" href="/assets/favicon/apple-touch-icon-152x152.png")
  link(rel="icon" type="image/png" href="/assets/favicon/favicon-196x196.png" sizes="196x196")
  link(rel="icon" type="image/png" href="/assets/favicon/favicon-96x96.png" sizes="96x96")
  link(rel="icon" type="image/png" href="/assets/favicon/favicon-32x32.png" sizes="32x32")
  link(rel="icon" type="image/png" href="/assets/favicon/favicon-16x16.png" sizes="16x16")
  link(rel="icon" type="image/png" href="/assets/favicon/favicon-128.png" sizes="128x128")
  meta(name="application-name" content="ChrisSpiegl")
  meta(name="msapplication-TileColor" content="#cc5630")
  meta(name="msapplication-TileImage" content="/assets/favicon/mstile-144x144.png")
  meta(name="msapplication-square70x70logo" content="/assets/favicon/mstile-70x70.png")
  meta(name="msapplication-square150x150logo" content="/assets/favicon/mstile-150x150.png")
  meta(name="msapplication-wide310x150logo" content="/assets/favicon/mstile-310x150.png")
  meta(name="msapplication-square310x310logo" content="/assets/favicon/mstile-310x310.png")

  link(rel="stylesheet" href="/assets/style.css")
  link(rel="alternate" href="/feed.xml" type="application/atom+xml", title=`${meta.siteTitle} Atom Feed`)
  script(src="https://kit.fontawesome.com/8ad5d26e9a.js" crossorigin="anonymous")

body
  if meta.build.env === 'development'
    header.development(style="padding: .2rem 0; margin: 0; background-color: rgba(255, 105, 97, 0.5); min-width: 100%; width: 100%; min-height: 0; height: auto; display: block; border-bottom: 2px solid rgb(255,105,97); text-align: center;")= `DEVELOPMENT | ${ global.dateHtml(meta.build.timestamp) }`
  header.container
    section.top
      section.header
        - const avatarImage = '/assets/images/other/avatar-spiegl-chris-leica-2022-08-20-L1010008.jpg'
        img#avatar(srcset=`${meta.imageResizer(320, 0, avatarImage)} 640w, ${meta.imageResizer(640, 0, avatarImage)} 1280w, ${meta.imageResizer(1280, 0, avatarImage)} 1920w` src=avatarImage, alt="")
        div.text
          h1
            a(href="/") Chris Spiegl
          if (nomadlist.now.string !== 'Unknown')
            p
              small: em Currently in #[a(href='/location')= nomadlist.now.string]

      section.social
        a(href="/youtube" title="YouTube Profile — External Link" target="_blank")
          i(class="fa-brands fa-youtube")
        a(href="/instagram" title="Instagram Profile — External Link" target="_blank")
          i(class="fa-brands fa-instagram")
        a(href="/linkedin" title="LinkedIn Profile — External Link" target="_blank")
          i(class="fa-brands fa-linkedin")
        a(href="/x" title="𝕏 Profile — External Link" target="_blank")
          i(class="fa-brands fa-x-twitter")

    nav.navMain
      ul
        li
          a(href="/") Home
        li
          a(href="/now") Now
        li
          a(href="/consulting") Consulting
        li
          a(href="/newsletter") Newsletter
        //- li
        //-   a(href="/support") Support
        //- li
        //-   a(href="/gear") Gear
        //- li
        //-   a(href="/courses" title="Skillshare Profile — External Link" target="_blank") Courses
        //- li
        //-   a(href="/blog") Blog
        //- li
        //-   a(href="/books") Books
        //- li
        //-   a(href="/movies") Movies
        //- li
        //-   a(href="/newsletter/archive" title="Creation Overview" target="_blank") Creations
        //- li
        //-   a(href="/podcast") Podcast
        //- li
        //-   a(href="/more") More

  section#content
    block content

  footer.container

    section#search()
      form(action="https://duckduckgo.com/" method="get")
        input(type="hidden" name="ia" value="web")
        input(type="hidden" name="sites" value="ChrisSpiegl.com")
        input.text-center(type="text" name="q" value="" placeholder="Search for anything on ChrisSpiegl.com" required)
        input.btn.btn-block(type="submit" value="Search")

    nav.navFooter
      ul
        //- li: a(href="/uncopyright") Uncopyrighted
        li: a(href="/privacy-policy") Privacy Policy
        li: a(href="/legal-disclosure") Legal Disclosure
      ul
        li Last updated:
          = ' '
          a#sha(title=`Last updated ${global.dateReadable(git.commitdate)}` href=`${git.origin.replace('git@github.com:', 'https://github.com/').replace('.git', '')}/blob/${git.curbranch}${page.inputPath.slice(1)}`)
            = global.dateReadableShort(git.commitdate)
            = ' '
            if (git.curbranch != 'HEAD')
              = git.curbranch
            = ' '
            = git.commitsha
      ul
        li(style='text-align: center')
          a(href="/chrisspiegl.asc") PGP Public Key
          = ' '
          | fingerprint:
          br
          | 6646 6F22 1B88 A080 7748 E6F9 318B A27E 4ACD 1AC9

  //- Footer Blocks and Javascript

  //- Analytics
  if meta.build.env === 'production'
    <!-- Google Tag Manager -->
    script.
      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-W4B8RJJ');
    <!-- Google Tag Manager (noscript) -->
    noscript
      iframe(src="https://www.googletagmanager.com/ns.html?id=GTM-W4B8RJJ" height="0" width="0" style="display:none;visibility:hidden")

  <!-- MailerLite Universal -->
  script(type="application/javascript").
    (function(w,d,e,u,f,l,n){w[f]=w[f]||function(){(w[f].q=w[f].q||[])
    .push(arguments);},l=d.createElement(e),l.async=1,l.src=u,
    n=d.getElementsByTagName(e)[0],n.parentNode.insertBefore(l,n);})
    (window,document,'script','https://assets.mailerlite.com/js/universal.js','ml');
    ml('account', '190754');

  //- Littlefoot - Footnotes
  script(src="https://cdn.jsdelivr.net/npm/littlefoot@3.3/dist/littlefoot.min.js")
  script(type="application/javascript").
    littlefoot.default({
      buttonTemplate: `<sup
        aria-expanded="false"
        aria-label="Footnote <% number %>"
        class="footnote-ref">
        <a
        href="#<% reference %>"
        class="footnote-ref"
        id="<% reference %>"
        data-footnote-identifier="<% reference %>"
        data-footnote-style="default"
        alt="See Footnote <% number %>"
        rel="footnote"
        data-footnote-content="<% content %>">
          <% number %>
        </a></sup>`
    })
    Array.prototype.forEach.call(document.querySelectorAll('.footnotes.footnote-print-only, .footnotes .footnote-print-only'), e => e.classList.remove('footnote-print-only'))
    Array.prototype.forEach.call(document.querySelectorAll('.footnote-backref'), (el) => { el.href = el.href.replace('#', '#lf-') })