[PYT-144] Address footer design updates (Lightning-AI#3)

luiscape · Aug 29, 2018 · a8d3f56 · a8d3f56
1 parent a6c8571
commit a8d3f56
Show file tree

Hide file tree

Showing 8 changed files with 132 additions and 3 deletions.
diff --git a/images/chevron-right-orange.svg b/images/chevron-right-orange.svg
diff --git a/images/chevron-right-white.svg b/images/chevron-right-white.svg
diff --git a/pytorch_sphinx_theme/layout.html b/pytorch_sphinx_theme/layout.html
@@ -263,7 +263,7 @@
         <div class="col-md-4 text-center">
           <h2>Docs</h2>
           <p>Lorem ipsum dolor sit amet, consectetur</p>
-          <a href="{{ theme_variables.external_urls['docs'] }}" class="with-right-arrow">View Docs</a>
+          <a class="with-right-arrow" href="{{ theme_variables.external_urls['docs'] }}">View Docs</a>
         </div>
 
         <div class="col-md-4 text-center">

diff --git a/pytorch_sphinx_theme/static/css/theme.css b/pytorch_sphinx_theme/static/css/theme.css
diff --git a/pytorch_sphinx_theme/static/images/chevron-right-orange.svg b/pytorch_sphinx_theme/static/images/chevron-right-orange.svg
diff --git a/pytorch_sphinx_theme/static/images/chevron-right-white.svg b/pytorch_sphinx_theme/static/images/chevron-right-white.svg
diff --git a/scss/shared/_base_styles.scss b/scss/shared/_base_styles.scss
@@ -21,6 +21,22 @@ a:hover {
   color: $orange;
 }
 
+a, .btn {
+  &.with-right-arrow {
+    padding-right: rem(22px);
+    position: relative;
+    background-image: url("../images/chevron-right-orange.svg");
+    background-size: 6px 13px;
+    background-position: center right 5px;
+    background-repeat: no-repeat;
+    @include desktop {
+      background-size: 8px 14px;
+      background-position: center right 12px;
+      padding-right: rem(32px);
+    }
+  }
+}
+
 ::-webkit-input-placeholder {
   color: $orange;
 }

diff --git a/scss/shared/_footer.scss b/scss/shared/_footer.scss
@@ -81,6 +81,13 @@
     }
   }
 
+  .with-right-arrow {
+    margin-left: 12px;
+    &:hover {
+      background-image: url("../images/chevron-right-white.svg");
+    }
+  }
+
   p {
     font-size: rem(16px);
     line-height: rem(24px);
@@ -96,6 +103,9 @@
   a {
     font-size: rem(18px);
     color: $orange;
+    &:hover {
+      color: $white;
+    }
   }
 }
 
@@ -162,7 +172,7 @@
 }
 
 .footer-social-icons {
-  margin: rem(10px) 0 rem(40px) 0;
+  margin: rem(137px) 0 rem(40px) 0;
 
   a {
     height: 32px;
@@ -187,3 +197,9 @@
     }
   }
 }
+
+.site-footer {
+  .mc-field-group {
+    margin-top: -2px;
+  }
+}