change new layout
This commit is contained in:
+21
-19
@@ -1,20 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import WebThemeToggle from './web-theme-toggle.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer>
|
||||
<div class="article">
|
||||
<section class="web-section">
|
||||
<h3 class="text-3xl md:text-5xl mb-4">Techit's Home /// thawia.ng</h3>
|
||||
<small>
|
||||
Copyright © Techit Thawiang 2025 (2568). All rights reserved.<br>
|
||||
PGP/GPG Key: <code style="font-size: 12px;"><a href="/portal/f/Techit Thawiang_0xE649CED321557334_public.asc">4116 33BE 1B4A 19D4 8D77 9ADE E649 CED3 2155 7334</a></code><br>
|
||||
Powered by <a href="https://dailitation.xyz">dailitation.xyz</a>, <a href="https://github.com/TechitWinner/web">Source Code</a>.
|
||||
</small><br/>
|
||||
<WebThemeToggle/>
|
||||
</section>
|
||||
</div>
|
||||
</footer>
|
||||
<script setup lang="ts">
|
||||
import WebThemeToggle from './web-theme-toggle.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer>
|
||||
<div class="article">
|
||||
<section class="web-section">
|
||||
<h3 class="text-2xl md:text-3xl mb-4 font-light">Techit's Home /// thawia.ng</h3>
|
||||
<p>
|
||||
<small>
|
||||
Copyright © Techit Thawiang 2025 (2568). All rights reserved.<br>
|
||||
PGP/GPG Key: <code style="font-size: 12px;"><a href="/portal/f/Techit Thawiang_0xE649CED321557334_public.asc">4116 33BE 1B4A 19D4 8D77 9ADE E649 CED3 2155 7334</a></code><br>
|
||||
Powered by <a class="link" href="https://dailitation.xyz">dailitation.xyz</a>, <a class="link" href="https://github.com/TechitWinner/web">Source Code</a>.
|
||||
</small>
|
||||
</p>
|
||||
<WebThemeToggle/>
|
||||
</section>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
+68
-74
@@ -1,75 +1,69 @@
|
||||
<template>
|
||||
<header class="web-header">
|
||||
<section class="web-heading">
|
||||
<NuxtLink href="/" class="web-heading-left-section hover:bg-(--ui-text)/5 active:bg-(--ui-text)/10">
|
||||
<div class="flex items-center h-full bg-[#0066FF]">
|
||||
<img width="36" height="36"src="/favicon.ico">
|
||||
</div>
|
||||
<p class="web-nav-title mx-2 text-(--ui-text)">thawia.ng</p>
|
||||
</NuxtLink>
|
||||
<div class="web-heading-right-section">
|
||||
<nav class="nav-links">
|
||||
<ul class="nav-wrapper">
|
||||
<li class="nav-link">
|
||||
<NuxtLink href="/">Home</NuxtLink>
|
||||
</li>
|
||||
<!-- <li class="nav-link">
|
||||
<NuxtLink href="/blog">Blog</NuxtLink>
|
||||
</li>
|
||||
<li class="nav-link">
|
||||
<NuxtLink href="/projects">Projects</NuxtLink>
|
||||
</li>
|
||||
<li class="nav-link">
|
||||
<NuxtLink href="/about">About</NuxtLink>
|
||||
</li>-->
|
||||
<li class="nav-link">
|
||||
<NuxtLink href="/contact">Contact</NuxtLink>
|
||||
</li>
|
||||
<li class="nav-link">
|
||||
<NuxtLink href="/fonts">Fonts</NuxtLink>
|
||||
</li>
|
||||
<li class="nav-link">
|
||||
<NuxtLink href="/collections">Collections</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<button class="hamburger-toggle" @click="toggleMobileHamburger">
|
||||
<Icon name="oundr:menu"/>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<nav v-if="mobileHamburger" class="hamburger-menu">
|
||||
<ul class="nav-wrapper">
|
||||
<li class="nav-link">
|
||||
<NuxtLink @click="toggleMobileHamburger" href="/">Home</NuxtLink>
|
||||
</li>
|
||||
<!-- <li class="nav-link">
|
||||
<NuxtLink href="/blog">Blog</NuxtLink>
|
||||
</li>
|
||||
<li class="nav-link">
|
||||
<NuxtLink href="/projects">Projects</NuxtLink>
|
||||
</li>
|
||||
<li class="nav-link">
|
||||
<NuxtLink href="/about">About</NuxtLink>
|
||||
</li>-->
|
||||
<li class="nav-link">
|
||||
<NuxtLink @click="toggleMobileHamburger" href="/contact">Contact</NuxtLink>
|
||||
</li>
|
||||
<li class="nav-link">
|
||||
<NuxtLink @click="toggleMobileHamburger" href="/fonts">Fonts</NuxtLink>
|
||||
</li>
|
||||
<li class="nav-link">
|
||||
<NuxtLink @click="toggleMobileHamburger" href="/collections">Collections</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const mobileHamburger = ref(false);
|
||||
|
||||
function toggleMobileHamburger() {
|
||||
mobileHamburger.value = !mobileHamburger.value
|
||||
}
|
||||
<template>
|
||||
<header class="web-header web-header-bg web-header-emit-shadow-when-top">
|
||||
<section class="web-heading">
|
||||
<NuxtLink href="/" @click="closeMobileHamburger" class="web-heading-left-section text-(--ui-text) hover:text-primary">
|
||||
<div class="flex items-center h-full bg-[#0066FF]">
|
||||
<img width="36" height="36"src="/favicon.ico">
|
||||
</div>
|
||||
<p title="thawia.ng, Go home" class="web-nav-title mx-2">thawia.ng/</p>
|
||||
</NuxtLink>
|
||||
<div class="web-heading-right-section">
|
||||
<nav class="nav-links">
|
||||
<ul class="nav-wrapper">
|
||||
<li class="nav-link">
|
||||
<NuxtLink href="/posts">/posts</NuxtLink>
|
||||
</li>
|
||||
<!-- <li class="nav-link">
|
||||
<NuxtLink href="/projects">Projects</NuxtLink>
|
||||
</li>
|
||||
<li class="nav-link">
|
||||
<NuxtLink href="/about">About</NuxtLink>
|
||||
</li> -->
|
||||
<li class="nav-link">
|
||||
<NuxtLink title="Contact" href="/contact">/contact</NuxtLink>
|
||||
</li>
|
||||
<li class="nav-link">
|
||||
<NuxtLink title="Fonts" href="/fonts">/fonts</NuxtLink>
|
||||
</li>
|
||||
<li class="nav-link">
|
||||
<NuxtLink title="Collection" href="/collections">/collections</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<button class="hamburger-toggle" @click="toggleMobileHamburger">
|
||||
<Icon name="oundr:menu"/>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<nav v-if="mobileHamburger" class="hamburger-menu">
|
||||
<ul class="nav-wrapper">
|
||||
<li class="nav-link">
|
||||
<NuxtLink aria-label="Go home" @click="closeMobileHamburger" href="/">/</NuxtLink>
|
||||
</li>
|
||||
<li class="nav-link">
|
||||
<NuxtLink aria-label="Go to posts" @click="closeMobileHamburger" href="/posts">/posts</NuxtLink>
|
||||
</li>
|
||||
<li class="nav-link">
|
||||
<NuxtLink aria-label="Go to contact" @click="closeMobileHamburger" href="/contact">/contact</NuxtLink>
|
||||
</li>
|
||||
<li class="nav-link">
|
||||
<NuxtLink aria-label="Go to fonts" @click="closeMobileHamburger" href="/fonts">/fonts</NuxtLink>
|
||||
</li>
|
||||
<li class="nav-link">
|
||||
<NuxtLink aria-label="Go to collections" @click="closeMobileHamburger" href="/collections">/collections</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const mobileHamburger = ref(false);
|
||||
|
||||
function toggleMobileHamburger() {
|
||||
mobileHamburger.value = !mobileHamburger.value
|
||||
}
|
||||
function closeMobileHamburger() {
|
||||
mobileHamburger.value = false
|
||||
}
|
||||
</script>
|
||||
@@ -1,25 +1,21 @@
|
||||
<script setup>
|
||||
const colorMode = useColorMode()
|
||||
defineProps({
|
||||
isCompact: Boolean,
|
||||
size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
|
||||
})
|
||||
const isDark = computed({
|
||||
get() {
|
||||
return colorMode.value === 'dark'
|
||||
},
|
||||
set() {
|
||||
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ClientOnly v-if="!colorMode?.forced">
|
||||
<button @click="isDark = !isDark" class="btn btn-neutral">Toggle Theme</button>
|
||||
|
||||
<template #fallback>
|
||||
<button class="btn btn-neutral">Loading...</button>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
<script setup>
|
||||
const colorMode = useColorMode()
|
||||
const isDark = computed({
|
||||
get() {
|
||||
return colorMode.value === 'dark'
|
||||
},
|
||||
set() {
|
||||
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ClientOnly v-if="!colorMode?.forced">
|
||||
<button @click="isDark = !isDark" class="btn btn-sm btn-neutral">Toggle Theme</button>
|
||||
|
||||
<template #fallback>
|
||||
<button class="btn btn-sm btn-neutral">Loading...</button>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user