techit/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix strucutrue

Browse Source
This commit is contained in:
Techit Thawiang
2025-07-13 16:29:02 +07:00
parent 8f365f617c
commit 969b0378a6
3 changed files with 74 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
+36 -4
View File
@@ -125,7 +125,7 @@ body,main {
line-height: 1.35;
font-weight: 500;
}
.web-header, .web-footer, main {
.web-header, .web-footer, main, footer {
padding: 0 calc(var(--spacing)*4);
}
.web-header {
@@ -134,7 +134,8 @@ body,main {
position: sticky;
top: 0;
height: calc(var(--spacing)*16);
@apply bg-(--ui-bg-elevated)/80 backdrop-blur-xl backdrop-saturate-150 backdrop-contrast-150;
z-index: 1000;
@apply bg-(--ui-bg-elevated);
}
.web-nav, .web-footer-content, .article {
margin: 1rem auto;
@@ -178,7 +179,7 @@ p {
@apply text-2xl font-medium;
}
.web-title {
@apply text-5xl sm:text-6xl font-bold my-[.2em] transition-[color] ease-fluid duration-100;
@apply text-5xl sm:text-6xl my-[.2em] transition-[color] ease-fluid duration-100;
font-variation-settings: 'wdth' 125;
a {
cursor: pointer;
@@ -233,7 +234,38 @@ p {
height: 2.5em;
}
}
.hamburger-toggle {
@apply flex md:hidden h-16 w-9 cursor-pointer items-center justify-center hover:bg-(--ui-text)/5 active:bg-(--ui-text)/10 transition-colors duration-100 ease-fluid;
}
.hamburger-menu {
@apply flex flex-col fixed left-0 top-16 w-full bg-(--ui-bg-elevated) h-full z-[1000];
.nav-wrapper {
list-style-type: none;
display: flex;
flex-direction: column;
margin: 0;
margin-left: calc(var(--spacing)*4);
width: 100%;
.nav-link {
height: calc(var(--spacing)*16);
width: 100%;
@apply ml-0;
a {
display: flex;
align-items: center;
font-variation-settings: 'wdth' 75;
height: calc(var(--spacing)*16);
width: 100%;
@apply pl-3 cursor-pointer hover:bg-(--ui-text)/5 active:bg-(--ui-text)/10 transition-colors duration-100 ease-fluid;
}
a.router-link-exact-active {
@apply border-l-2 border-primary box-border pl-2.5 text-primary;
}
}
}
}
.nav-links {
@apply hidden md:flex;
height: 100%;
.nav-wrapper {
list-style-type: none;
@@ -251,7 +283,7 @@ p {
@apply px-3 cursor-pointer hover:bg-(--ui-text)/5 active:bg-(--ui-text)/10 transition-colors duration-100 ease-fluid;
}
a.router-link-exact-active {
@apply border-t-3 border-primary box-border pb-0.5 text-primary;
@apply border-t-2 border-primary box-border pb-0.5 text-primary;
}
}
}
components/web-footer.vue
+1 -1
View File
@@ -6,7 +6,7 @@ import WebThemeToggle from './web-theme-toggle.vue';
<template>
<footer class="article">
<section class="web-section">
<h3 class="text-5xl mb-4">Techit's Home ////////// thawia.ng</h3>
<h3 class="text-3xl md:text-5xl mb-4">Techit's Home /// thawia.ng</h3>
<small>
Copyright &copy; 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>
components/web-header.vue
+36
View File
@@ -33,7 +33,43 @@
</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
}
</script>