From 64e6e69579a6bd3bbde2afd3ab5a9bbb2d2de36b Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sat, 7 Jan 2023 17:11:44 +0800
Subject: Fix about page layout.

---
 FrontEnd/src/views/about/index.tsx  | 22 ++++++++++------------
 FrontEnd/src/views/common/index.css |  7 ++++++-
 2 files changed, 16 insertions(+), 13 deletions(-)

(limited to 'FrontEnd/src/views')

diff --git a/FrontEnd/src/views/about/index.tsx b/FrontEnd/src/views/about/index.tsx
index 796d1d23..c7c225b8 100644
--- a/FrontEnd/src/views/about/index.tsx
+++ b/FrontEnd/src/views/about/index.tsx
@@ -65,21 +65,19 @@ const AboutPage: React.FC = () => {
       <Card className="container mt-4 py-3">
         <h4 id="author-info">{t("about.author.title")}</h4>
         <div>
-          <div className="d-flex">
+          <div className="d-block">
             <img
               src={authorAvatarUrl}
-              className="align-self-start cru-avatar large cru-round"
+              className="cru-avatar large cru-round cru-float-left"
             />
-            <div>
-              <p>
-                <small>{t("about.author.name")}</small>
-                <span className="cru-color-primary">crupest</span>
-              </p>
-              <p>
-                <small>{t("about.author.introduction")}</small>
-                {t("about.author.introductionContent")}
-              </p>
-            </div>
+            <p>
+              <small>{t("about.author.name")}</small>
+              <span className="cru-color-primary">crupest</span>
+            </p>
+            <p>
+              <small>{t("about.author.introduction")}</small>
+              {t("about.author.introductionContent")}
+            </p>
           </div>
           <p>
             <small>{t("about.author.links")}</small>
diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
index f6f14d2d..111a3ec0 100644
--- a/FrontEnd/src/views/common/index.css
+++ b/FrontEnd/src/views/common/index.css
@@ -222,6 +222,10 @@
   text-align: end;
 }
 
+.cru-float-left {
+  float: left;
+}
+
 .cru-float-right {
   float: right;
 }
@@ -278,6 +282,7 @@
     right: 0;
   }
 }
+
 @media (max-width: 575.98px) {
   .alert-container {
     bottom: 0;
@@ -285,4 +290,4 @@
     left: 0;
     text-align: center;
   }
-}
+}
\ No newline at end of file
-- 
cgit v1.2.3