diff options
author | ⚔️ DR ⚔️ <46758080+caressofsteel@users.noreply.github.com> | 2021-02-01 01:59:57 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-02-01 01:59:57 +0300 |
commit | dcc16e51cc6ebd1b399e7770e090c25a20d3b8c9 (patch) | |
tree | a91e53d5d07debefc417b4e0d5fb414b7afd0bb9 | |
parent | 60f3a622d756edd5e70996a8a43d6567ffcef198 (diff) | |
parent | 459291f0f28be483e671a2de98bb645be95ac84f (diff) |
Merge pull request #6 from applikationsprogramvara/add_template
Adding template support to the theme
-rw-r--r-- | exampleSite/data/banner.yml | 12 | ||||
-rw-r--r-- | exampleSite/data/gallery.yml | 77 | ||||
-rw-r--r-- | exampleSite/data/items.yml | 65 | ||||
-rw-r--r-- | exampleSite/data/spotlight1.yml | 10 | ||||
-rw-r--r-- | exampleSite/data/spotlight2.yml | 9 | ||||
-rw-r--r-- | exampleSite/data/spotlight3.yml | 10 | ||||
-rw-r--r-- | layouts/index.html | 12 | ||||
-rw-r--r-- | layouts/partials/banner.html | 28 | ||||
-rw-r--r-- | layouts/partials/gallery.html | 168 | ||||
-rw-r--r-- | layouts/partials/item.html | 5 | ||||
-rw-r--r-- | layouts/partials/items.html | 81 | ||||
-rw-r--r-- | layouts/partials/picture.html | 12 | ||||
-rw-r--r-- | layouts/partials/spotlight.html | 13 |
13 files changed, 258 insertions, 244 deletions
diff --git a/exampleSite/data/banner.yml b/exampleSite/data/banner.yml new file mode 100644 index 0000000..517f0ab --- /dev/null +++ b/exampleSite/data/banner.yml @@ -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" + diff --git a/exampleSite/data/gallery.yml b/exampleSite/data/gallery.yml new file mode 100644 index 0000000..815d0c9 --- /dev/null +++ b/exampleSite/data/gallery.yml @@ -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" + diff --git a/exampleSite/data/items.yml b/exampleSite/data/items.yml new file mode 100644 index 0000000..8408af3 --- /dev/null +++ b/exampleSite/data/items.yml @@ -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" +
\ No newline at end of file diff --git a/exampleSite/data/spotlight1.yml b/exampleSite/data/spotlight1.yml new file mode 100644 index 0000000..03058b6 --- /dev/null +++ b/exampleSite/data/spotlight1.yml @@ -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" diff --git a/exampleSite/data/spotlight2.yml b/exampleSite/data/spotlight2.yml new file mode 100644 index 0000000..2a9435f --- /dev/null +++ b/exampleSite/data/spotlight2.yml @@ -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" diff --git a/exampleSite/data/spotlight3.yml b/exampleSite/data/spotlight3.yml new file mode 100644 index 0000000..03fa5e5 --- /dev/null +++ b/exampleSite/data/spotlight3.yml @@ -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" diff --git a/layouts/index.html b/layouts/index.html index b78f436..fd1edbf 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -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" . }} diff --git a/layouts/partials/banner.html b/layouts/partials/banner.html index edd0fa7..29acf12 100644 --- a/layouts/partials/banner.html +++ b/layouts/partials/banner.html @@ -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>
\ No newline at end of file +<!-- 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>
\ No newline at end of file diff --git a/layouts/partials/gallery.html b/layouts/partials/gallery.html index 59933d7..11e72c9 100644 --- a/layouts/partials/gallery.html +++ b/layouts/partials/gallery.html @@ -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>
\ No newline at end of file + <!-- Gallery --> + <div class="gallery {{ .style }}"> + {{ range .pictures }} + {{ partial "picture" . }} + {{ end }} + </div> +</section>
\ No newline at end of file diff --git a/layouts/partials/item.html b/layouts/partials/item.html new file mode 100644 index 0000000..f3c5568 --- /dev/null +++ b/layouts/partials/item.html @@ -0,0 +1,5 @@ +<section> + <span class="icon {{ .style }}"></span> + <h3>{{ .name }}</h3> + <p>{{ .content }}</p> +</section> diff --git a/layouts/partials/items.html b/layouts/partials/items.html index 042392d..2c100d1 100644 --- a/layouts/partials/items.html +++ b/layouts/partials/items.html @@ -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>
\ No newline at end of file +<!-- 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>
\ No newline at end of file diff --git a/layouts/partials/picture.html b/layouts/partials/picture.html new file mode 100644 index 0000000..835f66b --- /dev/null +++ b/layouts/partials/picture.html @@ -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> diff --git a/layouts/partials/spotlight.html b/layouts/partials/spotlight.html new file mode 100644 index 0000000..d171c7e --- /dev/null +++ b/layouts/partials/spotlight.html @@ -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>
\ No newline at end of file |