diff --git a/files/wash-n-roll/internal/scss/components/_gallery.scss b/files/wash-n-roll/internal/scss/components/_gallery.scss index 4069f1b..73537ed 100644 --- a/files/wash-n-roll/internal/scss/components/_gallery.scss +++ b/files/wash-n-roll/internal/scss/components/_gallery.scss @@ -1,35 +1,53 @@ .ce_gallery { - @include fullwidth(); ul { display: flex; - justify-content: space-evenly; + justify-content: space-between; flex-wrap: wrap; - padding: 2.5rem 0 1.5rem 0; - margin: 0 auto; - max-width: calc(1200px - 24px); } li { - flex-grow: 1; - flex-basis: 0; + width: calc(50% - 20px); padding-bottom: 2rem; - } - .image_container { - padding: 0 0.5rem; @media (max-width: 1004px) { - padding: 0 1.5rem; + width: 100%; } - @media (max-width: 768px) { - padding: 0 2.5rem 1rem 2.5rem; + } + &.icon-gallery { + @include fullwidth(); + + ul { + justify-content: space-evenly; + padding: 2.5rem 0 1.5rem 0; + margin: 0 auto; + max-width: calc(1200px - 24px); } - img { - width: 64px; - margin: 0 auto 15px auto; + + li { + width: auto; + flex-grow: 1; + flex-basis: 0; } - .caption { - width: 100%; - text-transform: uppercase; - text-align: center; - font-weight: 700; + + .image_container { + padding: 0 0.5rem; + @media (max-width: 1004px) { + padding: 0 1.5rem; + } + @media (max-width: 768px) { + padding: 0 2.5rem 1rem 2.5rem; + } + + img { + width: 64px; + margin: 0 auto 15px auto; + } + + .caption { + width: 100%; + text-transform: uppercase; + text-align: center; + font-weight: 700; + } } + } } \ No newline at end of file diff --git a/files/wash-n-roll/internal/scss/components/_slider.scss b/files/wash-n-roll/internal/scss/components/_slider.scss index 7b08064..54db5a2 100644 --- a/files/wash-n-roll/internal/scss/components/_slider.scss +++ b/files/wash-n-roll/internal/scss/components/_slider.scss @@ -120,7 +120,7 @@ h1, h2 { color: $white; - line-height: size(52); + line-height: size(64); padding: 0 0 2rem 0; } } \ No newline at end of file diff --git a/files/wash-n-roll/internal/scss/components/_youtube.scss b/files/wash-n-roll/internal/scss/components/_youtube.scss index 4846d14..31923ac 100644 --- a/files/wash-n-roll/internal/scss/components/_youtube.scss +++ b/files/wash-n-roll/internal/scss/components/_youtube.scss @@ -124,9 +124,13 @@ transform: translate(-50%, -50%); width: 77px; height: 78px; + -webkit-mask-image: url("../images/elements/youtube-play-icon.svg"); mask-image: url("../images/elements/youtube-play-icon.svg"); + -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; + -webkit-mask-position: left top; mask-position: left top; + -webkit-mask-size: 100% auto; mask-size: 100% auto; background-color: $white; @media (max-width: 575px) { @@ -149,16 +153,21 @@ .caption { position: absolute; - left: 30px; - bottom: 30px; - padding-right: 30px; + left: 0; + bottom: 0; + width: 100%; + padding: 30px; font-size: size(24); line-height: size(30); color: $white; + background: rgba(0,0,0,0.7); + border-bottom-left-radius: 20px; + border-bottom-right-radius: 20px; @media (max-width: 575px) { - bottom: 50px; + padding: 50px; font-size: size(18); line-height: size(24); + background: none; } } }