no-style-please2 0.8.1 → 0.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '087c5d8430d114ae14ad626a7bf7fbead3d2ca62eb6435d12770f622bda7e61a'
-  data.tar.gz: f50a18444aadf64fd4fe3a347cefdf5b439f057e5f0cf1f1711aaa8c230cb7c8
+  metadata.gz: 31940b0c8a705c64cab919daccb6dc915abbbfde6bc285a5d98c4489c1f6caaf
+  data.tar.gz: e574b7847b53a4c8ba85b8f05bc9a9e8eb707a3c590efdf3c9a17125fd07532c
 SHA512:
-  metadata.gz: 5ce514ac8b564e631517ef635613ec935fb6a307ad89edfc2c5628054f68e4d8868fc69f787811b754577ae9e3992eb5dda29d12c7445ebe20671f5eaeac3172
-  data.tar.gz: 4e269a4cd39b925c8db5d5f8e83a833866f4cdd4bfe5d78f9f0e732c7f42a2fa66a3023acdfaf487dc98a3dd3123831f33548357729b8af0b0b77b86e39aeaeb
+  metadata.gz: a8c196d08edd074df4b2153411233456c2e73b2a86f42f33ae61f8eb4e311a24237a1ab757ce742f40062c5e6bc1e8140dd127581d9abb03004590e63d3abbe3
+  data.tar.gz: 1628ace63e55094056a08e44c9a913445291667e1a495b95a1ff67f308046acb29407dbf688e5828005686d88f625e86f12742573a6231cbc311cb58d178bd83

data/_config.yml

@@ -6,7 +6,9 @@ baseurl: "/no-style-please" # subpath of the site, e.g. "/blog" (leave it blank
 description: > # description of the site (multiple lines allowed)
   A (nearly) no-CSS, fast, minimalist Jekyll theme.
 
-destination: ./docs
+destination: docs
+
+permalink: "/post/:year/:month/:day/:title:output_ext"
 
 
 favicon: "logo.png" # name+extension of favicon (which must be put on the root folder)

data/_includes/head.html

@@ -23,13 +23,9 @@
   {% endif %}
 
   <link rel="shortcut icon" type="image/x-icon" href="{{ site.favicon | relative_url }}" />
-  {% if site.theme_config.combine_css_html %}
-  <style>
-    {%- include main.css -%}
-  </style>
-  {% else %}
+ 
   <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}" />
-  {% endif %}
+ 
   
 
 </head>

data/_includes/heatmap.html

@@ -0,0 +1,59 @@
+<div>
+{%- if include.collection -%}
+  {%- assign posts = include.collection -%}  
+{%- else -%}
+  {%- assign posts = site.posts -%}
+{%- endif -%}
+
+{% if datemapidOnPage == nil %}
+    {%- assign  datemapidOnPage = 0 -%}
+{%- else -%}
+    {%- assign  datemapidOnPage = datemapidOnPage  |  plus : 1-%}
+    
+{%- endif -%}
+
+
+{% assign mapEleId = "heatmap-" | append: datemapidOnPage %}
+<div class="heatmap-title">{{ include.title | default :""  }}</div>
+
+<div class='heatmap' id="{{mapEleId}}">
+  
+</div>
+{%- if datemapidOnPage == 0 -%}
+
+{% comment %}
+  只加载一次
+{% endcomment %}
+<script >
+  function create_heatmap(heatmapid,endYear){
+
+    {%- assign MothStr = site.theme_config.heatMapMonth  -%}
+    {%- assign HeatMapShowWeek = site.theme_config.heatMapShowWeek  -%}
+    {%- assign heatMapLoadCount = site.theme_config.heatMapLoadCount | default: 8  -%}
+    
+    const WeeKStartStr = "{{ site.theme_config.heatMapWeekStart | default: 0 }}" ;//  0 sunday 1 monday 2. tuesday ...
+
+    const heatMapLoadCount = {{heatMapLoadCount}};
+    var _MonthStr =  '{{ MothStr | default: "Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec" }}';
+    var _showWeek =  '{{ HeatMapShowWeek | default: "Sun Mon Tue Wed Thu Fri Sat" }}';
+    var _allyearurl =  '{{ "assets/dyn/allyear.json" | relative_url }}';
+    {% include heatmap.js  %}
+  }
+</script>
+
+{% else %}
+
+{%- endif -%}
+
+
+{{child_initialized}}
+
+<script> 
+!function(){
+  var endYear = "{{ include.endYear }}"
+  var mapid = "{{ mapEleId }}"
+  create_heatmap(mapid,endYear )
+}()
+</script>
+
+</div>

data/_includes/heatmap.js

@@ -0,0 +1,375 @@
+;!(function () {
+  
+  const WeeKStart = parseInt(WeeKStartStr)
+
+
+  var GDATA = window._G_DATA;
+  if (!GDATA) {
+    GDATA = {}
+    window._G_DATA = GDATA
+  }
+
+
+  function date2ymd(t) {
+    let m = t.getMonth() + 1;
+    let d = t.getDate();
+    return `${t.getFullYear()}-${m < 10 ? "0" + m : m}-${d < 10 ? "0" + d : d}`;
+  }
+
+  const todayYmd = date2ymd(new Date())
+  const strictMod =  endYear && endYear.length == 4;
+  const maxDateYmd = `${endYear}-12-31`
+  const dateEnd =
+    endYear && endYear.length == 4 ? new Date(maxDateYmd) : new Date();
+
+  const endStamp = dateEnd.getTime();
+  const dayEleId = Math.random().toString(16).substring(2);
+  let arr = _allyearurl.split("/");
+  arr.pop();
+  const jsonUrlBase = arr.join("/");
+
+  const nLastColumnCount = (dateEnd.getDay() -  WeeKStart + 7) % 7 + 1
+  const ColumnsCount = 53;
+  const RowCount = 7;
+  const DayCount = (ColumnsCount - 1) * RowCount + nLastColumnCount;
+
+  let queue  = window._y_queue || []
+  window._y_queue = queue;
+ 
+
+  function getAllYearCfg(){
+    
+    
+    if (GDATA['_allYear']) {
+      return GDATA['_allYear'];
+    }
+
+    if (window._isFetchAllYearData == 1) {
+      return new Promise(r=>{
+        queue.push(r);
+      })
+    }
+
+    
+    window._isFetchAllYearData = 1;
+    return fetch(_allyearurl)
+      .then((r) => r.json())
+      .then(d => { 
+        window._isFetchAllYearData = 0;
+        if (queue.length) {
+          queue.forEach(calback=>{calback(d)});
+          queue.length = 0;
+        }
+        GDATA['_allYear'] = d ;return d ;})
+  }
+  !(function fillData() {
+    let year = "" + dateEnd.getFullYear();
+    let preYear = "" + (year - 1);
+    getAllYearCfg()
+      .then((d) => {
+        let yearCfg = d;
+        let arr = [];
+        if (yearCfg[year]) {
+          arr.push(getYearData(year));
+        }
+
+        if (yearCfg[preYear]) {
+          arr.push(getYearData(preYear));
+        }
+        Promise.all(arr).then((alldata) => {
+          let combineData = {};
+          let d1 = alldata[0];
+          let d2 = alldata[1];
+
+          for (const key in d1) {
+            if (Object.prototype.hasOwnProperty.call(d1, key)) {
+              const element = d1[key];
+              let keyNew = "K1-" + key;
+              combineData[keyNew] = element;
+            }
+          }
+
+          for (const key in d2) {
+            if (Object.prototype.hasOwnProperty.call(d2, key)) {
+              const element = d2[key];
+              let keyNew = "K2-" + key;
+              combineData[keyNew] = element;
+            }
+          }
+
+          updateCell(combineData);
+        });
+      });
+
+    function getIndex(ymd) {
+      return (
+        DayCount -
+        Math.floor((endStamp - new Date(ymd).getTime()) / (24 * 3600000)) -
+        1
+      );
+    }
+
+    function idx2Ymd(idx) {
+      let t = new Date(endStamp - (DayCount - 1 - idx) * 3600000 * 24);
+      let m = t.getMonth() + 1;
+      let d = t.getDate();
+      return `${t.getFullYear()}-${m < 10 ? "0" + m : m}-${
+        d < 10 ? "0" + d : d
+      }`;
+    }
+
+    function updateCell(data) {
+      if (!data) return;
+
+
+      let daysEle = document.getElementById(dayEleId);
+      let dayCells = daysEle.childNodes;
+
+      let Map = {};
+
+      for (const key in data) {
+        if (Object.prototype.hasOwnProperty.call(data, key)) {
+          const element = data[key];
+          if (Array.isArray(element)) {
+            element.forEach((e) => {
+              if (e.date && e.title && e.url) {
+                let arr = Map[e.date];
+                if (!arr) {
+                  arr = [];
+                  Map[e.date] = arr;
+                }
+                arr.push(e);
+              }
+            });
+          }
+        }
+      }
+
+      let ymdArr = [];
+
+      for (const dateKeyYmd in Map) {
+        if (Object.prototype.hasOwnProperty.call(Map, dateKeyYmd)) {
+          ymdArr.push(dateKeyYmd);
+        }
+      }
+
+      var G_idxOfDay = DayCount - 1;
+
+      function shuffle(array) {
+        let currentIndex = array.length;
+
+        // While there remain elements to shuffle...
+        while (currentIndex != 0) {
+          // Pick a remaining element...
+          let randomIndex = Math.floor(Math.random() * currentIndex);
+          currentIndex--;
+
+          // And swap it with the current element.
+          [array[currentIndex], array[randomIndex]] = [
+            array[randomIndex],
+            array[currentIndex],
+          ];
+        }
+      }
+
+      const SEQ = new Array(DayCount);
+      let tmp = DayCount;
+      while (tmp-- > 0) {
+        SEQ[tmp] = tmp;
+      }
+
+      shuffle(SEQ);
+
+      const minYmd = `${endYear - 1}${maxDateYmd.substring(4)}`
+      function update1Day() {
+        if (G_idxOfDay < 0) {
+          return;
+        }
+        const idxOfDay = SEQ[G_idxOfDay--];
+        let dateKeyYmd = idx2Ymd(idxOfDay);
+        let arrPostInOneDay = Map[dateKeyYmd];
+
+        let hideblock = false
+        if (strictMod) {
+          hideblock = dateKeyYmd <= minYmd;
+        }
+
+        let isFuture = dateKeyYmd > todayYmd;
+
+        const dayCell = dayCells[idxOfDay];
+        if (hideblock) {
+          dayCell.classList = 'heatmap-day-cell hm-check-notyet'
+        }else if(isFuture){
+          dayCell.classList = parseInt(dateKeyYmd.substring(5, 7)) % 2 == 1 ? 'heatmap-day-cell hm-check-future-b' : 'heatmap-day-cell hm-check-future-a'
+        }
+        else{
+          
+          const nobg =
+          parseInt(dateKeyYmd.substring(5, 7)) % 2 == 1
+            ? "hm-check-no-b"
+            : "hm-check-no-a";
+        dayCell.classList = `heatmap-day-cell ${
+          !arrPostInOneDay
+            ? nobg
+            : arrPostInOneDay.length > 1
+            ? "hm-check2"
+            : "hm-check"
+        }`;
+
+        if (arrPostInOneDay && arrPostInOneDay.length > 0) {
+          let isDirectly = arrPostInOneDay.length == 1;
+          let tip = document.createElement("div");
+
+          if (isDirectly) {
+            let lnk = document.createElement("a");
+            lnk.href = arrPostInOneDay[0].url;
+            dayCell.appendChild(lnk);
+          }
+
+          tip.className = "hm-tip";
+          let desc = "";
+          arrPostInOneDay.forEach((element) => {
+            let lnk = document.createElement("a");
+            lnk.className = "hm-tiplink";
+            lnk.href = element.url;
+            tip.appendChild(lnk);
+
+            let t = document.createElement("span");
+            t.className = "hm-date";
+            t.innerText = dateKeyYmd.substring(5);
+            lnk.appendChild(t);
+
+            let t2 = document.createElement("span");
+            t2.className = "hm-title";
+            t2.innerText = element.title;
+            lnk.appendChild(t2);
+          });
+          dayCell.appendChild(tip);
+        }
+        }
+
+        
+      }
+
+      function updateMultiDays() {
+        let day = heatMapLoadCount;
+        if (!day || day <= 0) {
+          day = 8;
+        }
+        while (day--) {
+          update1Day();
+        }
+
+        if (G_idxOfDay >= 0) {
+          requestAnimationFrame(updateMultiDays);
+        }
+      }
+      requestAnimationFrame(updateMultiDays);
+
+      return;
+    }
+
+    function getYearData(year) {
+      year = '' + year
+
+    
+      if(GDATA[year]){
+
+        return GDATA[year]
+      }
+
+      let queueFlgKey = '_singleyearFlg' + year
+      let queueArrKey = '_singleyearQueue' + year
+      if (GDATA[queueFlgKey] == 1) {
+        // console.log('put in queue',year,Math.random())
+        let arrQueue = GDATA[queueArrKey]
+        if (!arrQueue) {
+          arrQueue = []
+          GDATA[queueArrKey] = arrQueue;
+        }
+        
+        return  new Promise(r=>{
+          arrQueue.push(r);
+        });
+      }
+
+
+      GDATA[queueFlgKey] = 1;
+      // console.log('RealQuery',year,Math.random())
+      return fetch(`${jsonUrlBase}/${year}.json`)
+        .then((r) => r.json())
+        .then(d=>{
+          GDATA[queueFlgKey] = 0 ;GDATA[year] = d; 
+          let queue = GDATA[queueArrKey];
+          // console.log('queryFinish',year)
+          if(queue && queue.length){
+            queue.forEach(cb=>{
+              // console.log('queryFinishQueue',year,queue.length,Math.random());
+              cb(d);})
+            queue.length = 0;
+            GDATA[queueArrKey] = undefined
+          }
+
+          return d})
+        .catch((e) => {
+          return null;
+        });
+    }
+  })();
+  (function initMap() {
+    let Father = document.getElementById(heatmapid);
+
+    const Frag = document.createDocumentFragment();
+
+    const monthEle = document.createElement("div");
+    monthEle.className = "heatmap-month";
+    Frag.appendChild(monthEle);
+    const monthStr = _MonthStr.split(" ");
+
+    let nowM = dateEnd.getMonth();
+    let nowWeekIdx = nLastColumnCount - 1;
+
+    for (let i = 0; i < monthStr.length; i++) {
+      let m = document.createElement("span");
+      m.className = "heatmap-month-cell";
+      m.innerHTML = `${monthStr[(i + nowM + 1) % 12]}`;
+      monthEle.appendChild(m);
+    }
+
+    const weekEle = document.createElement("div");
+    weekEle.className = "heatmap-week";
+    const WeekStr = _showWeek.split(" ");
+
+    for (let i = 0; i < WeekStr.length; i++) {
+      const idx = (i + WeeKStart) % 7
+      let m = document.createElement("div");
+      m.className = "heatmap-week-cell";
+      m.innerHTML = i % 2  ?  `<span>${WeekStr[idx]}</span>` : ''
+      weekEle.appendChild(m);
+    }
+
+    Frag.appendChild(weekEle);
+
+    const dayEle = document.createElement("div");
+
+    dayEle.className = "heatmap-day";
+    dayEle.id = dayEleId;
+
+    // console.log(nowWeekIdx, firstDateDayDiff);
+
+    for (let c = 0; c < ColumnsCount; c++) {
+      for (let r = 0; r < RowCount; r++) {
+        if (r > nowWeekIdx && c == ColumnsCount - 1) {
+          break;
+        }
+
+        let m = document.createElement("span");
+        m.classList = `heatmap-day-cell hm-check-nodata`;
+        dayEle.appendChild(m);
+      }
+    }
+
+    Frag.appendChild(dayEle);
+    Father.append(Frag);
+  })();
+})();

data/_layouts/heatmap.html

@@ -0,0 +1,61 @@
+---
+layout: default
+---
+
+<br/><br/><br/>
+{%- include heatmap.html -%}
+ 
+
+{% comment %}
+generate this page only once。
+{% endcomment %}
+{% assign ALLJSON = "{" %}
+
+{% assign postsByYear = site.posts | group_by_exp: "post", "post.date | date: '%Y' " %}
+
+
+
+{%- for post in postsByYear -%}
+    {%- capture kv %}
+      "{{ post.name }}":1
+      {%- unless forloop.last -%},
+      {%- endunless -%}
+    {%- endcapture -%}
+    {% assign ALLJSON = ALLJSON | append:kv %}
+
+
+    {% assign itemM = post.items | group_by_exp: "post", "post.date | date: '%m' " %}
+
+    {%- capture  SingleYearJson -%}
+    {
+        "year":"{{post.name}}",
+        {%- for item0 in itemM %}
+    "{{item0.name }}":
+             [
+                {%- for item00 in item0.items -%}
+                   {
+                    "title":"{{ item00.title | replace: '"', ' '}}",
+                     "url":"{{ item00.url | relative_url}}",
+                     "date": "{{ item00.date | date:"%Y-%m-%d"}}"
+                   }{%- unless forloop.last -%},{%- endunless -%}
+                 {%- endfor -%}
+             ]   
+             {%- unless forloop.last -%},{%- endunless -%}
+        {%- endfor -%}
+    }
+    {%- endcapture -%}
+
+    {%- capture  FILENAME -%}
+    assets/dyn/{{post.name}}.json
+    {%- endcapture -%}
+
+    {{ SingleYearJson | write_file: FILENAME }}
+{%- endfor -%}
+
+{% assign ALLJSON = ALLJSON | append: " }" %}
+{{ ALLJSON | write_file: "assets/dyn/allyear.json" }}
+
+
+
+ <br>
+ {{ content }}

data/_sass/heatmap.scss

@@ -0,0 +1,217 @@
+
+$color-red: #FF0000;
+$color-black: #333;
+$color-blue: #0064c1;
+$color-hove: #0064c1;
+$color-gray: #9ca3af;
+$color-lightGray: #9ca3af;
+$color-lightGrayBg: #F0f2f4;
+
+$dbgBorder:none;//ssolid 1px red;
+
+
+
+
+$hmbloksizeH:13px;
+$dayGap:1px;
+$heatFont:Georgia,"Nimbus Roman No9 L","Songti SC",STSong,"AR PL New Sung","AR PL SungtiL GB",NSimSun,SimSun,"TW\-Sung","WenQuanYi Bitmap Song","AR PL UMing CN","AR PL UMing HK","AR PL UMing TW","AR PL UMing TW MBE",sans-serif;
+
+.heatmap{
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-template-columns: auto 1fr;
+  max-width: 640px;
+}
+
+.heatmap-title{
+  color: $color-black;
+  font-size: 1.6rem;
+  font-weight: 600;
+  padding:3rem 0rem 0.2rem 0;
+}
+ 
+ 
+.heatmap-month{
+  
+  grid-column-start: 2;
+  grid-column-end: 3;
+
+  display: grid;
+  grid-template-columns: repeat(12,1fr);
+
+  border: $dbgBorder;
+  
+}
+
+ 
+.heatmap-month-cell{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-family:  $heatFont;
+  font-size: 0.8rem;
+
+  height: 12px;
+
+  padding: 0.2em 0;
+  
+}
+
+
+.heatmap-week{
+  
+  grid-row-start: 2;
+  grid-row-end: 3;
+  display: grid;
+  // grid-template-rows:repeat(4,1fr);
+  
+
+  grid-auto-flow: row;
+  height: $hmbloksizeH * 7  + $dayGap * 6;
+}
+ 
+
+.heatmap-week-cell{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-right: 0.2em;
+  font-size: 0.8rem;
+  font-family:  $heatFont;
+  line-height: $hmbloksizeH;
+  height: $hmbloksizeH;
+}
+
+.heatmap-day{
+
+  display: grid;
+  grid-template-columns: repeat(53,1fr);
+  grid-template-rows: repeat(7,1fr);
+  grid-auto-flow: column;
+  gap: $dayGap;
+}
+
+.heatmap-day-cell{
+
+  border-radius: 2px;
+  // height: 20px;
+  // width: $hmbloksizeW;
+  height: $hmbloksizeH;
+}
+
+.heatmap-day-cell a{
+  height: 100%;
+  width: 100%;
+  display: block;
+  white-space: nowrap;
+  overflow:hidden;
+}
+
+
+.hm-check-nodata{
+  background-color: #93d5dc;
+}
+
+.hm-check{
+  background-color: #40c463bb;
+  position: relative;
+  cursor: pointer;
+}
+
+.hm-check2{
+  background-color: #40c463ff;
+  position: relative;
+}
+
+.hm-check-no-a{
+  background-color: #edebf0;;
+}
+
+
+.hm-check-no-b{
+  background-color: #edebf0aa;
+}
+
+.hm-check-notyet{
+  visibility: hidden;
+}
+
+
+$bh:2px;
+.hm-check-future-b{
+  background:repeating-linear-gradient(
+    45deg,            /* 斜条纹角度 */
+    #edebf0aa,          /* 第一种颜色 */
+    #edebf0aa  $bh,     /* 第一种颜色的宽度 */
+    #ffffff $bh ,     /* 第二种颜色的起点 */
+    #ffffff $bh * 2      /* 第二种颜色的宽度 */
+)
+}
+
+
+.hm-check-future-a{
+  background:repeating-linear-gradient(
+    45deg,            /* 斜条纹角度 */
+    #ffffff,          /* 第一种颜色 */
+    #ffffff  $bh,     /* 第一种颜色的宽度 */
+    #edebf0 $bh  ,     /* 第二种颜色的起点 */
+    #edebf0 $bh * 2      /* 第二种颜色的宽度 */
+)
+}
+
+.heatmap-day-cell:hover{
+  transform: scale(1.3);
+  z-index: 999;
+}
+
+.heatmap-day-cell:hover .hm-tip{
+  display: block;
+}
+
+.hm-tip{
+  position: absolute; /* 让子元素浮动 */
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 10px;
+  border-radius: 5px;
+  z-index: 999;
+
+  width: auto;
+  font-size: 0.8rem;
+  display: none;
+}
+
+.hm-date{
+  color: #fff;
+  text-align: center;
+
+  padding: 0;
+}
+
+.hm-title{
+  color: #fff;
+  white-space: nowrap;
+  overflow:hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+  padding-left:0.5rem;
+
+  max-width: 600px;
+  
+}
+
+.hm-tiplink{
+  padding: 0.2rem 0;
+}
+
+.red{
+  background-color: #ee5500;
+}
+
+.border{
+  border:solid 1px red;
+}

data/_sass/no-style-please.scss

@@ -1,3 +1,4 @@
+@import "heatmap";
 // -------------- THEME SWITCHER -------------- //
 @mixin dark-appearance {
   filter: invert(1);
@@ -25,7 +26,7 @@ html { height: 100%; }
 
 body {
   color: black;
-  font-family:'Times New Roman', Times, serif;
+  // font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   font-size: 16px;
   line-height: 1.6;
   margin: 0;

data/assets/css/main.scss

@@ -1,4 +1,3 @@
 ---
 ---
-
-@import "no-style-please";
+@import "no-style-please";

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: no-style-please2
 version: !ruby/object:Gem::Version
-  version: 0.8.1
+  version: 0.9.0
 platform: ruby
 authors:
 - vitock
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-12-27 00:00:00.000000000 Z
+date: 2024-12-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -53,16 +53,20 @@ files:
 - _includes/encrypted.html
 - _includes/goat_counter.html
 - _includes/head.html
+- _includes/heatmap.html
+- _includes/heatmap.js
 - _includes/main.css
 - _includes/menu_item.html
 - _includes/post_list.html
 - _layouts/archive.html
 - _layouts/default.html
+- _layouts/heatmap.html
 - _layouts/home.html
 - _layouts/page.html
 - _layouts/post.html
 - _layouts/tagpage.html
 - _layouts/tags.html
+- _sass/heatmap.scss
 - _sass/no-style-please.scss
 - assets/css/main.scss
 - assets/js/mouse_coords.js