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

some design tweak again

Browse Source
This commit is contained in:
Techit Thawiang
2025-10-06 18:28:49 +07:00
parent 05903dfab8
commit d5c45fd44b
1 changed files with 32 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
+32 -13
View File
@@ -145,10 +145,7 @@ img {
@apply duration-200 transition-all; @apply duration-200 transition-all;
} }
.web-header.web-header-bg { .web-header.web-header-bg {
.web-nav-title { @apply bg-(--ui-bg)/75 backdrop-blur border-b border-(--ui-text)/5;
@apply text-(--color-cloud-light)
}
@apply bg-(--color-deep-semidark) text-(--color-cloud-medium);
} }
.web-header-emit-shadow-when-top.shadow-active { .web-header-emit-shadow-when-top.shadow-active {
@apply shadow-lg; @apply shadow-lg;
@@ -221,7 +218,13 @@ p {
} }
} }
.web-nav-title { .web-nav-title {
--web-nav-title-shadow: 0px 0px 16px var(--ui-bg);
@apply text-lg font-bold; @apply text-lg font-bold;
text-shadow: var(--web-nav-title-shadow),
var(--web-nav-title-shadow),
var(--web-nav-title-shadow),
var(--web-nav-title-shadow),
var(--web-nav-title-shadow);
} }
.web-hero.web-hero-bg, .web-hero-post.web-hero-bg { .web-hero.web-hero-bg, .web-hero-post.web-hero-bg {
@apply bg-(--color-deep-semidark) text-(--color-cloud-medium); @apply bg-(--color-deep-semidark) text-(--color-cloud-medium);
@@ -264,8 +267,7 @@ p {
.project-card-container > li, .post-card-container > li, .font-card-container > li { @apply ml-0; } .project-card-container > li, .post-card-container > li, .font-card-container > li { @apply ml-0; }
.project-card, .font-card, .post-card { .project-card, .font-card, .post-card {
height: 100%; height: 100%;
padding: 0.5rem 1rem 0.5rem 0.5rem; @apply flex flex-col p-2 items-center rounded-2xl sm:flex-row sm:gap-4 bg-(--ui-bg-muted) hover:bg-(--ui-bg-elevated) transition-colors duration-100 ease-fluid ml-0;
@apply flex flex-col items-center rounded-2xl sm:flex-row sm:gap-4 bg-(--ui-bg-muted) hover:bg-(--ui-bg-elevated) transition-colors duration-100 ease-fluid ml-0;
h3 { @apply text-2xl font-bold line-clamp-1; } h3 { @apply text-2xl font-bold line-clamp-1; }
h3,p { z-index: 1; } h3,p { z-index: 1; }
img { @apply mb-2 sm:mb-0 aspect-video object-cover w-full sm:max-w-56 rounded-lg; } img { @apply mb-2 sm:mb-0 aspect-video object-cover w-full sm:max-w-56 rounded-lg; }
@@ -280,7 +282,7 @@ p {
height: calc(var(--spacing)*16); height: calc(var(--spacing)*16);
} }
.project-card-content, .font-card-content, .post-card-content { .project-card-content, .font-card-content, .post-card-content {
@apply block w-full; @apply block w-full px-2 sm:px-0;
} }
&.disabled { &.disabled {
@apply opacity-50 pointer-events-none cursor-not-allowed; @apply opacity-50 pointer-events-none cursor-not-allowed;
@@ -296,23 +298,24 @@ p {
@apply flex md:hidden h-14 w-9 cursor-pointer items-center justify-center hover:bg-(--ui-text)/5 active:bg-(--ui-text)/10 transition-colors duration-100 ease-fluid; @apply flex md:hidden h-14 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 { .hamburger-menu {
@apply flex flex-col sticky h-fit left-0 top-14 w-full max-w-(--ui-container) mx-auto z-[1000]; transform-origin: top right;
@apply flex flex-col sticky h-fit left-0 top-14 w-full max-w-(--ui-container) mx-auto z-[1000] transition-all duration-200 ease-fluid;
.nav-wrapper { .nav-wrapper {
list-style-type: none; list-style-type: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0; margin: 0;
padding: 0 calc(var(--spacing)*4); padding: 0 calc(var(--spacing)*4);
padding-top: 1rem;
width: 100%; width: 100%;
gap: 6px; gap: 6px;
align-items: end; align-items: end;
.nav-link { .nav-link, .nav-button {
display: flex;
font-size: 15px; font-size: 15px;
width: 100%; width: 100%;
max-width: 24rem; max-width: 18rem;
@apply ml-0; @apply ml-0 justify-end;
a { a, .hamburger-btn-square {
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
@@ -321,8 +324,24 @@ p {
a.router-link-exact-active { a.router-link-exact-active {
@apply text-primary; @apply text-primary;
} }
.hamburger-btn-square {
@apply aspect-square justify-center;
width: unset;
} }
} }
.nav-button {
font-size: 15px;
width: 100%;
max-width: 18rem;
@apply ml-0 justify-end flex;
}
.nav-button.nav-button-only-desktop {
@apply hidden md:flex;
}
}
}
.hamburger-menu.hamburger-menu-hidden {
@apply scale-95 blur opacity-0 invisible;
} }
.nav-links { .nav-links {
@apply hidden md:flex; @apply hidden md:flex;