Merge pull request #26 from cmu-delphi/header

kateharwood · web-flow · commit a734a2731640 · 2020-11-17T16:53:46.000-05:00
Header / Footer
diff --git a/config.toml b/config.toml
@@ -9,27 +9,37 @@ relativeURLs = false
 
 [permalinks]
     post = "/:year/:month/:day/:slug/"
-
 [[menu.main]]
-    identifier = "main"
-    name = "Delphi"
-    url = "/"
+    identifier = "about"
+    name = "About"
+    url = "/about"
+    post = "angle-down"
+    weight = 1
+[[menu.main]]
+    identifier = "team"
+    parent = "about"
+    name = "Team"
+    url = "/about/team"
     weight = 1
 [[menu.main]]
     name = "COVIDcast"
-    url = "https://covidcast.cmu.edu"
+    pre = "map"
+    url = "/covidcast"
     weight = 2
-[[menu.main]]
-    name = "Data"
-    url = "https://cmu-delphi.github.io/delphi-epidata/"
-    weight = 3
 [[menu.main]]
     name = "Blog"
+    pre = "blog"
     url = "/blog"
-    weight = 4
+    weight = 3
 [[menu.main]]
     name = "GitHub"
+    pre = "github"
     url = "https://github.com/cmu-delphi/"
+    weight = 4
+[[menu.main]]
+    name = "API"
+    pre = "api"
+    url = "https://cmu-delphi.github.io/delphi-epidata/"
     weight = 5
 
 [params]
diff --git a/static/font-awesome/angle-down.svg b/static/font-awesome/angle-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!-- Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"/></svg>
diff --git a/static/font-awesome/api.svg b/static/font-awesome/api.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!-- Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M384 144c0-44.2-35.8-80-80-80s-80 35.8-80 80c0 36.4 24.3 67.1 57.5 76.8-.6 16.1-4.2 28.5-11 36.9-15.4 19.2-49.3 22.4-85.2 25.7-28.2 2.6-57.4 5.4-81.3 16.9v-144c32.5-10.2 56-40.5 56-76.3 0-44.2-35.8-80-80-80S0 35.8 0 80c0 35.8 23.5 66.1 56 76.3v199.3C23.5 365.9 0 396.2 0 432c0 44.2 35.8 80 80 80s80-35.8 80-80c0-34-21.2-63.1-51.2-74.6 3.1-5.2 7.8-9.8 14.9-13.4 16.2-8.2 40.4-10.4 66.1-12.8 42.2-3.9 90-8.4 118.2-43.4 14-17.4 21.1-39.8 21.6-67.9 31.6-10.8 54.4-40.7 54.4-75.9zM80 64c8.8 0 16 7.2 16 16s-7.2 16-16 16-16-7.2-16-16 7.2-16 16-16zm0 384c-8.8 0-16-7.2-16-16s7.2-16 16-16 16 7.2 16 16-7.2 16-16 16zm224-320c8.8 0 16 7.2 16 16s-7.2 16-16 16-16-7.2-16-16 7.2-16 16-16z"/></svg>
diff --git a/static/font-awesome/blog.svg b/static/font-awesome/blog.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z"/></svg>
diff --git a/static/font-awesome/bookmark.svg b/static/font-awesome/bookmark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!-- Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M0 512V48C0 21.49 21.49 0 48 0h288c26.51 0 48 21.49 48 48v464L192 400 0 512z"/></svg>
diff --git a/static/font-awesome/github.svg b/static/font-awesome/github.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>
diff --git a/static/font-awesome/map.svg b/static/font-awesome/map.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!-- Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M0 117.66v346.32c0 11.32 11.43 19.06 21.94 14.86L160 416V32L20.12 87.95A32.006 32.006 0 0 0 0 117.66zM192 416l192 64V96L192 32v384zM554.06 33.16L416 96v384l139.88-55.95A31.996 31.996 0 0 0 576 394.34V48.02c0-11.32-11.43-19.06-21.94-14.86z"/></svg>
diff --git a/themes/delphi/assets/css/main.scss b/themes/delphi/assets/css/main.scss
@@ -1,6 +1,29 @@
 // 1. Your custom variables and variable overwrites.
 // $global-link-color: #DA7D02;
 
+// Font
+$global-font-family: "Open Sans", Roboto, Arial, sans-serif;
+
+// Breakpoints:
+$breakpoint-small: 715px;
+
+// Navbar
+$navbar-nav-item-padding-horizontal: 0px;
+$navbar-nav-item-height: 35px;
+$navbar-nav-item-color: #505565;
+$navbar-background: none;
+$navbar-dropdown-padding: 10px;
+$navbar-dropdown-nav-item-color: #232735;
+$nav-default-item-active-color: red;
+
+$button-padding-horizontal: 0px;
+$button-line-height: 0px;
+
+
+// Table (footer)
+$table-cell-padding-vertical: 4px;
+$table-header-cell-color: white;
+
 // 2. Import default variables and available mixins.
 @import './node_modules/uikit/src/scss/variables-theme.scss';
 @import './node_modules/uikit/src/scss/mixins-theme.scss';
@@ -11,4 +34,102 @@
 // 4. Import UIkit.
 @import './node_modules/uikit/src/scss/uikit-theme.scss';
 
+
 @import 'custom';
+
+// Site-wide
+.content {
+    margin: 20px 10%;
+    max-width: 1200px;
+}
+
+.delphi-text-logo {
+    background-color: white;
+    color: #F03F3F !important;
+    font-size: 16px !important;
+    font-weight: 700;
+    line-height: 18px;
+    padding: 5px 10px;
+}
+
+svg {
+    max-height: 18px;
+}
+
+.inline-svg {
+    display: inline-block;
+    fill: #505565;
+    width: 18px;
+    padding: 0 9px 0 5px;
+}
+
+// Navbar
+.nav-active {
+    border-bottom: 2px solid #F03F3F !important;
+}
+.uk-navbar-container {
+    box-shadow: 0 3px 5px -1px rgba(0,0,0,.15);
+}
+.uk-navbar-left {
+    margin: 40px 10% 0 10%;
+}
+.uk-navbar-nav>li {
+    padding-left: 10px;
+    padding-right: 20px;
+}
+.uk-navbar-dropdown-bottom-left {
+    margin-left: -20px;
+    margin-top: 3px;
+}
+
+.mobile-nav {
+    height: 20px;
+    padding: 23px;
+    border-bottom: 1px solid #d2d2d2;
+}
+.uk-navbar-toggle {
+    float:right;
+    margin-top: -10px;
+}
+.dropdown-mobile {
+    left: 0 !important;
+    padding: 0;
+    width: 100%;
+}
+.menu-element {
+    border-top: 1px solid #d2d2d2;
+    font-weight: 400;
+    padding: 20px 0 20px 40px;
+}
+.menu-element.menu-parent {
+    font-weight: 600;
+}
+.menu-element.menu-child {
+    padding-left: 64px;
+}
+
+// Footer
+.footer {
+    background-color: #232735;
+    color: white;
+    font-size: 12px;
+    padding: 50px 20% 20px 20%;
+}
+.footer .footer-header {
+    font-weight: 700;
+    text-transform: uppercase;
+}
+.footer a {
+    color: white;
+    text-decoration: none;
+}
+.footer-small {
+    text-align: center;
+    font-size: 14px;
+}
+.footer-small .footer-header {
+    padding-top: 30px;
+}
+.footer-small div {
+    padding-top: 10px;
+}
diff --git a/themes/delphi/layouts/_default/baseof.html b/themes/delphi/layouts/_default/baseof.html
@@ -4,10 +4,12 @@
     {{ partial "head.html" . }}
     <body>
         {{ partial "nav.html" . }}
-        {{ partial "header.html" . }}
-        <div>
-            {{ block "main" . }}
-            {{ end }}
+        <div class="content">
+            {{ partial "header.html" . }}
+            <div>
+                {{ block "main" . }}
+                {{ end }}
+            </div>
         </div>
         {{ partial "footer.html" . }}
     </body>
diff --git a/themes/delphi/layouts/partials/delphi-text-logo.html b/themes/delphi/layouts/partials/delphi-text-logo.html
@@ -0,0 +1 @@
+<a class="delphi-text-logo" href="https://delphi.cmu.edu/">DELPHI</a>
diff --git a/themes/delphi/layouts/partials/font-awesome.html b/themes/delphi/layouts/partials/font-awesome.html
@@ -0,0 +1,3 @@
+<span class="inline-svg" >
+    {{ readFile ( print "static/font-awesome/" . ".svg" ) | safeHTML  }}
+</span>
diff --git a/themes/delphi/layouts/partials/footer.html b/themes/delphi/layouts/partials/footer.html
@@ -1,7 +1,8 @@
 <footer>
-	{{ partial "legal.html" . }}
-	{{ partial "social.html" . }}
-
+	<!-- {{ partial "footer/legal.html" . }} -->
+	{{ partial "footer/desktop.html" }}
+	{{ partial "footer/mobile.html" }}
+	
 	{{ $script := resources.Get "js/main.js" | js.Build | minify | fingerprint -}}
 	<script src="{{ $script.Permalink }}" {{ printf "integrity=%q" $script.Data.Integrity | safeHTMLAttr }}></script>
 	
diff --git a/themes/delphi/layouts/partials/footer/api.html b/themes/delphi/layouts/partials/footer/api.html
@@ -0,0 +1 @@
+<a href="https://cmu-delphi.github.io/delphi-epidata/">API</a>
diff --git a/themes/delphi/layouts/partials/footer/blog.html b/themes/delphi/layouts/partials/footer/blog.html
@@ -0,0 +1 @@
+<a href="https://delphi.cmu.edu/blog/">Blog</a>
diff --git a/themes/delphi/layouts/partials/footer/cmu.html b/themes/delphi/layouts/partials/footer/cmu.html
@@ -0,0 +1 @@
+<a href="https://www.cmu.edu/">CMU</a>
diff --git a/themes/delphi/layouts/partials/footer/desktop.html b/themes/delphi/layouts/partials/footer/desktop.html
@@ -0,0 +1,39 @@
+<div class="uk-visible@s footer">
+    <table class="uk-table footer-table">
+        <thead>
+            <tr>
+                <th class="header">
+                    {{partial "delphi-text-logo.html"}}
+                </th>
+                <th class="footer-header">COVIDcast</th>
+                <th class="footer-header">Resources</th>
+                <th class="footer-header">About</th>
+                <th class="footer-header">Contact</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td></td>
+                <td>{{partial "footer/methods.html"}}</td>
+                <td>{{partial "footer/cmu.html"}}</td>
+                <td>{{partial "footer/twitter.html"}}</td>
+            </tr>
+            <tr>
+                <td></td>
+                <td>{{partial "footer/surveys.html"}}</td>
+                <td>{{partial "footer/api.html"}}</td>
+                <td>{{partial "footer/terms.html"}}</td>
+            </tr>
+            <tr>
+                <td></td>
+                <td></td>
+                <td>{{partial "footer/github.html"}}</td>
+            </tr>
+            <tr>
+                <td></td>
+                <td></td>
+                <td>{{partial "footer/blog.html"}}</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
diff --git a/themes/delphi/layouts/partials/footer/github.html b/themes/delphi/layouts/partials/footer/github.html
@@ -0,0 +1 @@
+<a href="https://github.com/cmu-delphi/">GitHub</a>
diff --git a/themes/delphi/layouts/partials/footer/legal.html b/themes/delphi/layouts/partials/footer/legal.html
diff --git a/themes/delphi/layouts/partials/footer/methods.html b/themes/delphi/layouts/partials/footer/methods.html
@@ -0,0 +1 @@
+<a href="https://delphi.cmu.edu/methodology/">Methods</a>
diff --git a/themes/delphi/layouts/partials/footer/mobile.html b/themes/delphi/layouts/partials/footer/mobile.html
@@ -0,0 +1,19 @@
+<div class="uk-hidden@s footer footer-small">
+    {{partial "delphi-text-logo.html"}}
+    
+    <div class="footer-header">COVIDcast</div>
+    <div>{{partial "footer/methods.html"}}</div>
+    <div>{{partial "footer/surveys.html"}}</div>
+
+    <div class="footer-header">Resources</div>
+    <div>{{partial "footer/api.html"}}</div>
+    <div>{{partial "footer/github.html"}}</div>
+    <div>{{partial "footer/blog.html"}}</div>
+
+    <div class="footer-header">About</div>
+    <div>{{partial "footer/cmu.html"}}</div>
+    <div>{{partial "footer/terms.html"}}</div>
+
+    <div class="footer-header">Contact</div>
+    <div>{{partial "footer/twitter.html"}}</div>
+</div>
diff --git a/themes/delphi/layouts/partials/footer/research-pub.html b/themes/delphi/layouts/partials/footer/research-pub.html
@@ -0,0 +1 @@
+<a href="">Research & Publications</a>
diff --git a/themes/delphi/layouts/partials/footer/surveys.html b/themes/delphi/layouts/partials/footer/surveys.html
@@ -0,0 +1 @@
+<a href="https://delphi.cmu.edu/surveys/">Surveys</a>
diff --git a/themes/delphi/layouts/partials/footer/terms.html b/themes/delphi/layouts/partials/footer/terms.html
@@ -0,0 +1 @@
+<a href="https://delphi.cmu.edu/terms-of-use/">Terms</a>
diff --git a/themes/delphi/layouts/partials/footer/twitter.html b/themes/delphi/layouts/partials/footer/twitter.html
@@ -0,0 +1 @@
+<a href="https://twitter.com/CmuDelphi/">Twitter</a>
diff --git a/themes/delphi/layouts/partials/head.html b/themes/delphi/layouts/partials/head.html
@@ -13,6 +13,10 @@
     <!-- <link rel="mask-icon" href="{{ "safari-pinned-tab.svg" | relURL }}" color="#FF3DB4"> -->
     <meta name="theme-color" content="#ffffff">
 
+    <!-- Open Sans Font -->
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
+
     <!-- Use Hugo Pipes to process the Sass file (convert to CSS, minify, and add a hash) -->
     {{ $main_style := resources.Get "css/main.scss" | toCSS | minify | fingerprint }}
     <link rel="stylesheet" href="{{ $main_style.Permalink }}"/>
diff --git a/themes/delphi/layouts/partials/nav.html b/themes/delphi/layouts/partials/nav.html
@@ -1,9 +1,58 @@
-<nav class="uk-navbar-container" data-uk-navbar>
+<nav class="uk-visible@s uk-navbar-container" data-uk-navbar>
   <div class="uk-navbar-left">
       <ul class="uk-navbar-nav">
-          {{ range .Site.Menus.main.ByWeight }}
-          <li class="{{ if eq .Identifier "main" }}uk-active{{ end }}"><a href="{{ .URL | relLangURL }}">{{ .Name }}</a></li>
-          {{ end }}
+        <li>
+          {{partial "delphi-text-logo.html"}}
+        </li>
+        {{ $currentPage := . }}
+        {{ range .Site.Menus.main.ByWeight }}
+        <li class="{{ if (eq $currentPage.URL .URL) }}nav-active{{ end }}">
+          <a href="{{ .URL | relLangURL }}">
+            {{ if .Pre }}
+              {{ partial "font-awesome.html" .Pre }}
+            {{end}}
+            {{ .Name }}
+            {{ if .Post }}
+              {{ partial "font-awesome.html" .Post }}
+            {{end}}
+          </a>
+          {{if .HasChildren}}
+            <div class="uk-navbar-dropdown">
+              <ul class="uk-nav uk-navbar-dropdown-nav">
+                {{ range .Children }}
+                  <li><a href={{ .URL | relLangURL }}>{{ .Name }}</a></li>
+                {{ end }}
+              </ul>
+            </div>
+          {{end}}
+        </li>
+        {{ end }}
       </ul>
   </div>
+</nav>
+
+
+<!-- Mobile nav -->
+<nav class="uk-hidden@s mobile-nav">
+  {{partial "delphi-text-logo.html"}}
+  <a class="uk-navbar-toggle" uk-navbar-toggle-icon href=""></a>
+    <div uk-dropdown="mode: click" class="dropdown-mobile">
+      <ul class="uk-nav uk-navbar-dropdown-nav">
+        {{ range .Site.Menus.main.ByWeight }}
+        <li class="{{if .HasChildren }}menu-parent{{end}} menu-element">
+          <a href="{{ .URL | relLangURL }}">
+            {{ if .Pre }}
+              {{ partial "font-awesome.html" .Pre }}
+            {{end}}
+            {{ .Name }}
+          </a>
+          {{if .HasChildren}}
+            {{ range .Children }}
+              <li class="menu-element menu-child"><a href={{ .URL | relLangURL }}>{{ .Name }}</a></li>
+            {{ end }}
+          {{end}}
+        </li>
+        {{ end }}
+      </ul>
+    </div>
 </nav>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+<a class="delphi-text-logo" href="https://delphi.cmu.edu/">DELPHI</a>`