external-software/github_gohugo-split-theme.git

parent: 50d045ab | patch | commit | ignore whitespace

Christian Mendoza

20.17.2017 00d0ffc5d211e446914f6df12ee1f36699812947

Add template files

1 files deleted

13 files added

2 files modified

	.gitignore	2 ●●●●● patch \| view \| raw \| blame \| history
	layouts/index.html	39 ●●●●● patch \| view \| raw \| blame \| history
	layouts/partials/bio.html	3 ●●●●● patch \| view \| raw \| blame \| history
	layouts/partials/footer.html	9 ●●●●● patch \| view \| raw \| blame \| history
	layouts/partials/head.html	30 ●●●●● patch \| view \| raw \| blame \| history
	layouts/partials/header.html	patch \| view \| raw \| blame \| history
	layouts/partials/intro.html	4 ●●●●● patch \| view \| raw \| blame \| history
	layouts/partials/links.html	20 ●●●●● patch \| view \| raw \| blame \| history
	static/assets/css/split.css	274 ●●●●● patch \| view \| raw \| blame \| history
	static/assets/sass/00-reset.scss	110 ●●●●● patch \| view \| raw \| blame \| history
	static/assets/sass/01-content.scss	317 ●●●●● patch \| view \| raw \| blame \| history
	static/assets/sass/split.scss	13 ●●●●● patch \| view \| raw \| blame \| history
	static/favicon.ico	patch \| view \| raw \| blame \| history
	static/images/background.jpg	patch \| view \| raw \| blame \| history
	static/images/social.jpg	patch \| view \| raw \| blame \| history
	static/videos/background.mp4	patch \| view \| raw \| blame \| history

 .gitignore

New file
@@ -0,0 +1,2 @@
.DS_Store
Thumbs.db

 layouts/index.html

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en-US">

<head>
  {{ partial "head" . }}
</head>

<body id="fullsingle" class="page-template-page-fullsingle-split">

  <div class="fs-split">

    <!-- Image Side -->
    <div class="split-image">

    </div>

    <!-- Content Side -->
    <div class="split-content">
      <div class="split-content-vertically-center">

        <!-- Intro -->
        {{ partial "intro" . }}

        <!-- Bio -->
        {{ partial "bio" . }}

        <!-- Links -->
        {{ partial "links" . }}

        <!-- Footer -->
        {{ partial "footer" . }}

      </div>
    </div>

  </div>

</body>
</html>

 layouts/partials/bio.html

New file
@@ -0,0 +1,3 @@
<div class="split-bio">
  <p>{{ .Site.Params.bio | markdownify }}</p>
</div>

 layouts/partials/footer.html

@@ -0,0 +1,9 @@
<div class="split-credit">
  <p>{{ .Site.Copyright | safeHTML }} - <a href="https://onepagelove.com/split">Split Template</a> by <a href="https://onepagelove.com">One Page Love</a></p>

  {{ "<!--" | safeHTML }}
  {{ "To edit this credit you can remove the CC3.0 license for only $5 here: https://onepagelove.com/split" | safeHTML }}
  {{ "this really helps contribute towards us developing more templates and means the world to me!" | safeHTML }}
  {{ "Cheers, Rob (@robhope)" | safeHTML }}
  {{ "-->" | safeHTML }}
</div>

 layouts/partials/head.html

New file
@@ -0,0 +1,30 @@
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<!-- SEO -->
<title>{{ .Title }}</title>
{{ with .Site.Params.description }}<meta name="description" content="{{ . }}" />{{ end }}
<meta name="robots" content="index, follow" />
<meta name="referrer" content="always" />

<!-- Social & Open Graph -->
<meta property="og:title" content="{{ .Title }}" />
{{ with .Site.Params.description }}<meta property="og:description" content="{{ . }}" />{{ end }}
<meta property="og:url" content="{{ .Site.BaseURL }}" />
{{ with .Site.Params.shareImage }}
<meta property="og:image" content="{{ . | absURL }}" />
<meta name="twitter:card" content="summary_large_image" />
{{ end }}
{{ with .Site.Params.twitterHandle }}<meta name="twitter:site" content="@{{ . }}" />{{ end }}

<!-- Favicon -->
{{ with .Site.Params.favicon }}<link rel="icon" href="{{ . }}" />{{ end }}

<!-- Styles -->
<link rel="stylesheet" href="assets/css/split.css" type="text/css" media="screen" />
<meta name="viewport" content="width=device-width,initial-scale=1" />

<!-- Google Analytics -->
{{ if and (.Site.GoogleAnalytics) (not (in (printf "%#v" .Site.BaseURL) "localhost")) }}
  {{ template "_internal/google_analytics.html" . }}
{{ end }}

 layouts/partials/header.html


 layouts/partials/intro.html

New file
@@ -0,0 +1,4 @@
<div class="split-intro">
  <h1>{{ .Site.Params.name }}</h1>
  <span class="tagline">{{ .Site.Params.tagline }}</span>
</div>

 layouts/partials/links.html

New file
@@ -0,0 +1,20 @@
<div class="split-lists">

  {{ range $key, $value := .Site.Params.links }}
    {{ range $key, $list := $value }}
    
    {{ if $list.link }}
      <div class="split-list">
        <h3>{{ $list.heading }}</h3>
        <ul>
          {{ range $list.link }}
            <li><a href="{{ .url }}">{{ .text }}</a></li>
          {{ end }}
        </ul>
      </div>
    {{ end }}

    {{ end }}
  {{ end }}

</div>

 static/assets/css/split.css

New file
@@ -0,0 +1,274 @@
/*
Template Name: Split
Author: One Page Love
Author URI: https://onepagelove.com
Template URI: https://onepagelove.com/split
Description: Split is a centrally-divided layout for a professional online presence with a big image or video left with alongside content.
*/
/* -- CSS Reset -- */
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600");
@import url("https://fonts.googleapis.com/css?family=Lora");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -moz-font-feature-settings: "liga" on;
  margin: 0; }

img.alignright {
  float: right; }

img.alignleft {
  float: left; }

img.aligncenter {
  clear: both;
  display: block;
  margin-right: auto;
  margin-left: auto; }

body {
  background-color: #FFFFFF;
  border-style: none; }

body,
p,
a,
a:hover {
  color: #000000; }

a,
a:hover {
  text-decoration: none;
  border: none;
  border-style: none;
  box-shadow: none; }

/* -- Content -- */
@-webkit-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

html {
  background-color: #061C30; }

body.page-template-page-fullsingle-split {
  background-color: #061C30;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 33px;
  letter-spacing: -0.2px;
  color: #848d96;
  -webkit-animation: fadein 2s;
          animation: fadein 2s; }
  body.page-template-page-fullsingle-split p {
    color: #848d96; }

.fs-split {
  width: 100vw;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  @media (max-width: 800px) {
    .fs-split {
      height: auto;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; } }
  .fs-split .split-image {
    width: 50%;
    height: 100vh;
    background-image: url("../../images/background.jpg");
    background-position: center center;
    background-size: cover; }
    @media (max-width: 800px) {
      .fs-split .split-image {
        height: 80vh;
        width: 100%; } }
  .fs-split .split-content {
    width: 50%;
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    overflow: auto; }
    @media (max-width: 800px) {
      .fs-split .split-content {
        width: 100%;
        height: auto; } }
    .fs-split .split-content .split-content-vertically-center {
      padding: 80px;
      max-width: 640px;
      margin-top: auto;
      margin-bottom: auto; }
      @media (max-width: 1200px) {
        .fs-split .split-content .split-content-vertically-center {
          padding: 60px; } }
      @media (max-width: 800px) {
        .fs-split .split-content .split-content-vertically-center {
          padding: 40px; } }

.split-intro {
  font-weight: 600;
  font-size: 64px;
  line-height: 80px;
  letter-spacing: -2px; }
  .split-intro h1 {
    font-weight: 400;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 16px;
    margin-bottom: 40px;
    letter-spacing: 0.4px;
    color: #47bec7; }
  .split-intro .tagline {
    color: #CCCCCC; }

.split-bio {
  padding: 40px 0 40px 0;
  font-family: 'Lora', serif; }
  @media (max-width: 1200px) {
    .split-bio {
      padding: 30px 0; } }
  @media (max-width: 800px) {
    .split-bio {
      padding: 20px 0; } }
  .split-bio p {
    color: #848d96; }
  .split-bio a {
    color: #848d96;
    transition-duration: 0.5s;
    border-bottom: 1px dotted #848d96; }
    .split-bio a:hover {
      color: #CA486d;
      transition-duration: 0.1s;
      border-bottom: 1px dotted #CA486d; }

.split-lists .split-list {
  width: 30%;
  display: inline-block;
  margin-bottom: 40px; }
  @media (max-width: 500px) {
    .split-lists .split-list {
      width: 90%; } }
  .split-lists .split-list h3 {
    font-weight: 400;
    text-transform: uppercase;
    font-size: 11px;
    line-height: 11px;
    margin-bottom: 31px;
    color: #848d96;
    letter-spacing: 2px;
    opacity: 0.5; }
  .split-lists .split-list ul li {
    font-size: 16px;
    line-height: 16px;
    margin-bottom: 12px; }
    .split-lists .split-list ul li a {
      color: #848d96;
      transition-duration: 0.5s; }
      .split-lists .split-list ul li a:hover {
        color: #CA486d;
        transition-duration: 0.1s; }

.split-credit {
  opacity: 0.4; }
  .split-credit p {
    font-size: 12px;
    line-height: 14px; }
    .split-credit p a {
      color: #848d96; }

.split-video {
  overflow: hidden;
  position: relative; }

.video-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }

.video-container {
  position: relative;
  overflow: hidden;
  height: 56.25vw;
  width: 100vw; }
  @media (max-aspect-ratio: 16 / 9) {
    .video-container {
      height: 100vh;
      width: 177.7777777778vh; } }

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

video.video {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
  width: 100%;
  height: 100%; }

 static/assets/sass/00-reset.scss

New file
@@ -0,0 +1,110 @@
//-------------------------------------------------------------------------------
// Eric Meyer’s CSS Reset
//-------------------------------------------------------------------------------

//   http://meyerweb.com/eric/tools/css/reset/ 
//   v2.0 | 20110126
//   License: none (public domain)


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
// HTML5 display-role reset for older browsers 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

//-------------------------------------------------------------------------------
// Make those fonts sexy
//-------------------------------------------------------------------------------

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -moz-font-feature-settings: "liga" on;
    margin: 0;
}

//-------------------------------------------------------------------------------
// General Styles
//-------------------------------------------------------------------------------

img {
    &.alignright {
        float: right;
    }
    &.alignleft {
        float: left;
    }
    &.aligncenter {
        clear: both;
        display: block;
        margin-right: auto;
        margin-left: auto;
    }
}

//-------------------------------------------------------------------------------
// Reset Body Colors
//-------------------------------------------------------------------------------

body {
    background-color: #FFFFFF;
    border-style: none;
}
body, 
p, 
a, 
a:hover {
    color: #000000;
}

//-------------------------------------------------------------------------------
// Reset Link Styles
//-------------------------------------------------------------------------------

a, 
a:hover {
    text-decoration: none;
    border: none;
    border-style: none;
    box-shadow: none;
}

 static/assets/sass/01-content.scss

New file
@@ -0,0 +1,317 @@
//-------------------------------------------------------------------------------
// Google Font Import
//-------------------------------------------------------------------------------

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600');
@import url('https://fonts.googleapis.com/css?family=Lora');

//-------------------------------------------------------------------------------
// Variables
//-------------------------------------------------------------------------------

// Colors
$color-background   : #061C30;
$color-text         : #848d96;
$color-link         : #848d96;
$color-link-hover   : #CA486d; 
$color-maverick     : #47bec7; 
$color-tagline      : #CCCCCC; 

// Breakpoints
$bp-smallish        : 1200px;
$bp-tablet          : 800px;
$bp-mobile          : 500px;

// Images
$image-background   : url('../../images/background.jpg');

//-------------------------------------------------------------------------------
// Fade In
//-------------------------------------------------------------------------------

@keyframes fadein {
    from { opacity: 0;}
    to   { opacity: 1;}
}

//-------------------------------------------------------------------------------
// Content
//-------------------------------------------------------------------------------

html {
    background-color: $color-background; 
}
body.page-template-page-fullsingle-split {
    background-color: $color-background; 
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 21px;
    line-height: 33px;
    letter-spacing: -0.2px;
    color: $color-text;
    animation: fadein 2s;

    //-------------------------------------------------------------------------------
    // Global Styles
    //-------------------------------------------------------------------------------

    p {
        color: $color-text;
    }

}

//-------------------------------------------------------------------------------
// Sections and Columns
//-------------------------------------------------------------------------------

.fs-split {
    width: 100vw;
    height: 100vh;
    display: flex;

    @media (max-width: $bp-tablet ) {
        height: auto;
        flex-wrap: wrap;
    }	

    //-------------------------------------------------------------------------------
    // Column - Big Image
    //-------------------------------------------------------------------------------

    .split-image {
        width: 50%;
        height: 100vh;
        background-image: $image-background; 
        background-position:center center;
        background-size:cover;

        @media (max-width: $bp-tablet ) {
            height: 80vh;
            width: 100%;
        }	

    }

    //-------------------------------------------------------------------------------
    // Column - Content 
    //-------------------------------------------------------------------------------

    .split-content {
        width: 50%;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: auto;

        @media (max-width: $bp-tablet ) {
            width: 100%;
            height: auto;
        }	

        .split-content-vertically-center {
            padding: 80px;
            max-width: 640px;
            margin-top: auto;
            margin-bottom: auto;

            @media (max-width: $bp-smallish ) {
                padding: 60px;
            }

            @media (max-width: $bp-tablet ) {
                padding: 40px;
            }	
			
        }

    }

}

//-------------------------------------------------------------------------------
// Content
//-------------------------------------------------------------------------------

//-------------------------------------------------------------------------------
// Intro Text
//-------------------------------------------------------------------------------

.split-intro {
    font-weight: 600;
    font-size: 64px; 
    line-height: 80px;
    letter-spacing: -2px;

    h1 {
        font-weight: 400;
        text-transform: uppercase;
        font-size: 16px; 
        line-height: 16px;
        margin-bottom: 40px;
        letter-spacing: 0.4px;
        color: $color-maverick;
    }

    .tagline {
        color: $color-tagline;
    }

}

//-------------------------------------------------------------------------------
// Biography
//-------------------------------------------------------------------------------

.split-bio {
    padding: 40px 0 40px 0;
    font-family: 'Lora', serif;

    @media (max-width: $bp-smallish ) {
        padding: 30px 0;
    }

    @media (max-width: $bp-tablet ) {
        padding: 20px 0;
    }	

    p {
        color: $color-text;
    }

    a {
        color: $color-link;
        transition-duration: 0.5s;
        border-bottom: 1px dotted $color-link;

        &:hover {
            color: $color-link-hover;
            transition-duration: 0.1s;
            border-bottom: 1px dotted $color-link-hover;
        }

    }			

}

//-------------------------------------------------------------------------------
// Lists
//-------------------------------------------------------------------------------

.split-lists {	

    .split-list {
        width: 30%;
        display: inline-block;
        margin-bottom: 40px;

        @media (max-width: $bp-mobile ) {
            width: 90%;
        }	

        h3 {
            font-weight: 400;
            text-transform: uppercase;
            font-size: 11px;
            line-height: 11px;
            margin-bottom: 31px;
            color: $color-text;
            letter-spacing: 2px;
            opacity: 0.5;
        }

        ul {
			

            li {
                font-size: 16px;
                line-height: 16px;	
                margin-bottom: 12px;
				
                a {
                    color: $color-link;
                    transition-duration: 0.5s;

                    &:hover {
                        color: $color-link-hover;
                        transition-duration: 0.1s;
                    }

                }
				
            }

        }

    }	

}

//-------------------------------------------------------------------------------
// Credit
//-------------------------------------------------------------------------------

//  To edit this credit you can remove the CC3.0 license for only $5 here: https://onepagelove.com/split 
//  this really helps contribute towards us developing more templates and means the world to me!
//  Cheers, Rob (@robhope)

.split-credit {
    opacity: 0.4;

    p {
        font-size: 12px; 
        line-height: 14px;

        a { 
            color: $color-text;
        }

    }

}

//-------------------------------------------------------------------------------
// Videos - shout out to my bud https://twitter.com/manuelmoreale for the Ninja skills
//-------------------------------------------------------------------------------

// YouTube

.split-video {
    overflow:hidden;
    position:relative;
}
.video-wrap{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
.video-container {
    position:relative;
    overflow:hidden;
    height: 56.25vw; 
    width: 100vw;
    @media (max-aspect-ratio:16/9) { 
        height: 100vh; 
        width: 177.7777777778vh; // this is for the ration 16:9
    }
}
.video-container iframe, 
.video-container object, 
.video-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}

// Self-Hosted

video.video {
    object-fit      : cover;
    object-position : 50% 50%;
    width           : 100%;
    height          : 100%;
} 

 static/assets/sass/split.scss

New file
@@ -0,0 +1,13 @@
/*
Template Name: Split
Author: One Page Love
Author URI: https://onepagelove.com
Template URI: https://onepagelove.com/split
Description: Split is a centrally-divided layout for a professional online presence with a big image or video left with alongside content.
*/

/* -- CSS Reset -- */
@import "00-reset";

/* -- Content -- */
@import "01-content";

 static/favicon.ico

Binary files differ

 static/images/background.jpg


 static/images/social.jpg


 static/videos/background.mp4

Binary files differ

			@@ -0,0 +1,39 @@
			<!DOCTYPE html>
			<html lang="en-US">

			<head>
			{{ partial "head" . }}
			</head>

			<body id="fullsingle" class="page-template-page-fullsingle-split">

			<div class="fs-split">

			<!-- Image Side -->
			<div class="split-image">

			</div>

			<!-- Content Side -->
			<div class="split-content">
			<div class="split-content-vertically-center">

			<!-- Intro -->
			{{ partial "intro" . }}

			<!-- Bio -->
			{{ partial "bio" . }}

			<!-- Links -->
			{{ partial "links" . }}

			<!-- Footer -->
			{{ partial "footer" . }}

			</div>
			</div>

			</div>

			</body>
			</html>

New file
			@@ -0,0 +1,3 @@
			<div class="split-bio">
			<p>{{ .Site.Params.bio \| markdownify }}</p>
			</div>

			@@ -0,0 +1,9 @@
			<div class="split-credit">
			<p>{{ .Site.Copyright \| safeHTML }} - <a href="https://onepagelove.com/split">Split Template</a> by <a href="https://onepagelove.com">One Page Love</a></p>

			{{ "<!--" \| safeHTML }}
			{{ "To edit this credit you can remove the CC3.0 license for only $5 here: https://onepagelove.com/split" \| safeHTML }}
			{{ "this really helps contribute towards us developing more templates and means the world to me!" \| safeHTML }}
			{{ "Cheers, Rob (@robhope)" \| safeHTML }}
			{{ "-->" \| safeHTML }}
			</div>

New file
			@@ -0,0 +1,30 @@
			<meta charset="UTF-8" />
			<meta http-equiv="X-UA-Compatible" content="IE=edge" />

			<!-- SEO -->
			<title>{{ .Title }}</title>
			{{ with .Site.Params.description }}<meta name="description" content="{{ . }}" />{{ end }}
			<meta name="robots" content="index, follow" />
			<meta name="referrer" content="always" />

			<!-- Social & Open Graph -->
			<meta property="og:title" content="{{ .Title }}" />
			{{ with .Site.Params.description }}<meta property="og:description" content="{{ . }}" />{{ end }}
			<meta property="og:url" content="{{ .Site.BaseURL }}" />
			{{ with .Site.Params.shareImage }}
			<meta property="og:image" content="{{ . \| absURL }}" />
			<meta name="twitter:card" content="summary_large_image" />
			{{ end }}
			{{ with .Site.Params.twitterHandle }}<meta name="twitter:site" content="@{{ . }}" />{{ end }}

			<!-- Favicon -->
			{{ with .Site.Params.favicon }}<link rel="icon" href="{{ . }}" />{{ end }}

			<!-- Styles -->
			<link rel="stylesheet" href="assets/css/split.css" type="text/css" media="screen" />
			<meta name="viewport" content="width=device-width,initial-scale=1" />

			<!-- Google Analytics -->
			{{ if and (.Site.GoogleAnalytics) (not (in (printf "%#v" .Site.BaseURL) "localhost")) }}
			{{ template "_internal/google_analytics.html" . }}
			{{ end }}

New file
			@@ -0,0 +1,4 @@
			<div class="split-intro">
			<h1>{{ .Site.Params.name }}</h1>
			<span class="tagline">{{ .Site.Params.tagline }}</span>
			</div>

New file
			@@ -0,0 +1,20 @@
			<div class="split-lists">

			{{ range $key, $value := .Site.Params.links }}
			{{ range $key, $list := $value }}

			{{ if $list.link }}
			<div class="split-list">
			<h3>{{ $list.heading }}</h3>
			<ul>
			{{ range $list.link }}
			<li><a href="{{ .url }}">{{ .text }}</a></li>
			{{ end }}
			</ul>
			</div>
			{{ end }}

			{{ end }}
			{{ end }}

			</div>

New file
			@@ -0,0 +1,274 @@
			/*
			Template Name: Split
			Author: One Page Love
			Author URI: https://onepagelove.com
			Template URI: https://onepagelove.com/split
			Description: Split is a centrally-divided layout for a professional online presence with a big image or video left with alongside content.
			*/
			/* -- CSS Reset -- */
			@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600");
			@import url("https://fonts.googleapis.com/css?family=Lora");
			html, body, div, span, applet, object, iframe,
			h1, h2, h3, h4, h5, h6, p, blockquote, pre,
			a, abbr, acronym, address, big, cite, code,
			del, dfn, em, img, ins, kbd, q, s, samp,
			small, strike, strong, sub, sup, tt, var,
			b, u, i, center,
			dl, dt, dd, ol, ul, li,
			fieldset, form, label, legend,
			table, caption, tbody, tfoot, thead, tr, th, td,
			article, aside, canvas, details, embed,
			figure, figcaption, footer, header, hgroup,
			menu, nav, output, ruby, section, summary,
			time, mark, audio, video {
			margin: 0;
			padding: 0;
			border: 0;
			font-size: 100%;
			font: inherit;
			vertical-align: baseline; }

			article, aside, details, figcaption, figure,
			footer, header, hgroup, menu, nav, section {
			display: block; }

			body {
			line-height: 1; }

			ol, ul {
			list-style: none; }

			blockquote, q {
			quotes: none; }

			blockquote:before, blockquote:after,
			q:before, q:after {
			content: '';
			content: none; }

			table {
			border-collapse: collapse;
			border-spacing: 0; }

			* {
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			text-rendering: optimizeLegibility;
			-moz-font-feature-settings: "liga" on;
			margin: 0; }

			img.alignright {
			float: right; }

			img.alignleft {
			float: left; }

			img.aligncenter {
			clear: both;
			display: block;
			margin-right: auto;
			margin-left: auto; }

			body {
			background-color: #FFFFFF;
			border-style: none; }

			body,
			p,
			a,
			a:hover {
			color: #000000; }

			a,
			a:hover {
			text-decoration: none;
			border: none;
			border-style: none;
			box-shadow: none; }

			/* -- Content -- */
			@-webkit-keyframes fadein {
			from {
			opacity: 0; }
			to {
			opacity: 1; } }
			@keyframes fadein {
			from {
			opacity: 0; }
			to {
			opacity: 1; } }

			html {
			background-color: #061C30; }

			body.page-template-page-fullsingle-split {
			background-color: #061C30;
			font-family: 'Montserrat', sans-serif;
			font-weight: 400;
			font-size: 21px;
			line-height: 33px;
			letter-spacing: -0.2px;
			color: #848d96;
			-webkit-animation: fadein 2s;
			animation: fadein 2s; }
			body.page-template-page-fullsingle-split p {
			color: #848d96; }

			.fs-split {
			width: 100vw;
			height: 100vh;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex; }
			@media (max-width: 800px) {
			.fs-split {
			height: auto;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap; } }
			.fs-split .split-image {
			width: 50%;
			height: 100vh;
			background-image: url("../../images/background.jpg");
			background-position: center center;
			background-size: cover; }
			@media (max-width: 800px) {
			.fs-split .split-image {
			height: 80vh;
			width: 100%; } }
			.fs-split .split-content {
			width: 50%;
			min-height: 100vh;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			overflow: auto; }
			@media (max-width: 800px) {
			.fs-split .split-content {
			width: 100%;
			height: auto; } }
			.fs-split .split-content .split-content-vertically-center {
			padding: 80px;
			max-width: 640px;
			margin-top: auto;
			margin-bottom: auto; }
			@media (max-width: 1200px) {
			.fs-split .split-content .split-content-vertically-center {
			padding: 60px; } }
			@media (max-width: 800px) {
			.fs-split .split-content .split-content-vertically-center {
			padding: 40px; } }

			.split-intro {
			font-weight: 600;
			font-size: 64px;
			line-height: 80px;
			letter-spacing: -2px; }
			.split-intro h1 {
			font-weight: 400;
			text-transform: uppercase;
			font-size: 16px;
			line-height: 16px;
			margin-bottom: 40px;
			letter-spacing: 0.4px;
			color: #47bec7; }
			.split-intro .tagline {
			color: #CCCCCC; }

			.split-bio {
			padding: 40px 0 40px 0;
			font-family: 'Lora', serif; }
			@media (max-width: 1200px) {
			.split-bio {
			padding: 30px 0; } }
			@media (max-width: 800px) {
			.split-bio {
			padding: 20px 0; } }
			.split-bio p {
			color: #848d96; }
			.split-bio a {
			color: #848d96;
			transition-duration: 0.5s;
			border-bottom: 1px dotted #848d96; }
			.split-bio a:hover {
			color: #CA486d;
			transition-duration: 0.1s;
			border-bottom: 1px dotted #CA486d; }

			.split-lists .split-list {
			width: 30%;
			display: inline-block;
			margin-bottom: 40px; }
			@media (max-width: 500px) {
			.split-lists .split-list {
			width: 90%; } }
			.split-lists .split-list h3 {
			font-weight: 400;
			text-transform: uppercase;
			font-size: 11px;
			line-height: 11px;
			margin-bottom: 31px;
			color: #848d96;
			letter-spacing: 2px;
			opacity: 0.5; }
			.split-lists .split-list ul li {
			font-size: 16px;
			line-height: 16px;
			margin-bottom: 12px; }
			.split-lists .split-list ul li a {
			color: #848d96;
			transition-duration: 0.5s; }
			.split-lists .split-list ul li a:hover {
			color: #CA486d;
			transition-duration: 0.1s; }

			.split-credit {
			opacity: 0.4; }
			.split-credit p {
			font-size: 12px;
			line-height: 14px; }
			.split-credit p a {
			color: #848d96; }

			.split-video {
			overflow: hidden;
			position: relative; }

			.video-wrap {
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%); }

			.video-container {
			position: relative;
			overflow: hidden;
			height: 56.25vw;
			width: 100vw; }
			@media (max-aspect-ratio: 16 / 9) {
			.video-container {
			height: 100vh;
			width: 177.7777777778vh; } }

			.video-container iframe,
			.video-container object,
			.video-container embed {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%; }

			video.video {
			-o-object-fit: cover;
			object-fit: cover;
			-o-object-position: 50% 50%;
			object-position: 50% 50%;
			width: 100%;
			height: 100%; }

New file
			@@ -0,0 +1,110 @@
			//-------------------------------------------------------------------------------
			// Eric Meyer’s CSS Reset
			//-------------------------------------------------------------------------------

			// http://meyerweb.com/eric/tools/css/reset/
			// v2.0 \| 20110126
			// License: none (public domain)


			html, body, div, span, applet, object, iframe,
			h1, h2, h3, h4, h5, h6, p, blockquote, pre,
			a, abbr, acronym, address, big, cite, code,
			del, dfn, em, img, ins, kbd, q, s, samp,
			small, strike, strong, sub, sup, tt, var,
			b, u, i, center,
			dl, dt, dd, ol, ul, li,
			fieldset, form, label, legend,
			table, caption, tbody, tfoot, thead, tr, th, td,
			article, aside, canvas, details, embed,
			figure, figcaption, footer, header, hgroup,
			menu, nav, output, ruby, section, summary,
			time, mark, audio, video {
			margin: 0;
			padding: 0;
			border: 0;
			font-size: 100%;
			font: inherit;
			vertical-align: baseline;
			}
			// HTML5 display-role reset for older browsers
			article, aside, details, figcaption, figure,
			footer, header, hgroup, menu, nav, section {
			display: block;
			}
			body {
			line-height: 1;
			}
			ol, ul {
			list-style: none;
			}
			blockquote, q {
			quotes: none;
			}
			blockquote:before, blockquote:after,
			q:before, q:after {
			content: '';
			content: none;
			}
			table {
			border-collapse: collapse;
			border-spacing: 0;
			}

			//-------------------------------------------------------------------------------
			// Make those fonts sexy
			//-------------------------------------------------------------------------------

			* {
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			text-rendering: optimizeLegibility;
			-moz-font-feature-settings: "liga" on;
			margin: 0;
			}

			//-------------------------------------------------------------------------------
			// General Styles
			//-------------------------------------------------------------------------------

			img {
			&.alignright {
			float: right;
			}
			&.alignleft {
			float: left;
			}
			&.aligncenter {
			clear: both;
			display: block;
			margin-right: auto;
			margin-left: auto;
			}
			}

			//-------------------------------------------------------------------------------
			// Reset Body Colors
			//-------------------------------------------------------------------------------

			body {
			background-color: #FFFFFF;
			border-style: none;
			}
			body,
			p,
			a,
			a:hover {
			color: #000000;
			}

			//-------------------------------------------------------------------------------
			// Reset Link Styles
			//-------------------------------------------------------------------------------

			a,
			a:hover {
			text-decoration: none;
			border: none;
			border-style: none;
			box-shadow: none;
			}

New file
			@@ -0,0 +1,317 @@
			//-------------------------------------------------------------------------------
			// Google Font Import
			//-------------------------------------------------------------------------------

			@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600');
			@import url('https://fonts.googleapis.com/css?family=Lora');

			//-------------------------------------------------------------------------------
			// Variables
			//-------------------------------------------------------------------------------

			// Colors
			$color-background : #061C30;
			$color-text : #848d96;
			$color-link : #848d96;
			$color-link-hover : #CA486d;
			$color-maverick : #47bec7;
			$color-tagline : #CCCCCC;

			// Breakpoints
			$bp-smallish : 1200px;
			$bp-tablet : 800px;
			$bp-mobile : 500px;

			// Images
			$image-background : url('../../images/background.jpg');

			//-------------------------------------------------------------------------------
			// Fade In
			//-------------------------------------------------------------------------------

			@keyframes fadein {
			from { opacity: 0;}
			to { opacity: 1;}
			}

			//-------------------------------------------------------------------------------
			// Content
			//-------------------------------------------------------------------------------

			html {
			background-color: $color-background;
			}
			body.page-template-page-fullsingle-split {
			background-color: $color-background;
			font-family: 'Montserrat', sans-serif;
			font-weight: 400;
			font-size: 21px;
			line-height: 33px;
			letter-spacing: -0.2px;
			color: $color-text;
			animation: fadein 2s;

			//-------------------------------------------------------------------------------
			// Global Styles
			//-------------------------------------------------------------------------------

			p {
			color: $color-text;
			}

			}

			//-------------------------------------------------------------------------------
			// Sections and Columns
			//-------------------------------------------------------------------------------

			.fs-split {
			width: 100vw;
			height: 100vh;
			display: flex;

			@media (max-width: $bp-tablet ) {
			height: auto;
			flex-wrap: wrap;
			}

			//-------------------------------------------------------------------------------
			// Column - Big Image
			//-------------------------------------------------------------------------------

			.split-image {
			width: 50%;
			height: 100vh;
			background-image: $image-background;
			background-position:center center;
			background-size:cover;

			@media (max-width: $bp-tablet ) {
			height: 80vh;
			width: 100%;
			}

			}

			//-------------------------------------------------------------------------------
			// Column - Content
			//-------------------------------------------------------------------------------

			.split-content {
			width: 50%;
			min-height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: auto;

			@media (max-width: $bp-tablet ) {
			width: 100%;
			height: auto;
			}

			.split-content-vertically-center {
			padding: 80px;
			max-width: 640px;
			margin-top: auto;
			margin-bottom: auto;

			@media (max-width: $bp-smallish ) {
			padding: 60px;
			}

			@media (max-width: $bp-tablet ) {
			padding: 40px;
			}

			}

			}

			}

			//-------------------------------------------------------------------------------
			// Content
			//-------------------------------------------------------------------------------

			//-------------------------------------------------------------------------------
			// Intro Text
			//-------------------------------------------------------------------------------

			.split-intro {
			font-weight: 600;
			font-size: 64px;
			line-height: 80px;
			letter-spacing: -2px;

			h1 {
			font-weight: 400;
			text-transform: uppercase;
			font-size: 16px;
			line-height: 16px;
			margin-bottom: 40px;
			letter-spacing: 0.4px;
			color: $color-maverick;
			}

			.tagline {
			color: $color-tagline;
			}

			}

			//-------------------------------------------------------------------------------
			// Biography
			//-------------------------------------------------------------------------------

			.split-bio {
			padding: 40px 0 40px 0;
			font-family: 'Lora', serif;

			@media (max-width: $bp-smallish ) {
			padding: 30px 0;
			}

			@media (max-width: $bp-tablet ) {
			padding: 20px 0;
			}

			p {
			color: $color-text;
			}

			a {
			color: $color-link;
			transition-duration: 0.5s;
			border-bottom: 1px dotted $color-link;

			&:hover {
			color: $color-link-hover;
			transition-duration: 0.1s;
			border-bottom: 1px dotted $color-link-hover;
			}

			}

			}

			//-------------------------------------------------------------------------------
			// Lists
			//-------------------------------------------------------------------------------

			.split-lists {

			.split-list {
			width: 30%;
			display: inline-block;
			margin-bottom: 40px;

			@media (max-width: $bp-mobile ) {
			width: 90%;
			}

			h3 {
			font-weight: 400;
			text-transform: uppercase;
			font-size: 11px;
			line-height: 11px;
			margin-bottom: 31px;
			color: $color-text;
			letter-spacing: 2px;
			opacity: 0.5;
			}

			ul {


			li {
			font-size: 16px;
			line-height: 16px;
			margin-bottom: 12px;

			a {
			color: $color-link;
			transition-duration: 0.5s;

			&:hover {
			color: $color-link-hover;
			transition-duration: 0.1s;
			}

			}

			}

			}

			}

			}

			//-------------------------------------------------------------------------------
			// Credit
			//-------------------------------------------------------------------------------

			// To edit this credit you can remove the CC3.0 license for only $5 here: https://onepagelove.com/split
			// this really helps contribute towards us developing more templates and means the world to me!
			// Cheers, Rob (@robhope)

			.split-credit {
			opacity: 0.4;

			p {
			font-size: 12px;
			line-height: 14px;

			a {
			color: $color-text;
			}

			}

			}

			//-------------------------------------------------------------------------------
			// Videos - shout out to my bud https://twitter.com/manuelmoreale for the Ninja skills
			//-------------------------------------------------------------------------------

			// YouTube

			.split-video {
			overflow:hidden;
			position:relative;
			}
			.video-wrap{
			position:absolute;
			top:50%;
			left:50%;
			transform:translate(-50%,-50%);
			}
			.video-container {
			position:relative;
			overflow:hidden;
			height: 56.25vw;
			width: 100vw;
			@media (max-aspect-ratio:16/9) {
			height: 100vh;
			width: 177.7777777778vh; // this is for the ration 16:9
			}
			}
			.video-container iframe,
			.video-container object,
			.video-container embed {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			}

			// Self-Hosted

			video.video {
			object-fit : cover;
			object-position : 50% 50%;
			width : 100%;
			height : 100%;
			}

New file
			@@ -0,0 +1,13 @@
			/*
			Template Name: Split
			Author: One Page Love
			Author URI: https://onepagelove.com
			Template URI: https://onepagelove.com/split
			Description: Split is a centrally-divided layout for a professional online presence with a big image or video left with alongside content.
			*/

			/* -- CSS Reset -- */
			@import "00-reset";

			/* -- Content -- */
			@import "01-content";