diff --git a/assets/sass/footer.scss b/assets/sass/footer.scss new file mode 100644 index 0000000..ccb2fb8 --- /dev/null +++ b/assets/sass/footer.scss @@ -0,0 +1,4 @@ +footer { + margin-top: 1rem; + background-color: blue; +} diff --git a/assets/sass/gallery.scss b/assets/sass/gallery.scss index f98fd7b..ee697ea 100644 --- a/assets/sass/gallery.scss +++ b/assets/sass/gallery.scss @@ -17,7 +17,7 @@ .gallery__items { display: grid; - grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); + grid-template-columns: repeat(4, minmax(13rem, 1fr)); grid-gap: 1rem; } @@ -41,8 +41,24 @@ justify-content: space-between; } +@media (max-width: $lg-breakpoint) { + // .gallery__items { + // grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)) + // } +} + @media (max-width: $md-breakpoint) { .gallery { - display: block; + display: block; + } + .gallery__items { + grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); } } + +@media (max-width: $xs-breakpoint) { + .gallery__items { + grid-template-columns: 1fr; + } +} + diff --git a/assets/sass/main.scss b/assets/sass/main.scss index fed5b3c..c9d18c9 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -1,4 +1,4 @@ -$lg-breakpoint: 1500px; +$lg-breakpoint: 1600px; $md-breakpoint: 1100px; $sm-breakpoint: 900px; $xs-breakpoint: 400px; @@ -17,4 +17,5 @@ $secondary: red; @import 'header.scss'; @import 'gallery.scss'; @import 'single_image.scss'; +@import 'footer.scss'; diff --git a/assets/sass/single_image.scss b/assets/sass/single_image.scss index 5730a58..edfd6a9 100644 --- a/assets/sass/single_image.scss +++ b/assets/sass/single_image.scss @@ -26,6 +26,8 @@ .single-image__property { display: flex; align-items: center; + margin-bottom: .2rem; + min-height: 2rem; div:first-of-type { margin-right: 1rem; } @@ -41,6 +43,7 @@ margin: 0; list-style-type: none; display: flex; + align-items: center; padding: 0; li { border: 1px solid black; @@ -68,3 +71,18 @@ } } + +@media (max-width: $sm-breakpoint) { + .single-image { + .single-image__property { + display: block; + } + } + +} + + + + + + diff --git a/content/images/3/index.md b/content/images/3/index.md index a62059b..0ccc312 100644 --- a/content/images/3/index.md +++ b/content/images/3/index.md @@ -5,5 +5,6 @@ mime_type: image/jpeg imtags: - crypte - etoile +#inception: 2000-10-08 --- diff --git a/layouts/images/single.html b/layouts/images/single.html index 8ddc6da..fec4490 100644 --- a/layouts/images/single.html +++ b/layouts/images/single.html @@ -6,20 +6,48 @@
{{ .Params.original_name }}+
{{ .Params.original_name }}+