Merge pull request #502 from MarkLodato/v1-levels

SLSA v1.0: rewrite levels.md to split Build vs Source, undefine L4, and better explain

docs/_sass/dl-as-table.scss

@@ -0,0 +1,55 @@
+// Format definition lists as tables. This allows us to use Markdown instead of
+// HTML, and also allows us to have a responsive design that works on mobile.
+//
+// TODO: Do not render as a table on mobile.
+
+dl.as-table {
+
+  // Turn dl into a table
+  & {
+    display: grid;
+    grid-template-columns: max-content auto;
+  }
+  > dt {
+    grid-column-start: 1;
+  }
+  > dd {
+    grid-column-start: 2;
+  }
+
+  // Remove extra whitespace from top and bottom of each box.
+  > dd > :first-child,
+  > dd > ul:first-child > li:first-child,
+  > dd > ul:first-child > li:first-child > p:first-child  {
+    margin-top: 0;
+  }
+  > dd > :last-child,
+  > dd > ul:last-child > li:last-child,
+  > dd > ul:last-child > li:last-child > p:last-child  {
+    margin-bottom: 0;
+  }
+
+  // Format similar to the table from minima/_base.scss.
+  & {
+    border-top: 1px solid $grey-color-light;
+    border-left: 1px solid $grey-color-light;
+    border-collapse: collapse;
+    margin: 1rem 0 2.5rem 0;
+    line-height: 1.4;
+  }
+  > dd, > dt {
+    border-right: 1px solid $grey-color-light;
+    border-bottom: 1px solid $grey-color-light;
+    padding: $spacer-l ($spacer-xl / 2);
+  }
+  > dt {
+    text-align: left;
+    font-weight: 500;
+    color: $dark-green;
+    background-color: $lightest-green;
+
+    // Vertically center the definition term
+    display: flex;
+    align-items: center;
+  }
+}

docs/_sass/minima.scss

@@ -21,6 +21,7 @@ $light-green: #58DA95;
 $green-darkest: #102B2D;
 $pastel-green: #ECF8F2;
 $button-green: #23907E;
+$lightest-green: #F7FAF9;
 
 // font variables
 
@@ -104,3 +105,4 @@ $on-laptop: 1180px !default;
 
 // Import partials.
 @import "minima/base", "minima/layout", "minima/syntax-highlighting", "minima/custom";
+@import "dl-as-table";

docs/_sass/minima/_base.scss

@@ -217,7 +217,7 @@ table {
     border: 1px solid $grey-color-light;
     tr {
         &:nth-child(even) {
-            background-color: #F7FAF9;
+            background-color: $lightest-green;
         }
     }
     th,

docs/_sass/minima/_custom.scss

@@ -302,7 +302,7 @@ h5, .h5 {
         border: 1px solid #CECECE;
         border-radius: 20px;
         th {
-            background-color: #F7FAF9;
+            background-color: $lightest-green;
         }
     }
     blockquote {
@@ -313,7 +313,7 @@ h5, .h5 {
 
         /* Green - Lightest */
         border: none;
-        background: #F7FAF9;
+        background: $lightest-green;
         border-radius: $radius;
         margin-bottom: 30px;
         letter-spacing: normal;
@@ -483,7 +483,8 @@ details {
 
 // This is a hack to fix paragraph spacing. Really the theme should be fixed.
 // See https://github.com/slsa-framework/slsa/issues/335.
-.fix-paragraph-spacing {
+.fix-paragraph-spacing,
+dl.as-table {
   p, ul, ol {
     margin-bottom: 12px;
     &:last-child {