allow optional hero markdown file, allow navbar to be optional

master
David Kebler 2017-04-05 00:24:28 -07:00
parent 63289cbc53
commit 6834c1aedf
11 changed files with 68 additions and 27 deletions

View File

@ -2,9 +2,13 @@
<html lang="en"> <html lang="en">
{{ partial "head.html" . }} {{ partial "head.html" . }}
<body> <body>
{{ if ne .Site.Params.navbar.hidden true }}
{{ partial "navbar.html" . }} {{ partial "navbar.html" . }}
{{ end }}
<main id="page"> <main id="page">
{{ if ne .Site.Params.hero.custom_hero true }}
{{ partial "hero.html" . }} {{ partial "hero.html" . }}
{{ end }}
{{ partial "sections.html" . }} {{ partial "sections.html" . }}
</main> </main>
{{ partial "js.html" . }} {{ partial "js.html" . }}

View File

@ -56,15 +56,19 @@
{{ end }} {{ end }}
{{ with .font }} {{ with .font }}
#hero .text { font-family:{{ . }},Helvetica,Arial,sans-serif;} #hero > .section__container { font-family:{{ . }},Helvetica,Arial,sans-serif;}
{{ end }} {{ end }}
{{ with .color }} {{ with .color }}
#hero > .text { color: {{ . }}; } #hero { color: {{ . }}; }
{{ end }}
{{ with .bg_color }}
#hero { background-color: {{ . }}; }
{{ end }} {{ end }}
{{ if and ( .text_outline ) ( .text_shadow ) }} {{ if and ( .text_outline ) ( .text_shadow ) }}
#hero > .text { #hero > .section__container {
text-shadow: text-shadow:
-2px -2px 0 {{ .text_outline }}, -2px -2px 0 {{ .text_outline }},
2px -2px 0 {{ .text_outline }}, 2px -2px 0 {{ .text_outline }},
@ -75,7 +79,7 @@
{{ else }} {{ else }}
{{ with .text_outline }} {{ with .text_outline }}
#hero > .text { #hero > .section__container {
text-shadow: text-shadow:
-2px -2px 0 {{ . }}, -2px -2px 0 {{ . }},
2px -2px 0 {{ . }}, 2px -2px 0 {{ . }},
@ -85,7 +89,7 @@
{{ end }} {{ end }}
{{ with .text_shadow }} {{ with .text_shadow }}
#hero > .text { #hero > .section__container {
text-shadow: text-shadow:
-7px -3px 0 {{ . }} -7px -3px 0 {{ . }}
} }
@ -131,11 +135,11 @@
{{ end }} {{ end }}
{{ with .divider_thickness }} {{ with .divider_thickness }}
hr { border-width: {{ . }}px; } #hero hr { border-width: {{ . }}px; }
{{ end }} {{ end }}
{{ with .divider_color }} {{ with .divider_color }}
hr { border-top-color: {{ . }}; } #hero hr { border-top-color: {{ . }}; }
{{ end }} {{ end }}
{{ end }} /* end hero */ {{ end }} /* end hero */
@ -152,7 +156,7 @@
{{ end }} {{ end }}
{{ with .bullet_icon }} {{ with .bullet_icon }}
.section__content ul > li::before { .section__content :not(.highlight) ul > li::before {
content: "{{ . }}"; content: "{{ . }}";
} }

View File

@ -1,5 +1,6 @@
<section id="hero"> <section id="hero" class="section section--hero">
<div class="text" > <div class="section__container" >
<div class="section__content section__content--hero" >
{{ with .Site.Params.hero }} {{ with .Site.Params.hero }}
{{ with .headline }}<h1>{{ . }}</h1>{{ end }} {{ with .headline }}<h1>{{ . }}</h1>{{ end }}
{{ with .subheadline }}<h2>{{ . }}</h2>{{ end }} {{ with .subheadline }}<h2>{{ . }}</h2>{{ end }}
@ -10,5 +11,5 @@
{{ end }} {{ end }}
{{ end }} {{ end }}
</div> </div>
</div>
</section> </section>

View File

@ -11,7 +11,7 @@
{{ if ne .Params.navbar false }} {{ if ne .Params.navbar false }}
{{ if ne .Params.hidden true }} {{ if ne .Params.hidden true }}
<li class="nav-bar__menu-item"> <li class="nav-bar__menu-item">
<a href="#nav-{{ .File.BaseFileName }}"> <a href="#{{ .File.BaseFileName }}">
{{ .Params.link_text | default .Title }} {{ .Params.link_text | default .Title }}
</a> </a>
</li> </li>
@ -21,3 +21,4 @@
<!-- </nav> --> <!-- </nav> -->
<!-- </div> --> <!-- </div> -->
</div> </div>
<div id="nav-bar-spacer"></div>

View File

@ -1,7 +1,6 @@
<!-- Renders Section Based on Content --> <!-- Renders Section Based on Content -->
{{ $parity := "odd" }} {{ range $i, $e := .Data.Pages }} {{ range $i, $e := where (.Data.Pages) ".Params.hidden" "!=" true }}
{{ if ne .Params.hidden true }} <section id="{{ .File.BaseFileName }}" class="section section--{{ .File.BaseFileName }} {{ if ne .File.BaseFileName "hero" }}section--{{ if modBool $i 2 }}odd{{ else }}even{{ end }}{{ end }}">
<section id="nav-{{ .File.BaseFileName }}" class="section section--{{ .File.BaseFileName }} section--{{ if modBool $i 2 }}odd{{ else }}even{{ end }}">
<div class="section__container"> <div class="section__container">
<div class="section__headline section__headline--{{ .File.BaseFileName }}"> <div class="section__headline section__headline--{{ .File.BaseFileName }}">
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>
@ -12,4 +11,3 @@
</div> </div>
</section> </section>
{{ end }} {{ end }}
{{ end }}

View File

@ -1,4 +1,4 @@
<!-- Adds a class to a block of text. Used for custom formatting --> <!-- Adds a class to a block of text. Used for custom formatting -->
<div class="{{ range .Params }}{{ . }} {{ end }}"> <span class="{{ range .Params }}{{ . }} {{ end }}">
{{ .Inner }} {{ .Inner }}
</div> </span>

View File

@ -19,6 +19,7 @@ body {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
font-size: 1.4rem; font-size: 1.4rem;
flex-direction: column; flex-direction: column;
width: 100%;
/* 14px default before jquery scalling */ /* 14px default before jquery scalling */
} }
@ -89,7 +90,7 @@ p {
text-align: left; text-align: left;
font-size: 1em; font-size: 1em;
line-height: 1.2; line-height: 1.2;
margin-bottom: 1em; margin-bottom: 0.5em;
} }
/* using ::before for list numbers and icons */ /* using ::before for list numbers and icons */

View File

@ -68,7 +68,7 @@
color: white; color: white;
} }
@media only screen and (min-width: 860px) { @media only screen and (min-width: 900px) {
.nav-bar { .nav-bar {
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;

View File

@ -36,7 +36,7 @@
.section__content ol { .section__content ol {
margin-left: 2em; margin-left: 2em;
list-style-position: inside; list-style-position: inside;
padding-top: 1em; padding-top: 0.5em;
} }
.section__content ul > li::before { .section__content ul > li::before {
@ -65,6 +65,11 @@
background-color: black; background-color: black;
} }
.section--hero {
color: white;
background-color: grey;
}
.section--even .btn { .section--even .btn {
color: black; color: black;
background-color: white; background-color: white;
@ -89,9 +94,8 @@
justify-content: center; justify-content: center;
} }
#hero .text { #hero .section-content--hero {
text-align: center; text-align: center;
color: white;
} }
/* ---------------- /* ----------------
@ -161,6 +165,24 @@ img.avatar {
padding: 0.5em; padding: 0.5em;
} }
.highlight {
font-size: 0.7em;
align-items: left;
color: red;
background-color: white;
padding: 0.5em;
border-color: black;
border-width: 3px;
border-radius: 1em;
}
.highlight > ul > li::before {
font-family: FontAwesome;
content: "\f054"; /* chevron-right */
padding-right: 1.1em;
margin-left: -2em;
}
.box--avatar > a { .box--avatar > a {
opacity: 1; opacity: 1;
} }

View File

@ -2,12 +2,17 @@
$(document).ready(function () { $(document).ready(function () {
// initialize // initialize
navbarSpacer();
// $('#page').css("width", $(window).width());
heroResize(); heroResize();
itemResize('iframe'); itemResize('iframe');
typeResize(); // for section content typeResize(); // for section content
hljs.initHighlightingOnLoad(); hljs.initHighlightingOnLoad();
// resize elements on change // resize elements on change
$(window).resize(function () { $(window).resize(function () {
// $('#page').css("width", $(window).width());
navbarSpacer();
heroResize(); heroResize();
itemResize('iframe'); itemResize('iframe');
typeResize(); typeResize();

View File

@ -29,9 +29,15 @@ $('a[href*="#"]:not([href="#"])').click(function () {
$('#cell').click(function () { $('#cell-number').toggleClass("hide"); }); $('#cell').click(function () { $('#cell-number').toggleClass("hide"); });
// $('#phone').click(function () { alert('phone clicked'); return false; }); // $('#phone').click(function () { alert('phone clicked'); return false; });
function navbarSpacer() {
$('#nav-bar-spacer').css({
height: $(".nav-bar__header").outerHeight(true),
});
}
// hero resizer // hero resizer
function heroResize(bfr = 15) { function heroResize(bfr = 15) {
var h = $(window).height(), var h = $(window).height() - $(".nav-bar__header").outerHeight(true),
w = $(window).width(), w = $(window).width(),
fr = bfr * h / w fr = bfr * h / w
// console.log('w,h,fr', w, h, fr) // console.log('w,h,fr', w, h, fr)
@ -44,7 +50,6 @@ function heroResize(bfr = 15) {
$('#hero').css({ $('#hero').css({
width: w + 10, width: w + 10,
height: h / w > 1.5 ? w * 1.5 : h, height: h / w > 1.5 ? w * 1.5 : h,
'margin-top': $('#nav-bar').height()
}); });
$('#hero').flowtype({ $('#hero').flowtype({