add sass

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+yarn.lock
+yarn-error.log

assets/css/index.css

@@ -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;
-  }

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"
+    }
+}

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}

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 */

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"}

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'); 
+}

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'); }

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%;
+    }
+}

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;
+
+}

src/index.html

@@ -1,51 +1,51 @@
-<!--
-█████████████████████████████████████████████████████████████                                                                        
-██                                                         ██
-██           ███    ███ ██    ██ ███████                   ██  
-██           ████  ████ ██    ██ ██                        ██ 
-██           ██ ████ ██ ██    ██ █████                     ██ 
-██           ██  ██  ██ ██    ██ ██                        ██ 
-██           ██      ██  ██████  ███████                   ██ 
-██                                                         ██ 
-██                                                         ██                                                                                                 
-██       Copyright 2018 Dave R (ohlookitsderpy)            ██
-██                 Licensed under MIT                      ██                    
-██      GitHub: https://github.com/ohlookitsderpy/Mue      ██
-██                                                         ██
-██          Special thanks to contributors! <3             ██
-█████████████████████████████████████████████████████████████
--->
-
-<!DOCTYPE html>
-<html>
-
-	<head>
-
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width">
-
-		<title>New Tab</title>
-
-		<link href="./assets/css/index.css" rel="stylesheet">
-
-	</head>
-
-	<body>
-
-		<div class="greeting animated fadeInUp"></div>
-		
-		<time class="animated fadeInUp"></time>
-
-		<div class="quote animated fadeInUp">
-
-			<blockquote></blockquote>
-
-			<cite></cite>
-
-		</div>
-
-	</body>
-
-	<script src="./assets/js/index.js"></script>
-
-</html>
+<!--
+█████████████████████████████████████████████████████████████                                                                        
+██                                                         ██
+██           ███    ███ ██    ██ ███████                   ██  
+██           ████  ████ ██    ██ ██                        ██ 
+██           ██ ████ ██ ██    ██ █████                     ██ 
+██           ██  ██  ██ ██    ██ ██                        ██ 
+██           ██      ██  ██████  ███████                   ██ 
+██                                                         ██ 
+██                                                         ██                                                                                                 
+██      Copyright 2018-2019 David Ralph (ohlookitsderpy)   ██
+██                 Licensed under MIT                      ██                    
+██      GitHub: https://github.com/ohlookitsderpy/Mue      ██
+██                                                         ██
+██          Special thanks to contributors! <3             ██
+█████████████████████████████████████████████████████████████
+-->
+
+<!DOCTYPE html>
+<html>
+
+	<head>
+
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width">
+
+		<title>New Tab</title>
+
+		<link href="./assets/css/index.css" rel="stylesheet">
+
+	</head>
+
+	<body>
+
+		<div class="greeting animated fadeInUp"></div>
+		
+		<time class="animated fadeInUp"></time>
+
+		<div class="quote animated fadeInUp">
+
+			<blockquote></blockquote>
+
+			<cite></cite>
+
+		</div>
+
+	</body>
+
+	<script src="./assets/js/index.js"></script>
+
+</html>