Merge pull request #6041 from freedomofpress/5986-semantic-source-int…

…erface

refactors Source Interface for semantic HTML5/ARIA markup

securedrop/sass/modules/_aside.sass

@@ -1,9 +1,9 @@
 =aside
-  aside
+  .aside
     background-color: #fffbe6
     color: #82572d
     border-radius: 10px
-    padding: 10px
+    padding: 10px + 2*8px  // cf. hr.no-line
     margin: 10px
     text-align: left
     font-size: medium

securedrop/sass/modules/_center-text-align.sass

@@ -1,5 +1,6 @@
 =center-text-align
   .center
+    clear: both
     text-align: center
 
   .highlight

securedrop/sass/modules/_code.sass

@@ -1,9 +1,21 @@
 =code
+  .code, .code-reminder
+    background:
+      image: url(/static/i/font-awesome/lock-black.png)
+      origin: content-box
+      repeat: no-repeat
+      size: 20px 23px
+
   .code
-    background: rgba(0, 0, 0, 0.05)
+    background:
+      color: rgba(0, 0, 0, 0.05)
     box-sizing: border-box
     -moz-box-sizing: border-box
     padding: 10px 15px
     border-bottom: 2px solid $color_warning_red
     font-size: large
     text-align: center
+
+  .code-reminder
+    background:
+      size: 17px 20px

securedrop/sass/modules/_flash.sass

@@ -1,4 +1,10 @@
 =flash
+  #flashed
+    margin-top: 0
+
+    ul
+      padding: 0
+
   .flash
     display: flex
     flex-flow: row nowrap
@@ -9,6 +15,10 @@
     text-align: left
     font-size: medium
 
+    background-position-y: center
+    background-position-x: 10px
+    background-repeat: no-repeat
+
     &:dir(rtl)
       text-align: right
 
@@ -18,22 +28,36 @@
     &.success
       border: 1px solid #E1F1E5
       background-color: #E6FFEB
+      background-image: url(/static/i/success_checkmark.png)
+      background-repeat: no-repeat
+      background-size: 74px 64px
+      padding-left: 10px + 74px
 
       strong
         color: #299549
 
+      h2
+        color: #299549
+        font-size: medium
+
     &.notification
       border: 1px solid #8ed9f6
       background-color: #e3f7fc
+      background-image: url(/static/i/font-awesome/info-circle-black.png)
+      background-size: 20px 16px
       font-size: medium
       font-weight: normal
+      padding-left: 10px + 20px
 
       i
         color: #4f7685
 
-    &.error
+    &.error, &.banner-warning
       border: 1px solid $color_error_border
       background-color: $color_error_background
+      background-image: url(/static/i/font-awesome/exclamation-triangle-black.png)
+      background-size: 20px 17px
+      padding-left: 10px + 20px
 
       i
         color: #D62727
@@ -52,6 +76,9 @@
       padding-left: 20px
       padding-right: 8px
       background-color: #FDFDFD
+      background-image: url(/static/i/bang-stop.png)
+      background-size: 22px 22px
+      padding-left: 10px + 22px
       color: #383838
       align-items: center
 

securedrop/sass/modules/_footer.sass

@@ -7,10 +7,29 @@
     font-size: .8em
     line-height: 1
 
+    // Avoid squeezing the separator into the content layout in mobile view
+    margin-top: 2.5em
+    border-top: solid 1px $color_grimace_grey
+
+  footer p
+    margin-top: 0
+
   footer #footer-powered-by
     color: #373737
     margin-bottom: 0.5em
 
+    &:before
+      content: ""
+
+      display: inline-block
+      height: 23px
+      width: 20px
+      vertical-align: middle
+
+      background:
+        image: url(/static/i/logo-footer.png)
+        size: 20px 23px
+
   footer #footer-advisory
     color: #3b3b3b
     line-height: 1.25

securedrop/sass/modules/_form-validation-error.sass

@@ -1,4 +1,5 @@
 =form-validation-error
-  span.form-validation-error
+  .form-validation-error
     color: red
     font-size: small
+    list-style: none

securedrop/sass/modules/_header.sass

@@ -1,5 +1,5 @@
 =header
-  #header
+  header
     float: left
 
     &:dir(rtl)
@@ -12,3 +12,7 @@
       text-align: center
       color: #666666
       letter-spacing: normal
+
+    h1
+      margin: 0
+      text-align: center

securedrop/sass/modules/_headline.sass

@@ -6,6 +6,7 @@
   h1
     text-align: left
     font-size: 30px
+    padding-top: 10px + 2*8px  // cf. hr.no-line
 
     &:dir(rtl)
       text-align: right

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

@@ -5,16 +5,6 @@
       border-bottom: none
       border-color: #c3c3c3
 
-    &.footer-separator
-      // Avoid squeezing the separator into the content layout in mobile view
-      clear: both
-      width: 100%
-      margin-top: 2.5em
-      margin-bottom: 0
-      height: 1px
-      border: none
-      background: $color_grimace_grey
-
     &.no-line
       clear: both
       border: none

securedrop/sass/modules/_locales.sass

@@ -0,0 +1,28 @@
+#locale-menu-trigger
+  &:before
+    content: ""
+
+    display: inline-block
+    height: 18px
+    width: 18px
+
+    margin-right: 1ch
+
+    background:
+      image: url(/static/i/languages_globe.png)
+      size: 18px 18px
+
+  &:after
+    content: ""
+
+    display: inline
+    height: 18px
+    width: 12px
+
+    margin-left: auto
+
+    background:
+      image: url(/static/i/languages_arrow.png)
+      position: center
+      repeat: no-repeat
+      size: contain

securedrop/sass/modules/_menu.sass

@@ -77,7 +77,7 @@
   &:hover, &:focus, &:active
     background-color: #e8e8e8
 
-.menu__item a span
+.menu__item a 
   text-transform: capitalize
 
 .menu__checkbox:checked ~ .menu__items

securedrop/sass/modules/_panel.sass

@@ -1,8 +1,13 @@
 =panel
-  .panel
-    max-width: 800px
-    width: 100%
-    margin: 0 auto
-    padding: 16px 30px
-    border: 1px solid #e1e1e1
-    float: right
+  body:not(#source-index)
+    main
+      max-width: 800px
+      width: 100%
+      margin: 0 auto
+      padding: 16px 30px
+      border: 1px solid #e1e1e1
+      float: right
+
+      section, article, .section-spacing
+        display: flow-root
+        margin-top: 10px + 2*8px  // cf. hr.no-line

securedrop/sass/modules/_snippet.sass

@@ -22,6 +22,22 @@
         min-width: 100%
         max-width: 100%
 
+      span.fh:before
+        content: ""
+
+        display: block
+        width: 100%
+        height: 56px
+        margin:
+          top: 5px
+          bottom: 10px
+
+        background:
+          image: url(/static/i/arrow-upload-large.png)
+          position: center
+          repeat: no-repeat
+          size: 56px 56px
+
     .message
       display: inline-block
       vertical-align: top

securedrop/sass/modules/_warning.sass

@@ -15,3 +15,20 @@
 
     .close
       cursor: pointer
+
+    p
+      margin: 0
+
+      &:before
+        content: ""
+
+        display: inline-block
+        height: 12px
+        width: 12px
+        vertical-align: middle
+
+        margin-right: 1ch
+
+        background:
+          image: url(/static/i/font-awesome/white/exclamation-circle.svg)
+          size: 12px 12px