Polish nav for all pages. Fix hover dropdowns, notification, profile menu

src/styles/_footer.sass

@@ -1,11 +1,9 @@
+@import ../styles/colors
+@import ../styles/breakpoints
+
 footer.container-fluid
 	background: #F8F8FB
 	border-top: 1px solid #E3E3E6
-	margin-top: 72px
-	+media-breakpoint-up(sm)
-		margin-top: 112px
-	+media-breakpoint-up(lg)
-		margin-top: 136px
 	.container
 		margin-top: 11px
 		max-width: 1200px

src/styles/_gallery.sass

@@ -1,3 +1,6 @@
+@import ../styles/colors
+@import ../styles/breakpoints
+
 .gallery
   .cta-arrow
     margin-top: 20px

src/styles/_jumbotron.sass

@@ -1,3 +1,6 @@
+@import ../styles/colors
+@import ../styles/breakpoints
+
 .jumbotron
 	background-color: #fff
 	background-repeat: no-repeat

src/styles/_navbar-secondary.sass

@@ -1,3 +1,6 @@
+@import ../styles/colors
+@import ../styles/breakpoints
+
 .nav-scroller
 	position: relative
 	z-index: 2

src/styles/_navbar.sass

@@ -1,3 +1,6 @@
+@import ../styles/colors
+@import ../styles/breakpoints
+
 nav.navbar
   background: #fff
   height: auto
@@ -19,6 +22,8 @@ nav.navbar
   .navbar-toggler
     padding: 0
     border-radius: 0
+    &:hover
+      background: none
   .navbar-nav
     margin-bottom: 15px
     margin-top: 15px
@@ -29,10 +34,37 @@ nav.navbar
     .special
       top: 10px
       left: 35px
+    a.navbar-item.active,
+    a.navbar-item.active:hover,
+    a.navbar-item:hover
+      box-shadow: none
+  li:last-of-type
+    // profile menu
+    .dropdown-menu
+      right: 0
+      left: auto
+      min-width: 10rem
+      padding: .5rem 0
+      margin: -1px 0 0
+      font-size: 1rem
+      color: #111
+      text-align: left
+      list-style: none
+      background-color: #fff
+      background-clip: padding-box
+      border: 1px solid rgba(0,0,0,.15)
+      border-radius: .25rem
+    li:hover
+      background-color: #f8f9fa
+  .dropdown ul.dropdown-menu li a
+    color: #111
+    font-family: 'Source Sans Pro', sans-serif
+    &:hover
+      color: #111
+      text-decoration: none
   .nav-item .nav-link
     font-size: 18px
     color: $dark
-    // padding: 3vh 8px 3vh 34px
     padding: 10px
     +media-breakpoint-up(lg)
       padding: 6px 18px
@@ -81,15 +113,35 @@ nav.navbar
     .navbar-item
       height: auto
       padding: 0
+      .active
+        box-shadow: 0
+    .flyout
+      background-color: #fff
+      background-clip: padding-box
+      border: 1px solid rgba(0,0,0,.15)
+      border-radius: .25rem
+      box-shadow: 0
+      font-size: 16px
+    .flyout.notifications
+      right: 65px
+      top: 57px
+  .nav-notifications:hover>#notifications-toggle
+    display: block
   .nav-notifications-icon
     color: rgba(17,17,17,0.75)
   .gravatar
     width: 32px
     border-radius: 50%
   .dropdown-menu
-    margin-top: -2px
+    margin-top: -1px
   .dropdown:hover>.dropdown-menu
     display: block
+  .dropdown-item
+    color: #111
+    font-size: 18px
+    padding: 4px 8px
+    i
+      padding-right: 8px
 #userDropdown
   .nav-link
     padding-top: 4px

src/styles/base.sass

@@ -1,8 +1,12 @@
+/* mixins reused on every page
+   ================================================================== */
+@import ../styles/typography
+@import ../styles/navbar
+@import ../styles/footer
+
+
 /* Undo Old Base.css, main.css
    ================================================================== */
-body,
-.container-page
-  background: #fff
 .container
   width: 100%
   padding-right: 15px

src/styles/project-landing.sass

@@ -1,17 +1,16 @@
 @import ../styles/colors
 @import ../styles/breakpoints
-@import ../styles/typography
-@import ../styles/base
-@import ../styles/navbar
 @import ../styles/jumbotron
 @import ../styles/navbar-secondary
 @import ../styles/iframe
 @import ../styles/gallery
 @import ../styles/cards
-@import ../styles/footer
 
 /* Undo main.css padding
    ================================================================== */
+body,
+.container-page
+  background: #fff
 section.node-details-container.project
   padding-bottom: 0
   .node-details-title
@@ -46,3 +45,9 @@ section
   .card
     .card-image
       margin-top: 0
+footer.container-fluid
+	margin-top: 72px
+	+media-breakpoint-up(sm)
+		margin-top: 112px
+	+media-breakpoint-up(lg)
+		margin-top: 136px

src/styles/projects-index-collection.sass

@@ -1,9 +1,15 @@
 @import ../styles/colors
 @import ../styles/breakpoints
-@import ../styles/typography
-@import ../styles/base
-@import ../styles/navbar
 @import ../styles/jumbotron
 @import ../styles/navbar-secondary
 @import ../styles/cards
-@import ../styles/footer
+
+body,
+.container-page
+  background: #fff
+footer.container-fluid	
+	margin-top: 72px
+	+media-breakpoint-up(sm)
+		margin-top: 112px
+	+media-breakpoint-up(lg)
+		margin-top: 136px

src/styles/welcome.sass

@@ -0,0 +1,29 @@
+@import ../styles/colors
+@import ../styles/breakpoints
+
+nav.navbar
+  +media-breakpoint-up(md)
+    padding: 10px 10px 10px 20px
+  .nav-item-sign-in
+    line-height: 1.5
+    display: flex
+    align-items: center
+    justify-content: center
+    .navbar-item
+.join .navbar .nav-item-sign-in a.navbar-item
+  background: $primary
+  font-size: 16px
+  font-weight: 600
+  margin: 0
+  padding: 8px 16px
+  width: 100%
+  &:hover
+    background: $primary
+  +media-breakpoint-up(md)
+    width: auto
+// temporarily restore old primary color
+h2,
+h3
+  color: #68B3C8
+footer.container-fluid
+  margin-top: 0

src/templates/homepage.pug

@@ -17,11 +17,6 @@ meta(name="twitter:description", content="Blender Cloud is a web based service d
 meta(property="og:image", content="{% if main_project.picture_header %}{{ main_project.picture_header.thumbnail('l', api=api) }}{% else %}{{ url_for('static', filename='assets/img/backgrounds/background_agent327_04.jpg')}}{% endif %}")
 meta(name="twitter:image", content="{% if main_project.picture_header %}{{ main_project.picture_header.thumbnail('l', api=api) }}{% else %}{{ url_for('static', filename='assets/img/backgrounds/background_agent327_04.jpg')}}{% endif %}")
 | {% endblock %}
-| {% block css %}
-| {{ super() }}
-link(href="{{ url_for('static_cloud', filename='assets/css/projects-index-collection.css') }}", rel="stylesheet")
-| {% endblock css %}
-
 
 | {% block body %}
 .dashboard-container

src/templates/layout.pug

@@ -59,6 +59,8 @@ html(lang="en")
 		link(href="{{ url_for('static_pillar', filename='assets/css/blog.css') }}", rel="stylesheet")
 		| {% else %}
 		link(href="{{ url_for('static_cloud', filename='assets/css/main.css') }}", rel="stylesheet")
+		link(href="{{ url_for('static_cloud', filename='assets/css/base.css') }}", rel="stylesheet")
+		
 		| {% endif %}
 		| {% endblock css %}
 

src/templates/welcome.pug

@@ -11,6 +11,10 @@ meta(property="og:title", content="Blender Cloud - Open Content Production Platf
 meta(property="og:url", content="https://cloud.blender.org/")
 meta(property="og:image", content="{{ url_for('static', filename='assets/img/backgrounds/background_dweebs_01.jpg')}}")
 | {% endblock og %}
+| {% block css %}
+| {{ super() }}
+link(href="{{ url_for('static_cloud', filename='assets/css/welcome.css') }}", rel="stylesheet")
+| {% endblock css %}
 
 | {% block page_overlay %}
 #page-overlay.video
@@ -19,12 +23,10 @@ meta(property="og:image", content="{{ url_for('static', filename='assets/img/bac
 
 | {% block navigation_search %}{% endblock %}
 | {% block navigation_sections %}
-li
+li.nav-item
-	a.navbar-item(href="{{ url_for('main.main_blog') }}")
+	a.nav-link(href="{{ url_for('main.main_blog') }}") Blog
-		span Blog
+li.nav-item
-li
+	a.nav-link(href="#pricing") Pricing
-	a.navbar-item(href="#pricing")
-		span Pricing
 | {% endblock navigation_sections %}
 
 | {% block navigation_user %}