diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..c77c57cc
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+node_modules/
+yarn.lock
+yarn-error.log
\ No newline at end of file
diff --git a/assets/css/index.css b/assets/css/index.css
deleted file mode 100644
index 6d3fabeb..00000000
--- a/assets/css/index.css
+++ /dev/null
@@ -1,201 +0,0 @@
-/*
-█████████████████████████████████████████████████████████████
-██ ██
-██ ███ ███ ██ ██ ███████ ██
-██ ████ ████ ██ ██ ██ ██
-██ ██ ████ ██ ██ ██ █████ ██
-██ ██ ██ ██ ██ ██ ██ ██
-██ ██ ██ ██████ ███████ ██
-██ ██
-██ ██
-██ Copyright 2018 Dave R (ohlookitsderpy) ██
-██ Licensed under MIT ██
-██ GitHub: https://github.com/ohlookitsderpy/Mue ██
-██ ██
-██ Special thanks to contributors! <3 ██
-█████████████████████████████████████████████████████████████
-*/
-
-/* VARIABLES */
-
-:root {
-
- --shadow-color: #111111CC;
-
-}
-
-/* BASIC STYLING */
-
-html, body { height: 100%; }
-body {
-
- display: flex;
- flex-direction: column;
- justify-content: space-around;
- align-items: center;
-
- margin: 0;
-
- background-size: cover;
- background-position: 50%;
- background-color: black; /* Prevent white flash on page load */
-
- font-family: 'Roboto';
- color: white;
-
- overflow: hidden;
-
- -moz-user-select: none; /* Firefox */
- user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
-}
-
-/* BACKGROUND CLASSES */
-
-.mountain { background-image: url('../img/1.jpeg'); }
-.sunrise { background-image: url('../img/2.jpeg'); }
-.butterfly { background-image: url('../img/3.jpeg'); }
-.leaves { background-image: url('../img/4.jpeg'); }
-.river { background-image: url('../img/5.jpeg'); }
-.sea { background-image: url('../img/6.jpeg'); }
-.space { background-image: url('../img/7.jpeg'); }
-.ice { background-image: url('../img/8.jpeg'); }
-.waterfall { background-image: url('../img/9.jpeg'); }
-.river { background-image: url('../img/10.jpeg'); }
-.sunset { background-image: url('../img/11.jpeg'); }
-.desert { background-image: url('../img/12.jpeg'); }
-.canyon { background-image: url('../img/13.jpeg'); }
-.rose { background-image: url('../img/14.jpeg'); }
-.forest { background-image: url('../img/15.jpeg'); }
-.cherry { background-image: url('../img/16.jpeg'); }
-.clouds { background-image: url('../img/17.jpeg'); }
-.winter { background-image: url('../img/18.jpeg'); }
-.autumn { background-image: url('../img/19.jpeg'); }
-.flowers { background-image: url('../img/20.jpeg'); }
-.sunrise { background-image: url('../img/21.jpeg'); }
-.rocks { background-image: url('../img/22.jpeg'); }
-.trees { background-image: url('../img/23.jpeg'); }
-.mountains { background-image: url('../img/24.jpeg'); }
-.beach { background-image: url('../img/25.jpeg'); }
-
-
-
-/* TEXT SHADOW */
-
-.greeting,
-time,
-.quote {
-
- filter: drop-shadow(var(--shadow-shift) var(--shadow-shift) 0 var(--shadow-color));
-
-}
-
-/* Greeting */
-
-.greeting {
-
- --shadow-shift: 0.2rem;
-
- font-size: 3.25rem;
-
-}
-
-/* Time */
-
-time {
-
- --shadow-shift: 0.4rem;
-
- font-size: 12rem;
-
-}
-
-/* Quote */
-
-.quote {
-
- --shadow-shift: 0.125rem;
-
- width: 37.5%;
- max-width: 37.5rem; /* 600px on desktop */
-
- font-size: 1.5rem;
- text-align: center;
-
-}
-
-/* quote text */
-
-.quote blockquote {
-
- margin: 0 0 0.25rem 0;
-
- line-height: 1.125;
-
-}
-
-.quote blockquote::before { content: '“'; margin-right: 0.25ch; }
-.quote blockquote::after { content: '”'; margin-left: 0.25ch; }
-
-/* quote author */
-
-.quote cite { font-size: 83.33%; }
-
-/* Font */
-
-@font-face {
- font-family: 'Roboto';
- font-style: normal;
- font-weight: 400;
- src: local('Roboto'), local('Roboto-Regular'),
- url('../font/roboto-v18-latin-regular.woff2') format('woff2');
- }
-
-/* ANIMATIONS */
-
- /*!
- * animate.css -http://daneden.me/animate
- * Version - 3.7.0
- * Licensed under the MIT license - http://opensource.org/licenses/MIT
- *
- * Copyright (c) 2018 Daniel Eden
- */
-
- @-webkit-keyframes fadeInUp {
- from {
- opacity: 0;
- -webkit-transform: translate3d(0, 100%, 0);
- transform: translate3d(0, 100%, 0);
- }
-
- to {
- opacity: 1;
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- }
- }
-
- @keyframes fadeInUp {
- from {
- opacity: 0;
- -webkit-transform: translate3d(0, 100%, 0);
- transform: translate3d(0, 100%, 0);
- }
-
- to {
- opacity: 1;
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- }
- }
-
- .fadeInUp {
- -webkit-animation-name: fadeInUp;
- animation-name: fadeInUp;
- }
-
- .animated {
- -webkit-animation-duration: 0.75s; /* modified from 1s */
- animation-duration: 0.75s; /* modified from 1s */
- -webkit-animation-fill-mode: both;
- animation-fill-mode: both;
- }
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..0c370430
--- /dev/null
+++ b/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "mue",
+ "description": "Fast, open and free-to-use new tab page for most modern browsers",
+ "author": "ohlookitsderpy",
+ "license": "MIT",
+ "repository": "https://github.com/ohlookitsderpy/Mue",
+ "homepage": "https://qtradio.moe",
+ "scripts": {
+ "sass-watch": "sass --watch src/assets/scss:src/assets/css --style compressed"
+ },
+ "devDependencies": {
+ "sass": "1.16.1"
+ }
+}
\ No newline at end of file
diff --git a/src/assets/css/animate.css b/src/assets/css/animate.css
new file mode 100644
index 00000000..327aa99e
--- /dev/null
+++ b/src/assets/css/animate.css
@@ -0,0 +1,9 @@
+ /*!
+ * animate.css -http://daneden.me/animate
+ * Version - 3.7.0
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2018 Daniel Eden
+ * Modified by ohlookitsderpy
+ */
+@-webkit-keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes fadeInUp{from{opacity:0;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}.animated{-webkit-animation-duration:0.75s;animation-duration:0.75s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
\ No newline at end of file
diff --git a/src/assets/css/index.css b/src/assets/css/index.css
new file mode 100644
index 00000000..7a8a66de
--- /dev/null
+++ b/src/assets/css/index.css
@@ -0,0 +1 @@
+.mountain{background-image:url("../img/1.jpeg")}.sunrise{background-image:url("../img/2.jpeg")}.butterfly{background-image:url("../img/3.jpeg")}.leaves{background-image:url("../img/4.jpeg")}.river{background-image:url("../img/5.jpeg")}.sea{background-image:url("../img/6.jpeg")}.space{background-image:url("../img/7.jpeg")}.ice{background-image:url("../img/8.jpeg")}.waterfall{background-image:url("../img/9.jpeg")}.river{background-image:url("../img/10.jpeg")}.sunset{background-image:url("../img/11.jpeg")}.desert{background-image:url("../img/12.jpeg")}.canyon{background-image:url("../img/13.jpeg")}.rose{background-image:url("../img/14.jpeg")}.forest{background-image:url("../img/15.jpeg")}.cherry{background-image:url("../img/16.jpeg")}.clouds{background-image:url("../img/17.jpeg")}.winter{background-image:url("../img/18.jpeg")}.autumn{background-image:url("../img/19.jpeg")}.flowers{background-image:url("../img/20.jpeg")}.sunrise{background-image:url("../img/21.jpeg")}.rocks{background-image:url("../img/22.jpeg")}.trees{background-image:url("../img/23.jpeg")}.mountains{background-image:url("../img/24.jpeg")}.beach{background-image:url("../img/25.jpeg")}.quote{--shadow-shift: 0.125rem;width:37.5%;max-width:37.5rem;font-size:1.5rem;text-align:center}.quote blockquote{margin:0 0 .25rem 0;line-height:1.125}.quote blockquote ::before{content:"“";margin-right:.25ch}.quote blockquote ::after{content:"”";margin-left:.25ch}.quote cite{font-size:83.33%}.greeting{--shadow-shift: 0.2rem;font-size:3.25rem}time{--shadow-shift: 0.4rem;font-size:12rem}:root{--shadow-color: #111111CC}html,body{height:100%}body{display:flex;flex-direction:column;justify-content:space-around;align-items:center;margin:0;background-size:cover;background-position:50%;background-color:#000;font-family:"Roboto";color:#fff;overflow:hidden;-moz-user-select:none;user-select:none}.greeting,time,.quote{filter:drop-shadow(var(--shadow-shift) var(--shadow-shift) 0 var(--shadow-color))}@font-face{font-family:"Roboto";font-style:normal;font-weight:400;src:local("Roboto"),local("Roboto-Regular"),url("../font/roboto-v18-latin-regular.woff2") format("woff2")}/*# sourceMappingURL=index.css.map */
diff --git a/src/assets/css/index.css.map b/src/assets/css/index.css.map
new file mode 100644
index 00000000..e86872bb
--- /dev/null
+++ b/src/assets/css/index.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/modules/_background.scss","../scss/modules/_quote.scss","../scss/modules/_time-greeting.scss","../scss/index.scss"],"names":[],"mappings":"CAAA,gDACA,+CACA,iDACA,8CACA,6CACA,2CACA,6CACA,2CACA,iDACA,8CACA,+CACA,+CACA,+CACA,6CACA,+CACA,+CACA,+CACA,+CACA,+CACA,gDACA,gDACA,8CACA,8CACA,kDACA,8CCxBA,OAEI,yBAEA,YACA,kBAGA,iBACA,kBAEA,kBAEI,oBAEA,kBAEA,2BACI,YACA,mBAGJ,0BACI,YACA,kBAIR,YACI,iBC3BR,UAEC,uBAEA,kBAMD,KAEC,uBAEA,gBCMD,MACC,0BAGD,sBACA,KAEC,aACA,sBACA,6BACA,mBAEA,SAEA,sBACA,wBACA,sBAEA,qBACA,WAEA,gBAEC,sBACD,iBAGD,sBAIC,kFAID,WACC,qBACA,kBACA,gBACA","file":"index.css"}
\ No newline at end of file
diff --git a/assets/font/roboto-v18-latin-regular.woff2 b/src/assets/font/roboto-v18-latin-regular.woff2
similarity index 100%
rename from assets/font/roboto-v18-latin-regular.woff2
rename to src/assets/font/roboto-v18-latin-regular.woff2
diff --git a/assets/img/1.jpeg b/src/assets/img/1.jpeg
similarity index 100%
rename from assets/img/1.jpeg
rename to src/assets/img/1.jpeg
diff --git a/assets/img/10.jpeg b/src/assets/img/10.jpeg
similarity index 100%
rename from assets/img/10.jpeg
rename to src/assets/img/10.jpeg
diff --git a/assets/img/11.jpeg b/src/assets/img/11.jpeg
similarity index 100%
rename from assets/img/11.jpeg
rename to src/assets/img/11.jpeg
diff --git a/assets/img/12.jpeg b/src/assets/img/12.jpeg
similarity index 100%
rename from assets/img/12.jpeg
rename to src/assets/img/12.jpeg
diff --git a/assets/img/13.jpeg b/src/assets/img/13.jpeg
similarity index 100%
rename from assets/img/13.jpeg
rename to src/assets/img/13.jpeg
diff --git a/assets/img/14.jpeg b/src/assets/img/14.jpeg
similarity index 100%
rename from assets/img/14.jpeg
rename to src/assets/img/14.jpeg
diff --git a/assets/img/15.jpeg b/src/assets/img/15.jpeg
similarity index 100%
rename from assets/img/15.jpeg
rename to src/assets/img/15.jpeg
diff --git a/assets/img/16.jpeg b/src/assets/img/16.jpeg
similarity index 100%
rename from assets/img/16.jpeg
rename to src/assets/img/16.jpeg
diff --git a/assets/img/17.jpeg b/src/assets/img/17.jpeg
similarity index 100%
rename from assets/img/17.jpeg
rename to src/assets/img/17.jpeg
diff --git a/assets/img/18.jpeg b/src/assets/img/18.jpeg
similarity index 100%
rename from assets/img/18.jpeg
rename to src/assets/img/18.jpeg
diff --git a/assets/img/19.jpeg b/src/assets/img/19.jpeg
similarity index 100%
rename from assets/img/19.jpeg
rename to src/assets/img/19.jpeg
diff --git a/assets/img/2.jpeg b/src/assets/img/2.jpeg
similarity index 100%
rename from assets/img/2.jpeg
rename to src/assets/img/2.jpeg
diff --git a/assets/img/20.jpeg b/src/assets/img/20.jpeg
similarity index 100%
rename from assets/img/20.jpeg
rename to src/assets/img/20.jpeg
diff --git a/assets/img/21.jpeg b/src/assets/img/21.jpeg
similarity index 100%
rename from assets/img/21.jpeg
rename to src/assets/img/21.jpeg
diff --git a/assets/img/22.jpeg b/src/assets/img/22.jpeg
similarity index 100%
rename from assets/img/22.jpeg
rename to src/assets/img/22.jpeg
diff --git a/assets/img/23.jpeg b/src/assets/img/23.jpeg
similarity index 100%
rename from assets/img/23.jpeg
rename to src/assets/img/23.jpeg
diff --git a/assets/img/24.jpeg b/src/assets/img/24.jpeg
similarity index 100%
rename from assets/img/24.jpeg
rename to src/assets/img/24.jpeg
diff --git a/assets/img/25.jpeg b/src/assets/img/25.jpeg
similarity index 100%
rename from assets/img/25.jpeg
rename to src/assets/img/25.jpeg
diff --git a/assets/img/3.jpeg b/src/assets/img/3.jpeg
similarity index 100%
rename from assets/img/3.jpeg
rename to src/assets/img/3.jpeg
diff --git a/assets/img/4.jpeg b/src/assets/img/4.jpeg
similarity index 100%
rename from assets/img/4.jpeg
rename to src/assets/img/4.jpeg
diff --git a/assets/img/5.jpg b/src/assets/img/5.jpg
similarity index 100%
rename from assets/img/5.jpg
rename to src/assets/img/5.jpg
diff --git a/assets/img/6.jpeg b/src/assets/img/6.jpeg
similarity index 100%
rename from assets/img/6.jpeg
rename to src/assets/img/6.jpeg
diff --git a/assets/img/7.jpeg b/src/assets/img/7.jpeg
similarity index 100%
rename from assets/img/7.jpeg
rename to src/assets/img/7.jpeg
diff --git a/assets/img/8.jpeg b/src/assets/img/8.jpeg
similarity index 100%
rename from assets/img/8.jpeg
rename to src/assets/img/8.jpeg
diff --git a/assets/img/9.jpeg b/src/assets/img/9.jpeg
similarity index 100%
rename from assets/img/9.jpeg
rename to src/assets/img/9.jpeg
diff --git a/assets/img/icon.png b/src/assets/img/icon.png
similarity index 100%
rename from assets/img/icon.png
rename to src/assets/img/icon.png
diff --git a/assets/js/background-opera.js b/src/assets/js/background-opera.js
similarity index 100%
rename from assets/js/background-opera.js
rename to src/assets/js/background-opera.js
diff --git a/assets/js/index.js b/src/assets/js/index.js
similarity index 100%
rename from assets/js/index.js
rename to src/assets/js/index.js
diff --git a/src/assets/scss/index.scss b/src/assets/scss/index.scss
new file mode 100644
index 00000000..e9cb4d72
--- /dev/null
+++ b/src/assets/scss/index.scss
@@ -0,0 +1,64 @@
+/*
+█████████████████████████████████████████████████████████████
+██ ██
+██ ███ ███ ██ ██ ███████ ██
+██ ████ ████ ██ ██ ██ ██
+██ ██ ████ ██ ██ ██ █████ ██
+██ ██ ██ ██ ██ ██ ██ ██
+██ ██ ██ ██████ ███████ ██
+██ ██
+██ ██
+██ Copyright 2018-2019 David Ralph (ohlookitsderpy) ██
+██ Licensed under MIT ██
+██ GitHub: https://github.com/ohlookitsderpy/Mue ██
+██ ██
+██ Special thanks to contributors! <3 ██
+█████████████████████████████████████████████████████████████
+*/
+
+@import 'modules/background';
+@import 'modules/quote';
+@import 'modules/time-greeting';
+
+:root {
+ --shadow-color: #111111CC;
+}
+
+html, body { height: 100%; }
+body {
+
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ align-items: center;
+
+ margin: 0;
+
+ background-size: cover;
+ background-position: 50%;
+ background-color: black; /* Prevent white flash on page load */
+
+ font-family: 'Roboto';
+ color: white;
+
+ overflow: hidden;
+
+ -moz-user-select: none; /* Firefox */
+ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
+}
+
+.greeting,
+time,
+.quote {
+
+ filter: drop-shadow(var(--shadow-shift) var(--shadow-shift) 0 var(--shadow-color));
+
+}
+
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Roboto'), local('Roboto-Regular'),
+ url('../font/roboto-v18-latin-regular.woff2') format('woff2');
+}
\ No newline at end of file
diff --git a/src/assets/scss/modules/_background.scss b/src/assets/scss/modules/_background.scss
new file mode 100644
index 00000000..5fd85fad
--- /dev/null
+++ b/src/assets/scss/modules/_background.scss
@@ -0,0 +1,25 @@
+.mountain { background-image: url('../img/1.jpeg'); }
+.sunrise { background-image: url('../img/2.jpeg'); }
+.butterfly { background-image: url('../img/3.jpeg'); }
+.leaves { background-image: url('../img/4.jpeg'); }
+.river { background-image: url('../img/5.jpeg'); }
+.sea { background-image: url('../img/6.jpeg'); }
+.space { background-image: url('../img/7.jpeg'); }
+.ice { background-image: url('../img/8.jpeg'); }
+.waterfall { background-image: url('../img/9.jpeg'); }
+.river { background-image: url('../img/10.jpeg'); }
+.sunset { background-image: url('../img/11.jpeg'); }
+.desert { background-image: url('../img/12.jpeg'); }
+.canyon { background-image: url('../img/13.jpeg'); }
+.rose { background-image: url('../img/14.jpeg'); }
+.forest { background-image: url('../img/15.jpeg'); }
+.cherry { background-image: url('../img/16.jpeg'); }
+.clouds { background-image: url('../img/17.jpeg'); }
+.winter { background-image: url('../img/18.jpeg'); }
+.autumn { background-image: url('../img/19.jpeg'); }
+.flowers { background-image: url('../img/20.jpeg'); }
+.sunrise { background-image: url('../img/21.jpeg'); }
+.rocks { background-image: url('../img/22.jpeg'); }
+.trees { background-image: url('../img/23.jpeg'); }
+.mountains { background-image: url('../img/24.jpeg'); }
+.beach { background-image: url('../img/25.jpeg'); }
\ No newline at end of file
diff --git a/src/assets/scss/modules/_quote.scss b/src/assets/scss/modules/_quote.scss
new file mode 100644
index 00000000..f7789666
--- /dev/null
+++ b/src/assets/scss/modules/_quote.scss
@@ -0,0 +1,32 @@
+.quote {
+
+ --shadow-shift: 0.125rem;
+
+ width: 37.5%;
+ max-width: 37.5rem;
+ /* 600px on desktop */
+
+ font-size: 1.5rem;
+ text-align: center;
+
+ blockquote {
+
+ margin: 0 0 0.25rem 0;
+
+ line-height: 1.125;
+
+ ::before {
+ content: '“';
+ margin-right: 0.25ch;
+ }
+
+ ::after {
+ content: '”';
+ margin-left: 0.25ch;
+ }
+ }
+
+ cite {
+ font-size: 83.33%;
+ }
+}
\ No newline at end of file
diff --git a/src/assets/scss/modules/_time-greeting.scss b/src/assets/scss/modules/_time-greeting.scss
new file mode 100644
index 00000000..fc32c86e
--- /dev/null
+++ b/src/assets/scss/modules/_time-greeting.scss
@@ -0,0 +1,19 @@
+/* Greeting */
+
+.greeting {
+
+ --shadow-shift: 0.2rem;
+
+ font-size: 3.25rem;
+
+}
+
+/* Time */
+
+time {
+
+ --shadow-shift: 0.4rem;
+
+ font-size: 12rem;
+
+}
\ No newline at end of file
diff --git a/index.html b/src/index.html
similarity index 94%
rename from index.html
rename to src/index.html
index 0ef94560..dfe68d2e 100644
--- a/index.html
+++ b/src/index.html
@@ -1,51 +1,51 @@
-
-
-
-
-
-
-
- New Tab
-
-
-
- New Tab
+
+
+
+