feat: add some style
This commit is contained in:
parent
4ce94a900d
commit
c5bf481872
15 changed files with 86 additions and 96 deletions
|
@ -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)
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -9,3 +9,7 @@
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.article {
|
||||||
|
line-height: 1.8rem;
|
||||||
|
}
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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';
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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) {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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'
|
||||||
|
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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 }}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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">
|
||||||
|
|
Loading…
Reference in a new issue