improvement: reading content styles

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",

postcss.config.js

@@ -2,5 +2,6 @@ module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
+    "postcss-nested": {},
   },
 }

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(_) => {}
       }

src/components/ArticleView/Detail.tsx

@@ -108,7 +108,7 @@ export const ArticleDetail = (props: ArticleDetailProps) => {
       return (
         <div
           key={article.uuid}
-          className={clsx("reading-content", "text-detail-paragraph")}
+          className={clsx("reading-content")}
           // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={createMarkup(pageContent)}
         />
@@ -185,11 +185,11 @@ export const ArticleDetail = (props: ArticleDetailProps) => {
             {article.feed_title}
           </span>
           {article.author && (
-            <span className={clsx(styles.author, "text-detail-paragraph")}>
+            <span className={clsx(styles.author)}>
               {article.author}
             </span>
           )}
-          <span className={clsx(styles.time, "text-detail-paragraph")}>
+          <span className={clsx(styles.time)}>
             {Dayjs(new Date(pub_date || new Date())).format("YYYY-MM-DD HH:mm")}
           </span>
         </div>

src/components/Subscribes/ItemView.tsx

@@ -93,7 +93,7 @@ export const ItemView: FC<CardProps> = ({ uuid, text, feed, index, isExpanded, t
           { feed.title }
         </span>
         { unread > 0 && (
-          <span className={ clsx("-mr-1 h-4 min-w-[1rem] text-center text-[10px] leading-4") }>{ unread }</span>
+          <span className={ clsx("-mr-1 h-4 min-w-[1rem] text-center text-sm font-medium leading-4") }>{ unread }</span>
         ) }
       </div>
       { props.children }

src/components/Subscribes/index.tsx

@@ -243,8 +243,7 @@ const ChannelList = (): JSX.Element => {
               {store.collectionMeta.today.unread > 0 && (
                 <span
                   className={classNames(
-                    "-mr-1 h-4 min-w-[1rem] px-1 flex items-center justify-center text-[10px] leading-4 rounded",
-                    "bg-secondary text-secondary-foreground"
+                    "-mr-1 h-4 min-w-[1rem] px-1 flex items-center justify-center text-sm font-medium leading-4 rounded"
                   )}
                 >
                   {store.collectionMeta.today.unread}
@@ -275,8 +274,7 @@ const ChannelList = (): JSX.Element => {
               {store.collectionMeta.total.unread > 0 && (
                 <span
                   className={classNames(
-                    "-mr-1 h-4 min-w-[1rem] px-1 flex items-center justify-center text-[10px] leading-4 rounded",
-                    "bg-secondary text-secondary-foreground"
+                    "-mr-1 h-4 min-w-[1rem] px-1 flex items-center justify-center text-sm font-medium leading-4 rounded"
                   )}
                 >
                   {store.collectionMeta.total.unread}

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;
 // }

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;
   }
 }

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);
   }
 }

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: {