Merge pull request #4666 from freedomofpress/design-refresh-rev2-footer

Redesign footer, index page and language selector.

install_files/ansible-base/roles/build-securedrop-app-code-deb-pkg/files/usr.sbin.apache2

@@ -204,6 +204,7 @@
   /var/www/securedrop/source_templates/error.html r,
   /var/www/securedrop/source_templates/first_submission_flashed_message.html r,
   /var/www/securedrop/source_templates/flashed.html r,
+  /var/www/securedrop/source_templates/footer.html r,
   /var/www/securedrop/source_templates/generate.html r,
   /var/www/securedrop/source_templates/index.html r,
   /var/www/securedrop/source_templates/locales.html r,
@@ -266,7 +267,10 @@
   /var/www/securedrop/static/i/font-awesome/white/exclamation-circle.svg r,
   /var/www/securedrop/static/i/font-awesome/white/guard.svg r,
   /var/www/securedrop/static/i/hand_with_fingerprint.png r,
+  /var/www/securedrop/static/i/languages_arrow.png r,
+  /var/www/securedrop/static/i/languages_globe.png r,
   /var/www/securedrop/static/i/logo.png rw,
+  /var/www/securedrop/static/i/logo-footer.png r,
   /var/www/securedrop/static/i/no16-global.png r,
   /var/www/securedrop/static/i/no16.png r,
   /var/www/securedrop/static/i/securedrop.png r,

securedrop/journalist_templates/locales.html

@@ -2,9 +2,15 @@
 <div class="menu">
   <input id="menu-1-checkbox" class="menu__checkbox visually-hidden" type="checkbox" >
   <label for="menu-1-checkbox" class="menu__trigger">
-    <img class="icon menu__trigger-icon" src="/static/i/font-awesome/fa-globe-black.png" width="18" height="16">
-    <span class="menu__trigger-text">{{ g.locales[g.locale] }}</span>
-    <span class="menu__trigger-arrow">▼</span>
+    <div class="menu-icon-container">
+      <img class="menu__trigger-icon" src="/static/i/languages_globe.png" width="18" height="18">
+    </div>
+    <div class="menu-text-container">
+      <span class="menu__trigger-text">{{ g.locales[g.locale] }}</span>
+    </div>
+    <div class="menu-trigger-container">
+      <img class="menu__trigger-icon" src="/static/i/languages_arrow.png" width="12" height="18">
+    </div>
   </label>
 
   <ul class="menu__items">

securedrop/sass/_source_index.sass

@@ -1,5 +1,10 @@
 =source_index_rules
 
+  h2.welcome-text
+    color: $color_deep_blue
+    text-align: left
+    letter-spacing: .02em
+
   #recommend-tor, #disable-js
     text-decoration: underline
     border: 0
@@ -9,115 +14,115 @@
     text-align: center
     display: flex
     flex-wrap: wrap
+    margin-bottom: 4em
 
     a
       display: inline-block
 
     .header
-      width: 33.3333%
+      width: 30%
       height: 100%
       align-self: center
 
-      img.logo-image
-        width: 80%
-
     p
       text-align: left
       margin: 0
 
       &:dir(rtl)
         text-align: right
 
+      &.extended-welcome-text
+        color: #626161
+        font-size: .9em
+        line-height: 1.5em
+
     .index-row
       display: flex
       justify-content: space-between
       flex-wrap: wrap
-      width: 66.6666%
+      width: 70%
 
     .index-column
-      padding: 1em
+      padding: .5em 2em 1em 2em
       display: flex
       flex-direction: column
-      justify-content: space-between
-      width: 48%
+      justify-content: center
+      width: 47%
       border-top-width: 0
       border-bottom-width: 0
 
     .index-left
-      background-image: linear-gradient(140deg, #0096dc, #005db7)
-      color: white
       border-style: none
 
-    div.index-right
-      background: white
-      border-width: 1px
-      border-style: solid
-      border-image-source: linear-gradient(145deg, #0096dc, #005db7)
-      border-image-slice: 1
-      color: #0A7CDC
-
     .left-cut-out
       border-color: white
 
     .right-cut-out
       border-color: #0A7CDC
 
-    .index-column-bottom-container
-      margin-top: 3em
+    #middle-separator
+      background: $color_grimace_grey
+      margin-top: 1.5em
+      margin-right: 1.2em
+      width: 3px
 
     #submit-documents-button, #login-button
-      padding: 10px 20px 10px 20px
-
-    #submit-documents-button
-      font-weight: bold
-      letter-spacing: 0
-      font-size: 90%
-      background: transparent
-      border: 1px solid white
-
-    #login-button
-      font-weight: bold
-      letter-spacing: 0
-      font-size: 90%
-      background-image: linear-gradient(111deg, #0082d9, #126ec8)
-
-    #login-button:hover
-      background-image: linear-gradient(72deg, $color_grimace_blue, #2d3273)
-      border-color: rgba(0, 0, 0, 0)
-      color: white
-
-    #submit-documents-button:hover
-      color: white
-      background-image: linear-gradient(72deg, $color_grimace_blue, #2d3273)
-      border-color: rgba(0, 0, 0, 0)
-
-    // This query is to reorder the flex box elements so that they correctly form the
-    // two boxes (submit/returning) when the screen is sized down
+      padding: 10px 15px 10px 15px
+      width: 90%
+      font-size: .9em
+      letter-spacing: .1em
+      // Standard secondary buttons have a margin to set them apart from the primary
+      margin-left: 0
+      margin-right: 10%
+
+    // Desktop view
+    @media only screen and (min-width: 768px)
+
+      // Make logo a bit less dominant
+      .header
+        padding: 0em 2em 1em 2em
+
+        img.logo-image
+          width: 80%
+
+      // More room to breathe
+      .index-column-bottom-container
+        margin-top: 3em
+
+      h2.welcome-text
+        margin-bottom: .5em
+
+
+    // Mobile view
     @media only screen and (max-width: 768px)
+
+      // Less room to breathe
+      .index-column-bottom-container
+        margin-top: 1.5em
+
+      h2.welcome-text
+        margin-bottom: .2em
+
+      // Single column, not needed
+      #middle-separator
+        display: none
+
+      // Limit line length for readability
+      p, h2
+        max-width: 500px
+
+      // Reflow into a single column
       .header
         max-height: 250px
         max-width: 100%
-        margin: 20px auto 40px auto
+        min-width: 125px
+        margin: 20px auto 20px auto
 
         img
           width: 100%
 
-      p, h2
-        margin: auto
-        max-width: 500px
-
       .index-row
         width: 100%
 
       .index-column
-        order: 4
         width: 100%
-
-      .index-column.index-top
-        order: 3
-
-      .index-column.index-left
-        order: 2
-
-      .index-column.index-left.index-top
-        order: 1

securedrop/sass/_variables.sass

@@ -8,11 +8,15 @@ $color_error_background: #fce3e3
 
 $color_grey_dark: #626161
 $color_grey_medium: #9e9e9e
+$color_grey_hilight : #e8e8e8
 $color_grey_light:  #f0f0f0
 $color_grey_xlight: #f8f8f8
+// Derived from grimace blue, below
+$color_grimace_grey: rgba(42, 49, 157, 0.1)
 
 $color_grimace_blue: #2a319d
 $color_securedrop_blue: #0065db
 $color_button_blue: #045fb4
+$color_deep_blue: #000c6c
 
 $spacing-unit: 8px

securedrop/sass/modules/_footer.sass

@@ -2,7 +2,24 @@
   footer
     clear: both
     text-align: center
-    border-top: 1px dashed $color_grey_xlight
-    margin-top: 20px
-    padding-top: 20px
-    color: $color_grey_medium
+    padding-top: 2em
+    padding-bottom: 2em
+    font-size: .8em
+    line-height: 1
+
+  footer #footer-powered-by
+    color: #373737
+    margin-bottom: 0.5em
+
+  footer #footer-advisory
+    color: #3b3b3b
+    line-height: 1.25
+    margin-bottom: 0.5em
+
+  footer #footer-fpf
+    line-height: 1
+    color: #9d9cbd
+
+  footer img#footer-logo
+    vertical-align: -40%
+    margin-right: 0.5em

securedrop/sass/modules/_headline.sass

@@ -1,7 +1,7 @@
 =headline
   h1, h2, h3
     font-weight: bold
-    color: #000c6c
+    color: $color_deep_blue
 
   h1
     text-align: left
@@ -12,7 +12,3 @@
 
   h2
     font-size: 25px
-
-    &.welcome-text
-      color: inherit
-      text-align: center

securedrop/sass/modules/_hr-horizontal-rule-line.sass

@@ -7,8 +7,11 @@
 
     &.box-separator
       width: 100%
-      margin-top: 1.5em
-      margin-bottom: 1.5em
+      margin-top: 2.5em
+      margin-bottom: 0
+      height: 1px
+      border: none
+      background: $color_grimace_grey
 
     &.no-line
       clear: both

securedrop/sass/modules/_menu.sass

@@ -1,28 +1,55 @@
+// We want to align the menu with the logo, but the logo width varies in desktop
+// vs. mobile. Note that this currently only aligns menu and logo perfectly on
+// the Source Interface index page, but it has no negative side effects
+// elsewhere.
+@media only screen and (max-width: 768px)
+  .menu
+    width: 100%
+
+  .menu-icon-container
+    display: none
+
+@media only screen and (min-width: 768px)
+  .menu
+    width: 80%
+
 .menu
-  display: flex
   margin: 0 auto
+  // Because the menu trigger is position absolute:
+  min-height: 54px
+  margin-top: 2*$spacing-unit
+  text-align: left
+  font-size: .9em
   position: relative
+
+.menu-icon-container
+  width: 18px
+  padding-right: 1.4em
+
+.menu-text-container
   width: auto
-  min-height: 54px //Because the menu trigger is position absolute
-  margin-top: 2*$spacing-unit
-  text-align: start
-  justify-content: center
+  margin-left: 0.25em
+  width: 100%
+
+.menu-trigger-container
+  width: 12px
 
 .menu__trigger
   display: flex
   align-items: center
-  padding: 2*$spacing-unit
-  border: 1px solid $color_grey_light
+  padding: 0.7em
+  border: 1px solid $color_grey_hilight
   background-color: white
   &:hover, &:focus, &:active
-    background-color: $color_grey_xlight
+    background-color: $color_grey_hilight
 
 .menu__trigger-text
   display: inline-block
   text-transform: capitalize
 
 .menu__trigger-icon
-  padding-right: 0.15em
+  vertical-align: -17%
+  object-fit: contain
 
 .menu__items
   display: none
@@ -32,6 +59,7 @@
   background-color: white
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.25)
   list-style-type: none
+  width: 100%
 
 .menu__item a
   display: flex
@@ -41,7 +69,7 @@
   border-bottom: 1px solid $color_grey_light
   text-decoration: none
   &:hover, &:focus, &:active
-    background-color: $color_grey_xlight
+    background-color: #e8e8e8
 
 .menu__item a span
   text-transform: capitalize

securedrop/sass/source.sass

@@ -10,6 +10,11 @@
 .grid
   margin: 0 auto
   max-width: 921px
+  margin-top: 60px
+
+@media only screen and (max-width: 768px)
+  .grid
+    margin-top: 30px
 
 .option
   a.btn.block