Sothr
/
sothr-dot-com
Archived
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

Merge branch 'develop' into 'master' 

Fixing responsive design for site

See merge request warricksothr/sothr-dot-com!6
master
Drew Short 6 years ago
parent
d779035bb2 c32086bbdc
commit
7c0ddbc4c2
4 changed files with 242 additions and 59 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      run_hugo_server.sh
  2. 2
      themes/pure/layouts/_default/baseof.html
  3. 32
      themes/pure/layouts/partials/header.html
  4. 207
      themes/pure/static/assets/css/style.css

6
run_hugo_server.sh
View File

@ -1,10 +1,12 @@
#! /usr/bin/sh #! /usr/bin/sh
HUGO_VERSION=${HUGO_VERSION:=0.54.0}
docker run -it \ docker run -it \
-e HUGO_WATCH=true \ -e HUGO_WATCH=true \
-e HUGO_THEME=pure \ -e HUGO_THEME=pure \
-e HUGO_BASEURL=http://localhost:1313/ \ -e HUGO_BASEURL=http://localhost:1313/ \
-e HUGO_DESTINATION=/src/public \ -e HUGO_DESTINATION=/src/public \
-v ${PWD}:/src \
-v ${PWD}:/src:Z \
-p 1313:1313 \ -p 1313:1313 \
sothr.com/hugo:0.54.0 $@
sothr.com/hugo:$HUGO_VERSION $@

2
themes/pure/layouts/_default/baseof.html
View File

@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
{{- partial "head.html" . -}} {{- partial "head.html" . -}}
<body> <body>
<div id="wrapper">
<div id="header"> <div id="header">
{{- partial "header.html" . -}} {{- partial "header.html" . -}}
</div> </div>
@ -12,6 +13,7 @@
</div> </div>
<div class="pure-u-1-5"></div> <div class="pure-u-1-5"></div>
</div> </div>
</div>
<div id="footer"> <div id="footer">
{{- partial "footer.html" . -}} {{- partial "footer.html" . -}}
</div> </div>

32
themes/pure/layouts/partials/header.html
View File

@ -1,17 +1,17 @@
<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>
<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"}} {{ 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>
<li class="pure-menu-item"><a href="{{ .URL }}" class="pure-menu-link" title="{{ .Title }}">{{ .Title }}</a></li>
{{ end }} {{ end }}
</ul>
<ul class="pure-menu-list float-right">
{{ range sort .Site.Params.links "weight" "desc" }} {{ range sort .Site.Params.links "weight" "desc" }}
<li class="pure-menu-list">
<li class="pure-menu-item">
{{ if .image }} {{ if .image }}
<a href="{{ .url }}" target="_blank" title="{{ .title }}"> <a href="{{ .url }}" target="_blank" title="{{ .title }}">
<img src="{{ .image | absURL }}" /> <img src="{{ .image | absURL }}" />
@ -25,4 +25,14 @@
{{ end }} {{ end }}
</ul> </ul>
</div> </div>
</nav>
</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>

207
themes/pure/static/assets/css/style.css
View File

@ -1,4 +1,4 @@
nav {
/*nav {
overflow: hidden; overflow: hidden;
padding: 0px 0px; padding: 0px 0px;
background: #E7732F; background: #E7732F;
@ -23,37 +23,41 @@ nav ul li a img {
nav ul li a img:hover { nav ul li a img:hover {
background: #ffffff; 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 */
#wrapper {
flex: 1 0 auto;
} }
.float-left {
float: left;
}
.float-right {
float: right;
#footer {
flex-shrink: 0;
padding: 0.5em;
} }
.text-align-right { .text-align-right {
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; color: #000000;
} }
@ -61,4 +65,169 @@ nav ul li a img:hover {
.pure-menu-link:focus, .pure-menu-link:focus,
.pure-menu-link:hover { .pure-menu-link:hover {
background-color:#ffffff 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;
}
} }