mirror of
https://github.com/NohamR/oled-nnw.git
synced 2026-05-24 20:00:38 +00:00
feat: basic setup
This commit is contained in:
changjun
3
.vscode/settings.json
vendored
3
.vscode/settings.json
vendored
@@ -11,6 +11,7 @@
|
||||
}
|
||||
},
|
||||
"cSpell.words": [
|
||||
"antfu"
|
||||
"antfu",
|
||||
"Attributify"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,4 +1,41 @@
|
||||
/* 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(--un-prose-links);text-decoration:underline;font-weight:500;}.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:italic;border-left:.25em solid var(--un-prose-borders);}.prose :where(h1):not(:where(.not-prose,.not-prose *)){margin:1rem 0;font-size:2.25em;}.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(--un-prose-code);font-size:.875em;font-weight:600;font-family:var(--un-prose-font-mono);}.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;}.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:transparent;}.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 0;border:1px solid var(--un-prose-hr);}.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{color:var(--un-prose-body);max-width:65ch;}
|
||||
/* layer: shortcuts */
|
||||
.largeText{font-size:1.125rem;line-height:1.75rem;}
|
||||
.mediumText{font-size:1rem;line-height:1.5rem;}
|
||||
.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;}
|
||||
/* layer: default */
|
||||
.mx-auto{margin-left:auto;margin-right:auto;}
|
||||
.max-w-prose{max-width:80ch;}
|
||||
.flex{display:flex;}
|
||||
.px-8{padding-left:2rem;padding-right:2rem;}
|
||||
.py-16{padding-top:4rem;padding-bottom:4rem;}
|
||||
/* layer: my-style */
|
||||
/* my style */
|
||||
|
||||
/* var */
|
||||
:root {
|
||||
--c-bg-base: #fff;
|
||||
--c-text-base: #000
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--c-bg-base: rgb(17 17 17);
|
||||
--c-text-base: #fff
|
||||
}
|
||||
}
|
||||
|
||||
/* var end */
|
||||
|
||||
html,body{
|
||||
background-color: var(--c-bg-base);
|
||||
color: var(--c-text-base);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -29,3 +29,11 @@ text_size_class: The size class that the user has selected in Preferences for ar
|
||||
body: The body of the article.
|
||||
|
||||
-->
|
||||
|
||||
<header class="flex">
|
||||
header2: [[feed_link_title]] [[byline]] [[text_size_class]]
|
||||
</header>
|
||||
|
||||
<article>
|
||||
<div id="bodyContainer" class="articleBody prose max-w-prose px-8 py-16 mx-auto [[text_size_class]]">[[body]]</div>
|
||||
</article>
|
||||
|
||||
@@ -1 +1,9 @@
|
||||
export const DIRECTORY_NAME = 'Elegant.nnwtheme'
|
||||
|
||||
export const ARTICLE_TEXT = {
|
||||
small: 'sm',
|
||||
medium: 'base',
|
||||
large: 'lg',
|
||||
xLarge: 'xl',
|
||||
xxLarge: '2xl',
|
||||
}
|
||||
|
||||
22
main.css
22
main.css
@@ -1 +1,23 @@
|
||||
/* my style */
|
||||
|
||||
/* var */
|
||||
:root {
|
||||
--c-bg-base: #fff;
|
||||
--c-text-base: #000
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--c-bg-base: rgb(17 17 17);
|
||||
--c-text-base: #fff
|
||||
}
|
||||
}
|
||||
|
||||
/* var end */
|
||||
|
||||
html,body{
|
||||
background-color: var(--c-bg-base);
|
||||
color: var(--c-text-base);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import fs from 'node:fs'
|
||||
import { defineConfig } from 'unocss'
|
||||
import { DIRECTORY_NAME } from './constant'
|
||||
import { defineConfig, presetAttributify, presetIcons, presetTypography, presetUno } from 'unocss'
|
||||
import { ARTICLE_TEXT, DIRECTORY_NAME } from './constant'
|
||||
|
||||
function getMainCss() {
|
||||
const env = process.env.NODE_ENV
|
||||
@@ -20,10 +20,33 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
|
||||
shortcuts: [
|
||||
[/^(.*)Text$/, ([,c]) => `text-${ARTICLE_TEXT[c]}`],
|
||||
],
|
||||
|
||||
theme: {
|
||||
maxWidth: {
|
||||
prose: '80ch',
|
||||
},
|
||||
},
|
||||
|
||||
presets: [
|
||||
presetUno({
|
||||
dark: 'media',
|
||||
}),
|
||||
presetAttributify(),
|
||||
presetIcons({
|
||||
scale: 1.2,
|
||||
}),
|
||||
presetTypography(),
|
||||
],
|
||||
|
||||
preflights: [
|
||||
{
|
||||
layer: 'my-style',
|
||||
getCSS: () => getMainCss(),
|
||||
},
|
||||
],
|
||||
|
||||
safelist: [...Object.keys(ARTICLE_TEXT).map(i => `${i}Text`)],
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user