feat: update style

Elegant.nnwtheme/stylesheet.css

@@ -1,7 +1,7 @@
 /* layer: preflights */
 *,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}
 /* layer: typography */
-.prose :where(h1,h2,h3,h4,h5,h6):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-headings);font-weight:600;line-height:1.25;}.prose :where(a):not(:where(.not-prose,.not-prose *)){color:var(--c-prose-links);text-decoration:none;font-weight:500;border-bottom:1px dashed currentColor;padding-bottom:2px;}.prose :where(a code):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-links);}.prose :where(p,ul,ol,pre):not(:where(.not-prose,.not-prose *)){margin:1em 0;line-height:1.75;}.prose :where(blockquote):not(:where(.not-prose,.not-prose *)){margin:1em 0;padding-left:1em;font-style:none;border-left:.2em solid var(--c-prose-borders);color:var(--c-blockquote);}.prose :where(h1):not(:where(.not-prose,.not-prose *)){margin:1rem 0;font-size:2.25em;color:var(--c-text-base);}.prose :where(h2):not(:where(.not-prose,.not-prose *)){margin:1.75em 0 .5em;font-size:1.75em;}.prose :where(h3):not(:where(.not-prose,.not-prose *)){margin:1.5em 0 .5em;font-size:1.375em;}.prose :where(h4):not(:where(.not-prose,.not-prose *)){margin:1em 0;font-size:1.125em;}.prose :where(img,video):not(:where(.not-prose,.not-prose *)){max-width:100%;}.prose :where(figure,picture):not(:where(.not-prose,.not-prose *)){margin:1em 0;}.prose :where(figcaption):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-captions);font-size:.875em;}.prose :where(code):not(:where(.not-prose,.not-prose *)){color:var(--c-prose-code);font-size:.875em;font-weight:400;font-family:var(--un-prose-font-mono);background:var(--c-prose-inline-bg-color) !important;padding:0.2rem 0.375rem;border-radius:0.25rem;}.prose :where(:not(pre) > code):not(:where(.not-prose,.not-prose *))::before,.prose :where(:not(pre) > code):not(:where(.not-prose,.not-prose *))::after{content:;}.prose :where(pre):not(:where(.not-prose,.not-prose *)){padding:1.25rem 1.5rem;overflow-x:auto;border-radius:.375rem;border:1px solid var(--c-prose-pre-border);background:var(--c-prose-pre-bg);}.prose :where(pre,code):not(:where(.not-prose,.not-prose *)){white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;hyphens:none;background:var(--c-prose-pre-bg);}.prose :where(pre code):not(:where(.not-prose,.not-prose *)){font-weight:inherit;}.prose :where(ol,ul):not(:where(.not-prose,.not-prose *)){padding-left:1.25em;}.prose :where(ol):not(:where(.not-prose,.not-prose *)){list-style-type:decimal;}.prose :where(ol[type="A"]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-alpha;}.prose :where(ol[type="a"]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-alpha;}.prose :where(ol[type="A" s]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-alpha;}.prose :where(ol[type="a" s]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-alpha;}.prose :where(ol[type="I"]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-roman;}.prose :where(ol[type="i"]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-roman;}.prose :where(ol[type="I" s]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-roman;}.prose :where(ol[type="i" s]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-roman;}.prose :where(ol[type="1"]):not(:where(.not-prose,.not-prose *)){list-style-type:decimal;}.prose :where(ul):not(:where(.not-prose,.not-prose *)){list-style-type:disc;}.prose :where(ol > li):not(:where(.not-prose,.not-prose *))::marker,.prose :where(ul > li):not(:where(.not-prose,.not-prose *))::marker,.prose :where(summary):not(:where(.not-prose,.not-prose *))::marker{color:var(--un-prose-lists);}.prose :where(hr):not(:where(.not-prose,.not-prose *)){margin:2em auto;border:none;width:48px;height:2px;background:var(--c-prose-hr);border-radius:24px;opacity:0.5;}.prose :where(table):not(:where(.not-prose,.not-prose *)){display:block;margin:1em 0;border-collapse:collapse;overflow-x:auto;}.prose :where(tr):not(:where(.not-prose,.not-prose *)):nth-child(2n){background:var(--un-prose-bg-soft);}.prose :where(td,th):not(:where(.not-prose,.not-prose *)){border:1px solid var(--un-prose-borders);padding:.625em 1em;}.prose :where(abbr):not(:where(.not-prose,.not-prose *)){cursor:help;}.prose :where(kbd):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-code);border:1px solid;padding:.25rem .5rem;font-size:.875em;border-radius:.25rem;}.prose :where(details):not(:where(.not-prose,.not-prose *)){margin:1em 0;padding:1.25rem 1.5rem;background:var(--un-prose-bg-soft);}.prose :where(summary):not(:where(.not-prose,.not-prose *)){cursor:pointer;font-weight:600;}.prose :where(a):not(:where(.not-prose,.not-prose *)):hover{color:var(--c-prose-primary);}.prose :where(pre > code):not(:where(.not-prose,.not-prose *)){background:transparent !important;}
+.prose :where(h1,h2,h3,h4,h5,h6):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-headings);font-weight:600;line-height:1.25;}.prose :where(a):not(:where(.not-prose,.not-prose *)){color:var(--c-prose-links);text-decoration:none;font-weight:500;border-bottom:1px dashed currentColor;padding-bottom:2px;}.prose :where(a code):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-links);}.prose :where(p,ul,ol,pre):not(:where(.not-prose,.not-prose *)){margin:1em 0;line-height:1.75;}.prose :where(blockquote):not(:where(.not-prose,.not-prose *)){margin:1em 0;padding-left:1em;font-style:none;border-left:.2em solid var(--c-prose-borders);color:var(--c-blockquote);}.prose :where(h1):not(:where(.not-prose,.not-prose *)){margin:1rem 0;font-size:2.25em;color:var(--c-text-base);}.prose :where(h2):not(:where(.not-prose,.not-prose *)){margin:1.75em 0 .5em;font-size:1.75em;}.prose :where(h3):not(:where(.not-prose,.not-prose *)){margin:1.5em 0 .5em;font-size:1.375em;}.prose :where(h4):not(:where(.not-prose,.not-prose *)){margin:1em 0;font-size:1.125em;}.prose :where(img,video):not(:where(.not-prose,.not-prose *)){max-width:100%;border-radius:.6rem;height:auto;}.prose :where(figure,picture):not(:where(.not-prose,.not-prose *)){margin:1em 0;}.prose :where(figcaption):not(:where(.not-prose,.not-prose *)){color:var(--c-blockquote);font-size:.875em;margin-top:.8em;}.prose :where(code):not(:where(.not-prose,.not-prose *)){color:var(--c-prose-code);font-size:.875em;font-weight:400;font-family:var(--un-prose-font-mono);background:var(--c-prose-inline-bg-color) !important;padding:0.2rem 0.375rem;border-radius:0.25rem;}.prose :where(:not(pre) > code):not(:where(.not-prose,.not-prose *))::before,.prose :where(:not(pre) > code):not(:where(.not-prose,.not-prose *))::after{content:;}.prose :where(pre):not(:where(.not-prose,.not-prose *)){padding:1.25rem 1.5rem;overflow-x:auto;border-radius:.375rem;border:1px solid var(--c-prose-pre-border);background:var(--c-prose-pre-bg);}.prose :where(pre,code):not(:where(.not-prose,.not-prose *)){white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;hyphens:none;background:var(--c-prose-pre-bg);}.prose :where(pre code):not(:where(.not-prose,.not-prose *)){font-weight:inherit;}.prose :where(ol,ul):not(:where(.not-prose,.not-prose *)){padding-left:1.25em;}.prose :where(ol):not(:where(.not-prose,.not-prose *)){list-style-type:decimal;}.prose :where(ol[type="A"]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-alpha;}.prose :where(ol[type="a"]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-alpha;}.prose :where(ol[type="A" s]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-alpha;}.prose :where(ol[type="a" s]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-alpha;}.prose :where(ol[type="I"]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-roman;}.prose :where(ol[type="i"]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-roman;}.prose :where(ol[type="I" s]):not(:where(.not-prose,.not-prose *)){list-style-type:upper-roman;}.prose :where(ol[type="i" s]):not(:where(.not-prose,.not-prose *)){list-style-type:lower-roman;}.prose :where(ol[type="1"]):not(:where(.not-prose,.not-prose *)){list-style-type:decimal;}.prose :where(ul):not(:where(.not-prose,.not-prose *)){list-style-type:disc;}.prose :where(ol > li):not(:where(.not-prose,.not-prose *))::marker,.prose :where(ul > li):not(:where(.not-prose,.not-prose *))::marker,.prose :where(summary):not(:where(.not-prose,.not-prose *))::marker{color:var(--un-prose-lists);}.prose :where(hr):not(:where(.not-prose,.not-prose *)){margin:2em auto;border:none;width:48px;height:2px;background:var(--c-prose-hr);border-radius:24px;opacity:0.5;}.prose :where(table):not(:where(.not-prose,.not-prose *)){display:block;margin:1em 0;border-collapse:collapse;overflow-x:auto;}.prose :where(tr):not(:where(.not-prose,.not-prose *)):nth-child(2n){background:var(--un-prose-bg-soft);}.prose :where(td,th):not(:where(.not-prose,.not-prose *)){border:1px solid var(--un-prose-borders);padding:.625em 1em;}.prose :where(abbr):not(:where(.not-prose,.not-prose *)){cursor:help;}.prose :where(kbd):not(:where(.not-prose,.not-prose *)){color:var(--un-prose-code);border:1px solid;padding:.25rem .5rem;font-size:.875em;border-radius:.25rem;}.prose :where(details):not(:where(.not-prose,.not-prose *)){margin:1em 0;padding:1.25rem 1.5rem;background:var(--un-prose-bg-soft);}.prose :where(summary):not(:where(.not-prose,.not-prose *)){cursor:pointer;font-weight:600;}.prose :where(a):not(:where(.not-prose,.not-prose *)):hover{color:var(--c-prose-primary);}.prose :where(pre > code):not(:where(.not-prose,.not-prose *)){background:transparent !important;}
 .prose{color:var(--un-prose-body);max-width:65ch;}
 .prose-dark{--un-prose-body:#1b1b1b;--un-prose-headings:#0f0f0f;--un-prose-links:#0f0f0f;--un-prose-lists:#222222;--un-prose-hr:#323232;--un-prose-captions:#1f1f1f;--un-prose-code:#0f0f0f;--un-prose-borders:#323232;--un-prose-bg-soft:#3c3c3c;--un-prose-invert-body:#323232;--un-prose-invert-headings:#3c3c3c;--un-prose-invert-links:#3c3c3c;--un-prose-invert-lists:#1f1f1f;--un-prose-invert-hr:#1b1b1b;--un-prose-invert-captions:#222222;--un-prose-invert-code:#3c3c3c;--un-prose-invert-borders:#1b1b1b;--un-prose-invert-bg-soft:#181818;--un-prose-font-mono:ui-monospace,SFMono-Regular;}
 @media (prefers-color-scheme: dark){
@@ -13,15 +13,9 @@
 .smallText{font-size:0.875rem;line-height:1.25rem;}
 .xLargeText{font-size:1.25rem;line-height:1.75rem;}
 .xxLargeText{font-size:1.5rem;line-height:2rem;}
-.link,
-[link=""]{--un-text-opacity:1;color:rgba(34,34,34,var(--un-text-opacity));text-decoration:none;}
-@media (prefers-color-scheme: dark){
-.link,
-[link=""]{--un-text-opacity:1;color:rgba(255,255,255,var(--un-text-opacity));}
-}
 /* layer: default */
 .mx-auto{margin-left:auto;margin-right:auto;}
-.my-2{margin-top:0.5rem;margin-bottom:0.5rem;}
+.my-4{margin-top:1rem;margin-bottom:1rem;}
 .my-6{margin-top:1.5rem;margin-bottom:1.5rem;}
 .mt-4{margin-top:1rem;}
 .mt-6{margin-top:1.5rem;}
@@ -59,7 +53,7 @@
   --c-prose-inline-bg-color:#f4f4f5;
   --c-prose-code: #3f3f46;
   --c-prose-pre-border: #e4e4e7;
-  --c-prose-pre-bg: #f4f4f5
+  --c-prose-pre-bg: #f4f4f5;
 }
 
 @media(prefers-color-scheme: dark) {
@@ -74,7 +68,7 @@
     --c-prose-inline-bg-color: #27272A;
     --c-prose-code: #e4e4e7;
     --c-prose-pre-border: #27272A;
-    --c-prose-pre-bg: #18181B
+    --c-prose-pre-bg: #18181B;
 	}
 }
 

Elegant.nnwtheme/template.html

@@ -35,7 +35,7 @@ body: The body of the article.
   
   <article class="prose prose-dark dark:prose-light">
     <h1>[[title]]</h1>
-    <p class="my-2 opacity-50">[[datetime_medium]]</p>
+    <p class="my-4 opacity-50">[[datetime_medium]]</p>
     [[body]]
     <p class="opacity-60 text-sm text-center">- THE END -</p>
   </article>

main.css

@@ -12,7 +12,7 @@
   --c-prose-inline-bg-color:#f4f4f5;
   --c-prose-code: #3f3f46;
   --c-prose-pre-border: #e4e4e7;
-  --c-prose-pre-bg: #f4f4f5
+  --c-prose-pre-bg: #f4f4f5;
 }
 
 @media(prefers-color-scheme: dark) {
@@ -27,7 +27,7 @@
     --c-prose-inline-bg-color: #27272A;
     --c-prose-code: #e4e4e7;
     --c-prose-pre-border: #27272A;
-    --c-prose-pre-bg: #18181B
+    --c-prose-pre-bg: #18181B;
 	}
 }
 

uno.config.ts

@@ -22,9 +22,6 @@ export default defineConfig({
 
   shortcuts: [
     [/^(.*)Text$/, ([,c]) => `text-${ARTICLE_TEXT[c]}`],
-    {
-      link: 'text-dark dark:text-white no-underline border-bottom-',
-    },
   ],
 
   theme: {
@@ -106,6 +103,22 @@ export default defineConfig({
         ':not(pre) > code::before,:not(pre) > code::after': {
           content: '',
         },
+
+        'figcaption': {
+          'color': 'var(--c-blockquote)',
+          'font-size': '.875em',
+          'margin-top': '.8em',
+        },
+
+        'img,video': {
+          'max-width': '100%',
+          'border-radius': '.6rem',
+          'height': 'auto',
+        },
+
+        'figure,picture': {
+          margin: '1em 0',
+        },
       },
     }),
   ],