mobile css setup

templates/components/details-footer/main.scss

@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
-@import '../_vars.scss';
+@import '../../_vars.scss';
 
 $footer-font-size: 14px;
 

templates/components/details-footer/mobile.scss

@@ -0,0 +1,29 @@
+/*
+ * Copyright (C) 2021  Aravinth Manivannan <realaravinth@batsense.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+@import '../../_vars.scss';
+
+$footer-font-size: 14px;
+
+.details__container {
+  margin-top: 20px;
+  flex-direction: column-reverse;
+}
+
+.details__copyright {
+  flex: 1;
+  margin: auto;
+}

templates/components/footers.html

@@ -1,7 +1,19 @@
 </main>
-<. include!("./details-footers.html"); .>
+<. include!("./details-footer/index.html"); .>
 </div>
-</body>
-<link rel="stylesheet" href="<.= &*crate::CSS .>" type="text/css" media="all">
+  <link
+    rel="stylesheet"
+    media="all"
+    type="text/css"
+    href="<.= &*crate::CSS .>" 
+  />
+
+  <link
+    rel="stylesheet"
+    media="screen and (max-width: 768px)"
+    type="text/css"
+    href="<.= &*crate::MOBILE_CSS .>" 
+  />
 <script src="<.= &*crate::JS .>"></script>
+</body>
 </html>