nattoppet 2.1.1 → 4.1.0

package/dist/ppt.css

@@ -0,0 +1,304 @@
+html {
+  font-family: sans-serif;
+  font-size: 20px;
+  line-height: 1.5;
+  min-height: 100vh;
+  color: #233;
+}
+@media (min-width: 1200px) {
+  html {
+    font-size: 24px;
+  }
+}
+body {
+  padding: 0;
+  margin: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+pre {
+  background: white;
+  border-top: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+  padding: 20px;
+  font-size: 0.9rem;
+  line-height: 1.2;
+  text-align: left;
+  overflow-x: auto;
+}
+@media (min-width: 1200px) {
+  pre {
+    padding: 25px;
+  }
+}
+code {
+  font-family: monospace;
+  font-size: 0.9rem;
+}
+h2,
+h3 {
+  color: #42b8a6;
+}
+h2 {
+  margin-top: 5vh;
+  font-size: 2rem;
+}
+h3 {
+  margin-top: 6vh;
+  font-size: 1.2rem;
+}
+p {
+  text-indent: 2rem;
+}
+blockquote p {
+  text-indent: 0;
+}
+img {
+  max-width: 100%;
+}
+img.full {
+  width: 100%;
+}
+img.small {
+  width: 40%;
+}
+@media (max-width: 625px) {
+  img.small {
+    width: 60%;
+  }
+}
+img.mid {
+  width: 60%;
+}
+img.big {
+  width: 80%;
+}
+li {
+  font-size: 1.2rem;
+}
+footer {
+  font-weight: 300;
+  font-size: 0.7rem;
+  color: #888;
+}
+.banner > h2 {
+  position: absolute;
+  left: 10vw;
+  top: 45%;
+  width: 80vw;
+  transform: translateY(-50%);
+  text-align: center;
+  margin: 0;
+  font-family: serif;
+  font-size: 3rem;
+  font-weight: normal;
+}
+@media (min-width: 1200px) {
+  .banner > h2 {
+    font-size: 3.2rem;
+  }
+}
+a {
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+.scen {
+  position: relative;
+  margin: 0;
+  background-color: #eee;
+  transition: background-color 1s ease;
+  padding: 10vh 8vw;
+  width: 84vw;
+  min-height: 60vh;
+}
+.scen.active {
+  background-color: white;
+}
+.scen.wide {
+  width: 96vw;
+  padding: 10vh 2vw;
+}
+.scen::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+@media (min-width: 1200px) {
+  .scen {
+    width: 76vw;
+    padding: 10vh 12vw;
+  }
+}
+.col-12 {
+  float: left;
+  width: 100%;
+}
+.col-11 {
+  float: left;
+  width: 91.66666667%;
+}
+.col-10 {
+  float: left;
+  width: 83.33333333%;
+}
+.col-9 {
+  float: left;
+  width: 75%;
+}
+.col-8 {
+  float: left;
+  width: 66.66666667%;
+}
+.col-7 {
+  float: left;
+  width: 58.33333333%;
+}
+.col-6 {
+  float: left;
+  width: 50%;
+}
+.col-5 {
+  float: left;
+  width: 41.66666667%;
+}
+.col-4 {
+  float: left;
+  width: 33.33333333%;
+}
+.col-3 {
+  float: left;
+  width: 25%;
+}
+.col-2 {
+  float: left;
+  width: 16.66666667%;
+}
+.col-1 {
+  float: left;
+  width: 8.33333333%;
+}
+.plum {
+  color: #ae81ff;
+}
+.fx-plum {
+  transition: color 400ms;
+}
+.fx-plum.fast {
+  transition: color 200ms;
+}
+.fx-plum.slow {
+  transition: color 600ms;
+}
+.fx-plum.active {
+  color: #ae81ff !important;
+}
+.chartreuse {
+  color: #a6e22e;
+}
+.fx-chartreuse {
+  transition: color 400ms;
+}
+.fx-chartreuse.fast {
+  transition: color 200ms;
+}
+.fx-chartreuse.slow {
+  transition: color 600ms;
+}
+.fx-chartreuse.active {
+  color: #a6e22e !important;
+}
+.cyan {
+  color: #66d9ef;
+}
+.fx-cyan {
+  transition: color 400ms;
+}
+.fx-cyan.fast {
+  transition: color 200ms;
+}
+.fx-cyan.slow {
+  transition: color 600ms;
+}
+.fx-cyan.active {
+  color: #66d9ef !important;
+}
+.tomato {
+  color: #f13c1a;
+}
+.fx-tomato {
+  transition: color 400ms;
+}
+.fx-tomato.fast {
+  transition: color 200ms;
+}
+.fx-tomato.slow {
+  transition: color 600ms;
+}
+.fx-tomato.active {
+  color: #f13c1a !important;
+}
+.moccasin {
+  color: #ffe4b5;
+}
+.fx-moccasin {
+  transition: color 400ms;
+}
+.fx-moccasin.fast {
+  transition: color 200ms;
+}
+.fx-moccasin.slow {
+  transition: color 600ms;
+}
+.fx-moccasin.active {
+  color: #ffe4b5 !important;
+}
+.slide {
+  transition: transform 400ms;
+  transform: translateX(-100vw);
+}
+.slide.fast {
+  transition: transform 200ms;
+}
+.slide.slow {
+  transition: transform 600ms;
+}
+.slide.active {
+  transform: translateX(0);
+}
+.fade {
+  transition: opacity 400ms;
+  opacity: 0;
+}
+.fade.fast {
+  transition: opacity 200ms;
+}
+.fade.slow {
+  transition: opacity 600ms;
+}
+.fade.active {
+  opacity: 1;
+}
+.rise {
+  transition: opacity 400ms;
+  transition: transform 400ms;
+  opacity: 0;
+  transform: translateY(10vh);
+}
+.rise.fast {
+  transition: opacity 200ms;
+}
+.rise.slow {
+  transition: opacity 600ms;
+}
+.rise.fast {
+  transition: transform 200ms;
+}
+.rise.slow {
+  transition: transform 600ms;
+}
+.rise.active {
+  opacity: 1;
+  transform: translateY(0);
+}

package/dist/ppt.js

@@ -0,0 +1,83 @@
+// events: click, delay, sim
+// time-for-delay: short, long
+// fx: slide, fade, fx-[color]
+// time-for-fx: fast, slow
+var init;
+
+init = function() {
+  var clickListener, current, enter, fx, inview, scens, timeline, update;
+  scens = [].slice.call(document.querySelectorAll('.scen'));
+  current = scens[0];
+  timeline = 0;
+  clickListener = function() {};
+  enter = function(x) {
+    x.classList.add('active');
+    return fx(++timeline, [].slice.call(x.querySelectorAll('.click, .delay, .sim')));
+  };
+  inview = function(x) {
+    var height, ref, top;
+    ({top, height} = x.getBoundingClientRect());
+    return (top <= (ref = innerHeight / 2) && ref <= top + height);
+  };
+  update = function() {
+    var e, i, j, len, len1, ref, results, x;
+    if (!inview(current)) {
+      results = [];
+      for (i = 0, len = scens.length; i < len; i++) {
+        x = scens[i];
+        if (inview(x)) {
+          ref = document.querySelectorAll('.active');
+          for (j = 0, len1 = ref.length; j < len1; j++) {
+            e = ref[j];
+            e.classList.remove('active');
+          }
+          enter(x);
+          current = x;
+          break;
+        } else {
+          results.push(void 0);
+        }
+      }
+      return results;
+    }
+  };
+  fx = function(t, [head, ...tail]) {
+    var cb;
+    if (head == null) {
+      return;
+    }
+    cb = function() {
+      if (t !== timeline) {
+        return;
+      }
+      head.classList.add('active');
+      return fx(t, tail);
+    };
+    if (head.classList.contains('click')) {
+      return clickListener = cb;
+    } else if (head.classList.contains('delay')) {
+      if (head.classList.contains('long')) {
+        return setTimeout(cb, 800);
+      } else if (head.classList.contains('short')) {
+        return setTimeout(cb, 200);
+      } else {
+        return setTimeout(cb, 400);
+      }
+    } else if (head.classList.contains('sim')) {
+      return cb();
+    }
+  };
+  enter(current);
+  addEventListener('click', function() {
+    return clickListener();
+  });
+  addEventListener('scroll', update);
+  addEventListener('resize', update);
+  return setInterval(update, 2000);
+};
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', init);
+} else {
+  init();
+}

package/{ppt/after.ymd → dist/ppt.ymd}

@@ -1,3 +1,19 @@
+<!doctype html>
+<meta name=viewport content="width=device-width, initial-scale=1.0">
+<meta name=author content="ylxdzsw@gmail.com">
+<meta charset="utf-8">
+<title>[title] | ylxdzsw's blog</title>
+
+<style>
+[mixin] ppt.css
+</style>
+
+<script>
+[mixin] ppt.js
+</script>
+
+[#slot]
+
 [eval] this.inited ? "</section>" : ''
 
 [section]=
@@ -18,4 +34,4 @@ const content = capture_until('\n')
 const {args:[length]} = std_call()
 ;`<div style="height: ${length}; min-width: 1px"></div>`
 
-[mixin] @std/common.ymd
+[mixin] common.ymd

package/dist/tml.css

@@ -0,0 +1,125 @@
+html {
+  font-family: sans-serif;
+  font-size: 18px;
+  line-height: 1.5;
+  text-align: justify;
+  color: #33333d;
+  -webkit-user-select: none;
+  hyphens: auto;
+}
+@media (max-width: 625px) {
+  html {
+    font-size: 14px;
+  }
+}
+body {
+  margin: 15px 0;
+}
+@media (min-width: 1200px) {
+  body {
+    height: calc(100vh - 45px);
+    column-width: 540px;
+    column-gap: 0;
+    column-fill: auto;
+  }
+}
+article {
+  margin: 40px 0 0 15px;
+  padding: 0 20px;
+}
+@media (max-width: 625px) {
+  article {
+    margin-left: 8px;
+    padding-left: 10px;
+  }
+}
+article:first-child {
+  margin-top: 0;
+}
+article:nth-child(3n) {
+  border-left: solid #ECE335;
+}
+article:nth-child(3n+1) {
+  border-left: solid #1CBF5F;
+}
+article:nth-child(3n+2) {
+  border-left: solid #2C8DD5;
+}
+h2 {
+  position: relative;
+  margin: 0;
+  padding: 0.8rem 0 0.7rem;
+  break-inside: avoid;
+  border-bottom: 0.5px solid #ddd;
+}
+h2:before {
+  top: 0.9rem;
+  font-size: 1.4rem;
+}
+@media (max-width: 625px) {
+  h2:before {
+    left: -0.8rem;
+    top: 1rem;
+  }
+}
+h2:hover:before {
+  opacity: 1;
+}
+h2 a {
+  color: #2c3e50;
+}
+h3 {
+  position: relative;
+  margin: 0;
+  padding: 0.8rem 0 0;
+  break-inside: avoid;
+}
+p {
+  margin: 1.2rem 0;
+}
+pre {
+  background-color: #fafaf9;
+}
+code {
+  font-family: monospace;
+  font-size: 0.8rem;
+  padding: 0.1rem;
+}
+a {
+  color: #42b983;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+blockquote {
+  margin: 2rem 0;
+  padding: 0 1.2rem;
+  font-style: italic;
+}
+blockquote p {
+  margin-left: 0;
+}
+img {
+  break-inside: avoid;
+}
+.full {
+  display: block;
+  margin: 1rem 0;
+  width: 100%;
+}
+.half {
+  display: block;
+  margin: 1rem 0;
+  width: 50%;
+}
+.end-symbol {
+  text-align: center;
+  display: none;
+  margin-top: 1rem;
+}
+@media (min-width: 1200px) {
+  .end-symbol {
+    display: block;
+  }
+}

package/dist/tml.js

@@ -0,0 +1,3 @@
+addEventListener('wheel', function(e) {
+  return scrollBy(e.deltaY, 0);
+});

package/{tml/after.ymd → dist/tml.ymd}

@@ -1,3 +1,21 @@
+<!doctype html>
+<meta name=viewport content="width=device-width, initial-scale=1.0">
+<meta name=author content="ylxdzsw@gmail.com">
+<meta charset="utf-8">
+<title>[title] | ylxdzsw's blog</title>
+
+<style>
+[mixin] tml.css
+</style>
+
+<script>
+[mixin] tml.js
+</script>
+
+[eval*] this.index = 0
+
+[#slot]
+
 [eval] this.index > 0 ? "</article>" : ''
 
 <div class="end-symbol">* * * * *</div>
@@ -9,4 +27,4 @@ const header = title.trim() ? `<h2><a id="${id}" href="#${id}">${interpret(title
 const close = this.index > 1 ? "</article>" : ''
 close + "<article>" + header
 
-[mixin] @std/common.ymd
+[mixin] common.ymd

package/dist/vue.css

@@ -0,0 +1,91 @@
+html {
+  font-family: sans-serif;
+  line-height: 1.5;
+  text-align: justify;
+  hyphens: auto;
+  color: #33333d;
+}
+@media (max-width: 625px) {
+  html {
+    font-size: 15px;
+  }
+}
+body {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 0 1rem 1rem;
+}
+@media (max-width: 625px) {
+  body {
+    padding: 0 0.8rem 0.8rem;
+  }
+}
+h2,
+h3 {
+  margin: 2rem 0 0;
+  position: relative;
+}
+h2:before,
+h3:before {
+  content: "#";
+  color: #42b983;
+  position: absolute;
+  left: -1rem;
+  top: 0;
+  font-weight: bold;
+  opacity: 0;
+}
+@media (min-width: 625px) {
+  h2:hover:before,
+  h3:hover:before {
+    opacity: 1;
+  }
+}
+h2 a,
+h3 a {
+  color: #2c3e50;
+}
+h2 {
+  font-family: serif;
+  padding-bottom: 0.7rem;
+  border-bottom: 0.5px solid #ddd;
+}
+h2:before {
+  top: 0.1em;
+  font-size: 0.9em;
+}
+pre {
+  border: 1px solid #bcd;
+  background-color: #ebf1f5;
+  padding: 0.8rem;
+  overflow-x: auto;
+}
+pre code {
+  font-size: 0.8rem;
+}
+code {
+  font-family: monospace;
+  color: #222;
+}
+ul ol {
+  padding-left: 1.5rem;
+  margin: 1.2rem 0;
+}
+a {
+  color: #42b983;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+blockquote {
+  margin: 1.2rem 0;
+  padding: 0 1rem;
+  border-left: 4px solid #42b983;
+}
+blockquote.warn {
+  border-left-color: tomato;
+}
+blockquote p {
+  margin-left: 0;
+}

package/dist/vue.ymd

@@ -0,0 +1,23 @@
+<!doctype html>
+<meta name=viewport content="width=device-width, initial-scale=1.0">
+<meta name=author content="ylxdzsw@gmail.com">
+<meta charset="utf-8">
+<title>[title] | ylxdzsw's blog</title>
+
+<style>
+[mixin] vue.css
+</style>
+
+[eval*] this.index = 0
+
+[#slot]
+
+[h2]=
+const id = 'sec' + this.index++
+`<h2><a id="${id}" href="#${id}">${interpret(capture_until('\n'))}</a></h2>`
+
+[h3]=
+const id = 'sec' + this.index++
+`<h3><a id="${id}" href="#${id}">${interpret(capture_until('\n'))}</a></h3>`
+
+[mixin] common.ymd