Refactor language-specific font definitions to use CSS variables for improved readability and maintainability

Author: liberaldev

stylesheets/compiled.css

@@ -1944,20 +1944,8 @@ video {
   display: none;
 }
 
-body:lang(zh-CN) {
-  font-family: "Plus Jakarta Sans", "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;
-}
-
-body:lang(zh-TW) {
-  font-family: "Plus Jakarta Sans", "Noto Sans TC", -apple-system, BlinkMacSystemFont, sans-serif;
-}
-
-body:lang(ko) {
-  font-family: "Plus Jakarta Sans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
-}
-
-body:lang(ja) {
-  font-family: "Plus Jakarta Sans", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
+body:lang(ja),body:lang(ko),body:lang(zh-CN),body:lang(zh-TW) {
+  font-family: "Plus Jakarta Sans", var(--noto-sans-subset), -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
 body{
@@ -1978,20 +1966,39 @@ body:is(.dark *){
   color: rgb(250 250 249 / var(--tw-text-opacity, 1));
 }
 
-html:lang(zh-CN), body:lang(zh-CN), .font-default:lang(zh-CN), .font-sans:lang(zh-CN) {
-  font-family: "Plus Jakarta Sans", "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;
+html:lang(zh-CN), [lang="zh-CN"] {
+  --noto-sans-subset: "Noto Sans SC";
 }
 
-html:lang(zh-TW), body:lang(zh-TW), .font-default:lang(zh-TW), .font-sans:lang(zh-TW) {
-  font-family: "Plus Jakarta Sans", "Noto Sans TC", -apple-system, BlinkMacSystemFont, sans-serif;
+html:lang(zh-TW), [lang="zh-TW"] {
+  --noto-sans-subset: "Noto Sans TC";
 }
 
-html:lang(ko), body:lang(ko), .font-default:lang(ko), .font-sans:lang(ko) {
-  font-family: "Plus Jakarta Sans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
+html:lang(ko), [lang="ko"] {
+  --noto-sans-subset: "Noto Sans KR";
 }
 
-html:lang(ja), body:lang(ja), .font-default:lang(ja), .font-sans:lang(ja) {
-  font-family: "Plus Jakarta Sans", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
+html:lang(ja), [lang="ja"] {
+  --noto-sans-subset: "Noto Sans JP";
+}
+
+html:lang(ja),
+  body:lang(ja),
+  .font-default:lang(ja),
+  .font-sans:lang(ja),
+  html:lang(ko),
+  body:lang(ko),
+  .font-default:lang(ko),
+  .font-sans:lang(ko),
+  html:lang(zh-CN),
+  body:lang(zh-CN),
+  .font-default:lang(zh-CN),
+  .font-sans:lang(zh-CN),
+  html:lang(zh-TW),
+  body:lang(zh-TW),
+  .font-default:lang(zh-TW),
+  .font-sans:lang(zh-TW) {
+  font-family: "Plus Jakarta Sans", var(--noto-sans-subset), -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
 .container{

stylesheets/tailwind.css

@@ -24,19 +24,38 @@
     @apply dark:bg-stone-900 dark:text-stone-50;
   }
 
-  html:lang(zh-CN), body:lang(zh-CN), .font-default:lang(zh-CN), .font-sans:lang(zh-CN) {
-    font-family: "Plus Jakarta Sans", "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;
+  html:lang(zh-CN), [lang="zh-CN"] {
+    --noto-sans-subset: "Noto Sans SC";
   }
 
-  html:lang(zh-TW), body:lang(zh-TW), .font-default:lang(zh-TW), .font-sans:lang(zh-TW) {
-    font-family: "Plus Jakarta Sans", "Noto Sans TC", -apple-system, BlinkMacSystemFont, sans-serif;
+  html:lang(zh-TW), [lang="zh-TW"] {
+    --noto-sans-subset: "Noto Sans TC";
   }
 
-  html:lang(ko), body:lang(ko), .font-default:lang(ko), .font-sans:lang(ko) {
-    font-family: "Plus Jakarta Sans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
+  html:lang(ko), [lang="ko"] {
+    --noto-sans-subset: "Noto Sans KR";
   }
 
-  html:lang(ja), body:lang(ja), .font-default:lang(ja), .font-sans:lang(ja) {
-    font-family: "Plus Jakarta Sans", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
+  html:lang(ja), [lang="ja"] {
+    --noto-sans-subset: "Noto Sans JP";
+  }
+
+  html:lang(ja),
+  body:lang(ja),
+  .font-default:lang(ja),
+  .font-sans:lang(ja),
+  html:lang(ko),
+  body:lang(ko),
+  .font-default:lang(ko),
+  .font-sans:lang(ko),
+  html:lang(zh-CN),
+  body:lang(zh-CN),
+  .font-default:lang(zh-CN),
+  .font-sans:lang(zh-CN),
+  html:lang(zh-TW),
+  body:lang(zh-TW),
+  .font-default:lang(zh-TW),
+  .font-sans:lang(zh-TW) {
+    font-family: "Plus Jakarta Sans", var(--noto-sans-subset), -apple-system, BlinkMacSystemFont, sans-serif;
   }
 }