mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-16 03:32:51 +02:00
923d473593
- Increase z-index for language switcher, theme toggle, and view transitions - Remove sticky positioning from mobile header - Ensure proper layering of UI elements on mobile devices
123 lines
3.2 KiB
CSS
123 lines
3.2 KiB
CSS
:root {
|
|
--uno-colors-primary: theme('colors.primary');
|
|
--uno-colors-secondary: theme('colors.secondary');
|
|
--uno-colors-background: theme('colors.background');
|
|
}
|
|
|
|
html {
|
|
--at-apply: 'bg-background c-secondary text-62.5% antialiased scrollbar-hidden';
|
|
}
|
|
|
|
html::-webkit-scrollbar {
|
|
--at-apply: 'hidden';
|
|
}
|
|
|
|
body {
|
|
--at-apply: 'text-1.6rem ios-flash-fix';
|
|
}
|
|
|
|
h1 {
|
|
--at-apply: 'text-3.6rem';
|
|
}
|
|
|
|
h2 {
|
|
--at-apply: 'text-3rem';
|
|
}
|
|
|
|
h3 {
|
|
--at-apply: 'text-2.4rem';
|
|
}
|
|
|
|
h4 {
|
|
--at-apply: 'text-2rem';
|
|
}
|
|
|
|
h5 {
|
|
--at-apply: 'text-1.8rem';
|
|
}
|
|
|
|
h6 {
|
|
--at-apply: 'text-1.6rem';
|
|
}
|
|
|
|
article img {
|
|
/* Optimize animation performance of scrollbar */
|
|
--at-apply: 'cursor-zoom-in force-gpu';
|
|
}
|
|
|
|
/* Horizontal reveal animation on theme toggle */
|
|
@keyframes reveal {
|
|
from {
|
|
clip-path: inset(var(--from));
|
|
}
|
|
}
|
|
|
|
html.dark {
|
|
--from: 0 0 100% 0;
|
|
}
|
|
|
|
html:not(.dark) {
|
|
--from: 100% 0 0 0;
|
|
}
|
|
|
|
::view-transition-new(theme-transition) {
|
|
animation: reveal 1s cubic-bezier(0.4, 0, 0.2, 1);
|
|
clip-path: inset(0 0 0 0);
|
|
z-index: 99;
|
|
}
|
|
|
|
::view-transition-old(theme-transition) {
|
|
animation: none;
|
|
z-index: 98;
|
|
}
|
|
|
|
html[data-theme-transition] [data-disable-transition-on-theme] {
|
|
view-transition-name: none !important;
|
|
}
|
|
|
|
@supports not (view-transition-name: none) {
|
|
html:not([data-restore-theme]) {
|
|
--at-apply: 'transition-colors duration-300 ease-out';
|
|
}
|
|
}
|
|
|
|
/* Snell Roundhand static font */
|
|
@font-face {
|
|
font-family: "Snell-Bold";
|
|
src: url("/font/Snell-Bold.woff2") format("woff2");
|
|
font-display: swap;
|
|
unicode-range: U+0030-0039,U+0041-005A,U+0061-007A,U+00C1,U+00C9,U+00CD,U+00D3,U+00DA,U+00DC,U+00D1,U+00E1,U+00E9,U+00ED,U+00F3,U+00FA,U+00FC,U+00F1,U+0410-044F,U+0401,U+0451,U+0021-002F,U+003A-0040,U+00A9;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Snell-Black";
|
|
src: url("/font/Snell-Black.woff2") format("woff2");
|
|
font-display: swap;
|
|
unicode-range: U+0030-0039,U+0041-005A,U+0061-007A,U+00C1,U+00C9,U+00CD,U+00D3,U+00DA,U+00DC,U+00D1,U+00E1,U+00E9,U+00ED,U+00F3,U+00FA,U+00FC,U+00F1,U+0410-044F,U+0401,U+0451,U+0021-002F,U+003A-0040,U+00A9;
|
|
}
|
|
|
|
/* STIXTwoText variable font */
|
|
@font-face {
|
|
font-family: "STIX";
|
|
src: url("/font/STIX.woff2") format("woff2-variations");
|
|
font-display: swap;
|
|
font-weight: 400 700;
|
|
unicode-range: U+0030-0039,U+0041-005A,U+0061-007A,U+00C1,U+00C9,U+00CD,U+00D3,U+00DA,U+00DC,U+00D1,U+00E1,U+00E9,U+00ED,U+00F3,U+00FA,U+00FC,U+00F1,U+0410-044F,U+0401,U+0451,U+0021-002F,U+003A-0040,U+00A9;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "STIX-italic";
|
|
src: url("/font/STIX-italic.woff2") format("woff2-variations");
|
|
font-display: swap;
|
|
font-weight: 400 700;
|
|
unicode-range: U+0030-0039,U+0041-005A,U+0061-007A,U+00C1,U+00C9,U+00CD,U+00D3,U+00DA,U+00DC,U+00D1,U+00E1,U+00E9,U+00ED,U+00F3,U+00FA,U+00FC,U+00F1,U+0410-044F,U+0401,U+0451,U+0021-002F,U+003A-0040,U+00A9;
|
|
}
|
|
|
|
/* Minimal subset of EarlySummerSerif variable font for ui */
|
|
@font-face {
|
|
font-family: "EarlySummer-subset";
|
|
src: url("/font/EarlySummer-subset.woff2") format("woff2-variations");
|
|
font-display: swap;
|
|
font-weight: 400 700;
|
|
unicode-range: U+91cd,U+65b0,U+7f16,U+6392,U+518d,U+73b0,U+7248,U+5f0f,U+4e4b,U+7f8e,U+6587,U+7ae0,U+6807,U+7b7e,U+5173,U+4e8e,U+6a19,U+7c64,U+95dc,U+65bc,U+8a18,U+4e8b,U+30bf,U+30b0,U+6982,U+8981;
|
|
}
|