feat: footer mobile responsive

AElfProject · Jun 19, 2024 · a01e7e4 · a01e7e4
1 parent e6beb98
commit a01e7e4
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 2 deletions.
diff --git a/src/theme/Footer/Copyright/index.module.css b/src/theme/Footer/Copyright/index.module.css
@@ -12,4 +12,34 @@ span.icon {
 
 .img {
   margin: 0 0 0 10px;
+}
+
+.logo {
+  display: none;
+}
+
+@media screen and (max-width: 996px) {
+  .wrap {
+    flex-direction: column;
+    text-align: left;
+  }
+
+  .social {
+    order: -1;
+    padding-bottom: 0.5rem;
+    margin-bottom: 1rem;
+    border-bottom: 1px solid #ccc;
+  }
+
+  .logo {
+    display: block;
+    width: 4rem;
+    margin-right: auto;
+  }
+
+  .copyright {
+    display: flex;
+    gap: 10px;
+    text-align: right;
+  }
 }
diff --git a/src/theme/Footer/Copyright/index.tsx b/src/theme/Footer/Copyright/index.tsx
@@ -11,8 +11,11 @@ export default function CopyrightWrapper(props: Props): JSX.Element {
   return (
     <>
       <div className={styles.wrap}>
-        <Copyright {...props} />
-        <div>
+        <div className={styles.copyright}>
+          <img className={styles.logo} src="/img/Logo.aelf.svg" />
+          <Copyright {...props} />
+        </div>
+        <div className={styles.social}>
           {socialLinks.links.map((i, key) => (
             <a
               key={key}