Merge pull request #212 from vmware-tanzu/202-fixing-blog-sidebar-ove…

…rlap 202 fixing blog sidebar overlap
vmware-tanzu · Oct 7, 2021 · 0656bf4 · 0656bf4
2 parents 422457c + 7f2bfc9
commit 0656bf4
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/site/content/posts/announcing-cartographer.md b/site/content/posts/announcing-cartographer.md
@@ -1,7 +1,7 @@
 ---
 title: "Announcing Cartographer"
 slug: building-paths-to-prod
-date: 2021-10-03
+date: 2021-10-05
 author: Cartographer Team
 authorLocation: https://github.com/vmware-tanzu/cartographer/blob/main/MAINTAINERS.md
 image: /img/posts/announcing-carto/cover-image.png
@@ -21,7 +21,7 @@ This is why we’ve created and open-sourced Cartographer, a tightly scoped tool
 
 Cartographer allows users to configure Kubernetes resources into re-usable supply chains that can be used to define all of the stages that an Application Workload must go through to get to an environment. We call these stages the path to production.  
 
-Cartographer separates controls between a user (responsible for defining a Supply Chain; known as an App Operator) and a user (the application creator; Developer). These roles are not necessarily mutually exclusive, but provide the ability to create a separation concerns which means developers can focus on writing code, and platforms teams can focus on smoothing and securing their path to production. 
+Cartographer separates controls between a user responsible for defining a Supply Chain (known as an App Operator) and a user responsible for creating the application (the Developer). These roles are not necessarily mutually exclusive, but provide the ability to create a separation concerns which means developers can focus on writing code, and platforms teams can focus on smoothing and securing their path to production. 
 
 ### Want to learn more?
 

diff --git a/site/themes/template/assets/scss/_components.scss b/site/themes/template/assets/scss/_components.scss
@@ -595,6 +595,24 @@
         @include breakpoint(large) {
             width: 22%;
         }
+        @include breakpoint(small){
+            h4{
+                font-weight: bold;
+                font-size: 12px;
+                word-break: break-word;
+                padding-right: 2px;
+            }
+            a{
+                font-size: 10px;
+                word-break: break-word; 
+            }
+            button{
+                // width: 30%;
+                background-image:none !important;
+                padding: 10px 10px 10px 10px !important;
+                font-size: 12px !important;
+            }
+        }
     }
     .docs-content {
         width: 75%;