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

Fix cropping in image gallery grid. Fix responsive issues on landing page.

Browse Source
This commit is contained in:
Sam Lu
2018-07-27 14:36:45 -05:00
parent 131bb26e9e
commit 929edb9f90
5 changed files with 103 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/styles/_cards.sass
View File

@@ -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

54
src/styles/_gallery.sass
View File

@@ -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%
width: 300%
transform: translate(-20%, -10%)

4
src/styles/_navbar-secondary.sass
View File

@@ -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

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

@@ -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

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

@@ -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