allow optional hero markdown file, allow navbar to be optional
David Kebler
parent
63289cbc53
commit
6834c1aedf
|
|
@ -2,9 +2,13 @@
|
|||
<html lang="en">
|
||||
{{ partial "head.html" . }}
|
||||
<body>
|
||||
{{ partial "navbar.html" . }}
|
||||
{{ if ne .Site.Params.navbar.hidden true }}
|
||||
{{ partial "navbar.html" . }}
|
||||
{{ end }}
|
||||
<main id="page">
|
||||
{{ if ne .Site.Params.hero.custom_hero true }}
|
||||
{{ partial "hero.html" . }}
|
||||
{{ end }}
|
||||
{{ partial "sections.html" . }}
|
||||
</main>
|
||||
{{ partial "js.html" . }}
|
||||
|
|
|
|||
|
|
@ -56,15 +56,19 @@
|
|||
{{ end }}
|
||||
|
||||
{{ with .font }}
|
||||
#hero .text { font-family:{{ . }},Helvetica,Arial,sans-serif;}
|
||||
#hero > .section__container { font-family:{{ . }},Helvetica,Arial,sans-serif;}
|
||||
{{ end }}
|
||||
|
||||
{{ with .color }}
|
||||
#hero > .text { color: {{ . }}; }
|
||||
#hero { color: {{ . }}; }
|
||||
{{ end }}
|
||||
|
||||
{{ with .bg_color }}
|
||||
#hero { background-color: {{ . }}; }
|
||||
{{ end }}
|
||||
|
||||
{{ if and ( .text_outline ) ( .text_shadow ) }}
|
||||
#hero > .text {
|
||||
#hero > .section__container {
|
||||
text-shadow:
|
||||
-2px -2px 0 {{ .text_outline }},
|
||||
2px -2px 0 {{ .text_outline }},
|
||||
|
|
@ -75,7 +79,7 @@
|
|||
{{ else }}
|
||||
|
||||
{{ with .text_outline }}
|
||||
#hero > .text {
|
||||
#hero > .section__container {
|
||||
text-shadow:
|
||||
-2px -2px 0 {{ . }},
|
||||
2px -2px 0 {{ . }},
|
||||
|
|
@ -85,7 +89,7 @@
|
|||
{{ end }}
|
||||
|
||||
{{ with .text_shadow }}
|
||||
#hero > .text {
|
||||
#hero > .section__container {
|
||||
text-shadow:
|
||||
-7px -3px 0 {{ . }}
|
||||
}
|
||||
|
|
@ -131,11 +135,11 @@
|
|||
{{ end }}
|
||||
|
||||
{{ with .divider_thickness }}
|
||||
hr { border-width: {{ . }}px; }
|
||||
#hero hr { border-width: {{ . }}px; }
|
||||
{{ end }}
|
||||
|
||||
{{ with .divider_color }}
|
||||
hr { border-top-color: {{ . }}; }
|
||||
#hero hr { border-top-color: {{ . }}; }
|
||||
{{ end }}
|
||||
|
||||
{{ end }} /* end hero */
|
||||
|
|
@ -152,7 +156,7 @@
|
|||
{{ end }}
|
||||
|
||||
{{ with .bullet_icon }}
|
||||
.section__content ul > li::before {
|
||||
.section__content :not(.highlight) ul > li::before {
|
||||
content: "{{ . }}";
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<section id="hero">
|
||||
<div class="text" >
|
||||
<section id="hero" class="section section--hero">
|
||||
<div class="section__container" >
|
||||
<div class="section__content section__content--hero" >
|
||||
{{ with .Site.Params.hero }}
|
||||
{{ with .headline }}<h1>{{ . }}</h1>{{ end }}
|
||||
{{ with .subheadline }}<h2>{{ . }}</h2>{{ end }}
|
||||
|
|
@ -9,6 +10,6 @@
|
|||
<h4> {{ . }}</h4>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
{{ if ne .Params.navbar false }}
|
||||
{{ if ne .Params.hidden true }}
|
||||
<li class="nav-bar__menu-item">
|
||||
<a href="#nav-{{ .File.BaseFileName }}">
|
||||
<a href="#{{ .File.BaseFileName }}">
|
||||
{{ .Params.link_text | default .Title }}
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -21,3 +21,4 @@
|
|||
<!-- </nav> -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<div id="nav-bar-spacer"></div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<!-- Renders Section Based on Content -->
|
||||
{{ $parity := "odd" }} {{ range $i, $e := .Data.Pages }}
|
||||
{{ if ne .Params.hidden true }}
|
||||
<section id="nav-{{ .File.BaseFileName }}" class="section section--{{ .File.BaseFileName }} section--{{ if modBool $i 2 }}odd{{ else }}even{{ end }}">
|
||||
{{ range $i, $e := where (.Data.Pages) ".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 }}">
|
||||
<div class="section__container">
|
||||
<div class="section__headline section__headline--{{ .File.BaseFileName }}">
|
||||
<h1>{{ .Title }}</h1>
|
||||
|
|
@ -12,4 +11,3 @@
|
|||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<!-- Adds a class to a block of text. Used for custom formatting -->
|
||||
<div class="{{ range .Params }}{{ . }} {{ end }}">
|
||||
<span class="{{ range .Params }}{{ . }} {{ end }}">
|
||||
{{ .Inner }}
|
||||
</div>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ body {
|
|||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 1.4rem;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
/* 14px default before jquery scalling */
|
||||
}
|
||||
|
||||
|
|
@ -89,7 +90,7 @@ p {
|
|||
text-align: left;
|
||||
font-size: 1em;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
/* using ::before for list numbers and icons */
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
color: white;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 860px) {
|
||||
@media only screen and (min-width: 900px) {
|
||||
.nav-bar {
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
.section__content ol {
|
||||
margin-left: 2em;
|
||||
list-style-position: inside;
|
||||
padding-top: 1em;
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
|
||||
.section__content ul > li::before {
|
||||
|
|
@ -65,6 +65,11 @@
|
|||
background-color: black;
|
||||
}
|
||||
|
||||
.section--hero {
|
||||
color: white;
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
.section--even .btn {
|
||||
color: black;
|
||||
background-color: white;
|
||||
|
|
@ -89,9 +94,8 @@
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
#hero .text {
|
||||
#hero .section-content--hero {
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* ----------------
|
||||
|
|
@ -161,6 +165,24 @@ img.avatar {
|
|||
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 {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,12 +2,17 @@
|
|||
$(document).ready(function () {
|
||||
|
||||
// initialize
|
||||
navbarSpacer();
|
||||
// $('#page').css("width", $(window).width());
|
||||
heroResize();
|
||||
itemResize('iframe');
|
||||
typeResize(); // for section content
|
||||
hljs.initHighlightingOnLoad();
|
||||
|
||||
// resize elements on change
|
||||
$(window).resize(function () {
|
||||
// $('#page').css("width", $(window).width());
|
||||
navbarSpacer();
|
||||
heroResize();
|
||||
itemResize('iframe');
|
||||
typeResize();
|
||||
|
|
|
|||
|
|
@ -29,9 +29,15 @@ $('a[href*="#"]:not([href="#"])').click(function () {
|
|||
$('#cell').click(function () { $('#cell-number').toggleClass("hide"); });
|
||||
// $('#phone').click(function () { alert('phone clicked'); return false; });
|
||||
|
||||
function navbarSpacer() {
|
||||
$('#nav-bar-spacer').css({
|
||||
height: $(".nav-bar__header").outerHeight(true),
|
||||
});
|
||||
}
|
||||
|
||||
// hero resizer
|
||||
function heroResize(bfr = 15) {
|
||||
var h = $(window).height(),
|
||||
var h = $(window).height() - $(".nav-bar__header").outerHeight(true),
|
||||
w = $(window).width(),
|
||||
fr = bfr * h / w
|
||||
// console.log('w,h,fr', w, h, fr)
|
||||
|
|
@ -44,7 +50,6 @@ function heroResize(bfr = 15) {
|
|||
$('#hero').css({
|
||||
width: w + 10,
|
||||
height: h / w > 1.5 ? w * 1.5 : h,
|
||||
'margin-top': $('#nav-bar').height()
|
||||
});
|
||||
|
||||
$('#hero').flowtype({
|
||||
|
|
|
|||
Loading…
Reference in New Issue