diff --git a/src/styles/_cards.sass b/src/styles/_cards.sass index 57e0cc1..a0410ce 100644 --- a/src/styles/_cards.sass +++ b/src/styles/_cards.sass @@ -11,12 +11,17 @@ .card-image background-color: #ccc border-radius: 0 - height: 203px - max-height: 203px - min-height: 203px - margin: 5px auto 10px auto + height: 160px + max-height: 160px + min-height: 160px + margin: 5px auto 0 overflow: hidden width: 100% + +media-breakpoint-up(sm) + margin-bottom: 10px + height: 203px + max-height: 203px + min-height: 203px img height: 100% object-fit: cover diff --git a/src/styles/_gallery.sass b/src/styles/_gallery.sass index befc0af..bf8d0e1 100644 --- a/src/styles/_gallery.sass +++ b/src/styles/_gallery.sass @@ -1,9 +1,53 @@ .gallery - h2 - margin-bottom: 40px + .cta-arrow + margin-top: 20px .container max-width: 1190px - .col-sm-3 - padding: 0 20px 40px + padding: 0 + +media-breakpoint-up(sm) + padding-right: 15px + padding-left: 15px + .thumbnail + float: left + position: relative + width: 32.8% + padding-bottom: 32.9% + margin: 0.4% + overflow: hidden + // Fixes Thumbnail Spacing + &:nth-of-type(1), + &:nth-of-type(2), + &:nth-of-type(3) + margin-top: 0 + &:nth-of-type(1), + &:nth-of-type(4), + &:nth-of-type(7) + margin-left: 0 + &:nth-of-type(3), + &:nth-of-type(6) + margin-right: 0 + +media-breakpoint-up(sm) + width: 22.4% + padding-bottom: 22.4% + margin: 1.73% + &:nth-of-type(4) + margin-top: 0 + &:nth-of-type(1), + &:nth-of-type(5) + margin-left: 0 + &:nth-of-type(4), + &:nth-of-type(7) + margin-left: 1.73% + &:nth-of-type(3), + &:nth-of-type(6) + margin-right: 1.73% + &:nth-of-type(4), + &:nth-of-type(8) + margin-right: 0 + .thumbnail-container + position: absolute + width: 100% + height: 100% img - width: 100% \ No newline at end of file + width: 300% + transform: translate(-20%, -10%) \ No newline at end of file diff --git a/src/styles/_navbar-secondary.sass b/src/styles/_navbar-secondary.sass index f2b19c8..732bcde 100644 --- a/src/styles/_navbar-secondary.sass +++ b/src/styles/_navbar-secondary.sass @@ -5,9 +5,11 @@ overflow-y: hidden .navbar-secondary max-width: 700px - margin-bottom: 56px + margin-bottom: 40px padding-left: 0 border-bottom: 1px solid $gray + +media-breakpoint-up(sm) + margin-bottom: 56px .nav display: flex flex-wrap: nowrap diff --git a/src/styles/project-landing.sass b/src/styles/project-landing.sass index 9d85e4b..ab52108 100644 --- a/src/styles/project-landing.sass +++ b/src/styles/project-landing.sass @@ -10,17 +10,21 @@ @import ../styles/footer .cta-arrow - padding-left: 11px + img + padding-left: 11px .node-details-title &.container max-width: 730px section - margin-top: 152px + margin-top: 104px + +media-breakpoint-up(sm) + margin-top: 152px &:first-child margin-top: 0 -.node-extra h2 - margin-bottom: 40px + margin-bottom: 24px + +media-breakpoint-up(sm) + margin-bottom: 40px .container.card-container margin-top: 0 .card diff --git a/src/templates/projects/landing.pug b/src/templates/projects/landing.pug index 2557d24..367b5e9 100644 --- a/src/templates/projects/landing.pug +++ b/src/templates/projects/landing.pug @@ -154,43 +154,43 @@ header //- a.btn(href="{{ url_for('projects.view_node', project_url=project.url, node_id=featured_node_id) }}") See more //- | {% endif %} .container - .row - .col-4.col-sm-3 + .thumbnail.expand-image-links + .thumbnail-container a(href="#") - //- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-8.jpg") - img(src="http://placehold.it/260x260") - .col-4.col-sm-3 + img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-1.jpg") + .thumbnail.expand-image-links + .thumbnail-container a(href="#") - //- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-7.jpg") - img(src="http://placehold.it/260x260") - .col-4.col-sm-3 + img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-2.jpg") + .thumbnail.expand-image-links + .thumbnail-container a(href="#") - //- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-6.png") - img(src="http://placehold.it/260x260") - .col-4.col-sm-3 + img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-3.png") + .thumbnail.expand-image-links + .thumbnail-container a(href="#") - //- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-5.png") - img(src="http://placehold.it/260x260") - .col-4.col-sm-3 + img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-4.png") + .thumbnail.expand-image-links + .thumbnail-container a(href="#") - //- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-4.png") - img(src="http://placehold.it/260x260") - .col-4.col-sm-3 + img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-5.png") + .thumbnail.expand-image-links + .thumbnail-container a(href="#") - //- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-3.png") - img(src="http://placehold.it/260x260") - .col-4.col-sm-3 + img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-6.png") + .thumbnail.expand-image-links + .thumbnail-container a(href="#") - //- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-2.jpg") - img(src="http://placehold.it/260x260") - .col-4.col-sm-3 + img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-7.jpg") + .thumbnail.expand-image-links + .thumbnail-container a(href="#") - //- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-1.jpg") - img(src="http://placehold.it/260x260") - p.text-center - a(href="#") - | See Hero Gallery - img.cta-arrow(src="../../static/assets/img/icons/icon-cta-arrow.svg") + img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-8.jpg") + .clearfix + p.cta-arrow.text-center + a(href="#") + | See Hero Gallery + img(src="../../static/assets/img/icons/icon-cta-arrow.svg") @@ -238,10 +238,11 @@ header h4.card-title a(href="#") Title p.card-text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur porro similique dolorum id quos dolore! - p.text-center - a(href="#") - | See All Updates - img.cta-arrow(src="../../static/assets/img/icons/icon-cta-arrow.svg") + .clearfix + p.cta-arrow.text-center + a(href="#") + | See All Updates + img(src="../../static/assets/img/icons/icon-cta-arrow.svg") //- | {% if activity_stream %} //- .node-updates //- ul.node-updates-list