From 01b6693324b3ab297848b3120c668e70e558a1a0 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Mon, 27 Aug 2018 16:56:38 +0200 Subject: [PATCH] Cleanup styling. Use bootstrap classes instead --- src/styles/_homepage.sass | 29 +----- src/styles/_welcome.sass | 4 +- src/styles/project-landing.sass | 2 +- src/templates/homepage.pug | 14 +-- src/templates/layout.pug | 161 +++++++++++++++++++------------- 5 files changed, 110 insertions(+), 100 deletions(-) diff --git a/src/styles/_homepage.sass b/src/styles/_homepage.sass index ece9b66..9f202f4 100644 --- a/src/styles/_homepage.sass +++ b/src/styles/_homepage.sass @@ -33,7 +33,7 @@ section.dashboard-main, section.dashboard-secondary - h4 + .section-title padding-bottom: 5px margin-bottom: 20px position: relative @@ -139,11 +139,8 @@ border-bottom: thin solid $color-background-dark ul.activity-stream__list - list-style: none - margin: 0 - padding: 0 - $activity-stream-thumbnail-size: 110px + > li position: relative display: flex @@ -180,17 +177,6 @@ transition: font-size 100ms ease-in-out &.comment - .activity-stream__list-thumbnail - background: transparent - color: $node-type-comment - font-size: 1.2em - box-shadow: none - - i - +position-center-translate - left: 22px - top: 19px - .activity-stream__list-details padding: 0 .title @@ -300,7 +286,6 @@ overflow: hidden position: relative max-width: 100% - margin-right: auto padding: 10px 0 +media-xs @@ -310,18 +295,14 @@ +ribbon right: -47px top: 5px - font: - size: 12px - weight: 500 + font-size: 12px span padding: 1px 50px .title - display: inline-block padding: 0 10px color: $color-text-dark - font-size: 1.1em span @include badge(hsl(hue($color-success), 60%, 45%), 3px) @@ -653,10 +634,6 @@ section.announcement .title padding-bottom: 10px - font: - family: $font-body - size: 1.4em - weight: 300 +media-xs font-size: 1.4em diff --git a/src/styles/_welcome.sass b/src/styles/_welcome.sass index 99f92c5..8b317f2 100644 --- a/src/styles/_welcome.sass +++ b/src/styles/_welcome.sass @@ -334,9 +334,7 @@ section.pricing +button($color-primary, 3px, true) h3 - font: - size: 1.8em - family: $font-body + font-size: 1.8em padding-bottom: 0 margin: 25px 0 0 10px diff --git a/src/styles/project-landing.sass b/src/styles/project-landing.sass index 7eaa671..c1d8998 100644 --- a/src/styles/project-landing.sass +++ b/src/styles/project-landing.sass @@ -57,11 +57,11 @@ nav.navbar .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 diff --git a/src/templates/homepage.pug b/src/templates/homepage.pug index e9f7274..50691c7 100644 --- a/src/templates/homepage.pug +++ b/src/templates/homepage.pug @@ -51,7 +51,7 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_ | {{ navigation_tabs(title) }} section.dashboard-in-production - h4 In Production + h6.section-title In Production span.section-lead. Check out these projects currently in production! @@ -68,9 +68,9 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_ section.stream - h4 Latest Assets + h6.section-title Latest Assets - ul.activity-stream__list + ul.activity-stream__list.list-unstyled | {% for n in activity_stream %} li( class="{{ n.node_type }} {{ n.properties.content_type }} {% if n.picture %}with-picture{% endif %}", @@ -135,11 +135,11 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_ section.random-asset - h4 + h6.section-title a(href="/search") Explore the Cloud span.section-lead Random selection of the best assets & tutorials - ul.random-asset__list + ul.random-asset__list.list-unstyled | {% for n in random_featured %} | {% if n.picture and loop.first %} li.random-asset__list-item.project @@ -220,9 +220,9 @@ meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_ section.comments - h4 Latest Comments + h6.section-title Latest Comments - ul + ul.list-unstyled | {% if latest_comments %} | {% for n in latest_comments %} li( diff --git a/src/templates/layout.pug b/src/templates/layout.pug index 47e902a..a886b1d 100644 --- a/src/templates/layout.pug +++ b/src/templates/layout.pug @@ -3,7 +3,7 @@ html(lang="en") head meta(charset="utf-8") title {% if self.page_title() %}{% block page_title %}{% endblock %} — {% endif %}Blender Cloud - meta(name="viewport", content="width=device-width, initial-scale=1.0") + meta(name="viewport", content="width=device-width, initial-scale=1, shrink-to-fit=no") meta(name="description", content="Blender Cloud is a web based service developed by Blender Institute that allows people to access the training videos and all the data from the open projects.") meta(name="author", content="Blender Institute") meta(name="theme-color", content="#3e92aa") @@ -50,7 +50,6 @@ html(lang="en") | {% 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") | {% if title == 'blog' %} link(href="{{ url_for('static_pillar', filename='assets/css/blog.css') }}", rel="stylesheet") | {% else %} @@ -58,14 +57,11 @@ html(lang="en") | {% endif %} | {% endblock css %} - - | {% if not title %}{% set title="default" %}{% endif %} - + | {% if not title %}{% set title="default" %}{% endif %} body(class="{{ title }}") .container-page | {% with messages = get_flashed_messages(with_categories=True) %} - | {% if messages %} - + | {% if messages %} | {% for (category, message) in messages %} .alert(role="alert", class="alert-{{ category }}") i.alert-icon(class="{{ category }}") @@ -73,21 +69,25 @@ html(lang="en") button.close(type="button", data-dismiss="alert") i.pi-cancel | {% endfor %} - - | {% endif %} + | {% endif %} | {% endwith %} - nav.navbar + nav.navbar.navbar-expand-md .navbar-container - header.navbar-header - button.navbar-toggle(data-target=".navbar-collapse", data-toggle="collapse", type="button") - span.sr-only Toggle navigation + //- header.navbar-header + a.navbar-brand( + href="{{ url_for('main.homepage') }}", + title="Blender Cloud") + span.app-logo + i.pi-blender-cloud-logo + + button.navbar-toggler.text-light( + data-target=".navbar-collapse", + data-toggle="collapse", + type="button") + span.sr-only Toggle navigation + span.navbar-toggler-icon.d-flex.align-items-center i.pi-menu - a.navbar-brand( - href="{{ url_for('main.homepage') }}", - title="Blender Cloud") - span.app-logo - i.pi-blender-cloud | {% block navigation_search %} .search-input @@ -97,8 +97,8 @@ html(lang="en") i.search-icon.pi-search | {% endblock navigation_search %} - nav.collapse.navbar-collapse - ul.nav.navbar-nav.navbar-right + .collapse.navbar-collapse + ul.nav.navbar-nav.ml-auto | {% if node and node.properties and node.properties.category %} | {% set category = node.properties.category %} | {% else %} @@ -234,40 +234,95 @@ html(lang="en") .container .row .col-md-4.col-xs-6 - .footer-support - h4 Support & Feedback - p. - Let us know what you think or if you have any issues - just write to cloudsupport at blender dot org - - .col-md-2.col-xs-6 - ul.footer-social - li - a(href="https://www.facebook.com/BlenderCloudOfficial/", - title="Follow us on Facebook") - i.pi-social-facebook - li - a(href="https://twitter.com/Blender_Cloud", - title="Follow us on Twitter") - i.pi-social-twitter - - .col-md-2.col-xs-6 h4 a(href="{{ url_for('main.homepage') }}") - | Blender Cloud - ul.footer-links + i.pi-blender-cloud-logo + + p.pl-2. + Blender Cloud is the creative hub for your projects, + powered by Free and Open Source Software. + + h5.d-flex + a.px-2(href="https://twitter.com/Blender_Cloud", + title="Follow us on Twitter") + i.pi-social-youtube + + a.px-2(href="https://twitter.com/Blender_Cloud", + title="Follow us on Twitter") + i.pi-social-twitter + + a.px-2(href="https://www.facebook.com/BlenderCloudOfficial/", + title="Follow us on Facebook") + i.pi-social-facebook + + .col-md-2.col-xs-6 + h7.font-weight-bold + | TRAINING + + ul.list-unstyled + li + a(href="{{ url_for('cloud.courses') }}") + | Courses + li + a(href="{{ url_for('cloud.workshops') }}") + | Workshops + li + a(href="{{ url_for('projects.view', project_url='gallery') }}") + | Art Gallery + + .col-md-2.col-xs-6 + h7.font-weight-bold + | LIBRARIES + + ul.list-unstyled li a(href="{{ url_for('main.main_blog') }}", title="Blender Cloud Blog") - | Blog + | HDRIs li a(href="{{ url_for('cloud.services') }}", title="Blender Cloud Services") - | Services + | Textures li a(href="{{ url_for('cloud.about') }}", title="About Blender Cloud") - | About + | Characters + + .col-md-2.col-xs-6 + h7.font-weight-bold + a(href="{{ url_for('cloud.services') }}") + | SERVICES + + ul.list-unstyled + li + a(href="{{ url_for('main.main_blog') }}", + title="Blender Cloud Blog") + | Add-on + li + a(href="{{ url_for('main.main_blog') }}", + title="Blender Cloud Blog") + | Blender Sync + li + a(href="{{ url_for('cloud.services') }}", + title="Blender Cloud Services") + | Attract + li + a(href="{{ url_for('cloud.about') }}", + title="About Blender Cloud") + | Flamenco + li + a(href="{{ url_for('cloud.about') }}", + title="About Blender Cloud") + | Image Sharing + + .col-md-2.col-xs-6 + h7.font-weight-bold + | BLENDER + ul.list-unstyled + li + a(href="{{ url_for('main.main_blog') }}", + title="Blender Cloud Blog") + | blender.org li a(href="{{ url_for('cloud.terms_and_conditions') }}", title="Terms and Conditions") @@ -276,26 +331,6 @@ html(lang="en") a(href="{{ url_for('cloud.privacy') }}", title="Privacy") | Privacy - - .col-md-2.col-xs-6 - h4 - a(href="https://www.blender.org", - title="Blender official Website") - | Blender - ul.footer-links - li - a(href="https://www.blender.org", - title="Blender official Website") - | Blender.org - li - a(href="https://store.blender.org/", - title="The official Blender Store") - | Blender Store - - .col-md-2.col-xs-6.special - | With the support of the
MEDIA Programme of the European Union

- img(alt="MEDIA Programme of the European Union", - src="https://gooseberry.blender.org/wp-content/uploads/2014/01/media_programme.png") | {% endblock footer_navigation %} | {% block footer %}