fix: footer behavior

turtton · Feb 7, 2023 · 56c36f2 · 56c36f2
1 parent 124e691
commit 56c36f2
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 25 deletions.
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -2,16 +2,17 @@ import React, { CSSProperties } from "react";
 
 const css: CSSProperties = {
   position: "absolute",
+  top: "auto",
   bottom: 0,
-  width: "93%",
+  width: "100%",
+  textAlign: "center",
+  backgroundColor: "rgb(231, 242, 250)",
 };
 
 export default function Footer(): JSX.Element {
   return (
     <footer style={css}>
-      <p>
-        Powered by <a href="https://github.com/turtton/volglass">Volglass</a>, © 2022
-      </p>
+      Powered by <a href="https://github.com/turtton/volglass">Volglass</a>, © 2023
     </footer>
   );
 }
diff --git a/src/components/MDContentData.tsx b/src/components/MDContentData.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 // import Alert from '@mui/material/Alert';
 // import AlertTitle from '@mui/material/AlertTitle';
 import { useRouter } from "next/router";
@@ -39,6 +39,13 @@ export interface MDContentData {
   backLinks: CustomNode[];
 }
 
+const contentCss: CSSProperties = {
+  marginTop: "15px",
+  padding: "0 30px",
+  overflow: "hidden",
+  overflowY: "auto",
+};
+
 function MDContent({ content, backLinks }: MDContentData): JSX.Element {
   // function handleInternalLinkClick() {
   //     //Processing fetching
@@ -51,16 +58,13 @@ function MDContent({ content, backLinks }: MDContentData): JSX.Element {
 
   return (
     <div className="markdown-rendered">
-      {/* <Alert severity="info"> */}
-      {/*    <AlertTitle>Want to know more?</AlertTitle> */}
-      {/*    🌱 <strong>Follow</strong> or <strong>DM</strong> me on Twitter at <span><a */}
-      {/*    href="https://twitter.com/tuancm">@tuancm</a></span> */}
-      {/* </Alert> */}
-      <div dangerouslySetInnerHTML={{ __html: content.join("") }} />
-      {/* <button onClick={handleInternalLinkClick}>Click me</button> */}
-      {/* <hr/> */}
-      <div>
-        <BackLinks linkList={backLinks} />
+      <div style={contentCss}>
+        <div dangerouslySetInnerHTML={{ __html: content.join("") }} />
+        {/* <button onClick={handleInternalLinkClick}>Click me</button> */}
+        {/* <hr/> */}
+        <div style={{ marginBottom: "3em" }}>
+          <BackLinks linkList={backLinks} />
+        </div>
       </div>
       <Footer />
     </div>

diff --git a/src/styles/style.css b/src/styles/style.css
@@ -96,15 +96,16 @@ a:hover {
 
 .markdown-rendered {
     position: relative;
-    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
     font-size: 18px;
     line-height: 1.6em;
     width: 100%;
     height: 100%;
     background-color: var(--background-primary);
     color: var(--text-normal);
     font-family: var(--default-font);
-    padding: 15px 30px;
 }
 
 .markdown-rendered code {
@@ -223,14 +224,6 @@ a:hover {
     padding: 0 3em;
 }
 
-footer {
-    margin-top: 2em;
-    text-align: center;
-    background-color: rgb(231, 242, 250);
-    border-radius: 8px;
-    padding: 4px;
-}
-
 footer ul li {
     margin: auto;
     text-align: center;