<!DOCTYPE html> <html lang="en"> <head> <title>@domain@</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=JetBrains+Mono"> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { fontFamily: { mono: ["JetBrains Mono", "normal"] }, }, }, }; </script> </head> <body class="font-mono bg-gray-100"> <header class="sticky z-10 transition duration-300 bg-gray-100 top-0 py-6"> <div class="flex max-w-sm md:max-w-3xl mx-auto"> <div class="flex-1 text-center md:text-left text-xl md:text-base"> <a href="@depotWork@/website"> <h1 class="font-bold"> <span class="text-black">(</span><a class="text-purple-600 hover:underline" href="@depotWork@/website">def</a> <a class="text-green-600 hover:underline text-bold" href="@homepage@">"@domain@"</a><span class="text-black">)</span> </h1> </a> </div> <nav class="flex-1 hidden md:block"> <ul class="list-reset flex justify-end space-x-8"> <li> <a class="hover:underline" href="@habits@"> Habits </a> </li> <li> <a class="hover:underline" href="@blog@"> Blog </a> </li> <li> <a class="hover:underline" href="@github@"> GitHub </a> </li> <li> <a class="hover:underline" href="@linkedin@"> LinkedIn </a> </li> </ul> </nav> </div> </header> <div class="max-w-sm px-2 md:px-0 md:max-w-prose mx-auto"> @contentHtml@ <footer class="md:hidden pb-6"> <h2 class="text-xl font-bold py-4">More Bill?</h2> <ul> <li class="pb-6"> <a class="text-blue-600 font-bold" href="@homepage@"> Home <span class="text-blue-300">-></span> </a> </li> <li class="pb-6"> <a class="text-blue-600 font-bold" href="@blog@"> Blog <span class="text-blue-300">-></span> </a> </li> <li class="pb-6"> <a class="text-blue-600 font-bold" href="@github@"> GitHub <span class="text-blue-300">-></span> </a> </li> <li class="pb-6"> <a class="text-blue-600 font-bold" href="@linkedin@"> LinkedIn <span class="text-blue-300">-></span> </a> </li> <li class="pb-6"> <a class="text-blue-600 font-bold" href="https://www.buymeacoffee.com/billandhisjoe"> Caffeinate Bill? <span class="text-blue-300">-></span> </a> </li> </ul> </footer> </div> <script> const $header = document.querySelector("header"); const dropShadow = "drop-shadow-md"; const update = () => window.scrollY !== 0 ? $header.classList.add(dropShadow) : $header.classList.remove(dropShadow); update(); document.addEventListener("scroll", update); </script> </body> </html>