import styles for videoblock from default UI; add video example to UI preview (PR #131)

Author: ggrossetie

preview-src/index.adoc

@@ -293,6 +293,9 @@ image::multirepo-ssg.svg[Multirepo SSG,3000,opts=interactive]
 
 Make the switch today!
 
+.Full Circle with Jake Blauvelt
+video::300817511[vimeo,600,300]
+
 [#english+中文]
 == English + 中文
 

src/css/doc.css

@@ -221,6 +221,7 @@
 .doc .ulist,
 .doc .exampleblock,
 .doc .imageblock,
+.doc .videoblock
 .doc .listingblock,
 .doc .literalblock,
 .doc .sidebarblock,
@@ -472,7 +473,8 @@
   background-image: url(../img/octicons-16.svg#view-alert);
 }
 
-.doc .imageblock {
+.doc .imageblock,
+.doc .videoblock {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -494,6 +496,12 @@
   margin-top: -0.2em;
 }
 
+.doc .videoblock iframe,
+.doc .videoblock video {
+  max-width: 100%;
+  vertical-align: middle;
+}
+
 #preamble .abstract blockquote {
   background: var(--abstract-background);
   border-left: 5px solid var(--abstract-border-color);
@@ -657,6 +665,7 @@
 .doc .admonitionblock .title,
 .doc .exampleblock .title,
 .doc .imageblock .title,
+.doc .videoblock .title,
 .doc .literalblock .title,
 .doc .listingblock .title,
 .doc .openblock .title,
@@ -681,7 +690,8 @@
   margin-bottom: 0.25rem;
 }
 
-.doc .imageblock .title {
+.doc .imageblock .title,
+.doc .videoblock .title {
   margin-top: 0.5rem;
   padding-bottom: 0;
 }