From 7301820f777d1d881cc6b4ecce24b186fcaa07b3 Mon Sep 17 00:00:00 2001 From: zhanglun Date: Fri, 19 Apr 2024 15:20:06 +0800 Subject: [PATCH] improvement: reading content styles --- package.json | 1 + pnpm-lock.yaml | 3 +++ postcss.config.js | 1 + src-tauri/src/main.rs | 2 +- src/components/ArticleView/Detail.tsx | 6 +++--- src/components/Subscribes/ItemView.tsx | 2 +- src/components/Subscribes/index.tsx | 6 ++---- src/layout/Setting/setting.module.scss | 1 - src/styles/custom-components.css | 4 ++-- src/styles/reading-style.css | 10 +++++----- tailwind.config.js | 4 ---- 11 files changed, 19 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index f6887f4c3..89344d1cb 100644 --- a/package.json +++ b/package.json @@ -82,6 +82,7 @@ "@vitejs/plugin-react": "^3.1.0", "autoprefixer": "^10.4.16", "postcss": "^8.4.31", + "postcss-nested": "^6.0.1", "rome": "^11.0.0", "sass": "^1.69.5", "tailwindcss": "^3.1.8", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d0c45f2c9..89c931139 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -217,6 +217,9 @@ devDependencies: postcss: specifier: ^8.4.31 version: 8.4.31 + postcss-nested: + specifier: ^6.0.1 + version: 6.0.1(postcss@8.4.31) rome: specifier: ^11.0.0 version: 11.0.0 diff --git a/postcss.config.js b/postcss.config.js index 33ad091d2..90d36138e 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -2,5 +2,6 @@ module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, + "postcss-nested": {}, }, } diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs index 158a4a20b..73e245dbe 100644 --- a/src-tauri/src/main.rs +++ b/src-tauri/src/main.rs @@ -91,7 +91,7 @@ async fn main() { match env::var("LETTURA_ENV") { Ok(_env) => { - main_window.set_title("Lettura dev").unwrap(); + main_window.set_title("Lettura in developing").unwrap(); } Err(_) => {} } diff --git a/src/components/ArticleView/Detail.tsx b/src/components/ArticleView/Detail.tsx index 5d17f3f88..18ed7290e 100644 --- a/src/components/ArticleView/Detail.tsx +++ b/src/components/ArticleView/Detail.tsx @@ -108,7 +108,7 @@ export const ArticleDetail = (props: ArticleDetailProps) => { return (
@@ -185,11 +185,11 @@ export const ArticleDetail = (props: ArticleDetailProps) => { {article.feed_title} {article.author && ( - + {article.author} )} - + {Dayjs(new Date(pub_date || new Date())).format("YYYY-MM-DD HH:mm")}
diff --git a/src/components/Subscribes/ItemView.tsx b/src/components/Subscribes/ItemView.tsx index 3771ee7e1..4021b826c 100644 --- a/src/components/Subscribes/ItemView.tsx +++ b/src/components/Subscribes/ItemView.tsx @@ -93,7 +93,7 @@ export const ItemView: FC = ({ uuid, text, feed, index, isExpanded, t { feed.title } { unread > 0 && ( - { unread } + { unread } ) } { props.children } diff --git a/src/components/Subscribes/index.tsx b/src/components/Subscribes/index.tsx index d549ba2eb..144d8f39f 100644 --- a/src/components/Subscribes/index.tsx +++ b/src/components/Subscribes/index.tsx @@ -243,8 +243,7 @@ const ChannelList = (): JSX.Element => { {store.collectionMeta.today.unread > 0 && ( {store.collectionMeta.today.unread} @@ -275,8 +274,7 @@ const ChannelList = (): JSX.Element => { {store.collectionMeta.total.unread > 0 && ( {store.collectionMeta.total.unread} diff --git a/src/layout/Setting/setting.module.scss b/src/layout/Setting/setting.module.scss index 8b6e99289..0676b8faf 100644 --- a/src/layout/Setting/setting.module.scss +++ b/src/layout/Setting/setting.module.scss @@ -8,7 +8,6 @@ // .description { // font-size: 13px; -// color: var(--detail-paragraph-color); // font-weight: normal; // margin-left: 14px; // } diff --git a/src/styles/custom-components.css b/src/styles/custom-components.css index 3da7c81de..3560d1751 100644 --- a/src/styles/custom-components.css +++ b/src/styles/custom-components.css @@ -90,12 +90,12 @@ @layer components { .sidebar-item { - @apply relative z-[1] flex items-center gap-2 rounded-md text-sm px-3 h-9 w-full cursor-pointer; + @apply relative z-[1] flex items-center gap-2 rounded-md text-sm px-3 h-9 my-[2px] w-full cursor-pointer; @apply after:block after:content-[''] after:-z-10 after:absolute after:top-[0] after:left-[0] after:w-full after:h-full after:rounded-md after:opacity-0 after:scale-90 after:transition-all after:duration-300 after:ease-in-out; @apply hover:after:opacity-100 hover:after:scale-100 after:bg-sidebar-hover; } .sidebar-item--active { - @apply text-accent-foreground after:opacity-100 after:scale-100 after:bg-sidebar-active after:shadow-[0px_0px_0px_1px_rgba(60,64,67,0.00),0px_1.5px_4px_rgba(60,64,67,0.03),0px_3px_10px_rgba(60,64,67,0.1)]; + @apply text-accent-foreground after:opacity-100 after:scale-100 after:bg-sidebar-active after:shadow-[0px_0px_0px_1px_rgba(60,64,67,0.00),0px_1.5px_4px_rgba(60,64,67,0.03),0px_3px_10px_rgba(60,64,67,0.1)] border; } } diff --git a/src/styles/reading-style.css b/src/styles/reading-style.css index 40bf38c2f..bf8156786 100644 --- a/src/styles/reading-style.css +++ b/src/styles/reading-style.css @@ -18,7 +18,7 @@ --reading-editable-typeface: "Source Serif VF", Georgia, Serif; /* auto generate */ - --reading-scale: 1.2; + --reading-scale: 1.4; --reading-root-size: 16; /* This is to replicate the browser base size for math purposes */ --reading-base-fs: calc( @@ -105,11 +105,11 @@ font-family: var(--reading-font-body); font-size: var(--reading-p-font-size); - & * { + * { max-width: 100%; } - & ::selection { + ::selection { background-color: var(--text-selection-background-color) !important; } @@ -208,7 +208,7 @@ } & img { - margin: 0 auto; - border: 1px solid var(--color-primary); + margin: 40px auto !important; + border: 2px solid var(--color-primary); } } diff --git a/tailwind.config.js b/tailwind.config.js index cb0b76269..7b956c230 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -36,10 +36,6 @@ module.exports = { // "article-active-bg": "hsl(var(--secondary))", // "article-active-headline": "var(--article-active-headline-color)", // "article-active-paragraph": "var(--article-active-paragraph-color)", - - // "detail-bg": "var(--detail-bg-color)", - // "detail-headline": "var(--detail-headline-color)", - // "detail-paragraph": "var(--detail-paragraph-color)", }), extend: { colors: {