fix plog style

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

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>

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

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