add example for color schemes

src/sass/_base.scss

@@ -259,7 +259,6 @@ img {
 .gdoc-footer {
   background: $second-color;
   color: $white;
-  padding: $padding-16;
 
   &__link {
     color: $color-link-footer;
@@ -268,6 +267,10 @@ img {
       color: $color-link-footer;
     }
   }
+
+  .container {
+    padding: $padding-16;
+  }
 }
 
 .gdoc-search {
@@ -414,18 +417,10 @@ img {
   }
 
   .gdoc-header {
-    display: flex;
-
     .icon {
       width: $font-size-16 * 1.5;
       height: $font-size-16 * 1.5;
     }
-
-    .container {
-      width: 100%;
-      max-width: 100%;
-      margin: 0;
-    }
   }
 
   .gdoc-brand {

src/sass/_shortcodes.scss

@@ -73,17 +73,21 @@
 }
 
 // {{< button >}}
-a.gdoc-btn {
+.gdoc-button {
   display: inline-block;
   color: $gray-700;
-  text-decoration: none !important;
   border: $padding-1 solid $gray-500;
   border-radius: $border-radius;
-  padding: $padding-4 $padding-16;
-  margin-top: $padding-8;
-  margin-bottom: $padding-8;
+  margin: $padding-8 0;
   cursor: pointer;
 
+  &__link {
+    display: inline-block;
+    color: inherit !important;
+    text-decoration: none !important;
+    padding: $padding-4 $padding-16;
+  }
+
   &:hover {
     background: rgba($main-color, 0.9);
     border-color: $main-color;