dialog style update

anig1scur · Jul 4, 2024 · 41715d0 · 41715d0
1 parent 716bf2f
commit 41715d0
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 49 deletions.
diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx
@@ -59,9 +59,9 @@ const Dialog: React.FC<DialogProps> = ({
             : 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
             }` }
         >
-          <div className="bg-white px-2 pt-5 pb-4 sm:p-6 sm:pb-4">
+          <div className="bg-white px-6 pt-2 sm:pt-6 pb-4 sm:pb-4">
             <div className="sm:flex sm:items-start">
-              <div className="mt-3 text-center sm:mt-0 sm:text-left">{
+              <div className="mt-3 sm:mt-0 sm:text-left">{
                 header ? header : <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">{ headerText }</h3>
               }
                 {

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -5,48 +5,53 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
 
 const About = () => {
-  return (
-    <div className='about'>
-      <h3>
-        1. POD ! 是什么？
-      </h3>
-      <p>
-        Pod 是一个用于英语学习的前端应用，包括音频 / 阅读 / 听写 / 词汇模块。
-      </p>
-      <h3>
-        2. POD ! 的数据来源是什么？
-      </h3>
-      <p>
-        现在 Pod 的数据来源于 <a href='https://www.bbc.co.uk/learningenglish/english/features/6-minute-english' target='_blank'>BBC 6 minute English</a> 和 <a href='https://www.scientificamerican.com/podcasts/' target='_blank'>科学美国人</a>
-        的部分播客，后续会看情况增加更多。
-      </p>
-      <h3>
-        2. POD ! 的词汇表有哪些
-      </h3>
-      <p>
-        Pod 的词汇表取自网络，包括
-
-        <a href='https://github.com/anig1scur/CEFR-Vocabulary-List/' target='_blank'>CEFR</a>
-        ,
-        <a href='https://www.eapfoundation.com/vocab/academic/awllists/' target='_blank'>AWL</a>
-        ,
-        <a href='https://www.vocabulary.com/lists/128536' target='_blank'>GRE 5000</a>
-        ,
-        <a href='https://r.piggy.lol/pod/assets/pdf/manhattan_prep_1000_gre_words_.pdf' target='_blank'>GRE Manhattan Prep 1000</a>
-        ,
-        以及
-        <a href='https://quizlet.com/tw/211687200/mason-gre-2000-flash-cards/' target='_blank'>
-          GRE Mason 2000
-        </a>
-      </p>
-      <h3>
-        3. 我发现了错误或者有改进的建议，应该怎么做？
-      </h3>
-      <p>
-        点击右上角的 <a href='https://github.com/anig1scur/pod/' className='github bg-black mx-1'></a> 进入此项目的 GitHub 仓库， 点击 issues Tab 提交你的问题或者建议。
-      </p>
-    </div>
-  )
+  return <ul className='about'>
+      <li>
+        <h3>
+          POD ! 是什么？
+        </h3>
+        <p>
+          Pod 是一个用于英语学习的前端应用，包括音频 / 阅读 / 听写 / 词汇模块。
+        </p>
+      </li>
+      <li>
+        <h3>
+          POD ! 的数据来源是什么？
+        </h3>
+        <p>
+          现在 Pod 的数据来源于 <a href='https://www.bbc.co.uk/learningenglish/english/features/6-minute-english' target='_blank'>BBC 6 minute English</a> 和 <a href='https://www.scientificamerican.com/podcasts/' target='_blank'>科学美国人</a>
+          的部分播客，后续会看情况增加更多。
+        </p>
+      </li>
+      <li>
+        <h3>
+          POD ! 的词汇表有哪些？
+        </h3>
+        <p>
+          Pod 的词汇表取自网络，包括
+          <a href='https://github.com/anig1scur/CEFR-Vocabulary-List/' target='_blank'>CEFR</a>
+          ,
+          <a href='https://www.eapfoundation.com/vocab/academic/awllists/' target='_blank'>AWL</a>
+          ,
+          <a href='https://www.vocabulary.com/lists/128536' target='_blank'>GRE 5000</a>
+          ,
+          <a href='https://r.piggy.lol/pod/assets/pdf/manhattan_prep_1000_gre_words_.pdf' target='_blank'>GRE Manhattan Prep 1000</a>
+          ,
+          以及
+          <a href='https://quizlet.com/tw/211687200/mason-gre-2000-flash-cards/' target='_blank'>
+            GRE Mason 2000
+          </a>
+        </p>
+      </li>
+      <li>
+        <h3>
+          我发现了错误或者有改进建议，应该如何提出？
+        </h3>
+        <p>
+          点击右上角的 <a href='https://github.com/anig1scur/pod/' className='github bg-black mx-1'></a> 进入此项目的 GitHub 仓库， 点击 Issues 提交你的问题或者建议。
+        </p>
+      </li>
+    </ul>
 }
 
 const Header = () => {

diff --git a/src/style.scss b/src/style.scss
@@ -29,12 +29,16 @@
 @layer components {
 
   .about {
-    h3 {
-      @apply text-xl font-bold mb-2;
-    }
+    margin-left: 12px;
+
+    li {
+      @apply text-xl font-bold mb-2 list-decimal;
+
+      >div,
+      >p {
+        @apply text-lg mb-4 font-normal;
+      }
 
-    >div,>p  {
-      @apply text-lg mb-4 ml-5;
     }
 
     a {