From 27ea3a6c1b673022e81a70fe2dce34fcb457e9e7 Mon Sep 17 00:00:00 2001 From: Sam Lu Date: Wed, 25 Jul 2018 17:36:11 -0500 Subject: [PATCH] Add landing page cta buttons, fix card images to crop, fix spacing issues --- src/styles/_cards.sass | 12 +++++++++ src/styles/project-landing.sass | 18 ++++++++++--- src/styles/projects-index-collection.sass | 2 +- src/templates/projects/landing.pug | 29 ++++++++++++--------- src/templates/projects_index_collection.pug | 2 +- static/assets/img/icons/icon-cta-arrow.svg | 3 +++ 6 files changed, 49 insertions(+), 17 deletions(-) create mode 100644 static/assets/img/icons/icon-cta-arrow.svg diff --git a/src/styles/_cards.sass b/src/styles/_cards.sass index b669f97..318b2ae 100644 --- a/src/styles/_cards.sass +++ b/src/styles/_cards.sass @@ -12,6 +12,18 @@ .card border: none margin-bottom: 64px + .card-image + background-color: #ccc + border-radius: 0 + height: 203px + max-height: 203px + min-height: 203px + margin: 5px auto 10px auto + overflow: hidden + width: 100% + img + height: 100% + object-fit: cover .card-title margin: 11px 0 5px font-size: 27px diff --git a/src/styles/project-landing.sass b/src/styles/project-landing.sass index a98da92..d7ad391 100644 --- a/src/styles/project-landing.sass +++ b/src/styles/project-landing.sass @@ -1,5 +1,5 @@ -@import ../styles/breakpoints @import ../styles/colors +@import ../styles/breakpoints @import ../styles/typography @import ../styles/navbar @import ../styles/jumbotron @@ -7,6 +7,8 @@ @import ../styles/cards @import ../styles/footer +.cta-arrow + padding-left: 11px .node-details-title &.container max-width: 730px @@ -28,9 +30,19 @@ section &:first-child margin-top: 0 .gallery + h2 + margin-bottom: 40px .container max-width: 1190px .col-sm-3 - padding: 20px + padding: 0 20px 40px img - width: 100% \ No newline at end of file + width: 100% +.node-extra + h2 + margin-bottom: 40px +.container.card-container + margin-top: 0 + .card + .card-image + margin-top: 0 \ No newline at end of file diff --git a/src/styles/projects-index-collection.sass b/src/styles/projects-index-collection.sass index f51bc9b..e5fbdfc 100644 --- a/src/styles/projects-index-collection.sass +++ b/src/styles/projects-index-collection.sass @@ -1,5 +1,5 @@ -@import ../styles/breakpoints @import ../styles/colors +@import ../styles/breakpoints @import ../styles/typography @import ../styles/navbar @import ../styles/jumbotron diff --git a/src/templates/projects/landing.pug b/src/templates/projects/landing.pug index 4170ee7..2557d24 100644 --- a/src/templates/projects/landing.pug +++ b/src/templates/projects/landing.pug @@ -187,8 +187,10 @@ header a(href="#") //- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-1.jpg") img(src="http://placehold.it/260x260") - a(href="#") - | See Hero Gallery + p.text-center + a(href="#") + | See Hero Gallery + img.cta-arrow(src="../../static/assets/img/icons/icon-cta-arrow.svg") @@ -198,7 +200,7 @@ header .row .col-md-4 .card - a(href="#") + a.card-image(href="#") img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-8.jpg") .card-body h4.card-title @@ -206,37 +208,40 @@ header p.card-text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur porro similique dolorum id quos dolore! .col-md-4 .card - a(href="#") - img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-8.jpg") + a.card-image(href="#") + img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-7.png") .card-body h4.card-title a(href="#") Title p.card-text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur porro similique dolorum id quos dolore! .col-md-4 .card - a(href="#") - img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-8.jpg") + a.card-image(href="#") + img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-6.png") .card-body h4.card-title a(href="#") Title p.card-text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur porro similique dolorum id quos dolore! .col-md-4 .card - a(href="#") - img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-8.jpg") + a.card-image(href="#") + img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-5.png") .card-body h4.card-title a(href="#") Title p.card-text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur porro similique dolorum id quos dolore! .col-md-4 .card - a(href="#") - img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-8.jpg") + a.card-image(href="#") + img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-4.jpg") .card-body 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") //- | {% if activity_stream %} //- .node-updates //- ul.node-updates-list diff --git a/src/templates/projects_index_collection.pug b/src/templates/projects_index_collection.pug index b9e1f20..25e9394 100644 --- a/src/templates/projects_index_collection.pug +++ b/src/templates/projects_index_collection.pug @@ -72,7 +72,7 @@ link(href="{{ url_for('static_cloud', filename='assets/css/projects-index-collec tabindex="{{ loop.index }}") .card | {% if project.picture_header %} - a(href="{{ url_for('projects.view', project_url=project.url) }}") + a.card-image(href="{{ url_for('projects.view', project_url=project.url) }}") img.card-img-top(src="{{ project.picture_header.thumbnail('l', api=api) }}") | {% endif %} diff --git a/static/assets/img/icons/icon-cta-arrow.svg b/static/assets/img/icons/icon-cta-arrow.svg new file mode 100644 index 0000000..29d7829 --- /dev/null +++ b/static/assets/img/icons/icon-cta-arrow.svg @@ -0,0 +1,3 @@ + + +