chore: tweak

tools/helper/package.json

@@ -26,7 +26,7 @@
   "type": "module",
   "exports": {
     ".": {
-      "sass": "./lib/client/styles/helper.scss",
+      "sass": "./lib/styles/helper.scss",
       "import": "./lib/node/index.js"
     },
     "./client": "./lib/client/index.js",
@@ -45,7 +45,8 @@
   "scripts": {
     "build": "tsc -b tsconfig.build.json",
     "clean": "rimraf --glob ./lib ./*.tsbuildinfo",
-    "copy": "cpx \"src/**/*.{css,scss}\" lib"
+    "style": "sass src/client:lib/client --no-source-map",
+    "copy": "cpx \"src/styles/**/*.scss\" lib/styles"
   },
   "dependencies": {
     "@vue/shared": "^3.4.27",

tools/helper/src/client/styles/normalize.css → tools/helper/src/client/styles/normalize.scss

@@ -1,5 +1,3 @@
-@charset "UTF-8";
-
 html,
 body {
   margin: 0;
@@ -11,13 +9,12 @@ html {
   font-size: 16px;
 
   font-display: optional;
+
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-tap-highlight-color: transparent;
-}
 
-@media print {
-  html {
+  @media print {
     font-size: 12pt;
   }
 }
@@ -59,15 +56,15 @@ code {
 
   font-size: 0.875em;
   overflow-wrap: break-word;
-}
 
-table code {
-  padding: 0.1rem 0.4rem;
-}
+  table & {
+    padding: 0.1rem 0.4rem;
+  }
 
-p a code {
-  color: #3eaf7c;
-  font-weight: 400;
+  p a & {
+    color: #3eaf7c;
+    font-weight: 400;
+  }
 }
 
 strong {
@@ -83,15 +80,10 @@ h6 {
   font-weight: 600;
   line-height: 1.25;
   overflow-wrap: break-word;
-}
 
-h1:focus-visible,
-h2:focus-visible,
-h3:focus-visible,
-h4:focus-visible,
-h5:focus-visible,
-h6:focus-visible {
-  outline: none;
+  &:focus-visible {
+    outline: none;
+  }
 }
 
 h1 {
@@ -124,45 +116,43 @@ a.header-anchor {
   position: relative;
   color: inherit;
   text-decoration: none;
-}
 
-a.header-anchor:hover::before {
-  content: '¶';
+  &:hover {
+    &::before {
+      content: '¶';
 
-  position: absolute;
-  top: 0.4167em;
-  left: -0.75em;
+      position: absolute;
+      top: 0.4167em;
+      left: -0.75em;
 
-  color: var(--c-brand);
+      color: var(--c-brand);
 
-  font-size: 0.75em;
-}
+      font-size: 0.75em;
+    }
+  }
 
-a.header-anchor:focus-visible {
-  outline: none;
-}
+  &:focus-visible {
+    outline: none;
 
-a.header-anchor:focus-visible::before {
-  content: '¶';
+    &::before {
+      content: '¶';
 
-  position: absolute;
-  left: -0.75em;
+      position: absolute;
+      left: -0.75em;
 
-  color: var(--c-brand);
-  outline: auto;
+      color: var(--c-brand);
+      outline: auto;
+    }
+  }
 }
 
 p,
 ul,
 ol {
   line-height: 1.6;
   overflow-wrap: break-word;
-}
 
-@media print {
-  p,
-  ul,
-  ol {
+  @media print {
     line-height: 1.5;
   }
 }
@@ -181,10 +171,10 @@ blockquote {
 
   font-size: 1rem;
   overflow-wrap: break-word;
-}
 
-blockquote > p {
-  margin: 0;
+  > p {
+    margin: 0;
+  }
 }
 
 hr {
@@ -220,17 +210,15 @@ pre {
   hyphens: none;
 
   direction: ltr;
-}
 
-@media print {
-  pre {
+  @media print {
     white-space: pre-wrap;
   }
-}
 
-pre code {
-  padding: 0;
-  border-radius: 0;
+  code {
+    padding: 0;
+    border-radius: 0;
+  }
 }
 
 @page {
@@ -240,13 +228,15 @@ pre code {
 }
 
 @media print {
+  // clear style
   *,
   ::after,
   ::before {
     box-shadow: none !important;
     text-shadow: none !important;
   }
 
+  // handle main content style
   h2,
   h3,
   p {
@@ -264,23 +254,24 @@ pre code {
     font-weight: inherit !important;
     font-size: inherit !important;
     text-decoration: underline;
-  }
 
-  a.header-anchor {
-    text-decoration: none;
+    &.header-anchor {
+      text-decoration: none;
+    }
   }
 
+  // add abbreviations
   abbr[title]::after {
     content: ' (' attr(title) ')';
   }
 
   pre {
     border: 1px solid #eee;
     white-space: pre-wrap !important;
-  }
 
-  pre > code {
-    white-space: pre-wrap !important;
+    > code {
+      white-space: pre-wrap !important;
+    }
   }
 
   blockquote {