mirror of
https://github.com/caressofsteel/hugo-story.git
synced 2024-12-22 09:35:07 +01:00
Merge pull request #6 from applikationsprogramvara/add_template
Adding template support to the theme
This commit is contained in:
⚔️ DR ⚔️
GitHub
commit
dcc16e51cc
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">
|
<div id="wrapper" class="divided">
|
||||||
|
|
||||||
<!-- Main -->
|
<!-- Main -->
|
||||||
{{ partial "banner" . }}
|
{{ partial "banner" site.Data.banner }}
|
||||||
{{ partial "spotlight-01-left" . }}
|
{{ partial "spotlight" site.Data.spotlight1 }}
|
||||||
{{ partial "spotlight-02-right" . }}
|
{{ partial "spotlight" site.Data.spotlight2 }}
|
||||||
{{ partial "spotlight-03-left" . }}
|
{{ partial "spotlight" site.Data.spotlight3 }}
|
||||||
{{ partial "gallery" . }}
|
{{ partial "gallery" site.Data.gallery }}
|
||||||
{{ partial "items" . }}
|
{{ partial "items" site.Data.items }}
|
||||||
{{ partial "elements" . }}
|
{{ partial "elements" . }}
|
||||||
{{ partial "elements_reference" . }}
|
{{ partial "elements_reference" . }}
|
||||||
{{ partial "template/footer" . }}
|
{{ partial "template/footer" . }}
|
||||||
|
|||||||
@ -1,14 +1,14 @@
|
|||||||
<!-- Banner -->
|
<!-- Banner -->
|
||||||
<section class="banner style1 orient-left content-align-left image-position-right fullscreen onload-image-fade-in onload-content-fade-right">
|
<section class="banner {{ .style }}">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
{{ with .Site.Title }}<h1>{{.}}</h1>{{end}}
|
{{ with .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}}
|
{{ with .subtitle }}<p class="major">{{ . | safeHTML }}</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>
|
{{ with .content }}<p>{{ . | safeHTML }}</p>{{ end }}
|
||||||
<ul class="actions stacked">
|
{{ with .button }}<ul class="actions stacked">
|
||||||
<li><a href="#first" class="button large wide smooth-scroll-middle">Get Started</a></li>
|
<li><a href="{{ .link }}" class="button primary large wide smooth-scroll-middle">{{ .label }}</a></li>
|
||||||
</ul>
|
</ul>{{ end }}
|
||||||
</div>
|
</div>
|
||||||
<div class="image">
|
{{ with .image }}<div class="image">
|
||||||
{{ with .Site.Params.logo }}<img src="{{.}}" alt="Hugo Story" />{{end}}
|
<img src="{{.}}" alt="Hugo Story" />
|
||||||
</div>
|
</div>{{end}}
|
||||||
</section>
|
</section>
|
||||||
@ -1,156 +1,14 @@
|
|||||||
<!-- Gallery -->
|
<!-- Gallery -->
|
||||||
<section class="wrapper style1 align-center">
|
<section class="wrapper style1 align-center">
|
||||||
<div class="inner">
|
<div class="inner">
|
||||||
<h2>Gallery</h2>
|
<h2>{{ .title }}</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>
|
<p>{{ .content | safeHTML }}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Gallery -->
|
<!-- Gallery -->
|
||||||
<div class="gallery style2 medium lightbox onscroll-fade-in">
|
<div class="gallery {{ .style }}">
|
||||||
<article>
|
{{ range .pictures }}
|
||||||
<a href="images/gallery/fulls/01.jpg" class="image">
|
{{ partial "picture" . }}
|
||||||
<img src="images/gallery/thumbs/01.jpg" alt="" />
|
{{ end }}
|
||||||
</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>
|
</div>
|
||||||
</article>
|
</section>
|
||||||
<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>
|
|
||||||
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 -->
|
<!-- Items -->
|
||||||
<section class="wrapper style1 align-center">
|
<section class="wrapper style1 align-center">
|
||||||
<div class="inner">
|
<div class="inner">
|
||||||
<h2>Items</h2>
|
{{ with .title }}<h2>{{ . }}</h2>{{ end }}
|
||||||
<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>
|
{{ with .content }}<p>{{ . | safeHTML }}</p>{{ end }}
|
||||||
<div class="items style1 medium onscroll-fade-in">
|
<div class="items {{ .style }}">
|
||||||
<section>
|
{{ range .items }}
|
||||||
<span class="icon style2 major fa-gem"></span>
|
{{ partial "item" . }}
|
||||||
<h3>One</h3>
|
{{ end }}
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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>
|
||||||
Loading…
Reference in New Issue
Block a user