{{ define "head" }} <meta name="description" content="{{ .Params.description }}"> <link rel="stylesheet" href="{{.Site.Params.staticPath}}/css/about.css"> <!-- fontawesome --> <script defer src="{{.Site.Params.staticPath}}/fontawesome-5/all-5.15.4.js"></script> {{ end }} {{ define "title" }} {{.Title }} | {{ .Site.Title }} {{ end }} {{ define "main" }} <section id="single"> <div class="container"> <div class="title mb-3"> <h1 class="text-center mb-4">{{ .Title }}</h1> </div> <div class="row justify-content-center"> {{ if .Params.image }} <div class="col-sm-12 col-md-12 col-lg-3 px-3"> <div class="sticky-sidebar"> <aside class="aboutImg"> <div class="text-center"> <img src="{{ .Params.image }}" class="mx-auto rounded" alt=""> </div> <h2 class="text-center pt-3"> {{ .Params.name }} </h2> <div class="aboutImg-content"> <ul class="list-inline pt-3 text-center"> {{ range .Params.socialLinks.fontAwesomeIcons }} <li class="list-inline-item text-center"> <a href="{{ .url }}" target="_blank"> <i class="{{ .icon }}"></i> </a> </li> {{ end }} {{ range .Params.socialLinks.customIcons }} <li class="list-inline-item text-center"> <a href="{{ .url }}" target="_blank" class="img-icon"> <img src="{{ .icon }}"> </a> </li> {{ end }} </ul> </div> </aside> </div> </div> {{ end }} <div class="col-sm-12 col-md-12 col-lg-6 pt-4 p-2"> <div class="pr-lg-4"> <article class="page-content p-2"> {{ .Content | emojify }} </article> </div> </div> </div> </div> <button class="p-2 px-3" onclick="topFunction()" id="topScroll"> <i class="fas fa-angle-up"></i> </button> </section> <script> var topScroll = document.getElementById("topScroll"); window.onscroll = function () { scrollFunction() }; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { topScroll.style.display = "block"; } else { topScroll.style.display = "none"; } } function topFunction() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } </script> {{ end }}