Commit to proper branch

.stylelintrc.json

@@ -12,6 +12,8 @@
   "rules": {
     "at-rule-no-unknown": null,
     "color-hex-case": "upper",
+    "declaration-block-semicolon-newline-after": "always",
+    "indentation": 4,
     "no-descending-specificity": null,
     "number-leading-zero": "never",
     "scss/at-rule-no-unknown": true

privaterelay/templates/includes/header.html

@@ -6,8 +6,7 @@
 
 {% get_current_language as LANGUAGE_CODE %}
 
-<header class="flx flx-col spc-btwn">
-
+<header>
   {% if settings.INCLUDE_VPN_BANNER %}
     {% include "includes/vpn-promo-banner.html" %}
   {% endif %}
@@ -68,20 +67,20 @@
     </div>
   {% endif %}
 
-  <div class="flx flx-row spc-btwn row-full-width header-top">
-    <a href="/" class="flx flx-row logo-wrapper" aria-label="{% ftlmsg 'logo-alt' %}">
+  <div class="header-top">
+    <a href="/" class="logo-wrapper" aria-label="{% ftlmsg 'logo-alt' %}">
       <div class="fx-private-relay-logomark"></div>
       <div class="fx-private-relay-logotype"></div>
     </a>
-    <nav class="flx flx-row ff-Met al-cntr header-nav hide-mobile">
+    <nav class="header-nav">
       <a class="{% if request.path == '/' or request.path == '/accounts/profile/' %} active-header-link {% endif %} header-link" href="/">{% ftlmsg 'nav-home' %}</a>
       <a class="{% if request.path == '/faq' %} active-header-link {% endif %} header-link" href="/faq">{% ftlmsg 'nav-faq' %}</a>
     </nav>
     {% include "includes/login.html" %}
   </div>
-  <nav class="flx flx-col ff-Met al-cntr mobile-menu show-mobile">
-    <button class="mobile-menu-toggle full-width ff-Met" aria-label="{% ftlmsg 'label-open-menu' %}"><span class="mobile-menu-label">{% ftlmsg 'nav-menu' %}</span></button>
-    <div class="mobile-menu-links flx flx-col">
+  <nav class="mobile-menu">
+    <button class="mobile-menu-toggle" aria-label="{% ftlmsg 'label-open-menu' %}"><span class="mobile-menu-label">{% ftlmsg 'nav-menu' %}</span></button>
+    <div class="mobile-menu-links">
       <a class="{% if request.path == '/' or request.path == '/accounts/profile/' %} active-header-link {% endif %} mobile-menu-link mobile-home-link" href="/">{% ftlmsg 'nav-home' %}</a>
       <a class="{% if request.path == '/faq' %} active-header-link {% endif %} mobile-menu-link" href="/faq">{% ftlmsg 'nav-faq' %}</a>
       {% if request.user.is_anonymous %}

static/scss/app.scss

@@ -16,6 +16,8 @@
 
 // Previous Styles
 @import "partials/main";
+@import "partials/header";
+@import "partials/banners";
 @import "partials/dashboard";
 @import "partials/onboarding.scss";
 @import "partials/fx-bento";

static/scss/partials/banners.scss

@@ -0,0 +1,89 @@
+.recruitment-banner, .micro-survey-banner {
+  text-align: center;
+  position: relative;
+  padding: 1em;
+}
+
+.micro-survey-banner {
+  background: rgba(255,255,255,.1);
+}
+
+.micro-survey-banner.hidden {
+  display: none;
+}
+
+.micro-survey-options {
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.micro-survey-options .micro-survey-option {
+  border-radius: 4px;
+  margin-right: 1rem;
+  background-color: $color-violet-40;
+  transition: background .1s ease-out;
+}
+
+.micro-survey-options .micro-survey-option:hover {
+  background-color: $color-blue-50;
+}
+
+
+.micro-survey-options-numeric .micro-survey-option {
+    width: 2.5rem;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+
+.micro-survey-options-likert .micro-survey-option {
+    padding: .5rem .75rem;
+}
+
+.micro-survey-options li:last-child  {
+  margin-right: 0;
+}
+
+
+.nps-bookend {
+  color: $color-white;
+  text-decoration: none;
+  font-family: $font-metropolis;
+  display: inline-block;
+  margin-right: 1rem;
+}
+
+#recruitment-banner, .micro-survey-option {
+  color: $color-white;
+  text-decoration: none;
+  font-family: $font-metropolis;
+  display: inline-block;
+  padding: 0 1em;
+}
+
+#recruitment-banner:hover, .micro-survey-option:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.recruitment-banner::after, .micro-survey-banner::after {
+  height: 1px;
+  background: var(--fxGradient);
+  content: "";
+  display: block;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  opacity: .3;
+}
+
+@media screen and (max-width: 800px) {
+  #micro-survey-banner {
+    display: none;
+  }
+}