Update footer layout for mobile

1 files changed, 65 insertions, 0 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index e118162..0bdaa9e 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -615,6 +615,35 @@ body {
     #blogitem .fullscreenImg {
         display: none;
     }
+
+    /* Footer */
+    #footer {
+        width: 100%;
+        padding-top: 50px;
+    }
+    :root {
+        --copied-width: 200px;
+        --copied-height: 50px;
+    }
+    #footer .copied {
+        display: none;
+    }
+
+    #footer .links {
+        max-width: 100%;
+        text-align: center;
+    }
+    #footer .links p {
+        line-break: anywhere;
+    }
+    #footer .links p .footer-links {
+        color: var(--link-color);
+        text-decoration: underline;
+        cursor: pointer;
+    }
+    #footer .links p .footer-links:hover {
+        color: var(--link-highlight-color)
+    }
 }
 
 /* Desktop */
@@ -1106,5 +1135,41 @@ body {
     #blogitem .content .code-toolbar .toolbar .toolbar-item {
         text-align: right;
     }
+
+    /* Footer */
+    #footer {
+        width: 100%;
+        padding-top: 50px;
+    }
+    :root {
+        --copied-width: 200px;
+        --copied-height: 50px;
+    }
+    #footer .copied {
+        display: none;
+        left: calc(50% - (var(--copied-width) / 2));
+        width: var(--copied-width);
+        height: var(--copied-height);
+        position: absolute;
+        background-color: var(--main-color);
+    }
+
+    #footer .links {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+    }
+    #footer .links p {
+        line-break: anywhere;
+    }
+    #footer .links p .footer-links {
+        color: var(--link-color);
+        text-decoration: underline;
+        cursor: pointer;
+    }
+    #footer .links p .footer-links:hover {
+        color: var(--link-highlight-color);
+    }
 }