diff --git a/src/styles/_cards.sass b/src/styles/_cards.sass index 993ac78..b669f97 100644 --- a/src/styles/_cards.sass +++ b/src/styles/_cards.sass @@ -1,5 +1,6 @@ .container.card-container max-width: 1200px + margin-top: 56px // pending media query decision // .col-md-4 // +media-breakpoint-up(lg) diff --git a/src/styles/_navbar-secondary.sass b/src/styles/_navbar-secondary.sass new file mode 100644 index 0000000..f2b19c8 --- /dev/null +++ b/src/styles/_navbar-secondary.sass @@ -0,0 +1,36 @@ +.nav-scroller + position: relative + z-index: 2 + height: 2.75rem + overflow-y: hidden +.navbar-secondary + max-width: 700px + margin-bottom: 56px + padding-left: 0 + border-bottom: 1px solid $gray + .nav + display: flex + flex-wrap: nowrap + overflow-x: auto + text-align: center + white-space: nowrap + -webkit-overflow-scrolling: touch + .nav-link + font-size: 18px + color: $dark + padding: 13px 4px + margin-right: 16px + margin-left: 16px + &:hover + color: $muted + .nav-title + font-weight: 600 + @include media-breakpoint-up(md) + padding-left: 0 + margin-left: 0 + &:hover + color: $dark + .active + border-bottom: 2px solid $primary + &:hover + color: $dark \ No newline at end of file diff --git a/src/styles/_navbar.sass b/src/styles/_navbar.sass index 63e9986..279cf34 100644 --- a/src/styles/_navbar.sass +++ b/src/styles/_navbar.sass @@ -4,6 +4,9 @@ min-height: 48px +media-breakpoint-up(md) height: 56px + &.sticky-top + +media-breakpoint-down(sm) + position: static .logo display: flex justify-content: center diff --git a/src/styles/projects-index-collection.sass b/src/styles/projects-index-collection.sass index b6d6c4d..057a991 100644 --- a/src/styles/projects-index-collection.sass +++ b/src/styles/projects-index-collection.sass @@ -3,9 +3,6 @@ @import ../styles/custom-font @import ../styles/navbar @import ../styles/jumbotron +@import ../styles/navbar-secondary @import ../styles/cards -@import ../styles/footer - -.jumbotron - background-image: url('/../../static/assets/img/backgrounds/banner-open-projects.jpg') - margin-bottom: 56px \ No newline at end of file +@import ../styles/footer \ No newline at end of file diff --git a/src/templates/layout.pug b/src/templates/layout.pug index 286bf05..6ddb46a 100644 --- a/src/templates/layout.pug +++ b/src/templates/layout.pug @@ -82,7 +82,7 @@ html(lang="en") | {% endwith %} //- Navigation Bar - nav.navbar.navbar-expand-md.navbar-light.fixed-top + nav.navbar.navbar-expand-md.navbar-light.sticky-top //- Logo a.navbar-brand(href="#") img(src="{{ url_for('static', filename='assets/img/logo-blender-cloud-text.svg') }}", alt="alt") @@ -149,8 +149,8 @@ html(lang="en") | {% endif %} | {% block navigation_user %} - | {% include 'menus/notifications.html' %} - | {% include 'menus/user.html' %} + //- | {% include 'menus/notifications.html' %} + //- | {% include 'menus/user.html' %} | {% endblock navigation_user %} diff --git a/src/templates/projects_index_collection.pug b/src/templates/projects_index_collection.pug index 2b43847..b9e1f20 100644 --- a/src/templates/projects_index_collection.pug +++ b/src/templates/projects_index_collection.pug @@ -6,17 +6,17 @@ | {% set page_header_image = url_for('static', filename='assets/img/backgrounds/banner-open-projects.jpg') %} | {% set page_header_text = 'See how each film came to be. Explore our production files, assets, artwork and more. Get full access to behind the scenes at the Blender Animation Studio. Follow along as we share our process and techniques for each movie.' %} -| {% if title == 'courses' %} +| {% if title == 'courses' or title == 'workshops' %} | {% set page_title = 'Training' %} | {% set page_description = 'Production quality training by 3D professionals' %} -| {% set page_header_image = url_for('static', filename='assets/img/backgrounds/background_caminandes_3_03.jpg') %} +| {% set page_header_image = url_for('static', filename='assets/img/backgrounds/banner-training.jpg') %} | {% set page_header_text = 'Browse through our structured courses. Choose a workshop where top Blender Artists walk you through professional techniques to build a specific project. Visit the Art Gallery where you can download and study source files from your favorite artists.' %} -| {% elif title == 'workshops' %} -| {% set page_title = 'Workshops' %} -| {% set page_description = 'Production quality training by 3D professionals' %} -| {% set page_header_image = url_for('static', filename='assets/img/backgrounds/background_caminandes_3_03.jpg') %} -| {% set page_header_text = 'Enter the artist workshop and learn by example.' %} +//- | {% elif title == 'workshops' %} +//- | {% set page_title = 'Workshops' %} +//- | {% set page_description = 'Production quality training by 3D professionals' %} +//- | {% set page_header_image = url_for('static', filename='assets/img/backgrounds/background_caminandes_3_03.jpg') %} +//- | {% set page_header_text = 'Enter the artist workshop and learn by example.' %} | {% endif %} @@ -44,12 +44,23 @@ link(href="{{ url_for('static_cloud', filename='assets/css/projects-index-collec | {% block body %} //- Jumbotron -.jumbotron.jumbotron-fluid - //- commented out image until decision is made on jinja background image - //- img.background-header(src="{{ page_header_image }}") +.jumbotron.jumbotron-fluid(style="background-image: url('{{ page_header_image }}')") .container h1.display-4.node_index-collection-name {{ page_title }} p.lead.node_index-collection-description {{ page_header_text }} +//- Secondary Navigation +| {% if title == 'courses' or title == 'workshops' %} +.container.navbar-secondary + ul.nav.justify-content-left + li.nav-item + a.nav-link.nav-title(href="#") Training + li.nav-item + a.nav-link(href="#", class="{% if title == 'courses' %}active{% endif %}") Courses + li.nav-item + a.nav-link(href="#", class="{% if title == 'workshops' %}active{% endif %}") Workshops + li.nav-item + a.nav-link(href="#") Art Gallery +| {% endif %} //- Project Cards .container.card-container .row