Files
Popsu-coloque/web/themes/custom/popsu_colloque/css/components/thumbnails.scss
T
2020-07-16 19:31:05 +02:00

124 lines
1.9 KiB
SCSS

/**
* @file
* Presentational styles for Drupal stark theme layout.
*
* It is left empty for testing purposes.
*
* @see https://www.drupal.org/project/drupal/issues/2349711
*/
.thumbnails{
margin: 1rem 0rem;
// max-width: 300px;
min-width: 250px;
height: auto;
width: calc(100% / 4 );
background: white;
transform: scale(1);
@include shadow;
a{
display: block;
height: 100%;
}
& > .__wrap{
padding: 1rem;
}
.__media{
margin-right: 1rem;
figure{
height: 100%;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
.d-flex{
padding: 1rem;
}
}
.thumbnails{
figure{
height: 100px;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
.programme{
.row{
margin: 0;
}
.thumbnails{
width: 100%;
margin: 0;
figure{
height: 250px;
}
}
}
@media screen and (min-width: 992px) {
.programme{
.row{
margin: $gutter1 calc(-#{$gutter1});
}
.thumbnails{
width: calc( 50% - #{$gutter1} * 2);
margin: 0 $gutter1;
figure{
height: 250px;
}
}
}
}
article{
.__publications{
& > div{
article{
width: 100%;
@include shadow;
figure{
padding: 1rem;
.__media{
margin-right: 1rem;
}
figcaption {
width: 80%;
}
}
}
}
}
}
@media screen and (min-width: 992px) {
article{
.__publications{
& > div{
margin: 0 calc(-#{$gutter1});
article{
width: calc( 50% - #{$gutter1} * 2);
margin: 0 $gutter1;
@include shadow;
figure{
padding: 1rem;
.__media{
margin-right: 1rem;
}
figcaption {
width: 80%;
}
}
}
}
}
}
}