docs examples

pages/_docs/cards.md

@@ -83,7 +83,7 @@ If you want to create a couple of posts next to each other, add the `.row-deck`
     </div>
 </div>
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=2 %}
 
 ## Post card with aside image
 
@@ -92,7 +92,7 @@ You can also add the image on the left side of the card. All you need do to is:
 {% capture code %}
 {% include cards/blog-single.html type="aside" liked=1 article-id=3 %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=2 %}
 
 ## Color variations
 
@@ -106,19 +106,19 @@ You can also add the image on the left side of the card. All you need do to is:
     </div>
 </div>
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=2 %}
 
 ## Stacked card
 
 {% capture code %}
 {% include cards/card.html class="card-stacked" title="Stacked card" %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=1 %}
 
 ## Tabbed card
 
 {% capture code %}
 {% include cards/card-tabs.html count=4 %}
 {% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=2 %}
 

pages/_includes/example.html

@@ -16,6 +16,8 @@
 {% assign code = code | replace_regex: "\n\n+", new_line %}
 {% assign code = code | replace_regex: '<svg[^>]*>.*?<\/svg>', '<!-- SVG icon code -->' %}
 {% assign code = code | replace_regex: 'url\(([^\)]+)\)', 'url(...)' %}
+{% assign code = code | replace_regex: 'src="([^"]+)"', 'src="..."' %}
+{% assign code = code | replace_regex: 'href="([^#][^"]+)"', 'href="#"' %}
 {% assign code = code | htmlbeautifier %}
 
 <div class="example-code">

scss/_variables.scss

@@ -55,7 +55,7 @@ $white: #ffffff !default;
 $body-bg: $light !default;
 $body-color: $dark !default;
 
-$text-muted-opacity: .64 !default;
+$text-muted-opacity: .60 !default;
 $text-muted: mix($body-color, #ffffff, $text-muted-opacity * 100%) !default;
 $border-color: rgba($text-muted, .24) !default;
 

scss/demo/_examples.scss

@@ -21,6 +21,7 @@
   font-size: $font-size-base;
   color: $body-color;
   flex: 1;
+  max-width: 100%;
 }
 
 .example-bg {