ADD: New Documents experience

9 files changed, 79 insertions, 47 deletions

diff --git a/src/asian.less b/src/asian.less
index 79af4fe..e0af88c 100644
--- a/src/asian.less
+++ b/src/asian.less
@@ -9,6 +9,11 @@
 :lang(zh),
 :lang(ja),
 .cjk {
+  ins,
+  u {
+    border-bottom: .1rem solid;
+    text-decoration: none;
+  }
   // Credit: https://github.com/ethantw/Han
   del + del,
   del + s,
diff --git a/src/badges.less b/src/badges.less
index f1e2512..7669efe 100644
--- a/src/badges.less
+++ b/src/badges.less
@@ -2,21 +2,38 @@
 .badge {
   position: relative;
 
-  &[data-badge]::after {
-    background: @core-color;
-    background-clip: padding-box;
-    border: .1rem solid #fff;
-    border-radius: 1rem;
-    color: @core-light-color;
-    content: attr(data-badge);
-    display: inline-block;
-    font-size: 1.1rem;
-    height: 1.8rem;
-    line-height: 1.2rem;
-    min-width: 1.8rem;
-    padding: .2rem .5rem;
-    text-align: center;
-    transform: translate(-.2rem, -.8rem);
-    white-space: nowrap;
+  &[data-badge],
+  &:not([data-badge]),
+  &[data-badge=''] {
+    &::after {
+      background: @core-color;
+      background-clip: padding-box;
+      border: .1rem solid #fff;
+      border-radius: 1rem;
+      color: @core-light-color;
+      content: attr(data-badge);
+      display: inline-block;
+      transform: translate(-.2rem, -.8rem);
+    }
+  }
+  &[data-badge] {
+    &::after {
+      font-size: 1.1rem;
+      height: 1.8rem;
+      line-height: 1.2rem;
+      min-width: 1.8rem;
+      padding: .2rem .4rem;
+      text-align: center;
+      white-space: nowrap;
+    }
+  }
+  &:not([data-badge]),
+  &[data-badge=''] {
+    &::after {
+      height: .8rem;
+      min-width: .8rem;
+      padding: 0;
+      width: .8rem;
+    }
   }
 }
diff --git a/src/buttons.less b/src/buttons.less
index 3f0900a..e97f0b4 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -12,7 +12,7 @@
   height: 3.2rem;
   line-height: 1.6rem;
   outline: 0;
-  padding: .7rem 1rem;
+  padding: .7rem 1.2rem;
   text-align: center;
   text-decoration: none;
   user-select: none;
diff --git a/src/menus.less b/src/menus.less
index 434beec..2b3a8d7 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -13,7 +13,6 @@
 
   .menu-item {
     border-radius: @border-radius;
-    color: @body-font-color;
     display: block;
     line-height: 2.4rem;
     margin-top: .1rem;
diff --git a/src/modals.less b/src/modals.less
index cc2e73d..76f365a 100644
--- a/src/modals.less
+++ b/src/modals.less
@@ -11,6 +11,7 @@
   right: 0;
   top: 0;
 
+  &:target,
   &.active {
     display: flex;
     opacity: 1;
diff --git a/src/navigation.less b/src/navigation.less
index 5a142ec..d4a815a 100644
--- a/src/navigation.less
+++ b/src/navigation.less
@@ -15,12 +15,13 @@
     margin: 0;
 
     a {
+      border: none;
       text-decoration: none;
     }
     &:last-child {
       &,
       a {
-        color: @body-font-color;
+        color: lighten(@body-font-color, 30%);
       }
     }
     &:not(:last-child) {
@@ -91,12 +92,11 @@
 
     a {
       border-radius: @border-radius;
-      color: @body-font-color;
+      color: lighten(@body-font-color, 20%);
       padding: .6rem .8rem;
       text-decoration: none;
       &:focus,
       &:hover {
-        background: @core-secondary-color;
         color: @core-color;
       }
     }
@@ -114,11 +114,10 @@
 .nav {
   display: flex;
   flex-direction: column;
-
+  
   .nav-item {
     a {
-      border-radius: @border-radius;
-      color: @body-font-color;
+      color: lighten(@body-font-color, 20%);
       padding: .6rem .8rem;
       text-decoration: none;
       &:focus,
@@ -127,14 +126,21 @@
       }
     }
     &.active {
-      a {
-        color: @core-color;
+      & > a {
+        color: @body-font-color;
+        font-weight: bold;
+        &:focus,
+        &:hover {
+          color: @core-color;
+        }
       }
     }
   }
 
   & .nav {
+    margin-bottom: 1rem;
     margin-left: 2rem;
+
     a {
       color: lighten(@body-font-color, 30%);
     }
diff --git a/src/normalize.less b/src/normalize.less
index 3dbe1f0..8a25bfa 100644
--- a/src/normalize.less
+++ b/src/normalize.less
@@ -82,15 +82,10 @@ hr {
 }
 
 /**
- * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 1. Correct the inheritance and scaling of font size in all browsers. (removed)
  * 2. Correct the odd `em` font sizing in all browsers.
  */
 
-pre {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
 /* Text-level semantics
    ========================================================================== */
 
@@ -144,6 +139,7 @@ strong {
 
 code,
 kbd,
+pre,
 samp {
   font-family: monospace, monospace; /* 1 */
   font-size: 1em; /* 2 */
diff --git a/src/typography.less b/src/typography.less
index 921d2f6..028aed1 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -30,7 +30,7 @@ h6 {
   font-size: 1.6rem;
 }
 p {
-  margin: 0 0 1rem;
+  margin: 0 0 1em;
 }
 blockquote {
   border-left: .2rem solid #ddd;
@@ -97,30 +97,38 @@ abbr[title] {
 }
 ins,
 u {
-  border-bottom: .1rem solid;
-  text-decoration: none;
+  text-decoration: underline;
 }
 
 // Code
+code {
+  background: @core-border-color;
+  color: lighten(@body-font-color, 20%);
+  .label-base();
+}
 pre {
   background: lighten(@core-border-color, 4%);
   line-height: 1.8rem;
   margin-bottom: 1em;
   margin-top: 1em;
   overflow: auto;
-  padding: 1.5rem 2.5rem;
-}
-code {
-  background: @core-border-color;
-  color: lighten(@body-font-color, 20%);
-  .label-base();
-  white-space: nowrap;
+  padding: 2rem 2.5rem;
+  position: relative;
 
-  pre & {
+  > code {
     background: transparent;
     border-left: 0;
+    font-size: 1em;
     line-height: 1.8rem;
-    margin-bottom: 0;
-    margin-top: 0;
+    padding: 0;
+
+    &::before {
+      content: attr(data-lang);
+      color: @control-color;
+      font-size: 1.2rem;
+      position: absolute;
+      right: 1rem;
+      top: .2rem;
+    }
   }
 }
diff --git a/src/variables.less b/src/variables.less
index 55b9d21..112fee2 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -48,7 +48,7 @@
   }
 }
 .control-shadow() {
-  box-shadow: 0 0 .4rem fade(@core-color, 25%);
+  box-shadow: 0 0 .5rem fade(@core-color, 25%);
 }
 .control-transition() {
   transition: all .15s ease;
@@ -59,7 +59,7 @@
 }
 .label-base() {
   border-radius: .2rem;
-  font-size: .95em;
+  font-size: 95%;
   padding: .1em .3em;
   vertical-align: baseline;
 }