From 88c517b13fcbdd9d12630520e4ff3e421f7edaaa Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Tue, 11 Jul 2023 20:38:48 +0800
Subject: [PATCH] fix plog style

---
 package.json                    | 2 +-
 themes/plog/components/Modal.js | 4 ++--
 themes/plog/components/Nav.js   | 6 +++---
 themes/plog/index.js            | 6 +++---
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 4dc4f749..adc8d380 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,7 @@
     "eslint-plugin-react": "^7.23.2",
     "next-sitemap": "^1.6.203",
     "postcss": "^8.4.20",
-    "tailwindcss": "^3.2.4",
+    "tailwindcss": "^3.3.2",
     "webpack-bundle-analyzer": "^4.5.0"
   },
   "resolutions": {
diff --git a/themes/plog/components/Modal.js b/themes/plog/components/Modal.js
index 2401de4a..e500c17a 100644
--- a/themes/plog/components/Modal.js
+++ b/themes/plog/components/Modal.js
@@ -90,11 +90,11 @@ export default function Modal(props) {
                                 {!loading && (<>
                                     <div className='absolute bottom-0 left-0 m-4 z-20'>
                                         <div className='flex'>
-                                            <h2 style={{ textShadow: '0.1em 0.1em 0.2em black' }} className='text-5xl text-white mb-4 px-2 py-1 rounded-lg'>{modalContent?.title}</h2>
+                                            <h2 style={{ textShadow: '0.1em 0.1em 0.2em black' }} className='text-2xl md:text-5xl text-white mb-4 px-2 py-1 rounded-lg'>{modalContent?.title}</h2>
                                         </div>
 
                                         <Link href={`${BLOG.SUB_PATH}/${modalContent.slug}`}>
-                                            <div style={{ textShadow: '0.1em 0.1em 0.2em black' }} className={'cursor-pointer text-gray-50 rounded-lg p-2'}>
+                                            <div style={{ textShadow: '0.1em 0.1em 0.2em black' }} className={'line-clamp-3 md:line-clamp-none overflow-hidden cursor-pointer text-gray-50 rounded-lg m-2'}>
                                                 {modalContent?.summary}
                                             </div>
                                         </Link>
diff --git a/themes/plog/components/Nav.js b/themes/plog/components/Nav.js
index 52d2a09e..6fdd2709 100644
--- a/themes/plog/components/Nav.js
+++ b/themes/plog/components/Nav.js
@@ -8,9 +8,9 @@ import { MenuItemDrop } from './MenuItemDrop'
 import Collapse from '@/components/Collapse'
 import { MenuItemCollapse } from './MenuItemCollapse'
 
-const Nav = props => {
+const Header = props => {
   const { navBarTitle, fullWidth, siteInfo } = props
-  return <div className='md:hidden fixed top-0 w-full'>
+  return <div className='md:hidden fixed top-0 w-full z-20'>
         <div id="sticky-nav"
             className={`sticky-nav m-auto w-full h-6 flex flex-row justify-between items-center mb-2 md:mb-12 py-8  glassmorphism ${!fullWidth ? 'max-w-3xl px-4' : 'px-4 md:px-24'
                 }`} >
@@ -90,4 +90,4 @@ const NavBar = props => {
   )
 }
 
-export default Nav
+export default Header
diff --git a/themes/plog/index.js b/themes/plog/index.js
index bf6570cc..007004a9 100644
--- a/themes/plog/index.js
+++ b/themes/plog/index.js
@@ -1,7 +1,7 @@
 import CONFIG from './config'
 import CommonHead from '@/components/CommonHead'
 import React, { createContext, useContext, useEffect, useState } from 'react'
-import Nav from './components/Nav'
+import Header from './components/Nav'
 import { useGlobal } from '@/lib/global'
 
 import BLOG from '@/blog.config'
@@ -65,7 +65,7 @@ const LayoutBase = props => {
             <CommonHead meta={meta} />
 
             {/* 移动端顶部导航栏 */}
-            <Nav {...props} />
+            <Header {...props} />
 
             {/* 主区 */}
             <main id='out-wrapper' className={'relative m-auto flex-grow w-full transition-all pb-16'}>
@@ -179,7 +179,7 @@ const LayoutSlug = props => {
 
             {lock && <ArticleLock validPassword={validPassword} />}
 
-            {!lock && <div id="article-wrapper" className="px-2 max-w-6xl mx-auto">
+            {!lock && <div id="article-wrapper" className="px-2 my-16 max-w-6xl mx-auto">
                 <>
                     <ArticleInfo post={post} />
                     <NotionPage post={post} />