x
This commit is contained in:
Your Name committed
1 parent
78b722e120
commit
75770ca122
18 files changed
+1119
-318
No files matched your search
@@ -274,6 +274,53 @@
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.site-footer-navigation-inner {
|
||||
display: grid;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.site-footer--mobile-columns-1 .site-footer-navigation-inner { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
||||
.site-footer--mobile-columns-2 .site-footer-navigation-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.site-footer--container-narrow .site-footer-navigation-inner { max-width: 56rem; }
|
||||
.site-footer--container-standard .site-footer-navigation-inner { max-width: 80rem; }
|
||||
.site-footer--container-wide .site-footer-navigation-inner { max-width: 96rem; }
|
||||
.site-footer--container-full .site-footer-navigation-inner { max-width: none; }
|
||||
.site-footer--padding-sm .site-footer-navigation { padding-block: calc(var(--spacing) * 8); }
|
||||
.site-footer--padding-md .site-footer-navigation { padding-block: calc(var(--spacing) * 12); }
|
||||
.site-footer--padding-lg .site-footer-navigation { padding-block: calc(var(--spacing) * 20); }
|
||||
.site-footer--padding-xl .site-footer-navigation { padding-block: calc(var(--spacing) * 28); }
|
||||
.site-footer--gap-sm .site-footer-navigation-inner { gap: calc(var(--spacing) * 4); }
|
||||
.site-footer--gap-md .site-footer-navigation-inner { gap: calc(var(--spacing) * 8); }
|
||||
.site-footer--gap-lg .site-footer-navigation-inner { gap: calc(var(--spacing) * 12); }
|
||||
.site-footer--gap-xl .site-footer-navigation-inner { gap: calc(var(--spacing) * 16); }
|
||||
.site-footer--heading-sm .site-footer-column-heading { font-size: var(--text-xs); }
|
||||
.site-footer--heading-md .site-footer-column-heading { font-size: var(--text-sm); }
|
||||
.site-footer--heading-lg .site-footer-column-heading { font-size: var(--text-base); }
|
||||
.site-footer--link-sm .site-footer-column-links { font-size: var(--text-xs); }
|
||||
.site-footer--link-md .site-footer-column-links { font-size: var(--text-sm); }
|
||||
.site-footer--link-lg .site-footer-column-links { font-size: var(--text-base); }
|
||||
.site-footer--brand-logo-sm .site-footer-brand-logo { height: 1.5rem; width: auto; }
|
||||
.site-footer--brand-logo-md .site-footer-brand-logo { height: 2rem; width: auto; }
|
||||
.site-footer--brand-logo-lg .site-footer-brand-logo { height: 3rem; width: auto; }
|
||||
.site-footer--brand-logo-xl .site-footer-brand-logo { height: 4rem; width: auto; }
|
||||
.site-footer--social-sm .site-footer-social { height: 2rem; width: 2rem; font-size: 0.5625rem; }
|
||||
.site-footer--social-md .site-footer-social { height: 2.25rem; width: 2.25rem; font-size: 0.625rem; }
|
||||
.site-footer--social-lg .site-footer-social { height: 2.75rem; width: 2.75rem; font-size: var(--text-xs); }
|
||||
.site-footer--finale-mobile-compact .site-footer-brand-finale { min-height: 35svh; }
|
||||
.site-footer--finale-mobile-medium .site-footer-brand-finale { min-height: 55svh; }
|
||||
.site-footer--finale-mobile-large .site-footer-brand-finale { min-height: 75svh; }
|
||||
.site-footer--finale-logo-sm .site-footer-finale-logo { max-height: 4rem; max-width: min(72vw, 18rem); }
|
||||
.site-footer--finale-logo-md .site-footer-finale-logo { max-height: 6rem; max-width: min(76vw, 24rem); }
|
||||
.site-footer--finale-logo-lg .site-footer-finale-logo { max-height: 8rem; max-width: min(82vw, 32rem); }
|
||||
.site-footer--finale-logo-xl .site-footer-finale-logo { max-height: 8rem; max-width: min(82vw, 32rem); }
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.site-footer--desktop-columns-2 .site-footer-navigation-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.site-footer--desktop-columns-3 .site-footer-navigation-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.site-footer--desktop-columns-4 .site-footer-navigation-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
.site-footer--brand-logo-md .site-footer-brand-logo { height: 2.5rem; }
|
||||
}
|
||||
|
||||
/* Desktop Fixed Curtain Reveal Effect (เปิดม่าน Logo แบบ Fixed ตาม pkh.kitizone.com) */
|
||||
@media (min-width: 1024px) {
|
||||
.global-main {
|
||||
@@ -282,11 +329,11 @@
|
||||
background: var(--color-surface-page);
|
||||
}
|
||||
|
||||
.site-footer-with-finale {
|
||||
.site-footer--finale-curtain {
|
||||
min-height: 100svh;
|
||||
}
|
||||
|
||||
.site-footer-stage {
|
||||
.site-footer--finale-curtain .site-footer-stage {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
@@ -296,33 +343,36 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.site-footer-brand-finale {
|
||||
.site-footer--finale-curtain .site-footer-brand-finale {
|
||||
min-height: 0;
|
||||
padding-block: calc(var(--spacing) * 16);
|
||||
}
|
||||
|
||||
.site-footer-finale-logo {
|
||||
max-height: calc(var(--spacing) * 48);
|
||||
max-width: min(68vw, 48rem);
|
||||
}
|
||||
|
||||
.site-footer-finale-wordmark {
|
||||
.site-footer--finale-curtain .site-footer-finale-wordmark {
|
||||
font-size: var(--text-8xl);
|
||||
line-height: var(--tw-leading, var(--text-8xl--line-height));
|
||||
}
|
||||
|
||||
.site-footer-navigation {
|
||||
.site-footer--finale-curtain .site-footer-navigation {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.site-footer--finale-static.site-footer--finale-desktop-compact .site-footer-brand-finale { min-height: 35svh; }
|
||||
.site-footer--finale-static.site-footer--finale-desktop-half .site-footer-brand-finale { min-height: 50svh; }
|
||||
.site-footer--finale-static.site-footer--finale-desktop-screen .site-footer-brand-finale { min-height: 100svh; }
|
||||
.site-footer--finale-curtain.site-footer--finale-desktop-compact .site-footer-stage { grid-template-rows: 35svh auto; align-content: end; }
|
||||
.site-footer--finale-curtain.site-footer--finale-desktop-half .site-footer-stage { grid-template-rows: 50svh auto; align-content: end; }
|
||||
.site-footer--finale-curtain.site-footer--finale-desktop-screen .site-footer-stage { grid-template-rows: minmax(0, 1fr) auto; }
|
||||
.site-footer--finale-logo-xl .site-footer-finale-logo { max-height: 12rem; max-width: min(68vw, 48rem); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.site-footer-stage {
|
||||
.site-footer--finale-curtain .site-footer-stage {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.site-footer-with-finale {
|
||||
.site-footer--finale-curtain {
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user