눈내리는 효과, highlight 쪽 폰트 수정

Author: navskh

_layouts/default.html

@@ -8,4 +8,61 @@
   </div>
 </body>
 
-</html>
+</html>
+<script>
+  var date = new Date();
+  var month = date.getMonth() + 1;
+  if ('12|1|2|'.indexOf(month) > -1) {
+    console.log('겨울이네요 눈이 내립니다! 헷');
+    console.log('현재 url', window.location.href);
+    doYouWannaBuildaSnowMan();
+  }
+  // 눈내리는 효과를 주기위해...
+  function doYouWannaBuildaSnowMan() {
+    const body = document.querySelector('body');
+    const MIN_DURATION = 10;
+    var count = 0;
+
+    function makeSnowFlake() {
+      const snowflake = document.createElement("div");
+      const delay = Math.random() * 10;
+      const initialOpacity = Math.random();
+      const duration = Math.random() * 20 + MIN_DURATION;
+      snowflake.classList.add('snowflake');
+      snowflake.style.left = `${Math.random() * window.screen.width}px`
+      snowflake.style.animationDelay = `${delay}s`;
+      snowflake.style.opacity = initialOpacity;
+      snowflake.style.animation = `fall ${duration}s linear`;
+      body.appendChild(snowflake);
+      setTimeout(() => {
+        body.removeChild(snowflake);
+        if (count <= 100) makeSnowFlake();
+        count++;
+      }, (duration + delay) * 1000);
+    }
+    for (let index = 0; index < 50; index++) {
+      setTimeout(makeSnowFlake(), 500 * index);
+    }
+  }
+</script>
+
+
+<style>
+  .snowflake {
+    width: 8px;
+    height: 8px;
+    background-color: #3482F6;
+    border-radius: 50%;
+    position: absolute;
+    top: -8px;
+  }
+
+  @keyframes fall {
+    from {}
+
+    to {
+      transform: translateY(100vh);
+      opacity: 0;
+    }
+  }
+</style>

_sass/base/_global.scss

@@ -9,6 +9,9 @@
 		color: white;
 	}
 }
+.highlight * {
+  font-family: 'Fira Code';
+}
 html, body{height:100%;}
 body{-webkit-user-select:text;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}
 

_sass/base/_highlight.scss

@@ -17,10 +17,10 @@
   * Variables
   */
 
-  $dt-gray-dark: #282a36;  // Background
-  $dt-gray: #44475a;       // Current Line & Selection
+                $dt-gray-dark: #282a36; // Background
+                $dt-gray: #44475a; // Current Line & Selection
   $dt-gray-light: #f8f8f2; // Foreground
-  $dt-blue: #6272a4;       // Comment
+                $dt-blue: #6272a4; // Comment
   $dt-cyan: #8be9fd;
   $dt-green: #50fa7b;
   $dt-orange: #ffb86c;
@@ -36,12 +36,13 @@
   .highlight {
     background: $dt-gray-dark;
     color: $dt-gray-light;
-    padding: 10px; 
+    padding: 10px;
     overflow: auto;
-    margin : 10px 0;
+    margin: 10px 0;
     font-family: 'Fira Code', "D2 Coding", monospace;
-    letter-spacing: 1.2px;
-    * {font-size:0.9rem;
+// letter-spacing: 1.2px;
+  * {
+    font-size: 0.9rem;
     }
 
     .hll,
@@ -104,7 +105,7 @@
     }
 
     .bp {
-      font-style: italic;
+      // font-style: italic;
     }
 
     .c,