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 %}