add footer

filed/static/paint.css

@@ -33,6 +33,8 @@ html, body {
     --margin: 12px 24px;
     --margin-y: 12px;
     --margin-x: 24px;
+
+    --footer-height: 60px;
 }
 
 .header {
@@ -54,9 +56,11 @@ html, body {
 .content {
     background: var(--view-color);
     border-top: 1px solid var(--header-sec-color);
-    height: 100vh;
+    border-bottom: 1px solid var(--header-sec-color);
-    border-radius: 12px 12px 0 0;
+    min-height: calc(100vh - (var(--header-font-size) + (var(--header-padding-y) * 2)) - var(--footer-height) - 30px);
+    border-radius: 12px;
     padding: var(--margin-y) 0;
+    box-shadow: 0 2px 1px #00000010;
 }
 .content h1,
 .content h2,
@@ -119,6 +123,7 @@ p {
     padding: var(--header-padding-y);
     border: 0px solid transparent;
     color: var(--accent-fg-color);
+    text-decoration: none;
     transition: 250ms ease;
 }
 .btn:hover {
@@ -187,3 +192,22 @@ p {
         margin-bottom: 28px;
     }
 }
+
+.footer {
+    width: 100%;
+    height: var(--footer-height);
+}
+.footer table {
+    height: 100%;
+}
+.footer td {
+    padding: var(--header-padding-y);
+    border-right: 1px solid var(--header-sec-color);
+    text-align: center;
+}
+.footer td .btn {
+    display: block;
+    padding: 8px;
+    /* width: 100%; */
+    /* height: 100%; */
+}

filed/templates/base.html

@@ -20,5 +20,24 @@
         <div class="content">
             {% block body %}{% endblock %}
         </div>
+        <div class="footer">
+            <table width='100%'>
+                <tbody>
+                    <tr>
+                        <td>
+                            Made with Rust
+                        </td>
+                        <td>
+                            Released under GPLv3
+                        </td>
+                        <td>
+                            <a href='https://git.blek.codes/blek/bfile' class='btn'>
+                                Source code
+                            </a>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
     </body>
 </html>