forked from Git/hugo-story
		
	Merge pull request #6 from applikationsprogramvara/add_template
Adding template support to the theme
This commit is contained in:
		
							
								
								
									
										12
									
								
								exampleSite/data/banner.yml
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										12
									
								
								exampleSite/data/banner.yml
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,12 @@
 | 
			
		||||
####################### Banner #########################
 | 
			
		||||
style: "style1 orient-left content-align-left image-position-right fullscreen onload-image-fade-in onload-content-fade-right"
 | 
			
		||||
title : "Hugo Story"
 | 
			
		||||
subtitle: |
 | 
			
		||||
  Hugo Story released for free under the <a target="_blank" href="https://creativecommons.org/licenses/by/3.0/">Creative Commons</a>.
 | 
			
		||||
content : |
 | 
			
		||||
  This is a <strong>Banner</strong> element, and it's generally used as an introduction or opening statement. You can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-banner">details</a>).
 | 
			
		||||
button:
 | 
			
		||||
  label : "Get Started"
 | 
			
		||||
  link : "#first"
 | 
			
		||||
image : "images/banner.jpg"
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										77
									
								
								exampleSite/data/gallery.yml
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										77
									
								
								exampleSite/data/gallery.yml
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,77 @@
 | 
			
		||||
title: "Gallery"
 | 
			
		||||
style: "style2 medium lightbox onscroll-fade-in"
 | 
			
		||||
content: |
 | 
			
		||||
  This is a <strong>Gallery</strong> element. It can behave as a lightbox (when given the <code>lightbox</code> class), and you can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-gallery">details</a>).
 | 
			
		||||
pictures:
 | 
			
		||||
  - title: "Title"
 | 
			
		||||
    content: "Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices."
 | 
			
		||||
    image: "images/gallery/fulls/01.jpg"
 | 
			
		||||
    thumb: "images/gallery/thumbs/01.jpg"
 | 
			
		||||
    button: "Details"
 | 
			
		||||
 | 
			
		||||
  - title: "Title"
 | 
			
		||||
    content: "Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices."
 | 
			
		||||
    image: "images/gallery/fulls/02.jpg"
 | 
			
		||||
    thumb: "images/gallery/thumbs/02.jpg"
 | 
			
		||||
    button: "Details"
 | 
			
		||||
 | 
			
		||||
  - title: "Title"
 | 
			
		||||
    content: "Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices."
 | 
			
		||||
    image: "images/gallery/fulls/03.jpg"
 | 
			
		||||
    thumb: "images/gallery/thumbs/03.jpg"
 | 
			
		||||
    button: "Details"
 | 
			
		||||
 | 
			
		||||
  - title: "Title"
 | 
			
		||||
    content: "Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices."
 | 
			
		||||
    image: "images/gallery/fulls/04.jpg"
 | 
			
		||||
    thumb: "images/gallery/thumbs/04.jpg"
 | 
			
		||||
    button: "Details"
 | 
			
		||||
 | 
			
		||||
  - title: "Title"
 | 
			
		||||
    content: "Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices."
 | 
			
		||||
    image: "images/gallery/fulls/05.jpg"
 | 
			
		||||
    thumb: "images/gallery/thumbs/05.jpg"
 | 
			
		||||
    button: "Details"
 | 
			
		||||
 | 
			
		||||
  - title: "Title"
 | 
			
		||||
    content: "Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices."
 | 
			
		||||
    image: "images/gallery/fulls/06.jpg"
 | 
			
		||||
    thumb: "images/gallery/thumbs/06.jpg"
 | 
			
		||||
    button: "Details"
 | 
			
		||||
 | 
			
		||||
  - title: "Title"
 | 
			
		||||
    content: "Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices."
 | 
			
		||||
    image: "images/gallery/fulls/07.jpg"
 | 
			
		||||
    thumb: "images/gallery/thumbs/07.jpg"
 | 
			
		||||
    button: "Details"
 | 
			
		||||
 | 
			
		||||
  - title: "Title"
 | 
			
		||||
    content: "Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices."
 | 
			
		||||
    image: "images/gallery/fulls/08.jpg"
 | 
			
		||||
    thumb: "images/gallery/thumbs/08.jpg"
 | 
			
		||||
    button: "Details"
 | 
			
		||||
 | 
			
		||||
  - title: "Title"
 | 
			
		||||
    content: "Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices."
 | 
			
		||||
    image: "images/gallery/fulls/09.jpg"
 | 
			
		||||
    thumb: "images/gallery/thumbs/09.jpg"
 | 
			
		||||
    button: "Details"
 | 
			
		||||
 | 
			
		||||
  - title: "Title"
 | 
			
		||||
    content: "Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices."
 | 
			
		||||
    image: "images/gallery/fulls/10.jpg"
 | 
			
		||||
    thumb: "images/gallery/thumbs/10.jpg"
 | 
			
		||||
    button: "Details"
 | 
			
		||||
 | 
			
		||||
  - title: "Title"
 | 
			
		||||
    content: "Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices."
 | 
			
		||||
    image: "images/gallery/fulls/11.jpg"
 | 
			
		||||
    thumb: "images/gallery/thumbs/11.jpg"
 | 
			
		||||
    button: "Details"
 | 
			
		||||
 | 
			
		||||
  - title: "Title"
 | 
			
		||||
    content: "Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices."
 | 
			
		||||
    image: "images/gallery/fulls/12.jpg"
 | 
			
		||||
    thumb: "images/gallery/thumbs/12.jpg"
 | 
			
		||||
    button: "Details"
 | 
			
		||||
    
 | 
			
		||||
							
								
								
									
										65
									
								
								exampleSite/data/items.yml
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										65
									
								
								exampleSite/data/items.yml
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,65 @@
 | 
			
		||||
title : "Items"
 | 
			
		||||
content: |
 | 
			
		||||
  This is an <strong>Items</strong> element, and it's basically just a grid for organizing items of various types. You can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-items">details</a>).
 | 
			
		||||
style: "style1 medium onscroll-fade-in"
 | 
			
		||||
items:
 | 
			
		||||
  # feature item loop
 | 
			
		||||
  - name : "One"
 | 
			
		||||
    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
 | 
			
		||||
    style : "style2 major fa-gem"
 | 
			
		||||
 | 
			
		||||
  # feature item loop
 | 
			
		||||
  - name : "Two"
 | 
			
		||||
    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
 | 
			
		||||
    style : "solid style2 major fa-save"
 | 
			
		||||
    
 | 
			
		||||
  # feature item loop
 | 
			
		||||
  - name : "Three"
 | 
			
		||||
    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
 | 
			
		||||
    style : "solid style2 major fa-chart-bar"
 | 
			
		||||
    
 | 
			
		||||
  # feature item loop
 | 
			
		||||
  - name : "Four"
 | 
			
		||||
    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
 | 
			
		||||
    style : "solid style2 major fa-wifi"
 | 
			
		||||
    
 | 
			
		||||
  # feature item loop
 | 
			
		||||
  - name : "Five"
 | 
			
		||||
    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
 | 
			
		||||
    style : "solid style2 major fa-cog"
 | 
			
		||||
    
 | 
			
		||||
  # feature item loop
 | 
			
		||||
  - name : "Six"
 | 
			
		||||
    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
 | 
			
		||||
    style : "style2 major fa-paper-plane"
 | 
			
		||||
    
 | 
			
		||||
  # feature item loop
 | 
			
		||||
  - name : "Seven"
 | 
			
		||||
    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
 | 
			
		||||
    style : "solid style2 major fa-desktop"
 | 
			
		||||
    
 | 
			
		||||
  # feature item loop
 | 
			
		||||
  - name : "Eight"
 | 
			
		||||
    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
 | 
			
		||||
    style : "solid style2 major fa-sync-alt"
 | 
			
		||||
    
 | 
			
		||||
  # feature item loop
 | 
			
		||||
  - name : "Nine"
 | 
			
		||||
    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
 | 
			
		||||
    style : "solid style2 major fa-hashtag"
 | 
			
		||||
    
 | 
			
		||||
  # feature item loop
 | 
			
		||||
  - name : "Ten"
 | 
			
		||||
    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
 | 
			
		||||
    style : "solid style2 major fa-bolt"
 | 
			
		||||
    
 | 
			
		||||
  # feature item loop
 | 
			
		||||
  - name : "Eleven"
 | 
			
		||||
    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
 | 
			
		||||
    style : "style2 major fa-envelope"
 | 
			
		||||
    
 | 
			
		||||
  # feature item loop
 | 
			
		||||
  - name : "Twelve"
 | 
			
		||||
    content : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit."
 | 
			
		||||
    style : "solid style2 major fa-leaf"
 | 
			
		||||
    
 | 
			
		||||
							
								
								
									
										10
									
								
								exampleSite/data/spotlight1.yml
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										10
									
								
								exampleSite/data/spotlight1.yml
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,10 @@
 | 
			
		||||
####################### Spotlight #########################
 | 
			
		||||
style: "style1 orient-right content-align-left image-position-center onscroll-image-fade-in"
 | 
			
		||||
id: "first"
 | 
			
		||||
title : "Spotlight"
 | 
			
		||||
content: |
 | 
			
		||||
  This is a <strong>Spotlight</strong> element, and it's generally used – as its name implies – to spotlight a particular feature, subject, or pretty much whatever. You can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-spotlight">details</a>).
 | 
			
		||||
button: 
 | 
			
		||||
  label: "Learn More"
 | 
			
		||||
  link: "#"
 | 
			
		||||
image: "images/spotlight01.jpg"
 | 
			
		||||
							
								
								
									
										9
									
								
								exampleSite/data/spotlight2.yml
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										9
									
								
								exampleSite/data/spotlight2.yml
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,9 @@
 | 
			
		||||
####################### Spotlight #########################
 | 
			
		||||
style: "style1 orient-left content-align-left image-position-center onscroll-image-fade-in"
 | 
			
		||||
title : "Spotlight"
 | 
			
		||||
content: |
 | 
			
		||||
  This is also a <strong>Spotlight</strong> element, and it's here because this demo would look a bit empty with just one spotlight. Like all spotlights, you can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-spotlight">details</a>).
 | 
			
		||||
button: 
 | 
			
		||||
  label: "Learn More"
 | 
			
		||||
  link: "#"
 | 
			
		||||
image: "images/spotlight02.jpg"
 | 
			
		||||
							
								
								
									
										10
									
								
								exampleSite/data/spotlight3.yml
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										10
									
								
								exampleSite/data/spotlight3.yml
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,10 @@
 | 
			
		||||
####################### Spotlight #########################
 | 
			
		||||
style: "style1 orient-right content-align-left image-position-center onscroll-image-fade-in"
 | 
			
		||||
id: "first"
 | 
			
		||||
title : "Spotlight"
 | 
			
		||||
content: |
 | 
			
		||||
  And yes, this is another <strong>Spotlight</strong> element, and it's also here because I need to fill a bit of space. Naturally, like any other spotlight, you can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-spotlight">details</a>).
 | 
			
		||||
button: 
 | 
			
		||||
  label: "Learn More"
 | 
			
		||||
  link: "#"
 | 
			
		||||
image: "images/spotlight03.jpg"
 | 
			
		||||
@@ -15,12 +15,12 @@
 | 
			
		||||
		<div id="wrapper" class="divided">
 | 
			
		||||
 | 
			
		||||
			<!-- Main -->
 | 
			
		||||
			{{ partial "banner" . }}
 | 
			
		||||
			{{ partial "spotlight-01-left" . }}
 | 
			
		||||
			{{ partial "spotlight-02-right" . }}
 | 
			
		||||
			{{ partial "spotlight-03-left" . }}
 | 
			
		||||
			{{ partial "gallery" . }}
 | 
			
		||||
			{{ partial "items" . }}
 | 
			
		||||
			{{ partial "banner" site.Data.banner }}
 | 
			
		||||
			{{ partial "spotlight" site.Data.spotlight1 }}
 | 
			
		||||
			{{ partial "spotlight" site.Data.spotlight2 }}
 | 
			
		||||
			{{ partial "spotlight" site.Data.spotlight3 }}
 | 
			
		||||
			{{ partial "gallery" site.Data.gallery }}
 | 
			
		||||
			{{ partial "items" site.Data.items }}
 | 
			
		||||
			{{ partial "elements" . }}
 | 
			
		||||
			{{ partial "elements_reference" . }}
 | 
			
		||||
			{{ partial "template/footer" . }}
 | 
			
		||||
 
 | 
			
		||||
@@ -1,14 +1,14 @@
 | 
			
		||||
				<!-- Banner -->
 | 
			
		||||
                <section class="banner style1 orient-left content-align-left image-position-right fullscreen onload-image-fade-in onload-content-fade-right">
 | 
			
		||||
                    <div class="content">
 | 
			
		||||
                        {{ with .Site.Title }}<h1>{{.}}</h1>{{end}}
 | 
			
		||||
                        {{ with .Site.Params.subtitle }}<p class="major">{{.}} released for free under the <a target="_blank" href="https://creativecommons.org/licenses/by/3.0/">Creative Commons</a>.</p>{{end}}
 | 
			
		||||
                        <p>This is a <strong>Banner</strong> element, and it's generally used as an introduction or opening statement. You can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-banner">details</a>).</p>
 | 
			
		||||
                        <ul class="actions stacked">
 | 
			
		||||
                            <li><a href="#first" class="button large wide smooth-scroll-middle">Get Started</a></li>
 | 
			
		||||
                        </ul>
 | 
			
		||||
                    </div>
 | 
			
		||||
                    <div class="image">
 | 
			
		||||
                        {{ with .Site.Params.logo }}<img src="{{.}}" alt="Hugo Story" />{{end}}
 | 
			
		||||
                    </div>
 | 
			
		||||
                </section>
 | 
			
		||||
<!-- Banner -->
 | 
			
		||||
<section class="banner {{ .style }}">
 | 
			
		||||
    <div class="content">
 | 
			
		||||
        {{ with .title }}<h1>{{ . }}</h1>{{ end }}
 | 
			
		||||
        {{ with .subtitle }}<p class="major">{{ . | safeHTML }}</p>{{ end }}
 | 
			
		||||
        {{ with .content }}<p>{{ . | safeHTML }}</p>{{ end }}
 | 
			
		||||
        {{ with .button }}<ul class="actions stacked">
 | 
			
		||||
            <li><a href="{{ .link }}" class="button primary large wide smooth-scroll-middle">{{ .label }}</a></li>
 | 
			
		||||
        </ul>{{ end }}
 | 
			
		||||
    </div>
 | 
			
		||||
    {{ with .image }}<div class="image">
 | 
			
		||||
        <img src="{{.}}" alt="Hugo Story" />
 | 
			
		||||
    </div>{{end}}
 | 
			
		||||
</section>
 | 
			
		||||
@@ -1,156 +1,14 @@
 | 
			
		||||
                <!-- Gallery -->
 | 
			
		||||
                <section class="wrapper style1 align-center">
 | 
			
		||||
                    <div class="inner">
 | 
			
		||||
                        <h2>Gallery</h2>
 | 
			
		||||
                        <p>This is a <strong>Gallery</strong> element. It can behave as a lightbox (when given the <code>lightbox</code> class), and you can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-gallery">details</a>).</p>
 | 
			
		||||
                    </div>
 | 
			
		||||
<!-- Gallery -->
 | 
			
		||||
<section class="wrapper style1 align-center">
 | 
			
		||||
    <div class="inner">
 | 
			
		||||
        <h2>{{ .title }}</h2>
 | 
			
		||||
        <p>{{ .content | safeHTML }}</p>
 | 
			
		||||
    </div>
 | 
			
		||||
 | 
			
		||||
                    <!-- Gallery -->
 | 
			
		||||
                        <div class="gallery style2 medium lightbox onscroll-fade-in">
 | 
			
		||||
                            <article>
 | 
			
		||||
                                <a href="images/gallery/fulls/01.jpg" class="image">
 | 
			
		||||
                                    <img src="images/gallery/thumbs/01.jpg" alt="" />
 | 
			
		||||
                                </a>
 | 
			
		||||
                                <div class="caption">
 | 
			
		||||
                                    <h3>Title</h3>
 | 
			
		||||
                                    <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
 | 
			
		||||
                                    <ul class="actions fixed">
 | 
			
		||||
                                        <li><span class="button small">Details</span></li>
 | 
			
		||||
                                    </ul>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </article>
 | 
			
		||||
                            <article>
 | 
			
		||||
                                <a href="images/gallery/fulls/02.jpg" class="image">
 | 
			
		||||
                                    <img src="images/gallery/thumbs/02.jpg" alt="" />
 | 
			
		||||
                                </a>
 | 
			
		||||
                                <div class="caption">
 | 
			
		||||
                                    <h3>Title</h3>
 | 
			
		||||
                                    <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
 | 
			
		||||
                                    <ul class="actions fixed">
 | 
			
		||||
                                        <li><span class="button small">Details</span></li>
 | 
			
		||||
                                    </ul>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </article>
 | 
			
		||||
                            <article>
 | 
			
		||||
                                <a href="images/gallery/fulls/03.jpg" class="image">
 | 
			
		||||
                                    <img src="images/gallery/thumbs/03.jpg" alt="" />
 | 
			
		||||
                                </a>
 | 
			
		||||
                                <div class="caption">
 | 
			
		||||
                                    <h3>Title</h3>
 | 
			
		||||
                                    <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
 | 
			
		||||
                                    <ul class="actions fixed">
 | 
			
		||||
                                        <li><span class="button small">Details</span></li>
 | 
			
		||||
                                    </ul>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </article>
 | 
			
		||||
                            <article>
 | 
			
		||||
                                <a href="images/gallery/fulls/04.jpg" class="image">
 | 
			
		||||
                                    <img src="images/gallery/thumbs/04.jpg" alt="" />
 | 
			
		||||
                                </a>
 | 
			
		||||
                                <div class="caption">
 | 
			
		||||
                                    <h3>Title</h3>
 | 
			
		||||
                                    <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
 | 
			
		||||
                                    <ul class="actions fixed">
 | 
			
		||||
                                        <li><span class="button small">Details</span></li>
 | 
			
		||||
                                    </ul>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </article>
 | 
			
		||||
                            <article>
 | 
			
		||||
                                <a href="images/gallery/fulls/05.jpg" class="image">
 | 
			
		||||
                                    <img src="images/gallery/thumbs/05.jpg" alt="" />
 | 
			
		||||
                                </a>
 | 
			
		||||
                                <div class="caption">
 | 
			
		||||
                                    <h3>Title</h3>
 | 
			
		||||
                                    <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
 | 
			
		||||
                                    <ul class="actions fixed">
 | 
			
		||||
                                        <li><span class="button small">Details</span></li>
 | 
			
		||||
                                    </ul>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </article>
 | 
			
		||||
                            <article>
 | 
			
		||||
                                <a href="images/gallery/fulls/06.jpg" class="image">
 | 
			
		||||
                                    <img src="images/gallery/thumbs/06.jpg" alt="" />
 | 
			
		||||
                                </a>
 | 
			
		||||
                                <div class="caption">
 | 
			
		||||
                                    <h3>Title</h3>
 | 
			
		||||
                                    <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
 | 
			
		||||
                                    <ul class="actions fixed">
 | 
			
		||||
                                        <li><span class="button small">Details</span></li>
 | 
			
		||||
                                    </ul>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </article>
 | 
			
		||||
                            <article>
 | 
			
		||||
                                <a href="images/gallery/fulls/07.jpg" class="image">
 | 
			
		||||
                                    <img src="images/gallery/thumbs/07.jpg" alt="" />
 | 
			
		||||
                                </a>
 | 
			
		||||
                                <div class="caption">
 | 
			
		||||
                                    <h3>Title</h3>
 | 
			
		||||
                                    <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
 | 
			
		||||
                                    <ul class="actions fixed">
 | 
			
		||||
                                        <li><span class="button small">Details</span></li>
 | 
			
		||||
                                    </ul>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </article>
 | 
			
		||||
                            <article>
 | 
			
		||||
                                <a href="images/gallery/fulls/08.jpg" class="image">
 | 
			
		||||
                                    <img src="images/gallery/thumbs/08.jpg" alt="" />
 | 
			
		||||
                                </a>
 | 
			
		||||
                                <div class="caption">
 | 
			
		||||
                                    <h3>Title</h3>
 | 
			
		||||
                                    <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
 | 
			
		||||
                                    <ul class="actions fixed">
 | 
			
		||||
                                        <li><span class="button small">Details</span></li>
 | 
			
		||||
                                    </ul>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </article>
 | 
			
		||||
                            <article>
 | 
			
		||||
                                <a href="images/gallery/fulls/09.jpg" class="image">
 | 
			
		||||
                                    <img src="images/gallery/thumbs/09.jpg" alt="" />
 | 
			
		||||
                                </a>
 | 
			
		||||
                                <div class="caption">
 | 
			
		||||
                                    <h3>Title</h3>
 | 
			
		||||
                                    <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
 | 
			
		||||
                                    <ul class="actions fixed">
 | 
			
		||||
                                        <li><span class="button small">Details</span></li>
 | 
			
		||||
                                    </ul>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </article>
 | 
			
		||||
                            <article>
 | 
			
		||||
                                <a href="images/gallery/fulls/10.jpg" class="image">
 | 
			
		||||
                                    <img src="images/gallery/thumbs/10.jpg" alt="" />
 | 
			
		||||
                                </a>
 | 
			
		||||
                                <div class="caption">
 | 
			
		||||
                                    <h3>Title</h3>
 | 
			
		||||
                                    <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
 | 
			
		||||
                                    <ul class="actions fixed">
 | 
			
		||||
                                        <li><span class="button small">Details</span></li>
 | 
			
		||||
                                    </ul>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </article>
 | 
			
		||||
                            <article>
 | 
			
		||||
                                <a href="images/gallery/fulls/11.jpg" class="image">
 | 
			
		||||
                                    <img src="images/gallery/thumbs/11.jpg" alt="" />
 | 
			
		||||
                                </a>
 | 
			
		||||
                                <div class="caption">
 | 
			
		||||
                                    <h3>Title</h3>
 | 
			
		||||
                                    <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
 | 
			
		||||
                                    <ul class="actions fixed">
 | 
			
		||||
                                        <li><span class="button small">Details</span></li>
 | 
			
		||||
                                    </ul>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </article>
 | 
			
		||||
                            <article>
 | 
			
		||||
                                <a href="images/gallery/fulls/12.jpg" class="image">
 | 
			
		||||
                                    <img src="images/gallery/thumbs/12.jpg" alt="" />
 | 
			
		||||
                                </a>
 | 
			
		||||
                                <div class="caption">
 | 
			
		||||
                                    <h3>Title</h3>
 | 
			
		||||
                                    <p>Lorem ipsum dolor amet, consectetur magna etiam elit. Etiam sed ultrices.</p>
 | 
			
		||||
                                    <ul class="actions fixed">
 | 
			
		||||
                                        <li><span class="button small">Details</span></li>
 | 
			
		||||
                                    </ul>
 | 
			
		||||
                                </div>
 | 
			
		||||
                            </article>
 | 
			
		||||
                        </div>
 | 
			
		||||
 | 
			
		||||
                </section>
 | 
			
		||||
    <!-- Gallery -->
 | 
			
		||||
    <div class="gallery {{ .style }}">
 | 
			
		||||
        {{ range .pictures }}
 | 
			
		||||
            {{ partial "picture" . }}
 | 
			
		||||
        {{ end }}
 | 
			
		||||
    </div>
 | 
			
		||||
</section>
 | 
			
		||||
							
								
								
									
										5
									
								
								layouts/partials/item.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										5
									
								
								layouts/partials/item.html
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,5 @@
 | 
			
		||||
<section>
 | 
			
		||||
    <span class="icon {{ .style }}"></span>
 | 
			
		||||
    <h3>{{ .name }}</h3>
 | 
			
		||||
    <p>{{ .content }}</p>
 | 
			
		||||
</section>
 | 
			
		||||
@@ -1,69 +1,12 @@
 | 
			
		||||
				<!-- Items -->
 | 
			
		||||
                <section class="wrapper style1 align-center">
 | 
			
		||||
                    <div class="inner">
 | 
			
		||||
                        <h2>Items</h2>
 | 
			
		||||
                        <p>This is an <strong>Items</strong> element, and it's basically just a grid for organizing items of various types. You can customize its <span class="demo-controls">appearance with a number of modifiers</span>, as well as assign it an optional <code>onload</code> or <code>onscroll</code> transition modifier (<a href="#reference-items">details</a>).</p>
 | 
			
		||||
                        <div class="items style1 medium onscroll-fade-in">
 | 
			
		||||
                            <section>
 | 
			
		||||
                                <span class="icon style2 major fa-gem"></span>
 | 
			
		||||
                                <h3>One</h3>
 | 
			
		||||
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
 | 
			
		||||
                            </section>
 | 
			
		||||
                            <section>
 | 
			
		||||
                                <span class="icon solid style2 major fa-save"></span>
 | 
			
		||||
                                <h3>Two</h3>
 | 
			
		||||
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
 | 
			
		||||
                            </section>
 | 
			
		||||
                            <section>
 | 
			
		||||
                                <span class="icon solid style2 major fa-chart-bar"></span>
 | 
			
		||||
                                <h3>Three</h3>
 | 
			
		||||
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
 | 
			
		||||
                            </section>
 | 
			
		||||
                            <section>
 | 
			
		||||
                                <span class="icon solid style2 major fa-wifi"></span>
 | 
			
		||||
                                <h3>Four</h3>
 | 
			
		||||
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
 | 
			
		||||
                            </section>
 | 
			
		||||
                            <section>
 | 
			
		||||
                                <span class="icon solid style2 major fa-cog"></span>
 | 
			
		||||
                                <h3>Five</h3>
 | 
			
		||||
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
 | 
			
		||||
                            </section>
 | 
			
		||||
                            <section>
 | 
			
		||||
                                <span class="icon style2 major fa-paper-plane"></span>
 | 
			
		||||
                                <h3>Six</h3>
 | 
			
		||||
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
 | 
			
		||||
                            </section>
 | 
			
		||||
                            <section>
 | 
			
		||||
                                <span class="icon solid style2 major fa-desktop"></span>
 | 
			
		||||
                                <h3>Seven</h3>
 | 
			
		||||
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
 | 
			
		||||
                            </section>
 | 
			
		||||
                            <section>
 | 
			
		||||
                                <span class="icon solid style2 major fa-sync-alt"></span>
 | 
			
		||||
                                <h3>Eight</h3>
 | 
			
		||||
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
 | 
			
		||||
                            </section>
 | 
			
		||||
                            <section>
 | 
			
		||||
                                <span class="icon solid style2 major fa-hashtag"></span>
 | 
			
		||||
                                <h3>Nine</h3>
 | 
			
		||||
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
 | 
			
		||||
                            </section>
 | 
			
		||||
                            <section>
 | 
			
		||||
                                <span class="icon solid style2 major fa-bolt"></span>
 | 
			
		||||
                                <h3>Ten</h3>
 | 
			
		||||
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
 | 
			
		||||
                            </section>
 | 
			
		||||
                            <section>
 | 
			
		||||
                                <span class="icon style2 major fa-envelope"></span>
 | 
			
		||||
                                <h3>Eleven</h3>
 | 
			
		||||
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
 | 
			
		||||
                            </section>
 | 
			
		||||
                            <section>
 | 
			
		||||
                                <span class="icon solid style2 major fa-leaf"></span>
 | 
			
		||||
                                <h3>Twelve</h3>
 | 
			
		||||
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dui turpis, cursus eget orci amet aliquam congue semper. Etiam eget ultrices risus nec tempor elit.</p>
 | 
			
		||||
                            </section>
 | 
			
		||||
                        </div>
 | 
			
		||||
                    </div>
 | 
			
		||||
                </section>
 | 
			
		||||
<!-- Items -->
 | 
			
		||||
<section class="wrapper style1 align-center">
 | 
			
		||||
    <div class="inner">
 | 
			
		||||
        {{ with .title }}<h2>{{ . }}</h2>{{ end }}
 | 
			
		||||
        {{ with .content }}<p>{{ . | safeHTML }}</p>{{ end }}
 | 
			
		||||
        <div class="items {{ .style }}">
 | 
			
		||||
            {{ range .items }}
 | 
			
		||||
                {{ partial "item" . }}
 | 
			
		||||
            {{ end }}
 | 
			
		||||
        </div>
 | 
			
		||||
    </div>
 | 
			
		||||
</section>
 | 
			
		||||
							
								
								
									
										12
									
								
								layouts/partials/picture.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										12
									
								
								layouts/partials/picture.html
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,12 @@
 | 
			
		||||
<article>
 | 
			
		||||
    <a href="{{ .image }}" class="image">
 | 
			
		||||
        <img src="{{ .thumb }}" alt="" />
 | 
			
		||||
    </a>
 | 
			
		||||
    <div class="caption">
 | 
			
		||||
        <h3>{{ .title }}</h3>
 | 
			
		||||
        <p>{{ .content }}</p>
 | 
			
		||||
        <ul class="actions fixed">
 | 
			
		||||
            <li><span class="button small">{{ .button }}</span></li>
 | 
			
		||||
        </ul>
 | 
			
		||||
    </div>
 | 
			
		||||
</article>
 | 
			
		||||
							
								
								
									
										13
									
								
								layouts/partials/spotlight.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										13
									
								
								layouts/partials/spotlight.html
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,13 @@
 | 
			
		||||
<!-- Spotlight -->
 | 
			
		||||
<section class="spotlight {{ .style }}"{{ with .id }} id="{{ . }}"{{ end }}>
 | 
			
		||||
    <div class="content">
 | 
			
		||||
        {{ with .title }}<h2>{{ . }}</h2>{{ end }}
 | 
			
		||||
        {{ with .content }}<p>{{ . | safeHTML }}</p>{{ end }}
 | 
			
		||||
        {{ with .button }}<ul class="actions stacked">
 | 
			
		||||
            <li><a href="{{ .link }}" class="button">{{ .label }}</a></li>
 | 
			
		||||
        </ul>{{ end }}
 | 
			
		||||
    </div>
 | 
			
		||||
    {{ with .image }}<div class="image">
 | 
			
		||||
        <img src="{{ . }}" alt="" />
 | 
			
		||||
    </div>{{ end }}
 | 
			
		||||
</section>
 | 
			
		||||
		Reference in New Issue
	
	Block a user