fixes loklak#163 - Added footer

Fixes issue loklak#163. The main page now contains a footer.
djmgit · May 30, 2017 · 3671209 · 3671209
1 parent db1281a
commit 3671209
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 0 deletions.
diff --git a/css/dashboard.css b/css/dashboard.css
@@ -231,6 +231,34 @@ border-radius: 0px;
   padding-left: 10px
   width:100%;
 }
+.footer {
+  width: 100%;
+  background: #f2f2f2;
+  padding: 0px 14px;
+  border-top: 1px solid #e4e4e4;
+  display:  flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10vh;
+}
+.footer a {
+  padding: 0px 6px;
+  color: #666;
+  font-size: small;
+  line-height: 40px;
+}
+.left-side {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.right-side {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
 @media (min-width: 768px) {
   .sidebar {
     position: fixed;
@@ -293,6 +321,25 @@ border-radius: 0px;
     padding: 15px;
     border-color: #999;
   }
+  .footer {
+    width: 100%;
+    background: #f2f2f2;
+    padding: 0px 14px;
+    border-top: 1px solid #e4e4e4;
+    display:  flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10vh;
+    position: relative;
+  }
+
+  .footer a {
+    padding: 0px 6px;
+    color: #666;
+    font-size: small;
+    line-height: 40px;
+  }
 }
 .sidebar{
   margin-top: 30px;

diff --git a/index.html b/index.html
@@ -172,6 +172,21 @@ <h1>
             </center>
         </div>
       </div>
+     </div>
+     <div class="footer">
+       <div class="left-side">
+         <a href="http://loklak.net/about">About</a>
+         <a href="http://blog.loklak.net">Blog</a>
+         <a href="http://dev.loklak.org">Developers</a>
+         <a href="http://api.loklak.org">API</a>
+         <a href="http://apps.loklak.org">Apps</a>
+         <a href="https://github.com/fossasia/apps.loklak.org">Code</a>
+       </div>
+       <div class="right-side">
+         <a href="http://loklak.net/terms">Terms</a>
+         <a href="http://loklak.net/contact">Contact</a>
+       </div>
+     </div>
       <script src="/js/bootstrap.min.js" async></script>
       <script src="/js/ie10-viewport-bug-workaround.js" async></script>
       <script src="/js/typeahead.bundle.js" async></script>