Merge pull request #3047 from k88hudson/gh3001

Add extra space for snippets, fix various CSS stuff
mozilla · Jul 31, 2017 · d9d79b6 · d9d79b6
2 parents c260e0a + 9669521
commit d9d79b6
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 16 deletions.
diff --git a/system-addon/content-src/components/Base/_Base.scss b/system-addon/content-src/components/Base/_Base.scss
@@ -9,6 +9,10 @@ main {
   margin: auto;
   width: $wrapper-default-width;
 
+  // This is needed to offset the snippets container so things
+  // at the bottom of the page are still visible when snippets are visible
+  padding-bottom: $snippets-container-height;
+
   @media (min-width: $break-point-small) {
     width: $wrapper-max-width-small;
   }

diff --git a/system-addon/content-src/components/TopSites/_TopSites.scss b/system-addon/content-src/components/TopSites/_TopSites.scss
@@ -9,6 +9,7 @@
   margin: 0;
   padding: 0;
   margin-inline-end: -$base-gutter;
+  margin-bottom: -$top-sites-vertical-space;
 
   // Two columns
   @media (max-width: $break-point-small) {

diff --git a/system-addon/content-src/components/Topics/_Topics.scss b/system-addon/content-src/components/Topics/_Topics.scss
@@ -4,36 +4,48 @@
 
   font-size: 13px;
   color: $topic-grey;
-  min-width: 780px;
-  line-height: 16px;
   margin-top: $topic-margin-top;
+  line-height: 1.6;
 
-  ul {
-    display: inline;
-    padding-left: 12px;
+  @media (min-width: $break-point-large) {
+    line-height: 16px;
+    min-width: 780px;
   }
 
-  ul li {
-    display: inline;
+  ul {
+    margin: 0;
+    padding: 0;
+    @media (min-width: $break-point-large) {
+      display: inline;
+      padding-left: 12px;
+    }
   }
 
-  ul li::after {
-    content: '•';
-    padding-left: 8px;
-    padding-right: 8px;
-  }
 
-  ul li:last-child::after {
-    content: none;
+  ul li {
+    display: inline-block;
+    @media (min-width: $break-point-large) {
+      display: inline;
+    }
+    &::after {
+      content: '•';
+      padding-left: 8px;
+      padding-right: 8px;
+    }
+    &:last-child::after {
+      content: none;
+    }
   }
 
   .topic-link {
     color: $topic-blue;
   }
 
   .topic-read-more {
-    float: right;
-    margin-right: 40px;
+    @media (min-width: $break-point-large) {
+      margin-right: 40px;
+      float: right;
+    }
     color: $topic-blue;
   }
 

diff --git a/system-addon/content-src/styles/_variables.scss b/system-addon/content-src/styles/_variables.scss
@@ -68,6 +68,8 @@ $search-margin-bottom: 40px;
 
 $image-path: 'assets/';
 
+$snippets-container-height: 120px;
+
 @mixin fade-in {
   box-shadow: inset $inner-box-shadow, 0 0 0 5px $faintest-black;
   transition: box-shadow 150ms;