archive/blender-cloud
0
1
Fork 1
Code Issues 24 Pull Requests Projects Releases Wiki Activity

Add landing page cta buttons, fix card images to crop, fix spacing issues

Browse Source
This commit is contained in:
Sam Lu
2018-07-25 17:36:11 -05:00
parent b91aeadb45
commit 27ea3a6c1b
6 changed files with 49 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/styles/_cards.sass
View File

@@ -12,6 +12,18 @@
.card .card
border: none border: none
margin-bottom: 64px 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 .card-title
margin: 11px 0 5px margin: 11px 0 5px
font-size: 27px font-size: 27px

16
src/styles/project-landing.sass
View File

@@ -1,5 +1,5 @@
@import ../styles/breakpoints
@import ../styles/colors @import ../styles/colors
@import ../styles/breakpoints
@import ../styles/typography @import ../styles/typography
@import ../styles/navbar @import ../styles/navbar
@import ../styles/jumbotron @import ../styles/jumbotron
@@ -7,6 +7,8 @@
@import ../styles/cards @import ../styles/cards
@import ../styles/footer @import ../styles/footer
.cta-arrow
padding-left: 11px
.node-details-title .node-details-title
&.container &.container
max-width: 730px max-width: 730px
@@ -28,9 +30,19 @@ section
&:first-child &:first-child
margin-top: 0 margin-top: 0
.gallery .gallery
h2
margin-bottom: 40px
.container .container
max-width: 1190px max-width: 1190px
.col-sm-3 .col-sm-3
padding: 20px padding: 0 20px 40px
img img
width: 100% width: 100%
.node-extra
h2
margin-bottom: 40px
.container.card-container
margin-top: 0
.card
.card-image
margin-top: 0

2
src/styles/projects-index-collection.sass
View File

@@ -1,5 +1,5 @@
@import ../styles/breakpoints
@import ../styles/colors @import ../styles/colors
@import ../styles/breakpoints
@import ../styles/typography @import ../styles/typography
@import ../styles/navbar @import ../styles/navbar
@import ../styles/jumbotron @import ../styles/jumbotron

25
src/templates/projects/landing.pug
View File

@@ -187,8 +187,10 @@ header
a(href="#") a(href="#")
//- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-1.jpg") //- img(src="../../../static/assets/img/landing-page/gallery/hero-gallery-thumbnail-1.jpg")
img(src="http://placehold.it/260x260") img(src="http://placehold.it/260x260")
p.text-center
a(href="#") a(href="#")
| See Hero Gallery | See Hero Gallery
img.cta-arrow(src="../../static/assets/img/icons/icon-cta-arrow.svg")
@@ -198,7 +200,7 @@ header
.row .row
.col-md-4 .col-md-4
.card .card
a(href="#") a.card-image(href="#")
img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-8.jpg") img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-8.jpg")
.card-body .card-body
h4.card-title 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! p.card-text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur porro similique dolorum id quos dolore!
.col-md-4 .col-md-4
.card .card
a(href="#") a.card-image(href="#")
img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-8.jpg") img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-7.png")
.card-body .card-body
h4.card-title h4.card-title
a(href="#") Title a(href="#") Title
p.card-text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur porro similique dolorum id quos dolore! p.card-text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur porro similique dolorum id quos dolore!
.col-md-4 .col-md-4
.card .card
a(href="#") a.card-image(href="#")
img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-8.jpg") img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-6.png")
.card-body .card-body
h4.card-title h4.card-title
a(href="#") Title a(href="#") Title
p.card-text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur porro similique dolorum id quos dolore! p.card-text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur porro similique dolorum id quos dolore!
.col-md-4 .col-md-4
.card .card
a(href="#") a.card-image(href="#")
img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-8.jpg") img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-5.png")
.card-body .card-body
h4.card-title h4.card-title
a(href="#") Title a(href="#") Title
p.card-text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur porro similique dolorum id quos dolore! p.card-text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur porro similique dolorum id quos dolore!
.col-md-4 .col-md-4
.card .card
a(href="#") a.card-image(href="#")
img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-8.jpg") img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-4.jpg")
.card-body .card-body
h4.card-title h4.card-title
a(href="#") Title a(href="#") Title
p.card-text Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur porro similique dolorum id quos dolore! 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 %} //- | {% if activity_stream %}
//- .node-updates //- .node-updates
//- ul.node-updates-list //- ul.node-updates-list

2
src/templates/projects_index_collection.pug
View File

@@ -72,7 +72,7 @@ link(href="{{ url_for('static_cloud', filename='assets/css/projects-index-collec
tabindex="{{ loop.index }}") tabindex="{{ loop.index }}")
.card .card
| {% if project.picture_header %} | {% 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) }}") img.card-img-top(src="{{ project.picture_header.thumbnail('l', api=api) }}")
| {% endif %} | {% endif %}

3
static/assets/img/icons/icon-cta-arrow.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="12" viewBox="0 0 8 12">
<polygon fill="#0A68FF" points="155.001 9.292 156.379 8 162.465 13.685 156.38 19.369 155 18.082 159.704 13.685" transform="translate(-155 -8)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 236 B