diff options
author | mspnr <mspnr@mail.ru> | 2021-01-31 18:47:21 +0300 |
---|---|---|
committer | mspnr <mspnr@mail.ru> | 2021-01-31 18:47:21 +0300 |
commit | 6524098340fa260c0268c8b343a56ecfe47dc4d6 (patch) | |
tree | f0628728434944acaebc36f39d8e83e2aea25b1d | |
parent | 51e38e582cc05d7055423e73f7f951427aa62f55 (diff) |
adding template support for spotlights
-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 | 6 | ||||
-rw-r--r-- | layouts/partials/spotlight.html | 13 |
5 files changed, 45 insertions, 3 deletions
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 278846d..e795826 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -16,9 +16,9 @@ <!-- Main --> {{ partial "banner" site.Data.banner }} - {{ partial "spotlight-01-left" . }} - {{ partial "spotlight-02-right" . }} - {{ partial "spotlight-03-left" . }} + {{ partial "spotlight" site.Data.spotlight1 }} + {{ partial "spotlight" site.Data.spotlight2 }} + {{ partial "spotlight" site.Data.spotlight3 }} {{ partial "gallery" . }} {{ partial "items" . }} {{ partial "elements" . }} 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 |