allow optional hero markdown file, allow navbar to be optional
parent
63289cbc53
commit
6834c1aedf
|
@ -2,9 +2,13 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
{{ partial "head.html" . }}
|
{{ partial "head.html" . }}
|
||||||
<body>
|
<body>
|
||||||
{{ partial "navbar.html" . }}
|
{{ if ne .Site.Params.navbar.hidden true }}
|
||||||
|
{{ 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" . }}
|
||||||
|
|
|
@ -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: "{{ . }}";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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 }}
|
||||||
|
@ -9,6 +10,6 @@
|
||||||
<h4> {{ . }}</h4>
|
<h4> {{ . }}</h4>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 }}
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 */
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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({
|
||||||
|
|
Loading…
Reference in New Issue