diff --git a/README.md b/README.md
index 5f928eb..14dd7da 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-<h1 align=center>Hugo 主题 Moments | <a href="https://farseash.github.io/demo-hugo-theme-moments/moments-zh">Demo</a></h1>
+<h1 align=center>Hugo 主题 Moments | <a href="https://farseash.github.io/demo-hugo-theme-moments">Demo</a></h1>
 
 </br>
 
diff --git a/assets/style-refractored.scss b/assets/style-refractored.scss
new file mode 100644
index 0000000..226bc44
--- /dev/null
+++ b/assets/style-refractored.scss
@@ -0,0 +1,314 @@
+// helper class & functional class
+.center{
+    display: flex;
+    justify-content: center;
+}
+
+// style for main framework
+body{
+    background-color: #f5f5f5;
+}
+
+.pure-g [class*=pure-u]{
+    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;
+    font-weight: normal;
+    font-size: 16px;
+    line-height: 24px;
+    color: rgb(33, 37, 41);
+}
+
+.page{
+    max-width: 1150px;
+    margin: auto;
+    background-color: white;
+}
+
+.container{
+    max-width: 760px;
+    margin: auto;
+}
+
+.moment-content{
+    position: relative;
+}
+
+.moment-row{
+    margin-bottom: 20px;
+}
+
+@media (min-width:1150px) {
+    .page{
+        margin-top: 50px;
+    }
+}
+
+@media (max-width: 720px) {
+    .moment-row{
+        margin-bottom: 20px;
+    }
+
+    .container{
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+}
+
+p{
+    margin-top: 0;
+}
+
+/* START - top cover part */
+.jumbotron{
+    padding-top: 64px;
+    background-position: center;
+    background-size: cover; 
+    min-height: 200px; 
+    text-align: center;
+    margin-bottom: 30px;
+
+    .site-title{
+        color: rgb(108, 117, 125);
+        font-size: 56px;
+        font-weight: 300;
+        margin-bottom: 20px;
+    }
+    
+    .signature{
+        color: rgba(0, 0, 0, 0.5);
+        font-size: 20px;
+        font-weight: 300;
+    }
+}
+/* END - top cover part */
+
+/* START - pagination */
+.pagination{
+    display: flex;
+    margin-top: 20px;
+    margin-bottom: 30px;
+
+    .page-item{
+        border: #80808050;
+        border-style: solid;
+        border-width: 0.5px;
+        border-radius: 2%;
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-top: 10px;
+        padding-bottom: 10px;
+    
+        &.active{
+            background-color: #337cf6;
+            color: #ffffff;
+        }
+        
+        &.disabled{
+            color:rgb(108, 117, 125)
+        }
+    }
+    
+    // below is for items with link
+    a{
+        color: #337cf6;
+        text-decoration: none;
+    }
+
+    .page-link .page-item:hover{
+        background-color: #eaecef;
+        color: #2157ad;
+    }
+}
+/* END - pagination */
+
+
+/* START - time */
+.time{
+    text-align: right;
+    padding-right: 60px;
+    /* white-space: nowrap; */
+    font-weight: 300;
+    margin-bottom: 20px;
+
+    .month-day{
+        font-size: 24px;
+        margin-bottom: 10px;
+    }
+
+    .year{
+        font-size: 16px;
+    }
+}
+@media (max-width: 576px){
+    .time{
+        text-align: center;
+        padding-right: 15px;
+    }
+}
+@media (max-width: 720px) and (min-width:576px){
+    .time{
+        padding-right: 20px;
+    }
+}
+/* END - time */
+
+
+/* START - user name, avatar & tags */
+.user-info{
+    display: flex;
+
+    .avatar{
+        max-height: 45px;
+        float: left;
+        margin-bottom: 10px;
+    }
+
+    .intro{
+        float: left;
+        padding-left: 5px;
+
+        .name{
+            color:#186D9C!important;
+            margin-bottom: 0;
+            line-height: 1.1;
+            font-size: 24px;
+        }
+
+        .tag{
+            font-size: 80%;
+            margin-left: 0px;
+            margin-right: 10px;
+            color: #6c757d!important;
+        
+            &::before{
+                content:"#";
+                padding-right: 1px;
+            }
+        }
+    }
+}
+/* END - user name, avatar & tags */
+
+
+/* START - for the main content */
+.context{
+    clear: left;
+    margin-bottom: 10px;
+}
+
+.single-pic{
+    max-width: 65%; 
+    max-height: 250px;
+    padding-bottom:10px;
+    margin-top: 5px; 
+}
+
+// pic set
+.pic-grid{
+    max-width: 80%;
+
+    .img-container{
+        padding-top: 50%;
+        padding-bottom: 50%;
+        position: relative;
+        height: 0px;
+    }
+
+    img{
+        object-fit: cover;
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        top: 0
+    }
+
+    .add-padding{
+        padding: 2.5px;
+    }
+}
+
+/* for links */
+.share-link-block{
+    padding-bottom:10px; 
+    padding-top:10px; 
+    margin-bottom:10px;
+    background: #f7f7f7;
+
+    .link-table{
+        margin-left: 10%;
+        max-width: 80%;
+    }
+
+    .link-logo{
+        max-width: 50px;
+        max-height: 50px;
+    }
+
+    a{
+        color:#17a2b8;
+        word-wrap: break-word;
+        text-decoration: none;
+    }
+}
+
+.bilibili-video {
+    position: relative;
+    max-width: 85%;
+    height: 0;
+    padding-bottom: 45%;
+    margin-bottom: 10px;
+
+    iframe {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+    }
+}
+
+// for the note info
+.moment-note{
+    display: flex;
+    margin-bottom: 10px;
+    justify-content: space-between;
+    margin-right: 5px; 
+    color:#808080;
+
+    .note{
+        font-size: 80%;
+        text-indent: 20px;
+        color: rgba(0, 0, 0, 0.5);
+    
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+}
+
+// hr 
+hr {
+    margin-top: 20px;
+    border-width: 0;
+    border-top: 1px solid;
+    border-color: rgba(0, 0, 0, 0.1);
+    max-width: 75%;
+    clear: both
+}
+/* END - for the main content */
+
+
+/* START - footer*/
+.footer {
+    padding-top: 20px;
+    padding-bottom: 30px;
+    background-color: #f5f5f5;
+    
+    color: #6c757d !important;
+    text-align: center;
+    font-size: 95%;
+
+    a{ 
+        text-decoration: underline !important; 
+        color:#6c757d !important;
+    } 
+}
+/* END - footer*/
\ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index aaa271b..6196c21 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -1,11 +1,13 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+{{/* 
+    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> -->
+*/}}
 
 <!-- todo change jquery -->
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
 
 <!-- like button -->
 <link href="https://cdn.bootcss.com/font-awesome/5.8.2/css/all.min.css" rel="stylesheet">
@@ -31,7 +33,8 @@
 <meta name="theme-color" content="#ffffff">
 
 <!-- the Moments style css file -->
-<link rel="stylesheet" type="text/css" href="{{.Site.BaseURL}}/css/style.css">
+{{ $style := resources.Get "style-refractored.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
+<link rel="stylesheet" href="{{ $style.Permalink }}">
 
 <!-- fancybox css (js in the end before the body closing tag) -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css"/>
diff --git a/layouts/partials/link-block.html b/layouts/partials/link-block.html
index 3d4a9b9..f16c601 100644
--- a/layouts/partials/link-block.html
+++ b/layouts/partials/link-block.html
@@ -37,6 +37,17 @@
     {{ $netease_music_song_id = replaceRE `(https?://)?music\.163\.com/song\?id=([0-9]*)([-a-zA-Z0-9()@:%\+.~#?&/=_]*)` "$2" .a }}
 {{ end }}
 
+{{/* 2.2 bilibili video */}}
+{{ $bilibili_video_url := "0" }}
+{{ if eq 1 (len (findRE `(https?://)?player\.bilibili\.com/player\.html.*` .a)) }}
+    {{ $resource_type = "bilibili_video" }}
+    {{ $bilibili_video_url = .a }}
+{{ end }}
+
+{{ if eq 1 (len (findRE `<iframe src="(//player\.bilibili.com/player\.html\?aid=.*&bvid=.*&cid=.*&page=1)" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>` .a)) }}
+    {{ $resource_type = "bilibili_video" }}
+    {{ $bilibili_video_url = replaceRE `<iframe src="(//player\.bilibili.com/player\.html\?aid=.*&bvid=.*&cid=.*&page=1)" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>` "$1" .a }}
+{{ end }}
 
 {{/* BEGIN generate output */}}
 {{/* PART 1 default link */}}
@@ -53,7 +64,7 @@
             {{ end }}
         </td>
         <td style="padding-left: 20px">
-            <a href="{{ .a }}">{{.word}}</a>
+            <a href="{{ .a }}" target="_blank" rel="noopener noreferrer">{{.word}}</a>
         </td>
     </tr>
     </table>
@@ -67,3 +78,9 @@
     src="//music.163.com/outchain/player?type=2&id={{ $netease_music_song_id }}&auto=1&height=66">
 </iframe>
 {{ end }}
+
+{{ if eq "bilibili_video" $resource_type}}
+<div class="bilibili-video">
+    <iframe src="{{ $bilibili_video_url }}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
+</div>
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/pic_set.html b/layouts/partials/pic_set.html
index 667d6c6..7a39b01 100644
--- a/layouts/partials/pic_set.html
+++ b/layouts/partials/pic_set.html
@@ -1,6 +1,3 @@
-<!-- START -->
-{{ $caption := .other }}
-
 {{ $num_per_row := 3}}
 {{ $max_width := 80}}
 {{ if or (eq (len .pic_set) 2) (eq (len .pic_set) 4)}}
diff --git a/layouts/partials/row.html b/layouts/partials/row.html
index ca8e342..5723031 100644
--- a/layouts/partials/row.html
+++ b/layouts/partials/row.html
@@ -1,7 +1,8 @@
 <div class="moment-row">
 
     <div class="pure-g">
-        <!-- time -->
+
+        {{/* time info shown in the left (or above in small screens) */}}
         <div class="pure-u-1 pure-u-sm-1-3">
             <div class="time">
                 <div class="month-day">{{ .Date.Format "Jan 2"}}{{ if in (slice 1 21 31) .Date.Day}}st{{ else if in (slice 2 22)
@@ -10,23 +11,23 @@
             </div>
         </div>
 
-        <!-- moment-content -->
+        {{/* moment-main-content */}}
         <div class="pure-u-1 pure-u-sm-2-3">
             <div class="moment-content">
-                <!-- top mark -->
+                {{/* top mark */}}
                 {{ if gt .Params.top 0}}
                 <div class="top-mark" style="position: absolute; right: 5%;">
                     <i class="fas fa-bookmark" style="color: #e76b4f;"></i>
                 </div>
                 {{ end }}
 
-                <!-- user info -->
+                {{/* user info */}}
                 <div class="user-info">
                     <div class="avatar-block">
                         {{ with .Params.avatar }}
                         <img src='{{ . }}' class="avatar">
                         {{ else }}
-                        <!-- fixme check whether the default avatar path is url or not-->
+                        {{/* fixme check whether the default avatar path is url or not--> */}}
                         <img src='{{ $.Site.BaseURL }}/{{ .Site.Params.avatar }}' class="avatar">
                         {{ end }}
                     </div>
@@ -51,33 +52,15 @@
                         </div>
                     </div>
                 </div>
+
                 <div style="padding-left: 5px; padding-right: 5px;">
-                    <!-- content -->
+                    {{/* Main text content */}}
                     <div class="context">
                         {{ .Content }}
                     </div>
                     
-                    <!-- add-on info 1: pictures -->
-                    <!-- single picture (old version)-->
-                    {{ with .Params.pic }}
-                        <img src="{{ . }}" class="single-pic" alt="Responsive image" data-fancybox="gallery"></img>
-                    {{ end }}
-
-                    <!-- multiple pictures (old version) -->
-                    {{ $pic_set_filtered := slice}}
-                    {{ with .Params.pic_set }}
-                        {{ range . }}
-                            {{ with . }}
-                            {{ $pic_set_filtered = $pic_set_filtered | append . }}
-                            {{ end }}
-                        {{ end }}
-                    {{ end }}
-
-                    {{ with $pic_set_filtered }}
-                    {{ partial "pic_set.html" (dict "pic_set" .) }}
-                    {{ end }}
-
-                    <!-- new pictures API (combine single & multiple pictures)-->
+                    {{/* add-on info 1: pictures */}}
+                    {{/* new pictures API `pictures` (combine single & multiple pictures)*/}}
                     {{ $pictures_set:= slice}}
                     {{ with .Params.pictures }}
                         {{ range . }}
@@ -102,23 +85,46 @@
                         {{/* partial "pic_set.html" $pictures_set "other" */}}
                     {{ end }}
 
-                    <!-- add-on info 2: link -->
+                    {{/* Probably DEPRECATED in the future: single picture (old version API `pic`)*/}}
+                    {{ with .Params.pic }}
+                        <img src="{{ . }}" class="single-pic" alt="Responsive image" data-fancybox="gallery"></img>
+                    {{ end }}
+
+                    {{/* Probably DEPRECATED: multiple pictures (old version API `pic_set`) */}}
+                    {{ $pic_set_filtered := slice}}
+                    {{ with .Params.pic_set }}
+                        {{ range . }}
+                            {{ with . }}
+                            {{ $pic_set_filtered = $pic_set_filtered | append . }}
+                            {{ end }}
+                        {{ end }}
+                    {{ end }}
+
+                    {{ with $pic_set_filtered }}
+                        {{ partial "pic_set.html" (dict "pic_set" .) }}
+                    {{ end }}
+
+
+                    {{/* add-on info 2: hyperlink to other resourse (e.g webpage, Netease music, Bilibili Video) */}}
                     {{ $link_link := .Params.link }}
                     {{ $link_logo := .Params.link_logo }}
                     {{ $link_text := .Params.link_text }}
 
                     {{ with .Params.link }}
-                    {{ partial "link-block.html" (dict "logo" $link_logo "a" $link_link "word" $link_text "baseurl"
-                    $.Site.BaseURL)}}
+                        {{ partial "link-block.html" (dict "logo" $link_logo "a" $link_link "word" $link_text "baseurl"
+                        $.Site.BaseURL)}}
                     {{ end }}
 
-                    <!-- Note info -->
+                    {{/* Note info shown below the main content */}}
                     <div class="moment-note">
                         <p class="note">{{ .Date.Format "15:04" }} {{ .Params.note }}</p>
                         <div style="padding-right: 12px;"><i class="far fa-heart"></i></div>
                     </div>
+
                 </div>
-                <hr style="clear: both">
+
+                <hr class="seperating_line">
+
             </div>
         </div>
     </div>
diff --git a/static/css/style.css b/static/css/style.css
deleted file mode 100644
index efcf995..0000000
--- a/static/css/style.css
+++ /dev/null
@@ -1,283 +0,0 @@
-/* 主框架 */
-body{
-    background-color: #f5f5f5;
-}
-
-.pure-g [class*=pure-u]{
-    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;
-    font-weight: normal;
-    font-size: 16px;
-    line-height: 24px;
-    color: rgb(33, 37, 41);
-}
-
-p{
-    margin-top: 0;
-}
-
-/* START - top cover part */
-.jumbotron{
-    padding-top: 64px;
-    background-position: center;
-    background-size: cover; 
-    min-height: 200px; 
-    text-align: center;
-    margin-bottom: 30px;
-}
-
-.site-title{
-    color: rgb(108, 117, 125);
-    font-size: 56px;
-    font-weight: 300;
-    margin-bottom: 20px;
-}
-
-.signature{
-    color: rgb(0, 0, 0, 0.5);
-    font-size: 20px;
-    font-weight: 300;
-}
-
-/* END - top cover part */
-
-/* START - pagination */
-.center{
-    display: flex;
-    justify-content: center;
-}
-
-.pagination{
-    display: flex;
-    margin-top: 20px;
-    margin-bottom: 30px;
-}
-
-.pagination a{
-    color: #337cf6;
-    text-decoration: none;
-}
-
-.page-item{
-    border: #80808050;
-    border-style: solid;
-    border-width: 0.5px;
-    border-radius: 2%;
-    padding-left: 10px;
-    padding-right: 10px;
-    padding-top: 10px;
-    padding-bottom: 10px;
-}
-
-.page-link .page-item:hover{
-    background-color: #eaecef;
-    color: #2157ad;
-}
-
-.page-item.active{
-    background-color: #337cf6;
-    color: #ffffff;
-}
-
-.page-item.disabled{
-    color:rgb(108, 117, 125)
-}
-/* END - pagination */
-
-.page{
-    max-width: 1150px;
-    margin: auto;
-    background-color: white;
-}
-
-@media (min-width:1150px) {
-    .page{
-        margin-top: 50px;
-    }
-}
-
-.container{
-    max-width: 760px;
-    margin: auto;
-}
-
-.moment-content {
-    position: relative;
-}
-
-@media (max-width: 720px) {
-    .moment-row{
-        margin-bottom: 20px;
-    }
-
-    .container{
-        padding-left: 10px;
-        padding-right: 10px;
-    }
-}
-    
-/* START - time */
-.time{
-    text-align: right;
-    padding-right: 60px;
-    /* white-space: nowrap; */
-    font-weight: 300;
-    margin-bottom: 20px;
-}
-@media (max-width: 576px){
-    .time{
-        text-align: center;
-        padding-right: 15px;
-    }
-}
-@media (max-width: 720px) and (min-width:576px){
-    .time{
-        padding-right: 20px;
-    }
-}
-.time .month-day{
-    font-size: 24px;
-    margin-bottom: 10px;
-}
-.time .year{
-    font-size: 16px;
-}
-
-/* END - time */
-
-/* 抬头 */
-
-.user-info{
-    display: flex;
-}
-
-.avatar{
-    max-height: 45px;
-    float: left;
-    margin-bottom: 10px;
-}
-
-.intro{
-    float: left;
-    padding-left: 5px;
-}
-
-.name{
-    color:#186D9C!important;
-    margin-bottom: 0;
-    line-height: 1.1;
-    font-size: 24px;
-}
-
-.tag::before{
-    content:"#";
-    padding-right: 1px;
-}
-.tag{
-    font-size: 80%;
-    margin-left: 0px;
-    margin-right: 10px;
-    color: #6c757d!important;
-}
-
-/* 正文 */
-.context{
-    clear: left;
-    margin-bottom: 10px;
-}
-
-/* 图片 */
-.single-pic{
-    max-width: 65%; 
-    max-height: 250px;
-    padding-bottom:10px;
-    margin-top: 5px; 
-}
-/* 图片集 */
-.pic-grid{
-    max-width: 80%;
-}
-
-.pic-grid .img-container{
-    padding-top: 50%;
-    padding-bottom: 50%;
-    position: relative;
-    height: 0px;
-}
-
-.pic-grid img{
-    object-fit: cover;
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    top: 0
-}
-
-.pic-grid .add-padding{
-    padding: 2.5px;
-}
-
-/* 内容附带的超链接 */
-.share-link-block{
-    padding-bottom:10px; 
-    padding-top:10px; 
-    margin-bottom:10px;
-    background: #f7f7f7;
-}
-.link-table{
-    margin-left: 10%;
-    max-width: 80%;
-}
-.link-logo{
-    max-width: 50px;
-    max-height: 50px;
-}
-.share-link-block a{
-    color:#17a2b8;
-    word-wrap: break-word;
-    text-decoration: none;
-}
-
-/* 附注信息 */
-.moment-note{
-    display: flex;
-    margin-bottom: 10px;
-    justify-content: space-between;
-}
-
-.moment-note .note{
-    font-size: 80%;
-    text-indent: 20px;
-    color: rgb(0, 0, 0, 0.5);
-
-    margin-top: 0;
-    margin-bottom: 0;
-}
-
-.moment-note{
-    margin-right: 5px; 
-    color:#808080
-}
-
-/* hr */
-hr {
-    border-width: 0;
-    border-top: 1px solid;
-    border-color: rgb(0, 0, 0, 0.1);
-}
-
-/* footer底注 */
-.footer {
-    padding-top: 20px;
-    padding-bottom: 30px;
-    background-color: #f5f5f5;
-    
-    color: #6c757d !important;
-    text-align: center;
-    font-size: 95%;
-}
-
-.footer a{ 
-    text-decoration: underline !important; 
-    color:#6c757d !important;
-} 
-