+ {{ .Title }}
- 
- 
- 
-
- {{ .Content }}
-
- {{ if (eq .Section "artigos") }}
-
-
- Publicado por {{ .Params.author }}
- //
- {{ if .Params.categories }}
- {{ range $index, $name := .Params.categories }}
- {{ $name }}{{ if ne (add $index 1) (len $.Params.categories) }}, {{ end }}
- {{ end }}
- {{ else }}
- Sem categoria
+ {{ $cover := (index (.Resources.ByType "image") 0) }}
+ {{ if $cover }}
+
+ 
+ {{ .Params.covercaption }}
+
{{ end }}
- //
- {{ time.Format "02 de January, 2006" .Date }}
-
- {{ end }}
+ {{ .Content }}
+
+ {{ if (eq .Section "artigos") }}
+
+ {{ partial "byline.html" . }}
+ {{ end }}
+
{{ end }}
diff --git a/layouts/index.html b/layouts/index.html
new file mode 100644
index 0000000..31eea40
--- /dev/null
+++ b/layouts/index.html
@@ -0,0 +1,89 @@
+{{ define "main" }}
+
+ {{ $articles := (where .Site.RegularPages "Params.carrousel" true) }}
+ {{ $len := len $articles }}
+
+
+ Publicado por {{ .Params.author }}
+ //
+ {{ if .Params.categories }}
+ {{ range $index, $name := .Params.categories }}
+ {{ $name }}{{ if ne (add $index 1) (len $.Params.categories) }}, {{ end }}
+ {{ end }}
+ {{ else }}
+ Sem categoria
+ {{ end }}
+ //
+ {{ time.Format "02 de January, 2006" .Date }}
+
+
diff --git a/static/img/carrousel-nav.png b/static/img/carrousel-nav.png
new file mode 100644
index 0000000..7fcc905
Binary files /dev/null and b/static/img/carrousel-nav.png differ
diff --git a/static/styles.css b/static/styles.css
new file mode 100644
index 0000000..e1970e2
--- /dev/null
+++ b/static/styles.css
@@ -0,0 +1,219 @@
+html { padding: 0; margin: 0; }
+body {
+ font-family: "PT Sans", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ max-width: 980px;
+ margin: 1rem auto;
+ display: grid;
+ box-shadow: 0 0px 8px rgba(150, 150, 150, 0.4);
+ padding: 1rem;
+ color: #444;
+
+ grid-template-areas: "header header" "navigation navigation" "main sidebar" "footer footer";
+ grid-template-columns: 65% 30%;
+ justify-content: space-between;
+}
+
+header { grid-area: header; }
+nav { grid-area: navigation; }
+main { grid-area: main; }
+aside { grid-area: sidebar; }
+footer { grid-area: footer; }
+
+a:hover { color: #C4302B; }
+a, a:visited { color: #333; }
+
+h1, h2 {
+ font-family: 'Oswald', Helvetica, Arial, sans-serif;
+ font-weight: normal;
+}
+
+h1 { font-size: 24px; }
+aside h2 {
+ text-transform: uppercase;
+ font-size: 16px;
+}
+
+
+aside { border-left: 1px solid #ccc; padding-left: 1rem; }
+
+aside section { margin-bottom: 2rem; }
+
+aside ul { list-style-type: none; padding: 0; }
+aside ul li { margin-bottom: 0.5rem; }
+
+figure.cover { text-align: center; }
+figure.cover img { max-width: auto; display: block; margin: 0px auto; }
+
+nav {
+ border-top: 1px solid #ccc;
+ border-bottom: 1px solid #ccc;
+ display: flex;
+ flex-wrap: wrap;
+ white-space: nowrap;
+}
+
+nav > * {
+ font-size: 12px;
+ font-family: Helvetica, Arial, sans-serif;
+ margin: 0.75rem 0;
+ padding: 0.25rem 1rem;
+ text-transform: uppercase;
+}
+nav > *:nth-child(n + 2) {
+ border-left: 1px solid #ccc;
+}
+
+main img {
+ max-width: 100%;
+ border: 1px solid #E1E1E1;
+ background-color: #f3f3f3;
+ padding: 4px;
+}
+
+footer {
+ border-top: 1px solid #ccc;
+ padding-top: 1rem;
+}
+
+blockquote {
+ clear: both;
+}
+
+hr {
+ clear: both;
+}
+
+.articles { list-style-type: none; padding: 0; border-top: 1px solid #ccc; padding-top: 3rem; }
+.articles h2 { margin-top: 0; font-size: 22px; }
+.articles.detailed li:nth-child(n + 2)::before {
+ content: "";
+ display: block;
+ height: 22px;
+ width: 100%;
+ background-image: url(/widget-divider.png);
+}
+
+.articles:not(.detailed) .byline { display: none; }
+.articles:not(.detailed) { border-top: none; padding-top: 0.5rem; }
+
+.articles .summary { overflow: auto; }
+.articles .readmore { text-align: right; }
+.articles img { float: left; max-width: 170px; margin-right: 1rem; }
+
+aside h2, .with-divider { background: url(/widget-divider.png); background-repeat: repeat-x; background-position: center; }
+aside h2 span, .with-divider span { background-color: white; padding-right: 0.5rem; }
+
+@media (max-width: 768px) {
+ body {
+ grid-template-areas: "header" "navigation" "main" "sidebar" "footer";
+ grid-template-columns: 1fr;
+ }
+ aside { border-left: none; padding-left: 0; }
+}
+
+.carrousel {
+ position: relative;
+}
+.carrousel ul {
+ list-style-type: none;
+ padding: 0;
+}
+
+.carrousel li {
+ display: block;
+ height: 300px;
+ position: relative;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ justify-content: end;
+}
+
+.carrousel img {
+ display: block;
+ position: absolute;
+ max-width: 100%;
+ z-index: -1;
+ top: 0;
+ border: 0;
+ padding: 0;
+ margin: 0;
+}
+
+.carrousel h2 {
+ color: white;
+ background-color: #C4302B;
+ display: inline-block;
+ box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.9);
+ margin: 0 1rem;
+ padding: 0.25rem 1rem;
+ font-size: 16px;
+}
+
+.carrousel .summary {
+ color: white;
+ background-color: rgb(0,0,0,0.75);
+ margin: 1rem;
+ padding: 0.5rem;
+}
+
+.carrousel .nav {
+ display: block;
+ position: absolute;
+ top: 50%;
+ width: 27px;
+ height: 27px;
+ z-index: 4;
+ cursor: pointer;
+}
+
+.carrousel .nav.prev {
+ background-image: url(/img/carrousel-nav.png);
+ left: 1rem;
+}
+
+.carrousel .nav.next {
+ background-image: url(/img/carrousel-nav.png);
+ background-position: 27px 0;
+ right: 1rem;
+}
+
+.carrousel .carrousel-control { display: none; }
+.carrousel .item { display: none; }
+.carrousel #v0:checked ~ ul .item0,
+.carrousel #v1:checked ~ ul .item1,
+.carrousel #v2:checked ~ ul .item2,
+.carrousel #v3:checked ~ ul .item3,
+.carrousel #v4:checked ~ ul .item4 { display: flex; }
+
+.carrousel-controls {
+ position: absolute;
+ top: 1rem;
+ width: 100%;
+ text-align: center;
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+ z-index: 2;
+}
+
+.carrousel-visible-control {
+ display: block;
+ padding: 5px;
+ width: 10px;
+ height: 10px;
+ border-radius: 12px;
+ border: 1px solid black;
+ background-color: white;
+ cursor: pointer;
+ box-shadow: 0 0px 3px rgba(0, 0, 0, 0.9);
+}
+
+.carrousel #v0:checked ~ .carrousel-controls .carrousel-visible-control[for="v0"],
+.carrousel #v1:checked ~ .carrousel-controls .carrousel-visible-control[for="v1"],
+.carrousel #v2:checked ~ .carrousel-controls .carrousel-visible-control[for="v2"],
+.carrousel #v3:checked ~ .carrousel-controls .carrousel-visible-control[for="v3"],
+.carrousel #v4:checked ~ .carrousel-controls .carrousel-visible-control[for="v4"],
+.carrousel #v5:checked ~ .carrousel-controls .carrousel-visible-control[for="v5"]
+{ background-color: #C4302B !important; }
diff --git a/static/widget-divider.png b/static/widget-divider.png
new file mode 100644
index 0000000..cce2535
Binary files /dev/null and b/static/widget-divider.png differ