184 lines
2.7 KiB
SCSS
184 lines
2.7 KiB
SCSS
.gallery-block {
|
|
margin: 2em 0 0;
|
|
display: block;
|
|
}
|
|
|
|
.gallery-period{
|
|
margin-bottom: 2em;
|
|
|
|
& > div{
|
|
margin: 1.5em 0 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
p.period{
|
|
text-align: center;
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.gallery-album {
|
|
margin: 0 1em 2em;
|
|
|
|
h3{
|
|
margin: 0 0 0.35em;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.album-block {
|
|
width: 100%;
|
|
margin: 1em auto 2em;
|
|
|
|
h3 {
|
|
text-align: center;
|
|
margin: 1.5em 0 1em;
|
|
}
|
|
|
|
.fotorama__nav-wrap {
|
|
margin: 6em 0 0;
|
|
}
|
|
|
|
.fotorama__stage{
|
|
overflow: inherit;
|
|
}
|
|
|
|
.fotorama__stage__frame{
|
|
overflow: inherit;
|
|
}
|
|
|
|
.album {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.album-info {
|
|
width: 80%;
|
|
margin: 0 0 3em;
|
|
}
|
|
|
|
.album-info p {
|
|
margin: 0 0 .5em;
|
|
}
|
|
|
|
.album-item {
|
|
width: 80%;
|
|
box-sizing: border-box;
|
|
margin: 0 0 4em;
|
|
position: relative;
|
|
background-color: white;
|
|
padding: 6em;
|
|
box-shadow: 0 4px 14px -10px rgba(0,0,0, .85);
|
|
|
|
&.vertical {
|
|
width: 47%;
|
|
min-width: 30em;
|
|
max-width: 35em;
|
|
}
|
|
|
|
img{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
border: .25em solid #eee;
|
|
border-top-color: #bbb;
|
|
border-left-color: #ddd;
|
|
}
|
|
}
|
|
|
|
.product-info{
|
|
text-align: center;
|
|
position: absolute;
|
|
width: 100%;
|
|
left: 0;
|
|
bottom: 1em;
|
|
|
|
& > div {
|
|
display: inline-block;
|
|
padding: .5em 1em;
|
|
background-color: white;
|
|
border: 1px solid #f5f5f5;
|
|
border-radius: .25em;
|
|
box-shadow: 0 5p/x 4px -4px rgba(0,0,0, .5);
|
|
}
|
|
|
|
p {
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 31.25em) {
|
|
.album-block {
|
|
width: 100%;
|
|
margin: 1em auto 2em;
|
|
|
|
h3 {
|
|
text-align: left;
|
|
margin: 1em 0 0.5em;
|
|
}
|
|
|
|
.album-info{
|
|
width: 100%;
|
|
margin: 0 0 2em;
|
|
}
|
|
|
|
.album-item {
|
|
width: 100%;
|
|
padding: 1em 1em 5em;
|
|
margin: 0 0 2em;
|
|
|
|
img{
|
|
border: .1em solid #eee;
|
|
border-top-color: #bbb;
|
|
border-left-color: #ddd;
|
|
}
|
|
}
|
|
|
|
.product-info {
|
|
bottom: .5em;
|
|
}
|
|
}
|
|
|
|
.gallery-album {
|
|
margin: 0 0 1em;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 31.25em) and (max-width: 59.99999em){
|
|
.album-block {
|
|
.album-info{
|
|
width: 100%;
|
|
margin: 0 0 2em;
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
.album-item {
|
|
width: 100%;
|
|
padding: 2em 2em 5em;
|
|
margin: 0 0 2em;
|
|
|
|
img{
|
|
border: .15em solid #eee;
|
|
border-top-color: #bbb;
|
|
border-left-color: #ddd;
|
|
}
|
|
}
|
|
|
|
.product-info {
|
|
bottom: .5em;
|
|
}
|
|
}
|
|
} |