From b011b68a1a47299b67ad836c74b280e58f88a0c0 Mon Sep 17 00:00:00 2001
From: Kat Zhou <61153904+katz95@users.noreply.github.com>
Date: Wed, 30 Sep 2020 12:58:06 +0200
Subject: [PATCH] Fixed images in Blog Post (#2675)

* microsite changes

adding padding to bottom of graphic

changing background of last section of Demos page

* Update 2020-09-30-backstage-design-system.md
---
 microsite/blog/2020-09-30-backstage-design-system.md | 8 ++++----
 microsite/pages/en/demos.js                          | 2 +-
 microsite/static/css/custom.css                      | 1 +
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/microsite/blog/2020-09-30-backstage-design-system.md b/microsite/blog/2020-09-30-backstage-design-system.md
index 7860ee3191..37d8df309f 100644
--- a/microsite/blog/2020-09-30-backstage-design-system.md
+++ b/microsite/blog/2020-09-30-backstage-design-system.md
@@ -48,25 +48,25 @@ The quickest way to start is by duplicating our [Figma UI kit](https://www.figma
 As you’re designing and building your plugins, make sure to take advantage of these helpful resources.
 
 ![img](assets/backstage-figma1-DS.png)
-![img](assets/backstage-figma2-DS.png)
+![img](assets/backstage-figma2-ds.png)
 
 **[Figma Community](https://www.figma.com/@backstage)**
 
 We are thrilled to be using Figma Community to share our design assets. You can duplicate our UI kit and design your own plugin for Backstage. Figma Community is currently in beta, so this is a neat opportunity to be testing out a new way of working. At the moment, it doesn’t support auto-updating of duplicated files, so we’ll be announcing new versions of our UI kit on Discord in the #design channel.
 
-![img](assets/backstage-storybook-DS.png)
+![img](assets/backstage-storybook-ds.png)
 
 **[Storybook](https://backstage.io/storybook/)**
 
 This is where you can view our reusable components. If you’d like to help build up our design system, you can also help us add components that we’ve designed to Storybook as well. We post newly designed components and patterns to GitHub as issues, where contributors can pick them up and add them to our Storybook so they’re available for the rest of the Backstage community.
 
-![img](assets/backstage-guidelines-DS.png)
+![img](assets/backstage-guidelines-ds.png)
 
 **[Guidelines](https://backstage.io/docs/dls/design)**
 
 To keep up with our latest design guidelines, go to [Designing for Backstage](https://backstage.io/docs/dls/design). You’ll find more how-to’s and you can also learn more about our design philosophy and practices there. Down the line, we plan on including more in-depth component rules in this section (i.e., dos/don’ts, use cases, etc.).
 
-![img](assets/backstage-github-DS.png)
+![img](assets/backstage-github-ds.png)
 
 **[GitHub](https://github.com/spotify/backstage)**
 
diff --git a/microsite/pages/en/demos.js b/microsite/pages/en/demos.js
index d891e05613..c6657c6a31 100644
--- a/microsite/pages/en/demos.js
+++ b/microsite/pages/en/demos.js
@@ -216,7 +216,7 @@ const Background = props => {
         </Block.Container>
       </Block>
 
-      <Block className="stripe-bottom bg-black-grey">
+      <Block className="stripe bg-black">
         <Block.Container style={{ justifyContent: 'flex-start' }}>
           <Block.TextBox>
             <Block.Title>Manage data pipelines</Block.Title>
diff --git a/microsite/static/css/custom.css b/microsite/static/css/custom.css
index 79b8fd9de4..738478724f 100644
--- a/microsite/static/css/custom.css
+++ b/microsite/static/css/custom.css
@@ -844,6 +844,7 @@ code {
   width: 700px;
   margin: 20px auto;
   max-width: calc(100vw - 80px);
+  padding-bottom: 80px;
 }
 
 @media only screen and (max-width: 485px) {