footer -> element with inline css

Author: joehand

client/js/components/auth/user-panel.js

@@ -88,7 +88,7 @@ module.exports = function (state, emit) {
           Signed in as <b>${state.township.profile.username}</b>
         </div>
       </div>
-      <ul>
+      <ul class="list">
         <li><a href="/${state.township.username}" data-no-routing>View Profile</a></li>
         <li><a href="/profile/edit" data-no-routing>Edit Profile</a></li>
         <li><a href="http://github.com/datproject/datproject.org/issues" target="_blank" class="color-neutral-50 hover-color-neutral-70">Report Bug</a></li>

client/js/elements/footer/index.js

@@ -1,41 +1,80 @@
-var html = require('choo/html')
+const html = require('choo/html')
+const css = require('sheetify')
+
+module.exports = function () {
+  const rule = css`
+    :host {
+      &:after {
+        content: '';
+        display: block;
+        width: 2rem;
+        height: 4px;
+        background-color: var(--color-neutral-70);
+        margin-top: .75rem;
+        margin-bottom: 1.5rem;
+      }
+    }
+  `
+
+  const datList = css`
+    :host {
+      text-indent: -20px;
+      margin-left: -20px;
+    }
+
+    :host li:before {
+      content: '';
+      display: inline-block;
+      position: relative;
+      top: -0.125rem;
+      width: .5rem;
+      height: .5rem;
+      margin-right: .75rem;
+      background-image: url(/public/img/dat-hexagon.svg);
+      background-size: 100%;
+      background-repeat: no-repeat;
+    }
+  `
 
-module.exports = function (state, emit) {
   return html`
-  <footer class="footer">
-    <div class="container">
-      <div class="row">
-        <div class="col-xs-6 col-sm-4">
-          <h4 class="footer-heading horizontal-rule-footer">Explore</h4>
-          <ul class="footer-nav-list">
-            <li><a href="/explore" data-no-routing>Explore Datasets</a></li>
-            <li><a href="/team">Team</a></li>
-            <li><a href="https://blog.datproject.org">Blog</a></li>
+  <footer class="bg-neutral white">
+    <section class="pa2 ph4-m mw8-ns center-ns">
+      <div class="pt2 cf">
+        <div class="fl w-third">
+          <h4 class="f4 ${rule}">Explore</h4>
+          <ul class="${datList} p0 list lh-copy">
+            ${liLink('/explore', 'Explore Datasets')}
+            ${liLink('https://blog.datproject.org', 'Dat Blog')}
           </ul>
         </div>
-        <div class="col-xs-6 col-sm-4">
-          <h4 class="footer-heading horizontal-rule-footer">Learn</h4>
-          <ul class="footer-nav-list">
-            <li><a href="/about">About</a></li>
-            <li><a href="http://docs.datproject.org">Docs</a></li>
+        <div class="fl w-third">
+          <h4 class="f4 ${rule}">Learn</h4>
+          <ul class="${datList} p0 list lh-copy">
+            ${liLink('/about', 'About Dat')}
+            ${liLink('http://docs.datproject.org', 'Docs')}
           </ul>
         </div>
-        <div class="col-xs-6 col-sm-4">
-          <h4 class="footer-heading horizontal-rule-footer">Connect</h4>
-          <ul class="footer-nav-list">
-            <li><a href="https://twitter.com/dat_project">Twitter</a></li>
-            <li><a href="https://github.com/datproject">GitHub</a></li>
-            <li>
-              <a href="https://tinyletter.com/datdata" target="_blank">Newsletter </a>
-            </li>
-            <li><a href="https://www.stickermule.com/en/marketplace/9709-dat-data-v3">Get Stickers</a></li>
+        <div class="fl w-third">
+          <h4 class="f4 ${rule}">Connect</h4>
+          <ul class="${datList} list p0 lh-copy">
+            ${liLink('https://twitter.com/dat_project', 'Twitter')}
+            ${liLink('https://github.com/datproject', 'Github')}
+            ${liLink('https://www.stickermule.com/en/marketplace/9709-dat-data-v3', 'Get Stickers')}
           </ul>
         </div>
       </div>
-      <p class="footer-credits">
-        <strong>Dat</strong> 2017 • Page source on <a href="https://github.com/datproject/datproject.org">github</a>
+      <p class="bt b--dat-neutral-80 color-neutral-50 tc f7 pv3">
+        <strong>Dat</strong> 2017 • Page source on <a class="color-neutral-50 hover-color-pink" href="https://github.com/datproject/datproject.org">github</a>
       </p>
-    </div>
+    </section>
   </footer>
   `
-}
+
+  function liLink (url, text) {
+    return html`
+      <li>
+        <a class="f5 fw6 link color-neutral-20 hover-color-pink" href="${url}">${text}</a>
+      </li>
+    `
+  }
+}

client/scss/app.scss

@@ -21,7 +21,6 @@
 @import "imports/sections";
 @import "imports/horizontal-rule";
 @import "imports/block-create";
-@import "imports/footer";
 @import "imports/status-bar";
 @import "imports/file-system";
 @import "imports/buttons";
@@ -45,10 +44,11 @@ pre {
   box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
 }
 
-ul {
-  list-style: initial;
-  padding-left: 1rem;
-}
+// Comment out for footer, does it break anything else
+// ul {
+//   list-style: initial;
+//   padding-left: 1rem;
+// }
 
 .content-title {
   font-size: 2rem;

client/scss/imports/_base.scss

@@ -47,10 +47,11 @@ a {
   }
 }
 
-ul,
-li {
-  @include list-plain;
-}
+// Comment out for footer, does it break anything else
+// ul,
+// li {
+//   @include list-plain;
+// }
 
 svg {
   fill: currentColor;