DandelionNStuff/NixWeb-homepage
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add support for mobile navbar

Browse Source
This commit is contained in:
Techit Thawiang
2025-09-22 18:14:25 +07:00
parent 0bc3fddf20
commit 7180bc0de2
2 changed files with 42 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/css/main.css
+28 -10
View File
@@ -55,17 +55,32 @@ body {
.navbar-nav {
@apply md:float-left md:m-0;
}
.navbar-nav-mobile {
@apply bg-(--ui-primary-light) border-t border-(--ui-primary);
}
.navbar-nav > li {
float: left;
display: flex;
}
.navbar-nav > li > a {
.navbar-nav-mobile > li {
display: flex;
flex-direction: column;
}
.navbar-nav > li > a,
.navbar-nav-mobile > li > a {
padding: 10.5px 14px;
}
.navbar-nav > li > a.router-link-active, .navbar-nav > li > a.router-link-active:hover {
.navbar-nav-mobile > li > a {
@apply text-(--ui-primary-container);
}
.navbar-nav > li > a.router-link-active,
.navbar-nav > li > a.router-link-active:hover,
.navbar-nav-mobile > li > a.router-link-active,
.navbar-nav-mobile > li > a.router-link-active:hover {
@apply bg-linear-[to_bottom,rgba(0,0,0,0.3)_10%,rgba(0,0,0,0)_100%];
}
.navbar-nav > li > a:hover {
.navbar-nav > li > a:hover,
.navbar-nav-mobile > li > a:hover {
@apply bg-linear-[to_bottom,rgba(255,255,255,0)_0%,rgba(255,255,255,0.3)_10%,rgba(255,255,255,0)_100%];
}
.site-title {
@@ -83,6 +98,9 @@ body {
height: auto;
@apply bg-linear-[to_bottom,var(--ui-primary)_0%,var(--ui-primary-light)_90%] text-white;
}
/* .site-navbar > .container {
@apply items-end;
} */
.hero-section {
@apply py-16 drop-shadow-md bg-(--ui-primary-container) text-(--ui-on-primary-container) bg-cover bg-center;
}
@@ -90,11 +108,11 @@ body {
@apply my-4;
}
.hero-section > .container > .title {
@apply text-4xl font-bold my-4;
@apply text-2xl md:text-3xl lg:text-4xl font-bold my-4;
line-height: 1.4em;
}
.hero-section > .container > .subtitle {
@apply text-xl my-4;
@apply text-lg md:text-xl my-4;
line-height: 1.4em;
}
.page-section {
@@ -107,18 +125,18 @@ body {
@apply my-[0.75rem];
}
.page-section.page-section-alt {
@apply my-0;
@apply my-16 md:my-0;
}
.page-section.page-section-alt > .container {
@apply my-0 flex justify-between items-center;
@apply my-0 flex flex-col md:flex-row justify-between items-center;
}
.page-section.page-section-alt > .container > .section {
@apply mb-4;
@apply md:mb-4;
}
.page-section.page-section-alt > .container > .section-img {
@apply w-[45%];
@apply w-full md:w-[45%];
img {
@apply my-16;
@apply md:my-16;
}
}
.footer {