noham/oled-nnw
1
0
Fork 0
mirror of https://github.com/NohamR/oled-nnw.git synced 2026-05-24 20:00:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: img style

Browse Source
This commit is contained in:
changjun
2023-07-11 10:56:09 +08:00
parent 099026bce6
commit a689b96526
3 changed files with 8 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Elegant.nnwtheme/stylesheet.css
View File

@@ -4,7 +4,7 @@
.i-carbon-link{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' display='inline-block' vertical-align='text-bottom' min-width='1.2em' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M29.25 6.76a6 6 0 0 0-8.5 0l1.42 1.42a4 4 0 1 1 5.67 5.67l-8 8a4 4 0 1 1-5.67-5.66l1.41-1.42l-1.41-1.42l-1.42 1.42a6 6 0 0 0 0 8.5A6 6 0 0 0 17 25a6 6 0 0 0 4.27-1.76l8-8a6 6 0 0 0-.02-8.48Z'/%3E%3Cpath fill='currentColor' d='M4.19 24.82a4 4 0 0 1 0-5.67l8-8a4 4 0 0 1 5.67 0A3.94 3.94 0 0 1 19 14a4 4 0 0 1-1.17 2.85L15.71 19l1.42 1.42l2.12-2.12a6 6 0 0 0-8.51-8.51l-8 8a6 6 0 0 0 0 8.51A6 6 0 0 0 7 28a6.07 6.07 0 0 0 4.28-1.76l-1.42-1.42a4 4 0 0 1-5.67 0Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;vertical-align:text-bottom;min-width:1.2em;width:1.2em;height:1.2em;}
.i-carbon-rss{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 32 32' display='inline-block' vertical-align='text-bottom' min-width='1.2em' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M8 18c-3.3 0-6 2.7-6 6s2.7 6 6 6s6-2.7 6-6s-2.7-6-6-6zm0 10c-2.2 0-4-1.8-4-4s1.8-4 4-4s4 1.8 4 4s-1.8 4-4 4zm22-4h-2C28 13 19 4 8 4V2c12.1 0 22 9.9 22 22z'/%3E%3Cpath fill='currentColor' d='M22 24h-2c0-6.6-5.4-12-12-12v-2c7.7 0 14 6.3 14 14z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;vertical-align:text-bottom;min-width:1.2em;width:1.2em;height:1.2em;}
/* 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%;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 :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;margin:1em 0;}.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);border-bottom:1px solid currentColor;}.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,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}
@media (prefers-color-scheme: dark){
@@ -24,7 +24,6 @@
.mb-4{margin-bottom:1rem;}
.ml-2{margin-left:0.5rem;}
.ml-4{margin-left:1rem;}
.mt-12{margin-top:3rem;}
.mt-2{margin-top:0.5rem;}
.mt-8{margin-top:2rem;}
.box-border{box-sizing:border-box;}
@@ -36,7 +35,6 @@
.flex{display:flex;}
.flex-1{flex:1 1 0%;}
.flex-shrink-0{flex-shrink:0;}
.flex-col{flex-direction:column;}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.animate-fade-in{animation:fade-in 1s linear 1;}
.items-center{align-items:center;}

27
Elegant.nnwtheme/template.html
View File

@@ -32,47 +32,32 @@ body: The body of the article.
<div id="elegantReader" class="animate-fade-in max-w-prose px-2 py-3 mx-auto box-border font-sans [[text_size_class]]">
<div class="w-full h-12 flex items-center space-x-4 my-8">
<div class="flex-shrink-0 ">
<img class="w-12 h-12 overflow-hidden bg-white dark:bg-dark-600 rounded-md ring-1 ring-dark-600/5 shadow-xl" src="[[avatar_src]]" alt="feed img">
<div class="w-full h-12 flex items-center space-x-4 my-8 text-xl font-medium text-gray-900 dark:text-white">
<img class="flex-shrink-0 w-12 h-12 overflow-hidden bg-white dark:bg-dark-600 rounded-md ring-1 ring-dark-600/5 shadow-xl" src="[[avatar_src]]" alt="feed img">
<div class="flex-1 min-w-0 truncate">
[[feed_link_title]]
</div>
<div class="flex-1 min-w-0 flex flex-col">
<div class="text-xl font-medium text-gray-900 truncate dark:text-white">
[[feed_link_title]]
</div>
<div class="text-sm text-secondary truncate">
<span>Posted on [[datetime_long]] </span>
</div>
<div class="text-base text-secondary">
[[date_long]]
</div>
</div>
<article class="prose prose-dark dark:prose-light">
<h1 class="mb-4">[[title]]</h1>
<p class="mt-2 text-secondary">
<span>[[datetime_medium]]</span>
<a href="[[feed_link]]" class="ml-2 text-secondary" alt="feed link" title="feed link">
<span class="i-carbon-rss"></span>
Feed
</a>
<a href="[[preferred_link]]" class="ml-4 text-secondary" alt="originally link" title="originally link">
<span class="i-carbon-link"></span>
Originally
</a>
</p>
<div class="mt-8">
[[body]]
</div>
<p class="text-secondary text-sm text-center my-12">- THE END -</p>
<p class="text-secondary text-base mt-12">This feed was posted on [[datetime_short]]</p>
<p class="text-secondary text-base">Originally published at
<a href="[[feed_link]]" class="ml-4 text-secondary" alt="originally link" title="originally link">
<span class="i-carbon-link"></span>
[[feed_link_title]]
</a>
</p>
</article>

1
uno.config.ts
View File

@@ -120,6 +120,7 @@ export default defineConfig({
'max-width': '100%',
'border-radius': '.6rem',
'height': 'auto',
'margin': '1em 0',
},
'figure,picture': {