CHG: Improve media, docs, Asian typography and examples

7 files changed, 73 insertions, 15 deletions

diff --git a/src/asian.less b/src/asian.less
new file mode 100644
index 0000000..79af4fe
--- /dev/null
+++ b/src/asian.less
@@ -0,0 +1,23 @@
+// Optimized for East Asian CJK
+:lang(zh),
+:lang(ja),
+:lang(ko),
+.cjk {
+  font-family: @cjk-font-family;
+}
+
+:lang(zh),
+:lang(ja),
+.cjk {
+  // Credit: https://github.com/ethantw/Han
+  del + del,
+  del + s,
+  ins + ins,
+  ins + u,
+  s + del,
+  s + s,
+  u + ins,
+  u + u {
+    margin-left: .125em;
+  }
+}
diff --git a/src/base.less b/src/base.less
index 6cba96c..bdac3e0 100644
--- a/src/base.less
+++ b/src/base.less
@@ -16,6 +16,7 @@ body {
   font-family: @body-font-family;
   font-size: @body-font-size;
   overflow-x: hidden;
+  text-rendering: optimizeLegibility;
 }
 a {
   color: @core-link-color;
@@ -30,7 +31,7 @@ a {
 &[disabled],
 .disabled {
   cursor: default;
-  opacity: .75;
+  opacity: .5;
   pointer-events: none;
 }
 
diff --git a/src/media.less b/src/media.less
index d4d2f89..1072304 100644
--- a/src/media.less
+++ b/src/media.less
@@ -6,18 +6,26 @@
 }
 
 .video-responsive {
-  height: 0;
+  display: block;
   overflow: hidden;
-  padding-bottom: 56.25%; /* Default 16:9, you can calculate this value by dividing 9 by 16 */
-  padding-top: 3rem;
+  padding: 0;
   position: relative;
+  width: 100%;
+
+  &::before {
+    content: "";
+    display: block;
+    padding-bottom: 56.25%; /* Default 16:9, you can calculate this value by dividing 9 by 16 */
+  }
 
   iframe,
   object,
   embed {
+    bottom: 0;
     height: 100%;
     left: 0;
     position: absolute;
+    right: 0;
     top: 0;
     width: 100%;
   }
@@ -29,7 +37,15 @@
 }
 
 .video-responsive-4-3 {
-  padding-bottom: 75%; /* 4:3 */
+  &::before {
+    padding-bottom: 75%; /* 4:3 */
+  }
+}
+
+.video-responsive-1-1 {
+  &::before {
+    padding-bottom: 100%; /* 1:1 */
+  }
 }
 
 .figure {
diff --git a/src/normalize.less b/src/normalize.less
index 9b77e0e..e8f331b 100644
--- a/src/normalize.less
+++ b/src/normalize.less
@@ -1,4 +1,5 @@
-/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
+/* Manually forked from Normalize.css */
+/* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
 
 /**
  * 1. Change the default font family in all browsers (opinionated).
diff --git a/src/typography.less b/src/typography.less
index 47ef8ab..921d2f6 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -81,19 +81,29 @@ dl {
     margin: .5rem 0 1.5rem 0;
   }
 }
-.lead {
-  font-size: 120%;
-}
-mark,
-.highlight {
+mark {
   background: lighten(@control-color-warning, 32%);
   .label-base();
 }
+kbd {
+  background: @core-dark-color;
+  color: @core-light-color;
+  .label-base();
+}
+abbr[title] {
+  border-bottom: .1rem dotted;
+  cursor: help;
+  text-decoration: none;
+}
+ins,
+u {
+  border-bottom: .1rem solid;
+  text-decoration: none;
+}
 
 // Code
 pre {
   background: lighten(@core-border-color, 4%);
-  border-left: .2rem solid darken(@core-border-color, 5%);
   line-height: 1.8rem;
   margin-bottom: 1em;
   margin-top: 1em;
@@ -102,6 +112,7 @@ pre {
 }
 code {
   background: @core-border-color;
+  color: lighten(@body-font-color, 20%);
   .label-base();
   white-space: nowrap;
 
diff --git a/src/utilities.less b/src/utilities.less
index 3030565..916ca51 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -171,6 +171,9 @@
 .text-italic {
   font-style: italic;
 }
+.text-large {
+  font-size: 1.2em;
+}
 
 .text-ellipsis {
   overflow: hidden;
diff --git a/src/variables.less b/src/variables.less
index 1a9d6ab..55b9d21 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -6,8 +6,11 @@
 @body-bg: #fff;
 @body-font-color: #333;
 @body-font-size: 1.4rem;
-// https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
-@body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Hiragino Kaku Gothic Pro", Meiryo, "Malgun Gothic", "Helvetica Neue", sans-serif;
+// Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
+@base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto;
+@fallback-font-family: "Helvetica Neue", sans-serif;
+@cjk-font-family: @base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Hiragino Kaku Gothic Pro", Meiryo, "Malgun Gothic", @fallback-font-family;
+@body-font-family: @base-font-family, @fallback-font-family;
 
 // Sizes
 @layout-gutter: 1rem;
@@ -56,7 +59,7 @@
 }
 .label-base() {
   border-radius: .2rem;
-  font-size: .9em;
+  font-size: .95em;
   padding: .1em .3em;
   vertical-align: baseline;
 }