style: draft single page prose style

layouts/_default/single.html

@@ -0,0 +1,95 @@
+{{ define "main" }}
+<article class="py:42 mx:auto max-w:704px">
+    <header class="mb:64">
+        <span class="f:32 font:semibold">{{ .Title }}</span>
+        <div>
+            {{- if isset .Params "date" -}}
+            {{ if eq .Lastmod .Date }}
+            <time>{{ .Date | time.Format (i18n "post.created") }}</time>
+            {{ else }}
+            <time>{{ .Lastmod | time.Format (i18n "post.updated") }}</time>
+            {{ end }}
+            {{- end -}}
+        </div>
+    </header>
+
+    {{/* <div class="bg:red p:10>:where(h1,h2)">
+        <div class="hi">123
+            <div class="hi">456</div>
+        </div>
+    </div> */}}
+
+
+    {{/* <div class="
+        my:16>p
+        mt:0>p+p
+        mt:32>:where(h1,h2,h3,h4,h5,h6)
+
+        my:16>blockquote
+        border-left:2px>blockquote
+        pl:16>blockquote_p
+    "> */}}
+
+        <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)
+    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)
+    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)
+    ">
+            {{- .Content -}}
+        </div>
+</article>