From b91aeadb45989ad994ca670f40694cef2faf4fd1 Mon Sep 17 00:00:00 2001 From: Sam Lu Date: Wed, 25 Jul 2018 00:08:57 -0500 Subject: [PATCH] Add new project landing with jumbotron, responsive iframe, gallery and updates. --- src/styles/_custom-font.sass | 4 - src/styles/_footer.sass | 8 +- src/styles/_jumbotron.sass | 1 - src/styles/_typography.sass | 28 ++ src/styles/project-landing.sass | 385 ++-------------------- src/styles/projects-index-collection.sass | 2 +- src/templates/projects/landing.pug | 235 +++++++++---- 7 files changed, 237 insertions(+), 426 deletions(-) delete mode 100644 src/styles/_custom-font.sass create mode 100644 src/styles/_typography.sass diff --git a/src/styles/_custom-font.sass b/src/styles/_custom-font.sass deleted file mode 100644 index 8b156dc..0000000 --- a/src/styles/_custom-font.sass +++ /dev/null @@ -1,4 +0,0 @@ -body - font-family: 'Source Sans Pro', sans-serif - -webkit-font-smoothing: antialiased - -moz-osx-font-smoothing: grayscale \ No newline at end of file diff --git a/src/styles/_footer.sass b/src/styles/_footer.sass index de345af..cf0c1ff 100644 --- a/src/styles/_footer.sass +++ b/src/styles/_footer.sass @@ -33,18 +33,18 @@ footer.container-fluid h5 color: $dark font-weight: 600 - font-size: 15px - letter-spacing: 0.6px margin-bottom: 12px text-transform: uppercase p color: #6d6d6e + font-size: 16px line-height: 30px .list-unstyled - a - color: #6d6d6e li line-height: 30px + a + color: #6d6d6e + font-size: 16px .social-icons .list-inline-item:not(:last-child) margin-right: 22px \ No newline at end of file diff --git a/src/styles/_jumbotron.sass b/src/styles/_jumbotron.sass index 46533bf..688f770 100644 --- a/src/styles/_jumbotron.sass +++ b/src/styles/_jumbotron.sass @@ -20,7 +20,6 @@ text-shadow: 0 2px 2px rgba(0, 0, 0, 0.30) .lead max-width: 722px - letter-spacing: 0.4px text-shadow: 0 2px 2px rgba(0, 0, 0, 0.80) p color: white \ No newline at end of file diff --git a/src/styles/_typography.sass b/src/styles/_typography.sass new file mode 100644 index 0000000..276c1f8 --- /dev/null +++ b/src/styles/_typography.sass @@ -0,0 +1,28 @@ +html + // changing font-size here, will change all bootstrap font-sizes + font-size: 20px +body + font-family: 'Source Sans Pro', sans-serif + -webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale +h1 + font-size: 48px + line-height: 57px +h2 + font-size: 36px + line-height: 47px +h3 + font-size: 27px + line-height: 38px +h4 + font-size 21px + line-height: 34px +h5 + font-size: 15px + letter-spacing: 0.6px +p + font-size: 20px + line-height: 32px +.lead + font-size: 20px + letter-spacing: 0.4px \ No newline at end of file diff --git a/src/styles/project-landing.sass b/src/styles/project-landing.sass index 7eaa671..a98da92 100644 --- a/src/styles/project-landing.sass +++ b/src/styles/project-landing.sass @@ -1,353 +1,36 @@ -@import ../../../pillar/src/styles/_config -@import ../../../pillar/src/styles/_utils - -$node-latest-thumbnail-size: 160px -$node-latest-gallery-thumbnail-size: 200px -body - background-color: white -.page-body - background-color: white - -nav.navbar - background-color: white - .navbar-header - +media-xs - width: 100% - - .navbar-brand - color: $color-text - - li a.navbar-item - color: $color-text - &:hover - color: black - &:focus - color: black - &.active - color: black - .dropdown.open - a - background-color: white - .dropdown.libraries - &:hover - background: none - ul.dropdown-menu - background-color: white - li - a - color: $color-text - &:hover - color: black - background-color: white - .navbar-container - +container-behavior - - .navbar-toggle - border: none - color: $color-text - position: absolute - right: 10px - - .navbar-nav - +media-xs - padding: 10px - - .search-input - display: none - -.node-details-container - max-width: 620px - font-family: $font-body - font-size: 1.3em - line-height: 1.5em - margin: 0 auto 40px auto - padding-bottom: 40px - +media-xs - padding-left: 10px - padding-right: 10px - - p - margin-bottom: 1.3em - -header - display: flex - flex-direction: column /* stack flex items vertically */ - position: relative - img.header - width: 100% - flex-direction: column /* stack flex items vertically */ - position: relative - a.page-card-cta - position: absolute - left: 76% - top: 50% - transform: translate(-50%, -50%) - color: white - font-weight: bold - background: #ff4970 - border-radius: 3px - border: none - box-shadow: 1px 1px 0 rgba(black, .2) - padding: 7px 20px - text-decoration: none - text-shadow: none - - &:hover - background: lighten(#ff4970, 5%) - -.landing - h2 - text-align: center - margin-bottom: 40px +@import ../styles/breakpoints +@import ../styles/colors +@import ../styles/typography +@import ../styles/navbar +@import ../styles/jumbotron +@import ../styles/navbar-secondary +@import ../styles/cards +@import ../styles/footer +.node-details-title + &.container + max-width: 730px +.iframe-container + position: relative + padding-top: 25px + padding-bottom: 52% + height: 0 + margin-top: 16px + margin-bottom: 32px + iframe + position: absolute + top: 0 + left: 0 + width: 100% + height: 100% section - max-width: 1024px - padding-top: 20px - border-top: thin solid $color-background - margin: 0 auto - -a.btn - margin: 20px auto - font-size: 1.3em - padding: 9px 18px - border-radius: 8px - color: $color-text-dark - -.navbar-secondary - max-width: 620px - margin: 0 auto - - .navbar-container - border-bottom: 1px solid #dddddd - - .navbar-collapse - padding-left: 0 - - li - a - padding-left: 20px - padding-right: 20px - color: $color-text - &:hover - &.active - background: none - color: black - box-shadow: 0px 2px 0 rgba(red, .8) - -.node-extra - display: flex - flex-direction: column - - //padding: 0 20px - width: 100% - - - .node-updates - flex: 1 - font-size: 1.1em - - ul - padding: 0 - margin: 0 0 15px 0 - display: flex - flex-direction: row - flex-wrap: wrap - - li - display: flex - flex-direction: column - list-style: none - padding: 5px - cursor: pointer - width: 33.3333% - - +media-xs - width: 100% - - &.texture, &.group_texture - width: 25% - - &:hover - img - opacity: .9 - a.title - //color: $color-primary - text-decoration: underline - - &.post - .info .title - //color: $node-type-post - font-size: 1.1em - a.image - border: none - //border-color: $node-type-post - background-color: hsl(hue($node-type-post), 20%, 55%) - - &.asset.image a.image - border-color: $node-type-asset_image - background-color: hsl(hue($node-type-asset_image), 20%, 55%) - &.asset.file a.image - border-color: $node-type-asset_file - background-color: hsl(hue($node-type-asset_file), 20%, 55%) - &.asset.video a.image - border-color: $node-type-asset_video - background-color: hsl(hue($node-type-asset_video), 20%, 55%) - - .image - width: 100% - height: $node-latest-thumbnail-size - min-height: $node-latest-thumbnail-size - max-height: $node-latest-thumbnail-size - background-color: $color-background - margin: 5px auto 10px auto - position: relative - overflow: hidden - border-radius: 0 - - img - max-height: $node-latest-thumbnail-size - +position-center-translate - - i - color: rgba(white, .9) - font-size: 1.8em - position: absolute - bottom: 3px - left: 5px - text-shadow: 1px 1px 0 rgba(black, .2) - - &.pi-file-archive - font-size: 1.5em - bottom: 5px - &.pi-newspaper - font-size: 1.6em - left: 7px - - .ribbon - +ribbon - - .info - width: 100% - height: 100% - display: flex - flex-direction: column - justify-content: space-between - word-break: break-word - - .description - font-size: 1em - line-height: 1.8em - padding-top: 8px - color: $color-text-dark-primary - - .title - display: block - font-size: 1.3em - color: $color-text-dark - font-weight: 600 - +clearfix - +text-overflow-ellipsis - - span.details - width: 100% - display: block - font-size: 1em - line-height: 1.2em - padding: 5px 0 - color: $color-text-dark-secondary - +clearfix - - .who - margin-left: 3px - .what - text-transform: capitalize - - -$bg-color: #444 -$bg-color2: #666 -$yellow: rgb(249,229,89) -$almost-white: rgb(255,255,255) -$btn-transparent-color: rgba(249,229,89,1) -$btn-transparent-bg: rgba(249,229,89,0) - - -section.gallery - max-width: 1024px - margin: 60px auto 0 auto - text-align: center - padding-bottom: 40px - - p - color: $almost-white - padding: 0 40px - - - .thumbnail - float: left - position: relative - width: 23% - padding-bottom: 23% - margin: 0.83% - overflow: hidden - &:hover - box-shadow: 2px 2px 50px 0 rgba(0,0,0,0.3) - - .img-container - position: absolute - width: 100% - height: 100% - - img - width: 300% - transform: translate(-20%,-10%) - - &:hover .img-caption - top: 0 - left: 0 - .btn-trans - background: rgba(255,255,255,0.4) - - .img-caption - position: absolute - width: 100% - height: 100% - background: rgba(0, 0, 0, 0.3) - text-align: center - - .table - display: table - .table-cell - display: table-cell - vertical-align: bottom - border: none - - @media screen and (max-width: 992px) - .thumbnail - width: 22% - padding-bottom: 22% - margin: 1.5% - - .img-container:hover .img-caption - top: 0 - left: 0 - - .img-caption - position: absolute - width: 100% - height: 100% - background: rgba(0, 0, 0, .7) - text-align: center - a - color: $yellow - - @media screen and (max-width: 720px) - .thumbnail - width: 29% - padding-bottom: 29% - margin: 2.16% - - @media screen and (max-width: 470px) - .thumbnail - width: 44% - padding-bottom: 44% - margin: 3% + margin-top: 200px + &:first-child + margin-top: 0 +.gallery + .container + max-width: 1190px + .col-sm-3 + padding: 20px + img + width: 100% \ No newline at end of file diff --git a/src/styles/projects-index-collection.sass b/src/styles/projects-index-collection.sass index 057a991..f51bc9b 100644 --- a/src/styles/projects-index-collection.sass +++ b/src/styles/projects-index-collection.sass @@ -1,6 +1,6 @@ @import ../styles/breakpoints @import ../styles/colors -@import ../styles/custom-font +@import ../styles/typography @import ../styles/navbar @import ../styles/jumbotron @import ../styles/navbar-secondary diff --git a/src/templates/projects/landing.pug b/src/templates/projects/landing.pug index f603238..4170ee7 100644 --- a/src/templates/projects/landing.pug +++ b/src/templates/projects/landing.pug @@ -79,88 +79,193 @@ script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-hotke | {% block css %} link(href="{{ url_for('static_pillar', filename='assets/css/font-pillar.css') }}", rel="stylesheet") -link(href="{{ url_for('static_pillar', filename='assets/css/base.css') }}", rel="stylesheet") +//- link(href="{{ url_for('static_pillar', filename='assets/css/base.css') }}", rel="stylesheet") link(href="{{ url_for('static_cloud', filename='assets/css/project-landing.css') }}", rel="stylesheet") | {% endblock %} | {% block body %} header - //a(href="{{ url_for( 'projects.view', project_url=project.url) }}") - img.header(src="{{ project.picture_header.thumbnail('h', api=api) }}") + //- a(href="{{ url_for( 'projects.view', project_url=project.url) }}") + //- img.header(src="{{ project.picture_header.thumbnail('h', api=api) }}") +//- Jumbotron +.jumbotron.jumbotron-fluid(style="background-image: url('../../../static/assets/img/backgrounds/banner-hero.jpg')") + .container + h1.display-4.node_index-collection-name {{ page_title }} + p.lead.node_index-collection-description {{ page_header_text }} -| {% block navbar_secondary %} -| {{ projectmacros.render_secondary_navigation(project, pages=pages) }} +//- Secondary Navigation +//- | {% block navbar_secondary %} +//- | {{ projectmacros.render_secondary_navigation(project, pages=pages) }} -| {% endblock navbar_secondary %} +//- | {% endblock navbar_secondary %} +.container.navbar-secondary + ul.nav.justify-content-left + li.nav-item + a.nav-link.nav-title(href="#") Hero + li.nav-item + a.nav-link(href="#", class="{% if title == 'updates' %}active{% endif %}") Updates + li.nav-item + a.nav-link(href="#", class="{% if title == 'team' %}active{% endif %}") Team + li.nav-item + a.nav-link(href="#", class="{% if title == 'gallery' %}active{% endif %}") Gallery + li.nav-item + a.nav-link(href="#", class="{% if title == 'assets' %}active{% endif %}") Assets + li.nav-item + a.nav-link(href="#", class="{% if title == 'dashboard' %}active{% endif %}") Dashboard #container.landing section.node-details-container.project - .node-details-title - h1 {{ project.name }} - - | {% if project.description %} - .node-details-description - | {{ project | markdowned('description') }} - | {% endif %} + .node-details-title.container + //- h1 {{ project.name }} + h1 Hero + p Hero is a showcase for the upcoming Grease Pencil in Blender 2.8. Grease Pencil means 2D animation tools within a full 3D pipeline. In Blender. In Open Source. Free for everyone! + p Hero is directed by Daniel M Lara, and it is the 6th short film funded by the Blender Cloud. + .iframe-container + iframe(allowfullscreen="", frameborder="0", height="", src="https://www.youtube.com/embed/pKmSdY56VtY", width="") + p Following the classic Blender Cloud publishing model, blend files, walkthroughs and breakdowns will be released in the upcoming weeks. You can already enjoy a couple of shots #[a(href="https://cloud.blender.org/p/hero/5ad4cbd8f87ec500fea61c22") in the gallery link]. + p #[strong Join Blender Cloud!] Projects like Hero are made possible by Blender Cloud subscribers. Consider #[a(href="https://store.blender.org/product/membership/") supporting us] so we can create more Open Content and improve the best 3D (and 2D) animation software in the world! + //- | {% if project.description %} + //- .node-details-description + //- | {{ project | markdowned('description') }} + //- | {% endif %} section.gallery - h2 Gallery - | {% for n in activity_stream %} - | {% if n.node_type not in ['comment', 'post'] and n.picture %} - .thumbnail.expand-image-links - .img-container - a(href="{{ n.picture.thumbnail('l', api=api) }}", data-node_id="{{ n._id }}") - img(src="{{ n.picture.thumbnail('l', api=api) }}", alt="{{ n.name }}") - .img-caption.table - | {# Not using for the moment - span.table-cell {{ n.name }} - | #} - | {% endif %} - | {% endfor %} - div(class="clearfix") - | {% if project.nodes_featured %} - | {# In some cases featured_nodes might might be embedded #} - | {% if '_id' in project.nodes_featured[0] %} - | {% set featured_node_id=project.nodes_featured[0]._id %} - | {% else %} - | {% set featured_node_id=project.nodes_featured[0] %} - | {% endif %} - a.btn(href="{{ url_for('projects.view_node', project_url=project.url, node_id=featured_node_id) }}") See more - | {% endif %} + h2.text-center Gallery + //- | {% for n in activity_stream %} + //- | {% if n.node_type not in ['comment', 'post'] and n.picture %} + //- .thumbnail.expand-image-links + //- .img-container + //- a(href="{{ n.picture.thumbnail('l', api=api) }}", data-node_id="{{ n._id }}") + //- img(src="{{ n.picture.thumbnail('l', api=api) }}", alt="{{ n.name }}") + //- .img-caption.table + //- | {# Not using for the moment + //- span.table-cell {{ n.name }} + //- | #} + //- | {% endif %} + //- | {% endfor %} + //- div(class="clearfix") + //- | {% if project.nodes_featured %} + //- | {# In some cases featured_nodes might might be embedded #} + //- | {% if '_id' in project.nodes_featured[0] %} + //- | {% set featured_node_id=project.nodes_featured[0]._id %} + //- | {% else %} + //- | {% set featured_node_id=project.nodes_featured[0] %} + //- | {% endif %} + //- 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 + 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 + 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 + 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 + 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 + 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 + 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 + 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 + 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 + section.node-extra - h2 Latest Updates + h2.text-center Latest Updates + .container.card-container + .row + .col-md-4 + .card + a(href="#") + img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-8.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! + .col-md-4 + .card + a(href="#") + img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-8.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! + .col-md-4 + .card + a(href="#") + img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-8.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! + .col-md-4 + .card + a(href="#") + img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-8.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! + .col-md-4 + .card + a(href="#") + img.card-img-top(src="../../../static/assets/img/landing-page/updates/hero-update-thumbnail-8.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! - | {% if activity_stream %} - .node-updates - ul.node-updates-list - | {% for n in activity_stream %} - | {% if n.node_type == 'post' %} - li.node-updates-list-item( - data-node_id="{{ n._id }}", - class="{{ n.node_type }} {{ n.properties.content_type | hide_none }}") - a.image(href="{{ url_for_node(node=n) }}") - | {% if n.picture %} - img(src="{{ n.picture.thumbnail('l', api=api) }}") - | {% endif %} + //- | {% if activity_stream %} + //- .node-updates + //- ul.node-updates-list + //- | {% for n in activity_stream %} + //- | {% if n.node_type == 'post' %} + //- li.node-updates-list-item( + //- data-node_id="{{ n._id }}", + //- class="{{ n.node_type }} {{ n.properties.content_type | hide_none }}") + //- a.image(href="{{ url_for_node(node=n) }}") + //- | {% if n.picture %} + //- img(src="{{ n.picture.thumbnail('l', api=api) }}") + //- | {% endif %} - .info - a.title(href="{{ url_for_node(node=n) }}") {{ n.name }} - p.description(href="{{ url_for_node(node=n) }}") - | {% if n.node_type == 'post' %} - | {{ n.properties | markdowned('content') | striptags | truncate(140, end="... read more") | safe | hide_none }} - | {% else %} - | {{ n | markdowned('description') | striptags | truncate(140, end="... read more") | safe | hide_none }} - | {% endif %} - //span.details - // span.what {% if n.properties.content_type %}{{ n.properties.content_type | undertitle }}{% else %}{{ n.node_type | undertitle }}{% endif %} · - // span.when {{ n._updated | pretty_date }} by - // span.who {{ n.user.full_name }} - | {% endif %} - | {% endfor %} - | {% endif %} - a.btn(href="{{ url_for('main.project_blog', project_url=project.url) }}") See all updates + //- .info + //- a.title(href="{{ url_for_node(node=n) }}") {{ n.name }} + //- p.description(href="{{ url_for_node(node=n) }}") + //- | {% if n.node_type == 'post' %} + //- | {{ n.properties | markdowned('content') | striptags | truncate(140, end="... read more") | safe | hide_none }} + //- | {% else %} + //- | {{ n | markdowned('description') | striptags | truncate(140, end="... read more") | safe | hide_none }} + //- | {% endif %} + //- //span.details + //- // span.what {% if n.properties.content_type %}{{ n.properties.content_type | undertitle }}{% else %}{{ n.node_type | undertitle }}{% endif %} · + //- // span.when {{ n._updated | pretty_date }} by + //- // span.who {{ n.user.full_name }} + //- | {% endif %} + //- | {% endfor %} + //- | {% endif %} + //- a.btn(href="{{ url_for('main.project_blog', project_url=project.url) }}") See all updates | {% endblock body %}