ADD: New Documents experience

Author: picturepan2

.gitattributes

@@ -1 +1 @@
-index.html linguist-documentation
+**/*.html linguist-documentation

README.md

@@ -70,12 +70,11 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt
 
 ### Browser support
 Spectre uses [Autoprefixer](https://github.com/postcss/autoprefixer) to make most styles compatible with earlier browsers and [Normalize.css](https://necolas.github.io/normalize.css/) for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:
-- Chrome (last two)
-- Edge (last two)
-- Firefox (last two)
+- Chrome (last three)
+- Microsoft Edge (last three)
+- Firefox (last three)
+- Safari (last three)
+- Opera (last three)
 - Internet Explorer 10+
-- Microsoft Edge
-- Opera (last two)
-- Safari 6+
 
 Designed and built with ♥ by [Yan Zhu](https://twitter.com/picturepan2). Feel free to submit a pull request. Help is always appreciated.

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "spectre.css",
-  "version": "0.1.32",
+  "version": "0.2.1",
   "description": "Spectre.css: a lightweight, responsive and modern CSS framework.",
   "homepage": "http://picturepan2.github.io/spectre",
   "repository": "picturepan2/spectre",

dist/spectre.css

@@ -74,15 +74,9 @@ hr {
   /* 2 */
 }
 /**
- * 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
    ========================================================================== */
 /**
@@ -127,6 +121,7 @@ strong {
  */
 code,
 kbd,
+pre,
 samp {
   font-family: monospace, monospace;
   /* 1 */
@@ -471,7 +466,7 @@ h6 {
   font-size: 1.6rem;
 }
 p {
-  margin: 0 0 1rem;
+  margin: 0 0 1em;
 }
 blockquote {
   border-left: .2rem solid #ddd;
@@ -520,15 +515,15 @@ dl dd {
 mark {
   background: #ffe5a3;
   border-radius: .2rem;
-  font-size: .95em;
+  font-size: 95%;
   padding: .1em .3em;
   vertical-align: baseline;
 }
 kbd {
   background: #333;
   border-radius: .2rem;
   color: #fff;
-  font-size: .95em;
+  font-size: 95%;
   padding: .1em .3em;
   vertical-align: baseline;
 }
@@ -539,39 +534,55 @@ abbr[title] {
 }
 ins,
 u {
-  border-bottom: .1rem solid;
-  text-decoration: none;
-}
-pre {
-  background: #f9f9f9;
-  line-height: 1.8rem;
-  margin-bottom: 1em;
-  margin-top: 1em;
-  overflow: auto;
-  padding: 1.5rem 2.5rem;
+  text-decoration: underline;
 }
 code {
   background: #efefef;
   border-radius: .2rem;
   color: #666;
-  font-size: .95em;
+  font-size: 95%;
   padding: .1em .3em;
   vertical-align: baseline;
-  white-space: nowrap;
 }
-pre code {
+pre {
+  background: #f9f9f9;
+  line-height: 1.8rem;
+  margin-bottom: 1em;
+  margin-top: 1em;
+  overflow: auto;
+  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;
+}
+pre > code::before {
+  color: #c5c5c5;
+  content: attr(data-lang);
+  font-size: 1.2rem;
+  position: absolute;
+  right: 1rem;
+  top: .2rem;
 }
 :lang(zh),
 :lang(ja),
 :lang(ko),
 .cjk {
   font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Hiragino Kaku Gothic Pro", Meiryo, "Malgun Gothic", "Helvetica Neue", sans-serif;
 }
+:lang(zh) ins,
+:lang(ja) ins,
+.cjk ins,
+:lang(zh) u,
+:lang(ja) u,
+.cjk u {
+  border-bottom: .1rem solid;
+  text-decoration: none;
+}
 :lang(zh) del + del,
 :lang(ja) del + del,
 .cjk del + del,
@@ -633,7 +644,7 @@ pre code {
   height: 3.2rem;
   line-height: 1.6rem;
   outline: 0;
-  padding: .7rem 1rem;
+  padding: .7rem 1.2rem;
   text-align: center;
   text-decoration: none;
   transition: all .15s ease;
@@ -646,7 +657,7 @@ pre code {
 }
 .btn:focus {
   background: #f3f4fb;
-  box-shadow: 0 0 .4rem rgba(87, 100, 198, .25);
+  box-shadow: 0 0 .5rem rgba(87, 100, 198, .25);
 }
 .btn:hover {
   background: #5764c6;
@@ -797,7 +808,7 @@ pre code {
 }
 .form-input:focus {
   border-color: #5764c6;
-  box-shadow: 0 0 .4rem rgba(87, 100, 198, .25);
+  box-shadow: 0 0 .5rem rgba(87, 100, 198, .25);
 }
 .form-input[disabled] {
   background: #eeeff2;
@@ -873,7 +884,7 @@ textarea.form-input {
 }
 .form-select:focus {
   border-color: #5764c6;
-  box-shadow: 0 0 .4rem rgba(87, 100, 198, .25);
+  box-shadow: 0 0 .5rem rgba(87, 100, 198, .25);
 }
 .form-select::-ms-expand {
   display: none;
@@ -911,7 +922,7 @@ textarea.form-input {
 .form-radio input:focus + .form-icon,
 .form-switch input:focus + .form-icon {
   border-color: #5764c6;
-  box-shadow: 0 0 .4rem rgba(87, 100, 198, .25);
+  box-shadow: 0 0 .5rem rgba(87, 100, 198, .25);
 }
 .form-checkbox,
 .form-radio {
@@ -1105,7 +1116,7 @@ textarea.form-input {
   background: #efefef;
   border-radius: .2rem;
   color: #666;
-  font-size: .95em;
+  font-size: 95%;
   padding: .1em .3em;
   vertical-align: baseline;
   white-space: nowrap;
@@ -1871,25 +1882,36 @@ textarea.form-input {
 .badge {
   position: relative;
 }
-.badge[data-badge]::after {
+.badge[data-badge]::after,
+.badge:not([data-badge])::after,
+.badge[data-badge=""]::after {
   background: #5764c6;
   background-clip: padding-box;
   border: .1rem solid #fff;
   border-radius: 1rem;
   color: #fff;
   content: attr(data-badge);
   display: inline-block;
+  -webkit-transform: translate(-.2rem, -.8rem);
+  -ms-transform: translate(-.2rem, -.8rem);
+  transform: translate(-.2rem, -.8rem);
+}
+.badge[data-badge]::after {
   font-size: 1.1rem;
   height: 1.8rem;
   line-height: 1.2rem;
   min-width: 1.8rem;
-  padding: .2rem .5rem;
+  padding: .2rem .4rem;
   text-align: center;
-  -webkit-transform: translate(-.2rem, -.8rem);
-  -ms-transform: translate(-.2rem, -.8rem);
-  transform: translate(-.2rem, -.8rem);
   white-space: nowrap;
 }
+.badge:not([data-badge])::after,
+.badge[data-badge=""]::after {
+  height: .8rem;
+  min-width: .8rem;
+  padding: 0;
+  width: .8rem;
+}
 .toast {
   background: rgba(51, 51, 51, .9);
   border: .1rem solid #333;
@@ -1937,7 +1959,6 @@ textarea.form-input {
 }
 .menu .menu-item {
   border-radius: .2rem;
-  color: #333;
   display: block;
   line-height: 2.4rem;
   margin-top: .1rem;
@@ -2022,11 +2043,12 @@ textarea.form-input {
   margin: 0;
 }
 .breadcrumb .breadcrumb-item a {
+  border: none;
   text-decoration: none;
 }
 .breadcrumb .breadcrumb-item:last-child,
 .breadcrumb .breadcrumb-item:last-child a {
-  color: #333;
+  color: #808080;
 }
 .breadcrumb .breadcrumb-item:not(:last-child)::after {
   color: #c5c5c5;
@@ -2086,13 +2108,12 @@ textarea.form-input {
 }
 .pagination .page-item a {
   border-radius: .2rem;
-  color: #333;
+  color: #666;
   padding: .6rem .8rem;
   text-decoration: none;
 }
 .pagination .page-item a:focus,
 .pagination .page-item a:hover {
-  background: #eff1fa;
   color: #5764c6;
 }
 .pagination .page-item.active a {
@@ -2108,19 +2129,24 @@ textarea.form-input {
   flex-direction: column;
 }
 .nav .nav-item a {
-  border-radius: .2rem;
-  color: #333;
+  color: #666;
   padding: .6rem .8rem;
   text-decoration: none;
 }
 .nav .nav-item a:focus,
 .nav .nav-item a:hover {
   color: #5764c6;
 }
-.nav .nav-item.active a {
+.nav .nav-item.active > a {
+  color: #333;
+  font-weight: bold;
+}
+.nav .nav-item.active > a:focus,
+.nav .nav-item.active > a:hover {
   color: #5764c6;
 }
 .nav .nav {
+  margin-bottom: 1rem;
   margin-left: 2rem;
 }
 .nav .nav a {
@@ -2143,13 +2169,15 @@ textarea.form-input {
   right: 0;
   top: 0;
 }
+.modal:target,
 .modal.active {
   display: flex;
   display: -ms-flexbox;
   display: -webkit-flex;
   opacity: 1;
   z-index: 1988;
 }
+.modal:target .modal-overlay,
 .modal.active .modal-overlay {
   background: rgba(51, 51, 51, .5);
   bottom: 0;
@@ -2159,6 +2187,7 @@ textarea.form-input {
   right: 0;
   top: 0;
 }
+.modal:target .modal-container,
 .modal.active .modal-container {
   -webkit-animation: slide-down .216s;
   animation: slide-down .216s;