reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-15 11:12:54 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: reorganize css files

Browse source
This commit is contained in:
radishzzz 2025-05-18 16:29:45 +01:00
parent db4aa56987
commit 94f9998f45
6 changed files with 61 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/layouts/Layout.astro
View file

@ -5,14 +5,15 @@ import Header from '@/components/Header.astro'
import Navbar from '@/components/Navbar.astro'
import GithubCard from '@/components/Widgets/GithubCard.astro'
import GsapAnimation from '@/components/Widgets/GsapAnimation.astro'
import PhotoSwipe from '@/components/Widgets/PhotoSwipe.astro'
// import PhotoSwipe from '@/components/Widgets/PhotoSwipe.astro'
import themeConfig from '@/config'
import Head from '@/layouts/Head.astro'
import { getPageInfo } from '@/utils/page'
import '@/styles/global.css'
import '@/styles/font.css'
import '@/styles/heti.css'
import '@/styles/animation.css'
import '@/styles/extend.css'
import '@/styles/font.css'
import '@/styles/global.css'
import '@/styles/markdown.css'
interface Props {
postTitle?: string
@ -50,6 +51,6 @@ const MarginBottom = isPost && themeConfig.comment?.enabled
<GsapAnimation />
<Button supportedLangs={supportedLangs} />
<GithubCard />
<PhotoSwipe />
<!-- <PhotoSwipe /> -->
</body>
</html>

74
src/styles/animation.css
View file

@ -31,76 +31,4 @@ html[data-theme-changing] [data-disable-theme-transition] {
html {
--at-apply: 'transition-colors duration-300 ease-out';
}
}
/* Fade Up Animation >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(3rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animation-fade-up > * {
opacity: 0;
animation: fadeUp 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: calc((var(--animation-order, 0) - 1) * var(--animation-interval, 0.08s));
}
.animation-fade-up > *:nth-child(1) { --animation-order: 1; }
.animation-fade-up > *:nth-child(2) { --animation-order: 2; }
.animation-fade-up > *:nth-child(3) { --animation-order: 3; }
.animation-fade-up > *:nth-child(4) { --animation-order: 4; }
.animation-fade-up > *:nth-child(5) { --animation-order: 5; }
.animation-fade-up > *:nth-child(6) { --animation-order: 6; }
.animation-fade-up > *:nth-child(7) { --animation-order: 7; }
.animation-fade-up > *:nth-child(8) { --animation-order: 8; }
.animation-fade-up > *:nth-child(9) { --animation-order: 9; }
.animation-fade-up > *:nth-child(10) { --animation-order: 10; }
.animation-fade-up > *:nth-child(11) { --animation-order: 11; }
.animation-fade-up > *:nth-child(12) { --animation-order: 12; }
.animation-fade-up > *:nth-child(13) { --animation-order: 13; }
.animation-fade-up > *:nth-child(14) { --animation-order: 14; }
.animation-fade-up > *:nth-child(15) { --animation-order: 15; }
.animation-fade-up > *:nth-child(16) { --animation-order: 16; }
.animation-fade-up > *:nth-child(17) { --animation-order: 17; }
.animation-fade-up > *:nth-child(18) { --animation-order: 18; }
.animation-fade-up > *:nth-child(19) { --animation-order: 19; }
.animation-fade-up > *:nth-child(n+20) { --animation-order: 20; }
/* Fade In Animation >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(var(--animation-distance, 3rem));
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animation-fade-in {
opacity: 0;
animation: fadeIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: var(--animation-delay, 0s);
}
@keyframes fadeInGoBack {
from {
opacity: 0;
transform: translateY(-50%) translateX(1rem);
}
to {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
}
.animation-fade-goback {
opacity: 0;
animation: fadeInGoBack 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
}

7
src/styles/extend.css
View file

@ -1,4 +1,4 @@
/* GitHub Card */
/* GitHub Card >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
.gc-container {
--at-apply: 'block mb-4 px-5 py-4 overflow-x-auto uno-round-border bg-secondary/5';
--at-apply: 'transition-colors duration-300 ease-out lg:(px-6 py-5) hover:(bg-secondary/10 c-primary)';
@ -113,6 +113,11 @@
}
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
/* Video */
/* iframe {
--at-apply: 'mb-4 w-full aspect-video';
} */
/* :where(details) {
--at-apply: 'my-4 px-4 py-3 border border-solid border-secondary/25 rounded cursor-pointer';
}

38
src/styles/font.css
View file

@ -1,3 +1,41 @@
/* Snell Roundhand Static Font */
@font-face {
font-family: "Snell-Bold";
src: url("/fonts/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("/fonts/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("/fonts/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("/fonts/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 */
@font-face {
font-family: "EarlySummer-Subset";
src: url("/fonts/EarlySummer-Subset.woff2") format("woff2-variations");
font-display: swap;
font-weight: 400 700;
}
/* EarlySummerSerif Variable Font */
@font-face {font-family:"EarlySummer";src:url("/fonts/EarlySummer-Split/264097d8d9da16491b480a1c46afe035.woff2") format("woff2-variations");font-display: swap;font-weight: 400 700;unicode-range:U+B7,U+9F2C,U+9F3B,U+9F3E,U+9F84,U+9F99,U+9F9F;}
@font-face {font-family:"EarlySummer";src:url("/fonts/EarlySummer-Split/c0df1afa44c13da520351e6aa9be3d9a.woff2") format("woff2-variations");font-display: swap;font-weight: 400 700;unicode-range:U+9711,U+9784,U+97A6,U+97C1,U+97C6,U+982C,U+983C,U+9854-9855,U+98B1,U+98B3,U+98BA,U+9935,U+993D,U+9951,U+99C4-99C6,U+9A12-9A13,U+9AEA,U+9AEE,U+9B06,U+9B0D,U+9B1A,U+9B28,U+9D12,U+9E78,U+9EB5,U+9EBA,U+9ED2,U+9ED9,U+9F07,U+9F15,U+9F62-9F63,U+FF01,U+FF08-FF09,U+FF0C,U+FF1A-FF1B,U+FF1F;}

49
src/styles/global.css
View file

@ -19,6 +19,14 @@ body::selection {
--at-apply: 'bg-mark';
}
/* Fix KaTeX Overflow Issue */
.katex-display {
--at-apply: 'overflow-x-auto overflow-y-hidden scrollbar-hidden';
}
.katex-display::-webkit-scrollbar {
display: none;
}
/* Heading Anchor Link */
.heading-anchor-link {
--at-apply: 'inline-block translate-y-0.1em';
@ -55,7 +63,8 @@ h4:hover .heading-anchor-link svg:hover {
.highlight-hover::after {
--at-apply: 'origin-bottom-right scale-x-0 transition-transform duration-150 ease-out lg:duration-300';
}
/* Fix Position Issue on iOS */
/* Fix Highlight Position Issue on iOS */
@supports (-webkit-touch-callout: none) {
.navbar-highlight-position-fix {
--at-apply: 'after:bottom-0.68em';
@ -64,41 +73,3 @@ h4:hover .heading-anchor-link svg:hover {
--at-apply: 'after:bottom-0.39em';
}
}
/* Snell Roundhand Static Font >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
@font-face {
font-family: "Snell-Bold";
src: url("/fonts/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("/fonts/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("/fonts/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("/fonts/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 */
@font-face {
font-family: "EarlySummer-Subset";
src: url("/fonts/EarlySummer-Subset.woff2") format("woff2-variations");
font-display: swap;
font-weight: 400 700;
}

13
src/styles/heti.css → src/styles/markdown.css
View file

@ -15,14 +15,6 @@
--at-apply: 'mb-2 text-8.6 font-bold lg:text-9';
}
/* KaTeX Overflow Fix */
.heti .katex-display {
--at-apply: 'overflow-x-auto overflow-y-hidden scrollbar-hidden';
}
.heti .katex-display::-webkit-scrollbar {
display: none;
}
/* Headings */
.heti :where(h1, h2, h3, h4, h5, h6) {
--at-apply: 'mb-4 font-semibold';
@ -77,11 +69,6 @@
--at-apply: 'mt-3 text-center text-sm text-secondary/80';
}
/* Video */
.heti :where(iframe) {
--at-apply: 'mb-4 w-full aspect-video';
}
/* Code Blocks */
.heti :where(pre) {
--at-apply: 'mb-4 overflow-auto uno-round-border px-4 py-3 bg-secondary/5!';