kyledot.net/themes/tailwind/layout.html.php
2025-02-10 06:33:08 +09:30

165 lines
8.3 KiB
PHP

<?php if (!defined('HTMLY')) die('HTMLy'); ?>
<!DOCTYPE html>
<html lang="<?php echo blog_language();?>" class="__variable_space scroll-smooth light" id="html-id">
<head>
<?php echo head_contents();?>
<title><?php echo $title;?></title>
<meta name="description" content="<?php echo $description; ?>"/>
<link rel="canonical" href="<?php echo $canonical; ?>" />
<?php echo $metatags;?>
<link rel="stylesheet" href="<?php echo theme_path();?>css/typography.css" data-precedence="next" />
<link rel="stylesheet" href="<?php echo theme_path();?>css/tailwind.css" data-precedence="next" />
<link rel="stylesheet" href="<?php echo theme_path();?>css/style.css" data-precedence="next" />
</head>
<body class="bg-white pl-[calc(100vw-100%)] text-black antialiased dark:bg-gray-950 dark:text-white">
<?php if (facebook()) { echo facebook(); } ?>
<?php if (login()) { toolbar(); } ?>
<script>
var html = document.getElementById("html-id");
if (localStorage.getItem("tw-theme") === "dark") {
html.classList.remove('light');
html.classList.add('dark');
} else if (localStorage.getItem("tw-theme") === "light") {
html.classList.remove('dark');
html.classList.add('light');
}
</script>
<section class="mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0">
<div class="flex h-screen flex-col justify-between font-sans">
<header class="flex items-center justify-between py-10">
<div>
<a aria-label="<?php echo blog_title();?>" href="<?php echo site_url();?>">
<div class="flex items-center justify-between">
<div class="mr-3">
<img width="45" src="<?php echo theme_path();?>logo.png" alt="<?php echo blog_title();?>"/>
</div>
<div class="hidden h-6 text-2xl font-semibold sm:block"><?php echo blog_title();?></div>
</div>
</a>
</div>
<div class="flex items-center space-x-4 leading-5 sm:space-x-6">
<?php echo menu('nav-top');?>
<button aria-label="Search" class="search-open">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6 text-gray-900 dark:text-gray-100">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"></path>
</svg>
</button>
<div class="mr-5">
<div class="relative inline-block text-left">
<div>
<button id="theme-toggle" type="button" aria-label="Theme Mode" aria-haspopup="menu" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-6 w-6 text-gray-900 dark:text-gray-100">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
</svg>
</button>
</div>
</div>
</div>
<button aria-label="Toggle Menu" class="sm:hidden menu-open" id="menu-toggle">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-8 w-8 text-gray-900 dark:text-gray-100">
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
</svg>
</button>
<div class="menu-mobile" role="dialog" tabindex="-1">
<div class="fixed inset-0 z-60 bg-black/25"></div>
<div class="fixed left-0 top-0 z-70 h-full w-full bg-white opacity-95 duration-300 dark:bg-gray-950 dark:opacity-[0.98]">
<nav class="mt-8 flex h-full basis-0 flex-col items-start overflow-y-auto pl-12 pt-2 text-left">
<?php echo menu('nav-mobile');?>
</nav>
<button class="fixed right-4 top-7 z-80 h-16 w-16 p-4 text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400 menu-close" aria-label="Toggle Menu">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
</div>
</div>
</header>
<main class="mb-auto">
<?php if (is_index() || isset($is_profile)) {?>
<div class="divide-y divide-gray-200 dark:divide-gray-700">
<?php echo content();?>
</div>
<?php } else {?>
<?php echo content();?>
<?php } ?>
</main>
<footer>
<div class="mt-16 flex flex-col items-center">
<div class="mb-3 flex space-x-4">
<?php echo social();?>
</div>
<div class="mb-2 flex space-x-2 text-sm text-gray-500 dark:text-gray-400">
<div><?php echo copyright();?></div>
</div>
<div class="mb-8 text-sm text-gray-500 dark:text-gray-400">Design by <a style="te" target="_blank" rel="nofollow" href="https://www.timlrx.com/">Timlrx</a></div>
</div>
</footer>
</div>
</section>
<div style="position: fixed; align-items: flex-start; justify-content: center; width: 100%; inset: 0px; padding: 14vh 16px 16px;" class="z-50 bg-gray-300/50 p-4 backdrop-blur backdrop-filter dark:bg-black/50 search-form">
<div style="opacity: 1; transform: scale(0.99); pointer-events: auto;" class="w-full max-w-xl">
<div>
<div class="overflow-hidden rounded-2xl border border-gray-100 bg-gray-50 dark:border-gray-800 dark:bg-gray-900">
<div class="flex items-center space-x-4 p-4">
<span class="block w-5">
<svg class="text-gray-400 dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</span>
<form role="search" class="w-full"><input name="search" class="h-8 w-full bg-transparent text-gray-600 placeholder-gray-400 focus:outline-none dark:text-gray-200 dark:placeholder-gray-500" autocomplete="off" role="combobox" spellcheck="false" aria-expanded="true" aria-controls="kbar-listbox" aria-activedescendant="kbar-listbox-item-1" placeholder="<?php echo i18n('type_to_search');?>" value=""></form>
<button class="z-80 h-16 w-16 p-4 text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400 search-close" aria-label="Toggle Menu">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="fixed bottom-8 right-8 hidden flex-col gap-3" id="scroll-up">
<button aria-label="Scroll To Top" class="rounded-full bg-gray-200 p-2 text-gray-500 transition-all hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600">
<a href="#"><svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg></a>
</button>
</div>
<script>
var mybutton = document.getElementById("scroll-up");
window.onscroll = function () {
if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
mybutton.style.display = "flex";
mybutton.style.opacity = "1";
} else {
mybutton.style.display = "none";
mybutton.style.opacity = "0";
}
};
</script>
<script>
var html = document.getElementById("html-id");
document.getElementById("theme-toggle").addEventListener("click", () => {
if (html.className.includes("dark")) {
html.classList.remove('dark');
html.classList.add('light');
localStorage.setItem("tw-theme", 'light');
} else {
html.classList.remove('light');
html.classList.add('dark');
localStorage.setItem("tw-theme", 'dark');
}
})
</script>
<script src="<?php echo theme_path();?>js/functions.js"></script>
<?php if (analytics()): ?><?php echo analytics() ?><?php endif; ?>
</body>
</html>