| Linux webm010.cluster103.gra.hosting.ovh.net 5.15.206-ovh-vps-grsec-zfs-classid #1 SMP Fri May 15 02:41:25 UTC 2026 x86_64 Path : /home/cuisinesj/www/new/wp-content/themes/auberge/assets/sass/starter/content/wp/ |
| Current File : /home/cuisinesj/www/new/wp-content/themes/auberge/assets/sass/starter/content/wp/__gallery.scss |
/* FILE: starter/wp/__gallery.scss */
//
// Gallery
//
.gallery {
@extend .clearfix;
@extend .overflow-hidden;
clear: both;
margin: 0 0 ( $golden + em );
a {
display: block;
width: 100%;
}
img {
width: 100%;
}
// Item
$columns: 2; // default gallery layout on small devices
$gutter: 2; // %
&-item {
@extend .overflow-hidden;
float: $left; // {{RTL}}
position: relative;
width: percentage( ( 100 / $columns - $gutter ) / 100 );
padding: 0;
margin: 0 percentage( $gutter / 2 / 100 ) percentage( $gutter / 100 );
.gallery-columns-1 & {
float: none;
width: 100%;
}
@include responsive( map_get( $breakpoint, 'm' ) ) {
$columns: 3; // default gallery layout on medium devices
width: percentage( ( 100 / $columns - $gutter ) / 100 );
.gallery-columns-2 & {
$columns: 2;
width: percentage( ( 100 / $columns - $gutter ) / 100 );
}
}
@include responsive( map_get( $breakpoint, 'l' ) ) {
@for $i from 3 through 9 {
.gallery-columns-#{$i} & {
$columns: $i; // on large devices do not force any default gallery layout, use actual gallery columns setup
width: percentage( ( 100 / $columns - $gutter ) / 100 );
}
}
}
}
// Icon (image wrapper inside the .gallery-item)
&-icon {
@extend .overflow-hidden;
display: block;
}
// Caption
&-caption {
@extend %font_size_small;
@extend %font_style_italic;
@extend %line_height_golden_minor;
@extend .overflow-hidden;
display: block;
position: absolute;
width: 100%;
max-height: 50%;
left: 0;
right: 0;
bottom: 0;
padding: ( $golden_major + em ) 1em;
opacity: 0;
transition: opacity .3s;
.gallery-item:hover & {
opacity: 1;
}
@include responsive( map_get( $breakpoint, 'm' ) ) {
$items: ();
@for $i from 5 through 9 {
$items: append( $items, '.gallery-columns-#{$i} &', comma );
}
#{$items} {
display: none;
}
}
}
}