Merge branch 'develop' into 'master'

Fixing responsive design for site See merge request warricksothr/sothr-dot-com!6
6 years ago · 7c0ddbc4c2
4 changed files with 242 additions and 59 deletions
--- a/run_hugo_server.sh
+++ b/run_hugo_server.sh
@ -1,10 +1,12 @@
 #! /usr/bin/sh

+HUGO_VERSION=${HUGO_VERSION:=0.54.0}
+
 docker run -it \
 	-e HUGO_WATCH=true \
 	-e HUGO_THEME=pure \
 	-e HUGO_BASEURL=http://localhost:1313/ \
 	-e HUGO_DESTINATION=/src/public \
-	-v ${PWD}:/src \
+	-v ${PWD}:/src:Z \
 	-p 1313:1313 \
-	sothr.com/hugo:0.54.0 $@
+	sothr.com/hugo:$HUGO_VERSION $@
--- a/themes/pure/layouts/_default/baseof.html
+++ b/themes/pure/layouts/_default/baseof.html
@ -2,18 +2,20 @@
 <html lang="en">
    {{- partial "head.html" . -}}
    <body>
-    	<div id="header">
-        	{{- partial "header.html" . -}}
-    	</div>
-        <div id="content" class="pure-g">
-        	<div class="pure-u-1-5"></div>
-        	<div class="pure-u-3-5">
-        	{{- block "main" . }}{{- end }}
-        	</div>
-        	<div class="pure-u-1-5"></div>
+        <div id="wrapper">
+            <div id="header">
+                {{- partial "header.html" . -}}
+            </div>
+            <div id="content" class="pure-g">
+                <div class="pure-u-1-5"></div>
+                <div class="pure-u-3-5">
+                {{- block "main" . }}{{- end }}
+                </div>
+                <div class="pure-u-1-5"></div>
+            </div>
        </div>
        <div id="footer">
-        	{{- partial "footer.html" . -}}
-    	</div>
+            {{- partial "footer.html" . -}}
+        </div>
    </body>
 </html>
--- a/themes/pure/layouts/partials/header.html
+++ b/themes/pure/layouts/partials/header.html
@ -1,28 +1,38 @@

-<nav>
-    <div class="pure-menu pure-menu-horizontal">
-        <ul class="pure-menu-list float-left">
-        	<li class="pure-menu-list">
-        		<a href="{{ .Site.BaseURL }}" class="pure-menu-heading pure-menu-link" title="Home">{{ .Site.Title }}</a>
-        	</li>
-    		{{ range where (sort .Site.Pages "Weight" "desc") "Type" "navLink"}}
-				<li class="pure-menu-list"><a href="{{ .URL }}" class="pure-menu-link" title="{{ .Title }}">{{ .Title }}</a></li>
-			{{ end }}
-		</ul>
-		<ul class="pure-menu-list float-right">
-		{{ range sort .Site.Params.links "weight" "desc" }}
-			<li class="pure-menu-list">
-			{{ if .image }}
-				<a href="{{ .url }}" target="_blank" title="{{ .title }}">
-					<img src="{{ .image | absURL }}" />
-				</a>
-			{{ else }}
-				<a href="{{ .url }}" target="_blank" class="pure-menu-link" title="{{ .title }}">
-				{{ .title }}
-				</a>
-			{{ end }}
-			</li>
-		{{ end }}
-        </ul>
-    </div>
-</nav>
+<div class="menu-wrapper">
+	<div class="pure-menu menu menu-top">
+		<a href="{{ .Site.BaseURL }}" class="pure-menu-heading menu-brand" title="Home">{{ .Site.Title }}</a>
+		<a href="#" class="menu-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
+	</div>
+	<div class="pure-menu pure-menu-horizontal pure-menu-scrollable menu menu-bottom menu-tucked" id="tuckedMenu">
+		<div class="menu-screen">
+			<ul class="pure-menu-list">
+				{{ range where (sort .Site.Pages "Weight" "desc") "Type" "navLink"}}
+				<li class="pure-menu-item"><a href="{{ .URL }}" class="pure-menu-link" title="{{ .Title }}">{{ .Title }}</a></li>
+				{{ end }}
+				{{ range sort .Site.Params.links "weight" "desc" }}
+				<li class="pure-menu-item">
+				{{ if .image }}
+					<a href="{{ .url }}" target="_blank" title="{{ .title }}">
+						<img src="{{ .image | absURL }}" />
+					</a>
+				{{ else }}
+					<a href="{{ .url }}" target="_blank" class="pure-menu-link" title="{{ .title }}">
+					{{ .title }}
+					</a>
+				{{ end }}
+				</li>
+				{{ end }}
+			</ul>
+		</div>
+	</div>
+</div>
+<script>
+(function (window, document) {
+	document.getElementById('toggle').addEventListener('click', function (e) {
+		document.getElementById('tuckedMenu').classList.toggle('menu-tucked');
+		document.getElementById('tuckedMenu').classList.toggle('menu-untucked');
+		document.getElementById('toggle').classList.toggle('x');
+	});
+})(this, this.document);
+</script>
--- a/themes/pure/static/assets/css/style.css
+++ b/themes/pure/static/assets/css/style.css
@ -1,4 +1,4 @@
-nav {
+/*nav {
    overflow: hidden;
    padding: 0px 0px;
    background: #E7732F;
@ -23,37 +23,41 @@ nav ul li a img {
 nav ul li a img:hover {
    background: #ffffff;
 }
+*/

-#container {
-   min-height: 100%;
-   position: relative;
+html, body {
+  height: 100%;
 }

-#body {
-   padding: 10px;
-   padding-bottom: 2em;   /* Height of the footer */
+body {
+  display: flex;
+  flex-direction: column;
 }

-#footer {
-   position: absolute;
-   bottom: 0;
-   width: 100%;
-   height: 2em;   /* Height of the footer */
-}
-
-.float-left {
-    float: left;
+#wrapper {
+  flex: 1 0 auto;
 }

-.float-right {
-    float: right;
+#footer {
+  flex-shrink: 0;
+  padding: 0.5em;
 }

 .text-align-right {
    text-align: right;
 }

-.pure-menu-link {
+.pure-menu-item a img {
+  padding: .1em .2em;
+  max-height:    2.4em;
+  min-width: 2.4em;
+}
+
+/*body {
+  padding: 0em;
+}*/
+
+/*.pure-menu-link {
    color: #000000;
 }

@ -61,4 +65,169 @@ nav ul li a img:hover {
 .pure-menu-link:focus,
 .pure-menu-link:hover {
    background-color:#ffffff
+}*/
+
+.menu-wrapper {
+    background-color: #E7732F;
+    margin-bottom: 2.5em;
+    white-space: nowrap;
+    position: relative;
+}
+
+.menu {
+    display: inline-block;
+    width: auto;
+    vertical-align: middle;
+    -webkit-font-smoothing: antialiased;
+}
+
+.menu .pure-menu-link,
+.menu .pure-menu-heading {
+    color: black;
+}
+
+.menu .pure-menu-link:hover,
+.menu .pure-menu-heading:hover {
+    background-color: transparent;
+}
+
+.menu-top {
+    position: relative;
+    padding-top: .5em;
+    padding-bottom: .5em;
+}
+
+.menu-brand {
+    display: block;
+    text-align: center;
+    position: relative;
+    color: black;
+}
+
+.menu-toggle {
+    width: 44px;
+    height: 44px;
+    display: block;
+    position: absolute;
+    top: 3px;
+    right: 0;
+    display: none;
+}
+
+.menu-toggle .bar {
+    background-color: white;
+    display: block;
+    width: 20px;
+    height: 2px;
+    border-radius: 100px;
+    position: absolute;
+    top: 22px;
+    right: 12px;
+    -webkit-transition: all 0.5s;
+    -moz-transition: all 0.5s;
+    -ms-transition: all 0.5s;
+    transition: all 0.5s;
+}
+
+.menu-toggle .bar:first-child {
+    -webkit-transform: translateY(-6px);
+    -moz-transform: translateY(-6px);
+    -ms-transform: translateY(-6px);
+    transform: translateY(-6px);
+}
+
+.menu-toggle.x .bar {
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+
+.menu-toggle.x .bar:first-child {
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -ms-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+}
+
+.menu-screen {
+    background-color: #E7732F;
+    -webkit-transition: all 0.5s;
+    -moz-transition: all 0.5s;
+    -ms-transition: all 0.5s;
+    transition: all 0.5s;
+    height: 3em;
+    width: 70em;
+    position: absolute;
+    top: 0;
+    z-index: -1;
+}
+
+.menu-tucked .menu-screen {
+    -webkit-transform: translateY(-44px);
+    -moz-transform: translateY(-44px);
+    -ms-transform: translateY(-44px);
+    transform: translateY(-44px);
+}
+
+@media (min-width: 62em) {
+  .menu-screen {
+    margin-top: 2.95em;
+    z-index: 1;
+  }
+}
+
+@media (max-width: 62em) {
+  .menu {
+      display: block;
+  }
+
+  .menu-toggle {
+      display: block;
+      display: none\9;
+  }
+
+  .menu-bottom {
+      position: absolute;
+      width: 100%;
+      border-top: 1px solid #E7732F;
+      background-color: #808080\9;
+      z-index: 100;
+  }
+
+  .menu-bottom .pure-menu-link {
+      opacity: 1;
+      -webkit-transform: translateX(0);
+      -moz-transform: translateX(0);
+      -ms-transform: translateX(0);
+      transform: translateX(0);
+      -webkit-transition: all 0.5s;
+      -moz-transition: all 0.5s;
+      -ms-transition: all 0.5s;
+      transition: all 0.5s;
+  }
+
+  .menu-bottom.menu-tucked .pure-menu-link {
+      -webkit-transform: translateX(-140px);
+      -moz-transform: translateX(-140px);
+      -ms-transform: translateX(-140px);
+      transform: translateX(-140px);
+      opacity: 0;
+      opacity: 1\9;
+  }
+
+  .pure-menu-horizontal.menu-tucked {
+      z-index: -1;
+      top: 45px;
+      position: absolute;
+      overflow: hidden;
+  }
+
+  .menu-untucked {
+    height: 3.1em;
+  }
+
+  .pure-menu-horizontal.pure-menu-scrollable.menu-untucked {
+    overflow-x: auto;
+  }
 }