--- /dev/null
+/// Inspired by:
+/// Forty by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Breadcrumbs */
+ div#breadcrumbs {
+ font-size: 1rem;
+ ol.crumbs {
+ cursor: default;
+ list-style: none;
+ padding-left: 0;
+
+ li {
+ display: inline-block;
+ padding-left: 0;
+ vertical-align: middle;
+
+ &:first-child {
+ padding-right: 0.75em;
+ }
+
+ &:last-child {
+ padding-left: 0.75em;
+ }
+ }
+
+ @include breakpoint('<=xsmall') {
+ li {
+ &:nth-child(n+2):nth-last-child(n+2) {
+ display: none;
+ }
+
+ &:first-child {
+ padding-right: 0;
+ }
+ }
+ }
+ }
+ }
}
}
}
- }
\ No newline at end of file
+ }
+
+
+ ul.prev-next {
+ cursor: default;
+ list-style: none;
+ padding-left: 0;
+
+ li {
+ display: inline-block;
+ padding-left: 0;
+ vertical-align: middle;
+
+ &:first-child {
+ padding-right: 0.75em;
+ }
+
+ &:last-child {
+ padding-left: 0.75em;
+ }
+ }
+
+ @include breakpoint('<=xsmall') {
+ li {
+ &:nth-child(n+2):nth-last-child(n+2) {
+ display: none;
+ }
+
+ &:first-child {
+ padding-right: 0;
+ }
+ }
+ }
+ }
+/// Transforms shorthand that can range from 1-to-4 values to be 4 values.
+///
+/// @argument {list} $shorthand
+///
+/// @example scss
+/// .element {
+/// margin: _unpack-shorthand(1em 2em);
+/// }
+///
+/// // CSS Output
+/// .element {
+/// margin: 1em 2em 1em 2em;
+/// }
+///
+/// @access private
+
+@function _unpack-shorthand($shorthand) {
+ @if length($shorthand) == 1 {
+ @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1);
+ } @else if length($shorthand) == 2 {
+ @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2);
+ } @else if length($shorthand) == 3 {
+ @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2);
+ } @else {
+ @return $shorthand;
+ }
+}
+
/// hide-visually mixin from Bourbon < https://bourbon.io >
///
/// Hides an element visually while still allowing the content to be accessible
width: auto;
}
}
+
+/// Provides a concise, one-line method for setting an element’s positioning
+/// properties: `position`, `top`, `right`, `bottom` and `left`. Use a `null`
+/// value to “skip” an edge of the box.
+///
+/// @argument {string} $position
+/// A CSS position value.
+///
+/// @argument {list} $box-edge-values
+/// List of lengths; accepts CSS shorthand.
+///
+/// @example scss
+/// .element {
+/// @include position(relative, 0 null null 10em);
+/// }
+///
+/// // CSS Output
+/// .element {
+/// left: 10em;
+/// position: relative;
+/// top: 0;
+/// }
+///
+/// @example scss
+/// .element {
+/// @include position(absolute, 0);
+/// }
+///
+/// // CSS Output
+/// .element {
+/// position: absolute;
+/// top: 0;
+/// right: 0;
+/// bottom: 0;
+/// left: 0;
+/// }
+///
+/// @require {function} _is-length
+///
+/// @require {function} _unpack-shorthand
+
+@mixin position(
+ $position,
+ $box-edge-values
+) {
+ $box-edge-values: _unpack-shorthand($box-edge-values);
+ $offsets: (
+ "top": nth($box-edge-values, 1),
+ "right": nth($box-edge-values, 2),
+ "bottom": nth($box-edge-values, 3),
+ "left": nth($box-edge-values, 4),
+ );
+
+ position: $position;
+
+ @each $offset, $value in $offsets {
+ @if _is-length($value) {
+ #{$offset}: $value;
+ }
+ }
+}
-// BOURBON
-@import "bourbon/bourbon";
// HTML5UP
@import 'libs/vars';
@import 'libs/functions';
@import 'components/actions';
@import 'components/icons';
@import 'components/pagination';
+ @import 'components/breadcrumbs';
@import 'components/table';
@import 'components/button';
@import 'components/tiles';
{{ .Content }}
</div>
</article>
+ <article>
+ <div class="inner">
+ {{ partial "pagination.html" . }}
+ </div>
+ </article>
</section>
<section id="two" class="spotlights">
<!-- Ranges through content/posts/*.md -->
- {{ range .Pages }}
+ {{ range .Paginator.Pages }}
<section>
<a class="image" href="{{.Permalink}}">
- <img src="{{ "bg/bg2.jpg" | absURL}}" alt="suca">
+ <img src="{{ .Params.featured_image | absURL}}" alt=".Title">
</a>
<div class="content">
<div class="inner">
{{ end }}
</h3>
</header>
- <p>here goes an abstract</p>
+ <p>{{ .Params.excerpt }}</p>
<ul class="actions">
<li><a href="{{.Permalink}}" class="button">Read More</a></li>
</ul>
</section>
{{ end }}
</section>
+<section id="three">
+ <div class="inner">
+ {{ partial "pagination.html" . }}
+ </div>
+</section>
{{ end }}
</header>
<div class="content">
<p>{{ .Site.Params.Description }}</p>
- <ul class="actions">
- <li><a href="#one" class="button next scrolly">Let's go!!</a></li>
- </ul>
</div>
</div>
</section>
<a id="top" class="skip-link screen-reader-text" href="#primary">skip to content</a>
<div id="wrapper">
{{- partial "header.html" . -}}
+ <section id="banner" class="major">
+ <div class="inner">
+ <header class="major">
+ <h1>{{ .Site.Title }}</h1>
+ </header>
+ <div class="content">
+ <p>{{ .Site.Params.Description }}</p>
+ </div>
+ </div>
+ </section>
<div id="main">
{{- block "page-main" . }}{{- end }}
</div>
<div id="breadcrumbs">
- <p>You're in: </p>
<ol class="crumbs" itemscope itemtype="https://schema.org/BreadcrumbList">
{{- /* declare a 'variable' to store the each link position */}}
{{- $data := newScratch }}
-
+ <li>You're in: </li>
{{- range $index, $value := .Ancestors.Reverse }}
<li class="crumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
{{- /* read the index from loop and add 'one', because it starts counting from zero */}}
</a>
{{- /* pass the counter value into schema attribute */}}
<meta itemprop="position" content='{{ $data.Get "counter"}}' />
+ <span class="divider"> / </span>
</li>
{{- end }}
<li class="crumb-item active" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
{{ if .IsPage }}
{{ if isset .Params "featured_image" }}
<style media="screen">
- header#masthead {
- height: 60vh;
+ #banner {
background-image: url( {{ $.Params.featured_image | absURL }} );
background-repeat: no-repeat;
background-position: center center;
--- /dev/null
+<!--
+//
+// PAGE NUMBERS
+//––––––––––––––––––––––––––––––––––––––––––––––––––
+// https://glennmccomb.com/articles/how-to-build-custom-hugo-pagination/
+-->
+{{ $paginator := .Paginator }}
+
+<!-- Number of links either side of the current page. -->
+{{ $adjacent_links := 2 }}
+
+<!-- $max_links = ($adjacent_links * 2) + 1 -->
+{{ $max_links := (add (mul $adjacent_links 2) 1) }}
+
+<!-- $lower_limit = $adjacent_links + 1 -->
+{{ $lower_limit := (add $adjacent_links 1) }}
+
+<!-- $upper_limit = $paginator.TotalPages - $adjacent_links -->
+{{ $upper_limit := (sub $paginator.TotalPages $adjacent_links) }}
+
+<!-- If there's more than one page. -->
+{{ if gt $paginator.TotalPages 1 }}
+
+ <ul class="pagination align-center">
+
+ <!-- First page. -->
+ {{ if ne $paginator.PageNumber 1 }}
+ <li>
+ <a class="page" href="{{ $paginator.First.URL }}">
+ <span class="button small">FIRST</span>
+ </a>
+ </li>
+ {{ end }}
+
+ <!-- Previous page. -->
+ {{ if $paginator.HasPrev }}
+ <li>
+ <a class="page" href="{{ $paginator.Prev.URL }}">
+ <span class="button small">PREV</span>
+ </a>
+ </li>
+ {{ end }}
+
+ <!-- Page numbers. -->
+ {{ range $paginator.Pagers }}
+
+ {{ $.Scratch.Set "page_number_flag" false }}
+
+
+ <!-- Advanced page numbers. -->
+ {{ if gt $paginator.TotalPages $max_links }}
+
+
+ <!-- Lower limit pages. -->
+ <!-- If the user is on a page which is in the lower limit. -->
+ {{ if le $paginator.PageNumber $lower_limit }}
+
+ <!-- If the current loop page is less than max_links. -->
+ {{ if le .PageNumber $max_links }}
+ {{ $.Scratch.Set "page_number_flag" true }}
+ {{ end }}
+
+
+ <!-- Upper limit pages. -->
+ <!-- If the user is on a page which is in the upper limit. -->
+ {{ else if ge $paginator.PageNumber $upper_limit }}
+
+ <!-- If the current loop page is greater than total pages minus $max_links -->
+ {{ if gt .PageNumber (sub $paginator.TotalPages $max_links) }}
+ {{ $.Scratch.Set "page_number_flag" true }}
+ {{ end }}
+
+
+ <!-- Middle pages. -->
+ {{ else }}
+
+ {{ if and ( ge .PageNumber (sub $paginator.PageNumber $adjacent_links) ) ( le .PageNumber (add $paginator.PageNumber $adjacent_links) ) }}
+ {{ $.Scratch.Set "page_number_flag" true }}
+ {{ end }}
+
+ {{ end }}
+
+
+ <!-- Simple page numbers. -->
+ {{ else }}
+
+ {{ $.Scratch.Set "page_number_flag" true }}
+
+ {{ end }}
+
+ <!-- Output page numbers. -->
+ {{ if eq ($.Scratch.Get "page_number_flag") true }}
+ <li>
+ <a href="{{ .URL }}" class="page {{ if eq . $paginator }} active{{ end }}">
+ {{ .PageNumber }}
+ </a>
+ </li>
+ {{ end }}
+
+ {{ end }}
+
+ <!-- Next page. -->
+ {{ if $paginator.HasNext }}
+ <li>
+ <a href="{{ $paginator.Next.URL }}" class="page">
+ <span class="button small">NEXT</span>
+ </a>
+ </li>
+ {{ end }}
+
+ <!-- Last page. -->
+ {{ if ne $paginator.PageNumber $paginator.TotalPages }}
+ <li>
+ <a class="page" href="{{ $paginator.Last.URL }}">
+ <span class="button small">LAST</span>
+ </a>
+ </li>
+ {{ end }}
+
+ </ul><!-- .pagination -->
+{{ end }}
\ No newline at end of file
--- /dev/null
+ <ul class="prev-next align-center">
+ {{with .NextInSection }}
+ <li><a class="button small" href="{{.RelPermalink}}">Next Article</a></li>
+ {{end}}
+ {{with .PrevInSection }}
+ <li><a class="button small" href="{{.RelPermalink}}">Previous Article</a></li>
+ {{end}}
+ </ul>
<!DOCTYPE html>
<html lang="{{ $.Site.LanguageCode | default "en" }}">
{{- partial "head.html" . -}}
- <body class="page home">
- <div id="page">
- <a id="top" class="skip-link screen-reader-text" href="#primary">skip to content</a>
+ <body class="article is-preload">
+ <a id="top" class="skip-link screen-reader-text" href="#primary">skip to content</a>
+ <div id="wrapper">
{{- partial "header.html" . -}}
- {{- partial "breadcrumbs.html" . -}}
- <div id="content" class="site-content">
- <div id="primary" class="content-area">
- <main id="main" class="site-main">
- {{- block "page-main" . }}{{- end }}
- </main>
+
+ <section id="banner" class="major">
+ <div class="inner">
+ <header class="major">
+ <h1>{{ .Title }}</h1>
+ </header>
+ <div class="content">
+ <p>{{ .Params.excerpt }}</p>
+ </div>
</div>
+ </section>
+
+ <div id="main">
+ <section id="one">
+ <div class="inner">
+ {{- partial "breadcrumbs.html" . -}}
+ {{- partial "prev-next.html" . -}}
+ </div>
+ </section>
+ <section id="two">
+ {{- block "article-main" . }}{{- end }}
+ </section>
+ <section id="three">
+ <div class="inner">articoli correlati</div>
+ </section>
</div>
{{- partial "footer.html" . -}}
</div>
+ {{- partial "footer-addition.html" . -}}
</body>
</html>
-{{ define "page-main" }}
-<article class="single-page">
- <div id="page-content">
- {{ .Content }}
+{{ define "article-main" }}
+<article>
+ <div class="inner">
+ <p>{{ .Content }}</p>
+ <p>firma e metadata</p>
</div>
</article>
{{ end }}
