From c5bf481872cbee9a9b78b5af18cbea7bc386b0bd Mon Sep 17 00:00:00 2001 From: Matthieu Bessat Date: Fri, 14 Oct 2022 20:56:56 +0200 Subject: [PATCH] feat: add some style --- README.md | 1 + assets/sass/article.scss | 4 ++++ assets/sass/gallery.scss | 14 ++++++++++++++ assets/sass/general.scss | 5 ++++- assets/sass/main.scss | 4 ++++ assets/sass/news.scss | 2 +- assets/sass/page_container.scss | 15 +++++++++------ assets/sass/single_image.scss | 17 ---------------- config.toml | 4 ++++ layouts/_default/baseof.html | 32 ++++--------------------------- layouts/_default/single.html | 22 ++++++++++----------- layouts/actualites/single.html | 24 +++++++++++------------ layouts/images/single.html | 4 ++-- layouts/partials/footer.html | 6 +++--- layouts/partials/images-list.html | 28 +++++++++++++-------------- 15 files changed, 86 insertions(+), 96 deletions(-) diff --git a/README.md b/README.md index 9e519af..1ec65a4 100644 --- a/README.md +++ b/README.md @@ -17,3 +17,4 @@ - gallerie avec un scroll : https://staticbattery.com/ (on sera toujours obligé de faire de la navigation) + diff --git a/assets/sass/article.scss b/assets/sass/article.scss index 7e57c2b..d09c461 100644 --- a/assets/sass/article.scss +++ b/assets/sass/article.scss @@ -9,3 +9,7 @@ max-width: 100%; } } + +.article { + line-height: 1.8rem; +} diff --git a/assets/sass/gallery.scss b/assets/sass/gallery.scss index ee697ea..c9dfd2f 100644 --- a/assets/sass/gallery.scss +++ b/assets/sass/gallery.scss @@ -5,11 +5,21 @@ grid-template-columns: repeat(12, 1fr); grid-column-gap: 1rem; } + .gallery__side { grid-column-start: 1; grid-column-end: 3; } +.gallery__side { + margin-bottom: .5rem; +} + +.gallery-tags__title { + + +} + .gallery__items-container { grid-column-start: 3; grid-column-end: 13; @@ -21,6 +31,7 @@ grid-gap: 1rem; } + .gallery__item { aspect-ratio: 1; // $size: 25rem; @@ -54,6 +65,9 @@ .gallery__items { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); } + .gallery__side { + margin-bottom: 1rem; + } } @media (max-width: $xs-breakpoint) { diff --git a/assets/sass/general.scss b/assets/sass/general.scss index 10d3f61..824f3e6 100644 --- a/assets/sass/general.scss +++ b/assets/sass/general.scss @@ -1,6 +1,7 @@ body { // font-family: 'Trebuchet MS', Tahoma,sans-serif; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + // font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + font-family: "Open Sans","Segoe UI",HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif; margin: 0; } @@ -28,3 +29,5 @@ a { a:hover { opacity: 0.8; } + + diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 6ed7268..7d6a3a7 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -1,3 +1,4 @@ +$xl-breakpoint: 1800px; $lg-breakpoint: 1600px; $md-breakpoint: 1100px; $sm-breakpoint: 900px; @@ -23,3 +24,6 @@ $secondary: #f15a24; @import 'single_image.scss'; @import 'footer.scss'; +// components +@import 'tags.scss'; + diff --git a/assets/sass/news.scss b/assets/sass/news.scss index 2c79537..6c2155b 100644 --- a/assets/sass/news.scss +++ b/assets/sass/news.scss @@ -18,9 +18,9 @@ figure { margin: 0; + height: 100%; } img { - max-height: 12rem; width: 100%; height: 100%; object-fit: cover; diff --git a/assets/sass/page_container.scss b/assets/sass/page_container.scss index c3f24cd..ef446b0 100644 --- a/assets/sass/page_container.scss +++ b/assets/sass/page_container.scss @@ -6,6 +6,12 @@ padding: 0 2rem; } +@media (min-width: $xl-breakpoint) { + .page-container { + width: 50% !important; + } +} + @media (min-width: $lg-breakpoint) { .page-container { width: 58%; @@ -26,14 +32,11 @@ @media (max-width: $sm-breakpoint) { .page-container { - width: 90%; + width: 100%; + padding: 0 .8rem; } .page-full { - padding: 0; + padding: 0 .8rem; } } -@media (max-width: $xs-breakpoint) { - -} - diff --git a/assets/sass/single_image.scss b/assets/sass/single_image.scss index edfd6a9..8c72249 100644 --- a/assets/sass/single_image.scss +++ b/assets/sass/single_image.scss @@ -39,23 +39,6 @@ } } .single-image__tags { - ul { - margin: 0; - list-style-type: none; - display: flex; - align-items: center; - padding: 0; - li { - border: 1px solid black; - border-radius: 3px; - margin-right: .3rem; - padding: .3rem; - font-size: .9rem; - } - li:last-of-type { - margin-right: 0; - } - } } } diff --git a/config.toml b/config.toml index ced73b3..bf429f7 100644 --- a/config.toml +++ b/config.toml @@ -14,6 +14,10 @@ changefreq = 'weekly' [params] dateFmt = "02.01.2006 15:04" +[params.defaultImage] +local = true +src = "cover/cover.jpg" + [taxonomies] imtag = 'imtags' diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index ba6f1c6..6b2e822 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,33 +1,9 @@ - + - - - - - {{ .Title }} - L'Étoile de Bethéem - - {{ with .Site.Params.description }}{{ end }} - {{ with .Site.Params.author }}{{ end }} - {{/* - {{ range .Site.Params.customCSS -}} - - {{- end }} - */}} - {{/* - {{ with .OutputFormats.Get "RSS" -}} - {{ printf `` .Rel .MediaType.Type .RelPermalink $.Site.Title | safeHTML }} - {{- end }} - */}} - - {{ range .AlternativeOutputFormats -}} - {{ printf `` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} - {{ end -}} - - - - {{ $style := resources.Get "sass/main.scss" | resources.ToCSS | resources.Fingerprint }} - + {{ partial "head.html" . }} + + {{- block "head" . -}}{{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 489e9eb..b35ed48 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,6 +1,6 @@ {{ define "main" }}
-
+

{{ .Title }}

{{ with .Date }} @@ -9,16 +9,16 @@ {{ if .Params.featured_image }} - {{ $featuredImage := .Resources.GetMatch (.Params.featured_image.src | safeURL) }} - {{ if $featuredImage }} - {{ $featuredImage := $featuredImage.Resize "600x" }} -
- - {{ with .Params.featured_image.caption }} -
{{ . }}
- {{ end }} -
- {{ end }} + {{ $featuredImage := .Resources.GetMatch (.Params.featured_image.src | safeURL) }} + {{ if $featuredImage }} + {{ $featuredImage = $featuredImage.Resize "600x" }} +
+ + {{ with .Params.featured_image.caption }} +
{{ . }}
+ {{ end }} +
+ {{ end }} {{ end }} {{ range .Params.tags }} diff --git a/layouts/actualites/single.html b/layouts/actualites/single.html index e2bf402..11454c0 100644 --- a/layouts/actualites/single.html +++ b/layouts/actualites/single.html @@ -12,18 +12,18 @@ {{ end }} - {{ if .Params.featured_image }} - {{ $featuredImage := .Resources.GetMatch (.Params.featured_image.src | safeURL) }} - {{ if $featuredImage }} - {{ $featuredImage = $featuredImage.Resize "600x" }} -
- - {{ with .Params.featured_image.caption }} -
{{ . }}
- {{ end }} -
- {{ end }} - {{ end }} + {{ if .Params.featured_image }} + {{ $featuredImage := .Resources.GetMatch (.Params.featured_image.src | safeURL) }} + {{ if $featuredImage }} + {{ $featuredImage = $featuredImage.Resize "600x" }} +
+ + {{ with .Params.featured_image.caption }} +
{{ . }}
+ {{ end }} +
+ {{ end }} + {{ end }} {{ range .Params.tags }} {{ . }} diff --git a/layouts/images/single.html b/layouts/images/single.html index 026bbb3..c8f5b53 100644 --- a/layouts/images/single.html +++ b/layouts/images/single.html @@ -6,7 +6,7 @@

{{ .Title }}

Étiquettes associées à l'image :
-
    +
      @@ -14,7 +14,7 @@ {{ range .Params.imtags }} -
    • {{ . }}
      • +
    • {{ . }}
      • {{ end }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 86a69f2..c2c5ab0 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,7 +1,7 @@ diff --git a/layouts/partials/images-list.html b/layouts/partials/images-list.html index fde0cd1..a5f4599 100644 --- a/layouts/partials/images-list.html +++ b/layouts/partials/images-list.html @@ -7,21 +7,19 @@ {{ with .Content }}
{{ . }}
{{ end }}
{{ end }} -
Filtrer par étiquettes
-
- -
+

Filtrer par étiquettes :

+