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;
}
.web-header.web-header-bg {
.web-nav-title {
@apply text-(--color-cloud-light)
}
@apply bg-(--color-deep-semidark) text-(--color-cloud-medium);
@apply bg-(--ui-bg)/75 backdrop-blur border-b border-(--ui-text)/5;
}
.web-header-emit-shadow-when-top.shadow-active {
@apply shadow-lg;
@@ -221,7 +218,13 @@ p {
}
}
.web-nav-title {
--web-nav-title-shadow: 0px 0px 16px var(--ui-bg);
@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 {
@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, .font-card, .post-card {
height: 100%;
padding: 0.5rem 1rem 0.5rem 0.5rem;
@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;
@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;
h3 { @apply text-2xl font-bold line-clamp-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; }
@@ -280,7 +282,7 @@ p {
height: calc(var(--spacing)*16);
}
.project-card-content, .font-card-content, .post-card-content {
@apply block w-full;
@apply block w-full px-2 sm:px-0;
}
&.disabled {
@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;
}
.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 {
list-style-type: none;
display: flex;
flex-direction: column;
margin: 0;
padding: 0 calc(var(--spacing)*4);
padding-top: 1rem;
width: 100%;
gap: 6px;
align-items: end;
.nav-link {
.nav-link, .nav-button {
display: flex;
font-size: 15px;
width: 100%;
max-width: 24rem;
@apply ml-0;
a {
max-width: 18rem;
@apply ml-0 justify-end;
a, .hamburger-btn-square {
display: flex;
align-items: center;
width: 100%;
@@ -321,8 +324,24 @@ p {
a.router-link-exact-active {
@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 {
@apply hidden md:flex;