etoiledebethleem/website
4
1
Fork 0
Code Issues 5 Pull requests 1 Projects 1 Releases Packages Activity Actions

feat: add some style

Browse source
This commit is contained in:
Matthieu Bessat 2022-10-14 20:56:56 +02:00
parent 55bd450438
commit e87f1a4e6b
21 changed files with 291 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
README.md
View file

@ -17,3 +17,4 @@
- gallerie avec un scroll : https://staticbattery.com/ (on sera toujours obligé de faire de la navigation) - gallerie avec un scroll : https://staticbattery.com/ (on sera toujours obligé de faire de la navigation)

4
assets/sass/article.scss
View file

@ -9,3 +9,7 @@
max-width: 100%; max-width: 100%;
} }
} }
.article {
line-height: 1.8rem;
}

14
assets/sass/gallery.scss
View file

@ -5,11 +5,21 @@
grid-template-columns: repeat(12, 1fr); grid-template-columns: repeat(12, 1fr);
grid-column-gap: 1rem; grid-column-gap: 1rem;
} }
.gallery__side { .gallery__side {
grid-column-start: 1; grid-column-start: 1;
grid-column-end: 3; grid-column-end: 3;
} }
.gallery__side {
margin-bottom: .5rem;
}
.gallery-tags__title {
}
.gallery__items-container { .gallery__items-container {
grid-column-start: 3; grid-column-start: 3;
grid-column-end: 13; grid-column-end: 13;
@ -21,6 +31,7 @@
grid-gap: 1rem; grid-gap: 1rem;
} }
.gallery__item { .gallery__item {
aspect-ratio: 1; aspect-ratio: 1;
// $size: 25rem; // $size: 25rem;
@ -54,6 +65,9 @@
.gallery__items { .gallery__items {
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
} }
.gallery__side {
margin-bottom: 1rem;
}
} }
@media (max-width: $xs-breakpoint) { @media (max-width: $xs-breakpoint) {

5
assets/sass/general.scss
View file

@ -1,6 +1,7 @@
body { body {
// font-family: 'Trebuchet MS', Tahoma,sans-serif; // 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; margin: 0;
} }
@ -28,3 +29,5 @@ a {
a:hover { a:hover {
opacity: 0.8; opacity: 0.8;
} }

4
assets/sass/main.scss
View file

@ -1,3 +1,4 @@
$xl-breakpoint: 1800px;
$lg-breakpoint: 1600px; $lg-breakpoint: 1600px;
$md-breakpoint: 1100px; $md-breakpoint: 1100px;
$sm-breakpoint: 900px; $sm-breakpoint: 900px;
@ -23,3 +24,6 @@ $secondary: #f15a24;
@import 'single_image.scss'; @import 'single_image.scss';
@import 'footer.scss'; @import 'footer.scss';
// components
@import 'tags.scss';

2
assets/sass/news.scss
View file

@ -18,9 +18,9 @@
figure { figure {
margin: 0; margin: 0;
height: 100%;
} }
img { img {
max-height: 12rem;
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;

15
assets/sass/page_container.scss
View file

@ -6,6 +6,12 @@
padding: 0 2rem; padding: 0 2rem;
} }
@media (min-width: $xl-breakpoint) {
.page-container {
width: 50% !important;
}
}
@media (min-width: $lg-breakpoint) { @media (min-width: $lg-breakpoint) {
.page-container { .page-container {
width: 58%; width: 58%;
@ -26,14 +32,11 @@
@media (max-width: $sm-breakpoint) { @media (max-width: $sm-breakpoint) {
.page-container { .page-container {
width: 90%; width: 100%;
padding: 0 .8rem;
} }
.page-full { .page-full {
padding: 0; padding: 0 .8rem;
} }
} }
@media (max-width: $xs-breakpoint) {
}

17
assets/sass/single_image.scss
View file

@ -39,23 +39,6 @@
} }
} }
.single-image__tags { .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;
}
}
} }
} }

19
assets/sass/tags.scss Normal file
View file

@ -0,0 +1,19 @@
.tags-list {
margin: 0;
list-style-type: none;
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 0;
.tags-list__item {
border: 1px solid black;
border-radius: 3px;
margin-right: .3rem;
padding: .3rem;
font-size: .9rem;
margin-bottom: .4rem;
}
.tags-list__item:last-of-type {
margin-right: 0;
}
}

4
config.toml
View file

@ -14,6 +14,10 @@ changefreq = 'weekly'
[params] [params]
dateFmt = "02.01.2006 15:04" dateFmt = "02.01.2006 15:04"
[params.defaultImage]
local = true
src = "cover/cover.jpg"
[taxonomies] [taxonomies]
imtag = 'imtags' imtag = 'imtags'

30
layouts/_default/baseof.html
View file

@ -1,33 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ .Site.LanguageCode | default "en-us" }}"> <html lang="{{ .Site.LanguageCode }}">
<head> <head>
<meta charset="UTF-8"> {{ partial "head.html" . }}
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ .Title }} - L'Étoile de Bethéem</title> {{- block "head" . -}}{{ end }}
{{ with .Site.Params.description }}<meta name="description" content="{{ . }}">{{ end }}
{{ with .Site.Params.author }}<meta name="author" content="{{ . }}">{{ end }}
{{/*
{{ range .Site.Params.customCSS -}}
<link rel="stylesheet" href="{{ . | relURL }}?rnd={{ now.Unix }}">
{{- end }}
*/}}
{{/*
{{ with .OutputFormats.Get "RSS" -}}
{{ printf `<link rel="%s" type="%s" href="%s" title="%s">` .Rel .MediaType.Type .RelPermalink $.Site.Title | safeHTML }}
{{- end }}
*/}}
{{ range .AlternativeOutputFormats -}}
{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
{{ end -}}
<!-- Note: j'ai galérer à rajouter du scss car en fait y'avait déja une variable $style de définit plus haut... -->
{{ $style := resources.Get "sass/main.scss" | resources.ToCSS | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}">
</head> </head>
<body> <body>
<div class="footer-push"> <div class="footer-push">

4
layouts/_default/single.html
View file

@ -1,6 +1,6 @@
{{ define "main" }} {{ define "main" }}
<main class="page-container"> <main class="page-container">
<article> <article class="article">
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>
{{ with .Date }} {{ with .Date }}
@ -11,7 +11,7 @@
{{ if .Params.featured_image }} {{ if .Params.featured_image }}
{{ $featuredImage := .Resources.GetMatch (.Params.featured_image.src | safeURL) }} {{ $featuredImage := .Resources.GetMatch (.Params.featured_image.src | safeURL) }}
{{ if $featuredImage }} {{ if $featuredImage }}
{{ $featuredImage := $featuredImage.Resize "600x" }} {{ $featuredImage = $featuredImage.Resize "600x" }}
<figure> <figure>
<img alt="" src="{{ $featuredImage.RelPermalink }}" /> <img alt="" src="{{ $featuredImage.RelPermalink }}" />
{{ with .Params.featured_image.caption }} {{ with .Params.featured_image.caption }}

4
layouts/images/single.html
View file

@ -6,7 +6,7 @@
<h1>{{ .Title }}</h1> <h1>{{ .Title }}</h1>
<div class="single-image__property single-image__tags"> <div class="single-image__property single-image__tags">
<div class="property-name">Étiquettes associées à l'image :</div> <div class="property-name">Étiquettes associées à l'image :</div>
<ul> <ul class="tags-list">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-tags" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-tags" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M7.859 6h-2.834a2.025 2.025 0 0 0 -2.025 2.025v2.834c0 .537 .213 1.052 .593 1.432l6.116 6.116a2.025 2.025 0 0 0 2.864 0l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-6.117 -6.116a2.025 2.025 0 0 0 -1.431 -.593z" /> <path d="M7.859 6h-2.834a2.025 2.025 0 0 0 -2.025 2.025v2.834c0 .537 .213 1.052 .593 1.432l6.116 6.116a2.025 2.025 0 0 0 2.864 0l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-6.117 -6.116a2.025 2.025 0 0 0 -1.431 -.593z" />
@ -14,7 +14,7 @@
<path d="M6 9h-.01" /> <path d="M6 9h-.01" />
</svg> </svg>
{{ range .Params.imtags }} {{ range .Params.imtags }}
<li><a href="/imtags/{{ . | urlize }}">{{ . }}</a></li> <li class="tags-list__item"><a href="/imtags/{{ . | urlize }}">{{ . }}</a></li>
{{ end }} {{ end }}
</ul> </ul>
</div> </div>

13
layouts/partials/data/description.html Normal file
View file

@ -0,0 +1,13 @@
<!-- Use site subtitle by default -->
{{ $description := .Site.Params.sidebar.subtitle }}
{{ if .Description }}
<!-- Page description exists -->
{{ $description = .Description }}
{{ else if .IsPage }}
<!-- Use page summary -->
{{ $description = .Summary }}
{{ end }}
{{ return ($description | plainify)}}

39
layouts/partials/data/title.html Normal file
View file

@ -0,0 +1,39 @@
{{- $title := .Title -}}
{{- $siteTitle := .Site.Title -}}
{{- if .IsHome -}}
<!-- Homepage, and it's pagination -->
<!-- Build paginator -->
{{ $pages := where .Site.RegularPages "Section" "in" .Site.Params.mainSections }}
{{ $notHidden := where .Site.RegularPages "Params.hidden" "!=" true }}
{{ $filtered := ($pages | intersect $notHidden) }}
{{ $pag := .Paginate ($filtered) }}
{{ if .Paginator.HasPrev }}
<!-- Paginated. Append page number to title -->
{{ $title = printf "%s - %s" .Paginator $siteTitle }}
{{ else }}
{{ $title = $siteTitle}}
{{ end }}
{{- else if eq .Kind "term" -}}
<!-- Taxonomy page -->
<!-- Build paginator -->
{{ $notHidden := where .Pages "Params.hidden" "!=" true }}
{{ $pag := .Paginate ($notHidden) }}
<!-- {TAXONOMY_TYPE}: {TAXONOMY_TERM} -->
{{ $title = slice (title .Data.Singular) ": " $title }}
{{ if .Paginator.HasPrev }}
<!-- Add page number-->
{{ $title = $title | append " - " .Paginator }}
{{ end }}
{{ $title = $title | append " - " $siteTitle }}
{{ $title = delimit $title "" }}
{{- end -}}
{{ return $title }}

6
layouts/partials/footer.html
View file

@ -1,7 +1,7 @@
<footer class="site-footer"> <footer class="site-footer">
<div class="site-footer__content page-container"> <div class="site-footer__content page-container">
<a href="/"><b>{{ .Site.Title }}</b></a> <a href="/"><b>{{ .Site.Title }}</b></a>.
<a href="/a-propos-du-site">A propos de ce site</a> <a href="/a-propos-du-site">A propos de ce site</a>.
<a href="/contact">Nous contacter</a> <a href="/contact">Nous contacter</a>.
</div> </div>
</footer> </footer>

29
layouts/partials/head.html Normal file
View file

@ -0,0 +1,29 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{- $description := partialCached "data/description" . .RelPermalink -}}
<meta name="description" content="{{ $description }}">
{{- with .Site.Params.author -}}
<meta name="author" content="{{ . }}">
{{ end }}
{{- $title := partialCached "data/title" . .RelPermalink -}}
<title>{{ $title }}</title>
<link rel="canonical" href="{{ .Permalink }}">
{{ partial "opengraph/include.html" . }}
{{ range .AlternativeOutputFormats }}
<link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
{{ end }}
{{ with .Site.Params.favicon }}
<link rel="shortcut icon" href="{{ . }}" />
{{ end }}
<!-- Note: j'ai galérer à rajouter du scss car en fait y'avait déja une variable $style de définit plus haut... -->
{{ $style := resources.Get "sass/main.scss" | resources.ToCSS | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}">

63
layouts/partials/helpers/image.html Normal file
View file

@ -0,0 +1,63 @@
<!-- Modified to have the featured image field as a dict (being able to specify meta data and display option for image) -->
{{ $result := dict "exists" false "permalink" nil "resource" nil "isDefault" false }}
{{ $imageField := "featured_image" }}
{{ $imageValue := index .Context.Params $imageField }}
{{ printf "%#v" "hello debu" }}
{{ if $imageValue }}
{{ $imageValue := index $imageValue "src" }}
<!-- If page has `image` field set -->
{{ $result = merge $result (dict "exists" true) }}
{{ $url := urls.Parse $imageValue }}
{{ if or (eq $url.Scheme "http") (eq $url.Scheme "https") }}
<!-- Is an external image -->
{{ $result = merge $result (dict "permalink" $imageValue) }}
{{ else }}
{{ $pageResourceImage := .Context.Resources.GetMatch (printf "%s" ($imageValue | safeURL)) }}
{{ if $pageResourceImage }}
<!-- If image is found under page bundle -->
{{ $result = merge $result (dict "permalink" $pageResourceImage.RelPermalink) }}
<!-- Disable SVG image processing, not supported by Hugo -->
{{ if ne (path.Ext $imageValue) ".svg" }}
{{ $result = merge $result (dict "resource" $pageResourceImage) }}
{{ end }}
{{ else }}
<!-- Can not find the image under page bundle. Could be a relative linked image -->
{{ $result = merge $result (dict "permalink" (relURL $imageValue)) }}
{{ end }}
{{ end }}
{{ else }}
<!-- Type arg is set, check for defaultImage setting -->
{{ $defaultImageSetting := .Context.Site.Params.defaultImage }}
{{ $result = merge $result (dict "isDefault" true) }}
{{ $result = merge $result (dict "exists" true) }}
{{ if $defaultImageSetting.local }}
{{ $siteResourceImage := resources.GetMatch (printf "%s" ($defaultImageSetting.src | safeURL)) }}
{{ if $siteResourceImage }}
<!-- Try search image under site's assets folder -->
{{ $result = merge $result (dict "permalink" $siteResourceImage.RelPermalink) }}
{{ $result = merge $result (dict "resource" $siteResourceImage) }}
{{ else }}
<!-- Can not find the image -->
{{ errorf "Failed loading image: %q" $defaultImageSetting.src }}
{{ $result = merge $result (dict "exists" false) }}
{{ end }}
{{ else }}
<!-- External image -->
{{ $result = merge $result (dict "permalink" (relURL $defaultImageSetting.src)) }}
{{ end }}
{{ end }}
{{ return $result }}

10
layouts/partials/images-list.html
View file

@ -7,22 +7,20 @@
{{ with .Content }}<div>{{ . }}</div>{{ end }} {{ with .Content }}<div>{{ . }}</div>{{ end }}
</div> </div>
{{ end }} {{ end }}
<div class="gallery-tags__title">Filtrer par étiquettes</div> <p class="gallery-tags__title">Filtrer par étiquettes :</p>
<div class="gallery-tags__list"> <ul class="gallery-tags__list tags-list">
<ul>
{{- if eq (.Scratch.Get "image_list_context") "imtags" -}} {{- if eq (.Scratch.Get "image_list_context") "imtags" -}}
<li> <li class="gallery-tags__item tags-list__item">
<a href="/images">Tout</a> <a href="/images">Tout</a>
</li> </li>
{{- end -}} {{- end -}}
{{- range .Site.Taxonomies.imtags -}} {{- range .Site.Taxonomies.imtags -}}
<li> <li class="gallery-tags__item tags-list__item">
<a href="{{ .Page.RelPermalink }}">{{ .Page.Title }}</a> <a href="{{ .Page.RelPermalink }}">{{ .Page.Title }}</a>
</li> </li>
{{- end -}} {{- end -}}
</ul> </ul>
</div> </div>
</div>
<div class="gallery__items-container"> <div class="gallery__items-container">
<div class="gallery__items"> <div class="gallery__items">

42
layouts/partials/opengraph/include.html Normal file
View file

@ -0,0 +1,42 @@
{{- $title := partialCached "data/title" . .RelPermalink -}}
{{- $description := partialCached "data/description" . .RelPermalink -}}
<meta property='og:title' content='{{ $title }}'>
<meta property='og:description' content='{{ $description }}'>
<meta property='og:url' content='{{ .Permalink }}'>
<meta property='og:site_name' content='{{ .Site.Title }}'>
<meta property='og:type' content='
{{- if .IsPage -}}
article
{{- else -}}
website
{{- end -}}
'>
<meta property='og:locale' content='{{ .Site.LanguageCode }}'>
{{- if .IsPage -}}
<meta property='article:section' content='{{ .Section | title }}' />
{{- range .Params.tags -}}
<meta property='article:tag' content='{{ . }}' />
{{- end -}}
{{- end -}}
{{- if .IsPage -}}
{{- if not .Date.IsZero -}}
<meta property='article:published_time' content='{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}'/>
{{- end -}}
{{- if not .Lastmod.IsZero -}}
<meta property='article:modified_time' content='{{ .Lastmod.Format "2006-01-02T15:04:05-07:00" | safeHTML }}'/>
{{- end -}}
{{- else -}}
{{- if not .Site.LastChange.IsZero -}}
<meta property='og:updated_time' content='{{ .Site.LastChange.Format " 2006-01-02T15:04:05-07:00 " | safeHTML }}'/>
{{- end -}}
{{- end -}}
{{ $image := partialCached "helpers/image" (dict "Context" . "Type" "opengraph") .RelPermalink "opengraph" }}
{{- if $image.exists -}}
<meta property='og:image' content='{{ absURL $image.permalink }}' />
{{- end -}}