Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
image gallery for sculpin with rokka.io and bootstrap. example for the article at https://www.liip.ch/en/blog/integrating-rokka-io-with-the-sculpin-static-site-generator
# the file is markdown, but gist renders markdown. remove ".raw" and this line
---
title: Pictures example post
images:
-
file: TestImage.jpg
caption: This is a test
note: Additional stuff to print next to the image
-
file: TestImage2.jpg
caption: This is a test
note: Additional stuff to print next to the image
---
Some additional text of this post.
/**
* Change the bootstrap carousel and modal to leave as much room for the image as possible, while retaining functionality.
*
* I really am no frontend dev, please don't hang me ;-)
*/
#gallery {
margin-top: 40px;
a:hover {
text-decoration: none;
}
.row {
text-align: center;
}
.col {
margin: 16px;
}
h2 {
margin-top: 6px;
margin-bottom: 2px;
font-size: 16px;
color: black;
font-weight: bold;
text-transform: none;
}
h3 {
font-size: 12px;
color: #333;
font-weight: normal;
}
}
.modal-content {
a:hover {
text-decoration: none;
}
.close {
position: absolute;
top: 0;
right: 0;
}
.carousel-control-next {
margin-top: 30px;
}
}
.modal-body {
text-align: center;
}
img {
max-width: 98vw;
}
.carousel {
h2 {
font-size: 18px;
color: black;
font-weight: bold;
text-transform: none;
margin-top: 2px;
margin-bottom: 0;
}
h3 {
font-size: 12px;
color: #333;
font-weight: normal;
margin-bottom: 0;
}
img {
max-height: 91vh;
max-width: 100vw;
}
}
.carousel-control-next, .carousel-control-prev {
filter: drop-shadow( 2px 2px 2px #000 );
opacity: 0;
}
@media (max-width: 575px) {
.modal-dialog {
margin: 0;
}
.modal-body {
padding: 0;
}
}
@media (min-width: 576px) {
.carousel {
h2 {
margin-top: 6px;
margin-bottom: 2px;
font-size: 24px;
color: black;
font-weight: bold;
}
h3 {
font-size: 18px;
}
img {
max-height: 80vh;
max-width: 95vw;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment