x0rg
/
agr.asia
forked from Git/hugo-story
1
0
Fork 0
Code Pull Requests Activity

Merge pull request #6 from applikationsprogramvara/add_template 

Adding template support to the theme
This commit is contained in:
⚔️ DR ⚔️ 2021-01-31 17:59:57 -05:00 committed by GitHub
parent 60f3a622d7 459291f0f2
commit dcc16e51cc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 258 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
exampleSite/data/banner.yml Normal file
View 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
View 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
View 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
View 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 &ndash; as its name implies &ndash; 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
View 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
View 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"

12
layouts/index.html
View File

@ -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" . }}

28
layouts/partials/banner.html
View File

@ -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>

168
layouts/partials/gallery.html
View File

@ -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>
<div class="caption"> </section>
<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>

5
layouts/partials/item.html Normal file
View File

@ -0,0 +1,5 @@
<section>
<span class="icon {{ .style }}"></span>
<h3>{{ .name }}</h3>
<p>{{ .content }}</p>
</section>

81
layouts/partials/items.html
View File

@ -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> </div>
</section> </div>
<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>

12
layouts/partials/picture.html Normal file
View 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
View 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>