script.js

// Generated by CoffeeScript 2.7.0
(function() {
  var openComment, styles, time, writeStyleChar, writeStyles;

  styles = `/*
 * "a letter form Js" v5.2.1
 * 如果打字过程中突然慢下来了
 * 请点击一下屏幕
 * 我也不知道是为什么
 * orz
 */

body {
  background-color: #1a1c24; color: #fff;
  font-size: 1.0rem; line-height: 1.4;
  -webkit-font-smoothing: subpixel-antialiased;
}

/*
 * ...hello?
 * 小姐姐你好哇
 * 感觉碰到你好多次了
 * 可以加个微信吗
 * ヾ(≧▽≦*)o
 */

pre { 
  position: fixed;
  top: 30px; bottom: 30px;
  transition: left 500ms;
  overflow: auto;
  background-color: #313744; color: #a6c3d4;
  border: 1px solid rgba(0,0,0,0.2);
  padding: 24px 12px;
  box-sizing: border-box;
  border-radius: 3px;
  box-shadow: 0px 4px 0px 2px rgba(0,0,0,0.1);
}

/*
 * 嘶
 * 这个框框好窄
 * 我先把它弄宽一点
 * ƪ(˘⌣˘)ʃ
 */

/*
 *  看我的 (～￣▽￣)-------------------------🤜
 *  好像差了一点 (～￣▽￣)---------------------------🤜
 *  再来一次 (～￣▽￣)--------------------------------------🤜
 *  这样感觉不错了
 */


/*
 * 先在这里丢一头小胖龙
 * 缓解一下尴尬的氛围
 * 肥肠社恐.jpg
 * ╰(*°▽°*)╯
 */
 
#temp0 { z-index: 8; }
 
#temp0 {
    position: fixed;
    top: 30px; bottom: 30px;
    left: 50%; width: 45%;
    overflow: auto;
    background-color: #313744; color: #a6c3d4;
    background-image : url("./image/webwxgetmsgimg.gif")
}

/*
 * 等等
 * 怎么什么都没有
 * 坏
 * 出BUG了
 * QAQ
 * 😭😭😭😭😭😭
 */

pre em:not(.comment) { font-style: normal; }

.comment       { color: #707e84; }
.selector      { color: #c66c75; }
.selector .key { color: #c66c75; }
.key           { color: #c7ccd4; }
.value         { color: #d5927b; }

/*
 * 左边先腾出来一下
 */

pre { left: 50%; width: 45%}

/*
 * 这次一定能成功
 * (～￣▽￣)～
 */

#temp, #temp2 { 
  position: fixed;
  width: 300px; height: 300px;
  top: calc(50% - 150px); left: calc(25% - 150px);
  text-align: center;
}

#temp { z-index: 8; }
#temp2  { z-index: 7; }

#temp::before, #temp::after, #temp2::before, #temp2::after {
    content: '';
    position: absolute;
    top: 40px;
    width: 150px; height: 240px;
    background: #c66c75;
    border-radius: 150px 150px 0 0;
    background-image: url(./images/webwxgetmsgimg.gif);
}

/*
 * 啊这
 * 还有亿丢丢小问题
 * ε(┬┬﹏┬┬)3
 * 很好解决的
 * 对
 * 很好解决的
 * qaq
 */

#temp::before, #temp::after, #temp2::before, #temp2::after {
    border-radius: 0;
    width: 240px; height: 240px;
}


/*
 * 轻轻松松嘛
 * ♪(´▽｀)
 */
 
/*
 * 所以
 * 小姐姐可以加个微信吗
 * (●'◡'●)
 */
 
#temp::before, #temp::after, #temp2::before, #temp2::after {
    background-image: url(./images/7cab64f173210e279922d5377ac490a.jpg);
    background-size: contain;
}

/*
 * \^o^/
 */
 
 






`;

  openComment = false;

  writeStyleChar = function(which) {
    // begin wrapping open comments
    if (which === '/' && openComment === false) {
      openComment = true;
      styles = $('#style-text').html() + which;
    } else if (which === '/' && openComment === true) {
      openComment = false;
      styles = $('#style-text').html().replace(/(\/[^\/]*\*)$/, '<em class="comment">$1/</em>');
    // wrap style declaration
    } else if (which === ':') {
      styles = $('#style-text').html().replace(/([a-zA-Z- ^\n]*)$/, '<em class="key">$1</em>:');
    // wrap style value 
    } else if (which === ';') {
      styles = $('#style-text').html().replace(/([^:]*)$/, '<em class="value">$1</em>;');
    // wrap selector
    } else if (which === '{') {
      styles = $('#style-text').html().replace(/(.*)$/, '<em class="selector">$1</em>{');
    } else {
      styles = $('#style-text').html() + which;
    }
    $('#style-text').html(styles);
    return $('#style-tag').append(which);
  };

  writeStyles = function(message, index, interval) {
    var pre;
    if (index < message.length) {
      pre = document.getElementById('style-text');
      pre.scrollTop = pre.scrollHeight;
      writeStyleChar(message[index++]);
      return setTimeout((function() {
        return writeStyles(message, index, openComment ? 80 : 8);
      }), interval);
    }
  };

  
  // appending the tags I'll need.
  $('body').append(`  <style id="style-tag"></style>
<span id="temp2"></span>
<span id="temp"><i></i></span>
<pre id="style-text"></pre>`);

  // faster typing in small iframe on codepen homepage
  // time = if window.innerWidth <= 578 then 4 else 16
  time = 80;

  // starting it off
  writeStyles(styles, 0, time);

  /*
Changelog:
1.0.0: i exist!
1.0.1: heart instead of circle
1.0.2: including standard CSS3 transforms and animations
	was only using `-webkit` to be less verbose (standard transforms dont work in safari)
	now works in FF
1.0.3: crossbrowser echo 
	nested `scale()` styles (scaled in scaled) only worked in chrome
	moved echo out of heart to fix
1.0.4: more efficient animations
	`0%, 100% {}` instead of duplicated keyframes
1.0.5: overflwo fix
  `overflow: auto` on the `pre`
*/

}).call(this);