diff --git a/www/data/css/.gitignore b/www/data/css/.gitignore
new file mode 100644
index 0000000..5147ea5
--- /dev/null
+++ b/www/data/css/.gitignore
@@ -0,0 +1,3 @@
+*.css.map
+*.css
+!*styles.css
\ No newline at end of file
diff --git a/www/data/css/styles.css b/www/data/css/styles.css
index 4fe3835..905681f 100644
--- a/www/data/css/styles.css
+++ b/www/data/css/styles.css
@@ -1,321 +1,280 @@
-html, body{ height:100%; margin:0; }
+html, body {
+  height: 100%;
+  margin: 0; }
 
 body {
-    margin: 0;
-    background-color: #EEE;
-    
-    color: #CCC;
-
-    display:flex;
-    flex-direction:column;
-}
+  margin: 0;
+  background-color: #EEE;
+  color: #CCC;
+  display: flex;
+  flex-direction: column; }
 
 #content {
-    padding-top: 64px;
-    display: flex;
-    justify-content: center;
+  padding-top: 64px;
+  display: flex;
+  justify-content: center;
+  line-height: 1.4; }
 
-    line-height: 1.4;
-}
+/*############################################################################*/
+.content-responsive {
+  margin-left: auto;
+  margin-right: auto; }
+
+@media (max-width: 767px) {
+  .content-responsive {
+    width: auto; } }
+@media (min-width: 768px) {
+  .content-responsive {
+    width: auto; } }
+@media (min-width: 992px) {
+  .content-responsive {
+    width: 724px; } }
+@media (min-width: 1200px) {
+  .content-responsive {
+    width: 1170px; } }
+.contentheader {
+  width: 100%;
+  color: #333;
+  font-size: large; }
+
+.contentheader h1 {
+  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 32px;
+  font-weight: 900;
+  margin-bottom: 0; }
+
+@media (max-width: 767px) {
+  .contentheader h1 {
+    font-size: 32px; } }
+.contentheader hr {
+  margin: 0 0 25px 0;
+  display: block;
+  border: none;
+  color: white;
+  height: 1px;
+  background: #CCCCCCFF;
+  background: -moz-linear-gradient(left, #CCC, #FFFFFF00);
+  background: -webkit-linear-gradient(left, #CCC 0%, #FFFFFF00 100%); }
+
+.blockcontent {
+  display: block;
+  width: 100%; }
 
 .headerdiv {
-    background-color: #333;
-    display: flex;
-    border-bottom: 1px solid #111;
-    box-shadow: 0 0 8px #000000;
-    position: fixed;
-    width: 100%;
-}
-
-.headerdiv .logowrapper {
+  background-color: #333;
+  display: flex;
+  border-bottom: 1px solid #111;
+  box-shadow: 0 0 8px #000000;
+  position: fixed;
+  width: 100%; }
+  .headerdiv .logowrapper {
     flex: initial;
     margin: 0;
     padding: 0;
-    height: 42px;
-}
-
-.headerdiv > .logowrapper > .logo {
-    height: 30px;
-    margin: 4px 0px 8px 6px;
-    flex: initial;
-}
-
-.tabrow {
+    height: 42px; }
+    .headerdiv .logowrapper .logo {
+      height: 30px;
+      margin: 4px 0px 8px 6px;
+      flex: initial; }
+  .headerdiv .tabrow {
     display: flex;
-    flex: auto;
-}
-
-.tab {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    background-color: #222;
-    color: #CCC;
-    border-left:  1px solid #000;
-    border-right: 1px solid #000;
-    font-weight: bold;
-    text-decoration: none;
-
-    margin: 0px 0px 0px 20px;
-    padding: 2px 5px;
-    min-width: 64px;
-    text-align: center;
-
-    flex: initial;
-}
-
-.tab:hover {
-    cursor: pointer;
-    background-color: #555;
-}
-
-.tab_github {
-    background-color: #4078c0;
-    border-left:  1px solid #111;
-    border-right: 1px solid #111;
-    color: black;
-}
-
-.tab_split {
-    flex: auto;
-}
-
-.tab_github:hover {
-    background-color: #c9510c;
-    color: black;
-}
+    flex: auto; }
+    .headerdiv .tabrow .tab {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: #222;
+      color: #CCC;
+      border-left: 1px solid #000;
+      border-right: 1px solid #000;
+      font-weight: bold;
+      text-decoration: none;
+      margin: 0px 0px 0px 20px;
+      padding: 2px 5px;
+      min-width: 64px;
+      text-align: center;
+      flex: initial; }
+      .headerdiv .tabrow .tab:hover {
+        cursor: pointer;
+        background-color: #555; }
+    .headerdiv .tabrow .tab_split {
+      flex: auto; }
+    .headerdiv .tabrow .tab_github {
+      background-color: #4078c0;
+      border-left: 1px solid #111;
+      border-right: 1px solid #111;
+      color: black; }
+      .headerdiv .tabrow .tab_github:hover {
+        background-color: #c9510c;
+        color: black; }
 
 @media (max-width: 850px) {
+  .headerdiv {
+    position: static; }
 
-    .headerdiv {
-        position: static;
-    }
-    
-    .logowrapper {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .headerdiv {
-        flex-direction: column;
-    }
-
-    .tabrow {
-        flex-direction: column;
-    }
-
-    .tab {
-        border: 1px solid #000;
-        font-weight: bold;
-
-        margin: 5px 10px;
-    }
-    
-    #content {
-        padding-top: 0px;
-    }
-}
-
-
-/*############################################################################*/
-
-.euler_pnl_base {
-    display: inline-flex;
-    flex-direction: column;
-    
-    border: 1px solid #AAA;
-    border-radius: 5px 5px 0 0;
-    margin: 15px;
-}
-
-.euler_pnl_header {
+  .logowrapper {
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: center; }
 
-    padding: 4px;
-    background: #AAA;
-}
+  .headerdiv {
+    flex-direction: column; }
 
-.euler_pnl_header a {
-    color: #222;
+  .tabrow {
+    flex-direction: column; }
+
+  .tab {
+    border: 1px solid #000;
     font-weight: bold;
-    text-decoration: none;
-
-    font-size: large;
-}
-
-.euler_pnl_header a:hover {
-    text-decoration: underline;
-}
-
-.euler_pnl_content {
-    display: flex;
-    flex-direction: column;
-    
-    background: #DDD;
-    
-    padding: 6px;
-}
-
-.euler_pnl_row {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-}
-
-@media (max-width: 850px) { .euler_pnl_row { flex-direction: column; } }
-
-.euler_pnl_row2 {
-    display: flex;
-    flex-direction: row;
-}
-
-.euler_pnl_cell {
-    width: 24px;
-    height: 24px;
-    font-size: 11px;
-    
-    margin: 3px;
-    
-    border: 1px solid #333;
-    
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.euler_pnl_cell:hover {
-    box-shadow: 0 0 4px #000000;
-}
-
-.euler_pnl_cell a {
-    color: black;
-    text-decoration: none;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.euler_pnl_cell a:hover {
-    color: black;
-    text-decoration: none;
-}
-
-.euler_pnl_cell a:visited {
-    color: black;
-    text-decoration: none;
-}
-
-.euler_pnl_celltime_perfect { background: #98C398; }
-.euler_pnl_celltime_good    { background: #B9D89B; }
-.euler_pnl_celltime_ok      { background: #D8D898; }
-.euler_pnl_celltime_bad     { background: #D8B298; }
-.euler_pnl_celltime_fail    { background: #D89D9D; }
-.euler_pnl_cell_notexist    { background: #CCCCCC; }
-
-.content-responsive {
-    margin-left: auto;
-    margin-right: auto;
-}
-
-@media(max-width:767px) { .content-responsive { width: auto; } }
-@media(min-width:768px) { .content-responsive { width: auto; } }
-@media(min-width:992px) { .content-responsive { width: 724px; } }
-@media(min-width:1200px){ .content-responsive { width: 1170px; } }
+    margin: 5px 10px; }
 
+  #content {
+    padding-top: 0px; } }
 #footerdiv {
-    margin-top:auto;
-    padding-bottom: 10px;
+  margin-top: auto;
+  padding-bottom: 10px;
+  background-color: transparent;
+  text-align: center; }
 
-    background-color: transparent;
-    text-align: center;
-}
 #footerdiv hr {
-    margin-bottom: 5px;
-    display:block;
-    border:none;
-    color:white;
-    height:1px;
-    background: #CCCCCCFF;
-    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#CCCCCCFF), to(#FFFFFF00));
-}
-
-.contentheader {
-    width: 100%;
-    color: #333;
-    font-size: large;
-}
-
-.contentheader h1 {
-    
-    font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: 48px;
-    font-weight: 900;
-    margin-bottom: 0;
-    
-}
-
-@media(max-width:767px) { .contentheader h1 { font-size: 32px; } }
-
-.contentheader hr {
-    margin: 0 0 25px 0;
-    
-    display:block;
-    border:none;
-    color:white;
-    height:1px;
-    background: #CCCCCCFF;
-    background: -moz-linear-gradient(   left, #CCCCCCFF,   #FFFFFF00);
-    background: -webkit-linear-gradient(left, #CCCCCCFF 0%,#FFFFFF00 100%);
-}
-
-.blockcontent {
-    display: block;
-    width: 100%;
-}
+  margin-bottom: 5px;
+  display: block;
+  border: none;
+  color: white;
+  height: 1px;
+  background: #CCCCCCFF;
+  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#CCC), to(#FFFFFF00)); }
 
 .bloglistelem_container {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-}
+  display: flex;
+  align-items: center;
+  flex-direction: column; }
 
 .bloglistelem {
-    width: 100%;
-    
-    border: solid 1px #444;
-    margin: 10px 5px;
-    color: #333;
-    text-decoration: none;
-}
+  width: 100%;
+  border: solid 1px #444;
+  margin: 10px 5px;
+  color: #333;
+  text-decoration: none; }
 
 .bloglistelem:hover {
-    box-shadow: 0 0 4px #000000;
-}
+  box-shadow: 0 0 4px #000000; }
 
-.ble_blog { background-color: #BBB; }
-.ble_log  { background-color: #DDD; }
+.ble_blog {
+  background-color: #BBB; }
 
-.ble_blog .ble_date { background-color: #AAA; }
-.ble_log  .ble_date { background-color: #CCC; }
+.ble_log {
+  background-color: #DDD; }
+
+.ble_blog .ble_date {
+  background-color: #AAA; }
+
+.ble_log .ble_date {
+  background-color: #CCC; }
 
 .ble_date {
-    background-color: #AAA;
-    padding: 2px;
-    font-style: italic;
-}
+  background-color: #AAA;
+  padding: 2px;
+  font-size: 0.8em;
+  font-style: italic; }
 
 .ble_title {
-    font-weight: bold;
-    font-size: 1.5em;
-    text-align: left;
-    margin: 2px 0 2px 10px;
-}
+  font-weight: bold;
+  font-size: 1.2em;
+  text-align: left;
+  margin: 2px 0 2px 10px; }
 
-@media(max-width:767px) { .ble_title { font-size: 1.25em; } }
+@media (max-width: 767px) {
+  .ble_title {
+    font-size: 1.25em; } }
+.euler_pnl_base {
+  display: inline-flex;
+  flex-direction: column;
+  border: 1px solid #AAA;
+  border-radius: 5px 5px 0 0;
+  margin: 15px; }
 
+.euler_pnl_header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  background: #AAA; }
+
+.euler_pnl_header a {
+  color: #222;
+  text-decoration: none;
+  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 22px;
+  font-weight: 900; }
+
+.euler_pnl_header a:hover {
+  text-decoration: underline; }
+
+.euler_pnl_content {
+  display: flex;
+  flex-direction: column;
+  background: #DDD;
+  padding: 6px; }
+
+.euler_pnl_row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap; }
+
+@media (max-width: 850px) {
+  .euler_pnl_row {
+    flex-direction: column; } }
+.euler_pnl_row2 {
+  display: flex;
+  flex-direction: row; }
+
+.euler_pnl_cell {
+  width: 24px;
+  height: 24px;
+  font-size: 11px;
+  margin: 3px;
+  border: 1px solid #333;
+  display: flex;
+  align-items: center;
+  justify-content: center; }
+
+.euler_pnl_cell:hover {
+  box-shadow: 0 0 4px #000000; }
+
+.euler_pnl_cell a {
+  color: black;
+  text-decoration: none;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center; }
+
+.euler_pnl_cell a:hover {
+  color: black;
+  text-decoration: none; }
+
+.euler_pnl_cell a:visited {
+  color: black;
+  text-decoration: none; }
+
+.euler_pnl_celltime_perfect {
+  background: #98C398; }
+
+.euler_pnl_celltime_good {
+  background: #B9D89B; }
+
+.euler_pnl_celltime_ok {
+  background: #D8D898; }
+
+.euler_pnl_celltime_bad {
+  background: #D8B298; }
+
+.euler_pnl_celltime_fail {
+  background: #D89D9D; }
+
+.euler_pnl_cell_notexist {
+  background: #CCCCCC; }
+
+/*# sourceMappingURL=styles.css.map */
diff --git a/www/data/css/styles.scss b/www/data/css/styles.scss
new file mode 100644
index 0000000..addaef4
--- /dev/null
+++ b/www/data/css/styles.scss
@@ -0,0 +1,8 @@
+@import 'styles_global';
+@import 'styles_header';
+@import 'styles_footer';
+
+@import 'styles_main';
+@import 'styles_bloglist';
+
+@import 'styles_eulerpanel';
\ No newline at end of file
diff --git a/www/data/css/styles_bloglist.scss b/www/data/css/styles_bloglist.scss
new file mode 100644
index 0000000..db9ee5d
--- /dev/null
+++ b/www/data/css/styles_bloglist.scss
@@ -0,0 +1,44 @@
+@import 'styles_config';
+
+
+.bloglistelem_container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.bloglistelem {
+  width: 100%;
+
+  border: solid 1px #444;
+  margin: 10px 5px;
+  color: #333;
+  text-decoration: none;
+}
+
+.bloglistelem:hover {
+  box-shadow: 0 0 4px #000000;
+}
+
+.ble_blog { background-color: #BBB; }
+.ble_log  { background-color: #DDD; }
+
+.ble_blog .ble_date { background-color: #AAA; }
+.ble_log  .ble_date { background-color: #CCC; }
+
+.ble_date {
+  background-color: #AAA;
+  padding: 2px;
+  font-size: 0.8em;
+  font-style: italic;
+}
+
+.ble_title {
+  font-weight: bold;
+  font-size: 1.2em;
+  text-align: left;
+  margin: 2px 0 2px 10px;
+}
+
+@media(max-width:767px) { .ble_title { font-size: 1.25em; } }
+
diff --git a/www/data/css/styles_config.scss b/www/data/css/styles_config.scss
new file mode 100644
index 0000000..fa2a878
--- /dev/null
+++ b/www/data/css/styles_config.scss
@@ -0,0 +1,5 @@
+$COL_BACKGROUND: #EEE;
+$COL_TEXT_NORMAL: #CCC;
+$COL_TRANSPARENT: #FFFFFF00;
+
+$FONT_HEADER: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
\ No newline at end of file
diff --git a/www/data/css/styles_eulerpanel.scss b/www/data/css/styles_eulerpanel.scss
new file mode 100644
index 0000000..a5a1815
--- /dev/null
+++ b/www/data/css/styles_eulerpanel.scss
@@ -0,0 +1,100 @@
+@import 'styles_config';
+
+.euler_pnl_base {
+  display: inline-flex;
+  flex-direction: column;
+
+  border: 1px solid #AAA;
+  border-radius: 5px 5px 0 0;
+  margin: 15px;
+}
+
+.euler_pnl_header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 4px;
+  background: #AAA;
+}
+
+.euler_pnl_header a {
+  color: #222;
+  text-decoration: none;
+
+
+  font-family: $FONT_HEADER;
+  font-size: 22px;
+  font-weight: 900;
+}
+
+.euler_pnl_header a:hover {
+  text-decoration: underline;
+}
+
+.euler_pnl_content {
+  display: flex;
+  flex-direction: column;
+
+  background: #DDD;
+
+  padding: 6px;
+}
+
+.euler_pnl_row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 850px) { .euler_pnl_row { flex-direction: column; } }
+
+.euler_pnl_row2 {
+  display: flex;
+  flex-direction: row;
+}
+
+.euler_pnl_cell {
+  width: 24px;
+  height: 24px;
+  font-size: 11px;
+
+  margin: 3px;
+
+  border: 1px solid #333;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.euler_pnl_cell:hover {
+  box-shadow: 0 0 4px #000000;
+}
+
+.euler_pnl_cell a {
+  color: black;
+  text-decoration: none;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.euler_pnl_cell a:hover {
+  color: black;
+  text-decoration: none;
+}
+
+.euler_pnl_cell a:visited {
+  color: black;
+  text-decoration: none;
+}
+
+.euler_pnl_celltime_perfect { background: #98C398; }
+.euler_pnl_celltime_good    { background: #B9D89B; }
+.euler_pnl_celltime_ok      { background: #D8D898; }
+.euler_pnl_celltime_bad     { background: #D8B298; }
+.euler_pnl_celltime_fail    { background: #D89D9D; }
+.euler_pnl_cell_notexist    { background: #CCCCCC; }
diff --git a/www/data/css/styles_footer.scss b/www/data/css/styles_footer.scss
new file mode 100644
index 0000000..70881e6
--- /dev/null
+++ b/www/data/css/styles_footer.scss
@@ -0,0 +1,19 @@
+@import 'styles_config';
+
+#footerdiv {
+  margin-top:auto;
+  padding-bottom: 10px;
+
+  background-color: transparent;
+  text-align: center;
+}
+
+#footerdiv hr {
+  margin-bottom: 5px;
+  display:block;
+  border:none;
+  color:white;
+  height:1px;
+  background: #CCCCCCFF;
+  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from($COL_TEXT_NORMAL), to($COL_TRANSPARENT));
+}
diff --git a/www/data/css/styles_global.scss b/www/data/css/styles_global.scss
new file mode 100644
index 0000000..c59462f
--- /dev/null
+++ b/www/data/css/styles_global.scss
@@ -0,0 +1,67 @@
+@import 'styles_config';
+
+html, body{ height:100%; margin:0; }
+
+body {
+  margin: 0;
+  background-color: $COL_BACKGROUND;
+
+  color: $COL_TEXT_NORMAL;
+
+  display:flex;
+  flex-direction:column;
+}
+
+#content {
+  padding-top: 64px;
+  display: flex;
+  justify-content: center;
+
+  line-height: 1.4;
+}
+
+/*############################################################################*/
+
+.content-responsive {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media(max-width:767px) { .content-responsive { width: auto; } }
+@media(min-width:768px) { .content-responsive { width: auto; } }
+@media(min-width:992px) { .content-responsive { width: 724px; } }
+@media(min-width:1200px){ .content-responsive { width: 1170px; } }
+
+.contentheader {
+  width: 100%;
+  color: #333;
+  font-size: large;
+}
+
+.contentheader h1 {
+
+  font-family: $FONT_HEADER;
+  font-size: 32px;
+  font-weight: 900;
+  margin-bottom: 0;
+
+}
+
+@media(max-width:767px) { .contentheader h1 { font-size: 32px; } }
+
+.contentheader hr {
+  margin: 0 0 25px 0;
+
+  display:block;
+  border:none;
+  color:white;
+  height:1px;
+  background: #CCCCCCFF;
+  background: -moz-linear-gradient(   left, $COL_TEXT_NORMAL,   $COL_TRANSPARENT);
+  background: -webkit-linear-gradient(left, $COL_TEXT_NORMAL 0%,$COL_TRANSPARENT 100%);
+}
+
+.blockcontent {
+  display: block;
+  width: 100%;
+}
diff --git a/www/data/css/styles_header.scss b/www/data/css/styles_header.scss
new file mode 100644
index 0000000..eb08107
--- /dev/null
+++ b/www/data/css/styles_header.scss
@@ -0,0 +1,103 @@
+@import 'styles_config';
+
+.headerdiv {
+  background-color: #333;
+  display: flex;
+  border-bottom: 1px solid #111;
+  box-shadow: 0 0 8px #000000;
+  position: fixed;
+  width: 100%;
+
+  .logowrapper {
+    flex: initial;
+    margin: 0;
+    padding: 0;
+    height: 42px;
+
+    .logo {
+      height: 30px;
+      margin: 4px 0px 8px 6px;
+      flex: initial;
+    }
+  }
+
+  .tabrow {
+    display: flex;
+    flex: auto;
+
+    .tab {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      background-color: #222;
+      color: $COL_TEXT_NORMAL;
+      border-left:  1px solid #000;
+      border-right: 1px solid #000;
+      font-weight: bold;
+      text-decoration: none;
+
+      margin: 0px 0px 0px 20px;
+      padding: 2px 5px;
+      min-width: 64px;
+      text-align: center;
+
+      flex: initial;
+
+      &:hover {
+        cursor: pointer;
+        background-color: #555;
+      }
+    }
+
+    .tab_split {
+      flex: auto;
+    }
+
+    .tab_github {
+      background-color: #4078c0;
+      border-left:  1px solid #111;
+      border-right: 1px solid #111;
+      color: black;
+
+      &:hover {
+        background-color: #c9510c;
+        color: black;
+      }
+    }
+  }
+}
+
+
+@media (max-width: 850px) {
+
+  .headerdiv {
+    position: static;
+  }
+
+  .logowrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .headerdiv {
+    flex-direction: column;
+  }
+
+  .tabrow {
+    flex-direction: column;
+  }
+
+  .tab {
+    border: 1px solid #000;
+    font-weight: bold;
+
+    margin: 5px 10px;
+  }
+
+  #content {
+    padding-top: 0px;
+  }
+}
+
diff --git a/www/data/css/styles_main.scss b/www/data/css/styles_main.scss
new file mode 100644
index 0000000..e69de29