style: use master-styles-group

layouts/_default/single.html

@@ -24,71 +24,52 @@
     "> */}}
 
         <div class="
-    text-underline-offset:3_:where(a,mark)
-    text-decoration:2;underline;fade-23_:where(a)
-    text-decoration-color:fade-68_:where(a)@dark
-    text-decoration-color:blue-36!_:where(a):hover
-    text-decoration:1;underline;#fce016_:where(mark)
-    text-decoration-color:rgb(252;224;22/.5)_:where(mark)@dark
-    text-decoration:1;line-through;fade-68_:where(del)
-    text-decoration-color:red-64_:where(del)@dark
-    bg:transparent_:where(mark)
-    mb:1em_:where(h2)
-    font:40_:where(h1)
-    font:32_:where(h2)
-    font:24_:where(h3)
-    font:20_:where(h4)
-    font:16_:where(h5)
-    font:14_:where(h6)
-    font:90%_:where(code)
-    font:semibold_:where(th,p_code,li_code,a,mark)
-    font:medium_:where(th,p_code,li_code,a,mark)@dark
-    font:gray-78_:where(th)
-    font:gray-12_:where(th)@dark
-    font:extrabold_:where(h1)
-    
-    p:20_:where(pre)
-    r:8_:where(pre)
-    overflow:auto_:where(pre)
-    bg:gray-3_:where(pre,code:not(.highlight_*))
-    bg:gray-93_:where(pre,code:not(.highlight_*))@dark
-    p:2;4_:where(code:not(.highlight_*))
-    r:4_:where(code:not(.highlight_*))
-
-    pl:1.5em_:where(ul,ol,blockquote)
-    pl:.375em_:where(li)
-    mt:.5em_:where(h1,h2,h3)+:where(h1,h2,h3)
-    my:1.125em_:where(p,pre,blockquote,figure,ul,ol,table)
-    mt:2em_:where(h1,h2,h3,h4,h5,h6)
-    list-style-type:disc_:where(ul)
-    font:fade-76_:where(p,li)
-    font:gray-34_:where(p,li)@dark
-    font:fade-92_:where(strong,b,a,code:not(.highlight_*),mark,del)
-    font:gray-12_:where(strong,b,a,code:not(.highlight_*),mark,del)@dark
-    font:fade-45_:where(li)::marker
-    font:gray-68_:where(li)::marker@dark
-    font:16_:where(p,li)
-    line-height:1.65_:where(p,li)
-    bl:5;solid;fade-76/.1_:where(blockquote)
-    bl:5;solid;fade-34/.1_:where(blockquote)@dark
-    max-width:full_:where(video,img)
-    text:14_:where(figcaption)
-    p:10;20;0_:where(figcaption)
-    width:fit_:where(figcaption)
-    mx:auto_:where(figcaption)
-    font:fade-56_:where(figcaption)
-    font:gray-57_:where(figcaption)@dark
-    width:full_:where(table)
-    border-spacing:0_:where(table)
-    bb:1;solid;fade-92/.06_:where(td,th)
-    b:gray-4/.04_:where(td,th)@dark
-    text:left_:where(th)
-    pl:0_:where(td,th):first-child
-    pr:0_:where(td,th):last-child
-    p:6_:where(td,th)
-    v:middle_:where(code)
-    font:14_:where(th)
-    v:baseline_:where(td)
+        _:where(a):hover{text-decoration-color:blue-36!}
+        _:where(a)@dark{text-decoration-color:fade-68}
+        _:where(a){text-decoration:2;underline;fade-23}
+        _:where(blockquote)@dark{bl:5;solid;fade-34/.1}
+        _:where(blockquote){bl:5;solid;fade-76/.1}
+        _:where(code){font:90%;_v:middle}
+        _:where(code:not(.highlight_*)){p:2;4;_r:4}
+        _:where(del)@dark{text-decoration-color:red-64}
+        _:where(del){text-decoration:1;line-through;fade-68}
+        _:where(figcaption)@dark{font:gray-57}
+        _:where(figcaption){text:14;_p:10;20;0;_width:fit;_mx:auto;_font:fade-56}
+        _:where(h1){font:40;_font:extrabold}
+        _:where(h1,h2,h3)+:where(h1,h2,h3){mt:.5em}
+        _:where(h1,h2,h3,h4,h5,h6){mt:2em}
+        _:where(h2){mb:1em;_font:32}
+        _:where(h3){font:24}
+        _:where(h4){font:20}
+        _:where(h5){font:16}
+        _:where(h6){font:14}
+        _:where(li)::marker@dark{font:gray-68}
+        _:where(li)::marker{font:fade-45}
+        _:where(li){pl:.375em}
+        _:where(mark)@dark{text-decoration-color:rgb(252;224;22/.5)}
+        _:where(mark){text-decoration:1;underline;#fce016;_bg:transparent}
+        _:where(p,li)@dark{font:gray-34}
+        _:where(p,li){font:fade-76;_font:16;_line-height:1.65}
+        _:where(p,pre,blockquote,figure,ul,ol,table){my:1.125em}
+        _:where(pre){p:20;_r:8;_overflow:auto}
+        _:where(pre,code:not(.highlight_*))@dark{bg:gray-93}
+        _:where(pre,code:not(.highlight_*)){bg:gray-3}
+        _:where(strong,b,a,code:not(.highlight_*),mark,del)@dark{font:gray-12}
+        _:where(strong,b,a,code:not(.highlight_*),mark,del){font:fade-92}
+        _:where(table){width:full;_border-spacing:0}
+        _:where(td){v:baseline}
+        _:where(td,th):first-child{pl:0}
+        _:where(td,th):last-child{pr:0}
+        _:where(td,th)@dark{b:gray-4/.04}
+        _:where(td,th){bb:1;solid;fade-92/.06;_p:6}
+        _:where(th)@dark{font:gray-12}
+        _:where(th){font:gray-78;_font:14;_text:left}
+        _:where(th,p_code,li_code,a,mark)@dark{font:medium}
+        _:where(th,p_code,li_code,a,mark){font:semibold}
+        _:where(ul){list-style-type:disc}
+        _:where(ul,ol,blockquote){pl:1.5em}
+        _:where(video,img){max-width:full}
+        _:where(a,mark){text-underline-offset:3}
     ">
             {{- .Content -}}
         </div>

layouts/partials/head.html

@@ -17,6 +17,7 @@
     <link href="https://unpkg.com/@master/normal.css" rel="stylesheet">
     <script src="https://unpkg.com/@master/style"></script>
     <script src="https://unpkg.com/@master/styles"></script>
+    <script src="https://unpkg.com/master-styles-group"></script>
 
     <script>
         window.matchMedia('(prefers-color-scheme: dark)').matches && document.documentElement.classList.add("dark");