Merge Sass Changes

Add sass

.gitignore

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

README.md

@@ -12,7 +12,7 @@ Fast, open and free-to-use new tab page for most modern browsers
 
 ## Installation
 ### Chrome
-<a href="https://chrome.google.com/webstore/detail/mue/bngmbednanpcfochchhgbkookpiaiaid"><img src='https://vgy.me/h6SLKn.png' target='_blank'></a> 
+<a href='https://chrome.google.com/webstore/detail/mue/bngmbednanpcfochchhgbkookpiaiaid'><img src='https://vgy.me/h6SLKn.png' target='_blank'></a> 
 
 Link: https://chrome.google.com/webstore/detail/mue/bngmbednanpcfochchhgbkookpiaiaid
 
@@ -20,17 +20,24 @@ Development: Read the [Development](#development) section
 ### Opera
 Development: Read the [Development](#development) section
 ### Firefox
-<a href="https://addons.mozilla.org/en-US/firefox/addon/mue/"><img src='https://vgy.me/REe6qz.png' target='_blank'></a> 
+<a href='https://addons.mozilla.org/firefox/addon/mue/'><img src='https://vgy.me/REe6qz.png' target='_blank'></a> 
 
-Link: https://addons.mozilla.org/en-US/firefox/addon/mue/
+Link: https://addons.mozilla.org/firefox/addon/mue/
 
 Development: Read the [Development](#development) section
 
 ### Development
+<h5>Starting</h5>
+<ol>
+  <li> <code>git clone https://github.com/ohlookitsderpy/Mue</code> (If you don't have Git just go to <b>Clone or
+      download</b> and click <b>Download ZIP</b>)
+  <li> <code>yarn</code> (or <code>npm install</code>)
+  <li> <code>yarn run sass-watch</code> (or <code>npm run sass-watch</code>)
+  <li>Start developing! (See the sections below for how to set it up with your browser)
+</ol>
 <details>
   <summary><b>Chrome</b> (Click to expand)</summary>
   <ol>
-    <li> <code>git clone https://github.com/ohlookitsderpy/Mue</code> (If you don't have Git just go to <b>Clone or download</b> and click <b>Download ZIP</b>)
     <li> Rename <code>manifest-chrome.json</code> to <code>manifest.json</code>
     <li> Visit <code>chrome://extensions</code> in Chrome
     <li> Click <b>Load unpacked</b> (Make sure <b>Developer Mode</b> is on)
@@ -40,7 +47,6 @@ Development: Read the [Development](#development) section
 <details>
   <summary><b>Opera</b> (Click to expand)</summary>
   <ol>
-    <li> <code>git clone https://github.com/ohlookitsderpy/Mue</code> (If you don't have Git just go to <b>Clone or download</b> and click <b>Download ZIP</b>)
     <li> Rename <code>manifest-opera.json</code> to <code>manifest.json</code>
     <li> Visit <code>about://extensions</code> in Opera
     <li> Click <b>Load unpacked extension...</b> (Make sure <b>Developer Mode</b> is on)
@@ -49,20 +55,28 @@ Development: Read the [Development](#development) section
 </details>
 <details>
   <summary><b>Firefox</b> (Click to expand)</summary>
-  <i>Note: I'm currently trying to find a better method to do this, but this works for now. Also in testing and may not work properly!</i>
+  <i>Note: I'm currently trying to find a better method to do this, but this works for now. Also in testing and may not
+    work properly!</i>
   <ol>
-    <li> <code>git clone https://github.com/ohlookitsderpy/Mue</code> (If you don't have Git just go to <b>Clone or download</b> and click <b>Download ZIP</b>)
     <li> Rename <code>manifest-firefox.json</code> to <code>manifest.json</code>
     <li> Visit <code>about:debugging#addons</code> in Firefox
     <li> Click <b>Load Temporary Add-on</b>
     <li> Go to the directory containing Mue and click on the <b>manifest.json</b>
     <li> Enjoy your new tab!
 </details>
+<details>
+  <summary><b>Other</b> (Click to expand)</summary>
+  <i>Note: To get the full new tab experience, just set your browser to open the index.html on startup and tab open
+    <ol>
+      <li> Open the index.html in your browser
+      <li> Enjoy your new tab!
+    </ol>
+</details>
 
 ## Screenshot
 *Will be updated if needed*
 
-<img src="https://vgy.me/K8T5EP.png">
+<img src='https://vgy.me/K8T5EP.png'>
 
 ## Translations
 English - Quotes and Messages

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

manifest-opera.json

@@ -1,14 +0,0 @@
-{
-  "manifest_version": 2,
-  "name": "Mue",
-  "version": "0.1",
-  "browser_action": {
-   "default_icon": "./assets/img/icon.png"
-  },
-  "background": {
-   "scripts": ["./assets/js/background-opera.js"]
-  },
- "permissions": [
-   "tabs"
- ]
-}

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}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}@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")}:root{--shadow-color: #111111CC}.greeting,time,.quote{filter:drop-shadow(var(--shadow-shift) var(--shadow-shift) 0 var(--shadow-color))}/*# 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,kBAEA,iBACA,kBAEA,kBAEI,oBAEA,kBAEA,2BACI,YACA,mBAGJ,0BACI,YACA,kBAIR,YACI,iBC1BR,UAEC,uBAEA,kBAMD,KAEC,uBAEA,gBCOD,sBACA,KAEC,aACA,sBACA,6BACA,mBAEA,SAEA,sBACA,wBACA,sBAEA,qBACA,WAEA,gBAEC,sBACD,iBAID,WACC,qBACA,kBACA,gBACA,0GAKD,MACC,0BAGD,sBAGC","file":"index.css"}

src/assets/js/background-opera.js

@@ -1,13 +1,9 @@
 // Original code sourced from https://forums.opera.com/topic/25046/how-to-disable-completely-the-speed-dial/14
 
 chrome.tabs.onCreated.addListener((tab) => {
-    if (tab.status === "complete" && tab.url === "chrome://startpage/") {
-        chrome.tabs.update(tab.id, { url: chrome.extension.getURL("index.html") });
-    }
+    if (tab.status === "complete" && tab.url === "chrome://startpage/") chrome.tabs.update(tab.id, { url: chrome.extension.getURL("index.html") });
 });
 
-chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
-    if (changeInfo.status === "complete" && tab.url === "chrome://startpage/") {
-        chrome.tabs.update(tabId, { url: chrome.extension.getURL("index.html") });
-    }
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { 
+    if (changeInfo.status === "complete" && tab.url === "chrome://startpage/") chrome.tabs.update(tabId, { url: chrome.extension.getURL("index.html") });
 });

src/assets/js/index.js

@@ -8,7 +8,7 @@
 ██           ██      ██  ██████  ███████                   ██ 
 ██                                                         ██ 
 ██                                                         ██                                                                                                 
-██       Copyright 2018 Dave R (ohlookitsderpy)            ██
+██      Copyright 2018-2019 David Ralph (ohlookitsderpy)   ██
 ██                 Licensed under MIT                      ██                    
 ██      GitHub: https://github.com/ohlookitsderpy/Mue      ██
 ██                                                         ██
@@ -192,7 +192,7 @@ function setRandomQuote () {
 			'George Addair', 
 			'Winston Churchill', 
 			'Paulo Coelho',
-		        'Brian Tracy', 
+		    'Brian Tracy', 
 			'Chantal Sutherland', 
 			'Les Brown', 
 			'Bob Riley', 
@@ -200,7 +200,7 @@ function setRandomQuote () {
 			'Napoleon Hill', 
 			'Jim Rohn', 
 			'Serena Williams',
-		        'Sheryl Sandberg', 
+		    'Sheryl Sandberg', 
 			'Reese Witherspoon', 
 			'Hazrat Inayat Khan', 
 			'Albert Einstein'
@@ -332,4 +332,4 @@ function spMessageSet() {
 	else if (hour > 20) time = 'Buenas Noches'; // If it's after 6pm, set the time string to "Good afternoon"
 	
 	setHTMLContent('.greeting', time);	      // Write the string contents to the HTML
-}
+}

src/assets/scss/index.scss

@@ -0,0 +1,65 @@
+/*
+█████████████████████████████████████████████████████████████                                                                        
+██                                                         ██
+██           ███    ███ ██    ██ ███████                   ██  
+██           ████  ████ ██    ██ ██                        ██ 
+██           ██ ████ ██ ██    ██ █████                     ██ 
+██           ██  ██  ██ ██    ██ ██                        ██ 
+██           ██      ██  ██████  ███████                   ██ 
+██                                                         ██ 
+██                                                         ██                                                                                                 
+██      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';
+
+/* Body */
+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 */
+}
+
+/* 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'); 
+}
+
+/* Shadow */
+:root {
+	--shadow-color: #111111CC;
+}
+
+.greeting,
+time,
+.quote {
+	filter: drop-shadow(var(--shadow-shift) var(--shadow-shift) 0 var(--shadow-color));
+}

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,31 @@
+.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>

src/manifest-chrome.json

@@ -3,11 +3,10 @@
   "name": "Mue",
   "version": "0.1",
   "browser_action": {
-   "default_icon": "./assets/img/icon.png"
+    "default_icon": "./assets/img/icon.png"
   },
   "chrome_url_overrides": {
-   "newtab": "index.html"
+    "newtab": "index.html"
   },
   "runs_offline": true
-}
-  
+}

src/manifest-firefox.json

@@ -3,12 +3,12 @@
   "name": "Mue",
   "version": "0.1",
   "browser_action": {
-   "default_icon": "./assets/img/icon.png"
+    "default_icon": "./assets/img/icon.png"
   },
   "chrome_url_overrides": {
-   "newtab": "index.html"
+    "newtab": "index.html"
   },
   "chrome_settings_overrides": {
-   "homepage": "index.html"
+    "homepage": "index.html"
   }
-}
+}

src/manifest-opera.json

@@ -0,0 +1,14 @@
+{
+  "manifest_version": 2,
+  "name": "Mue",
+  "version": "0.1",
+  "browser_action": {
+    "default_icon": "./assets/img/icon.png"
+  },
+  "background": {
+    "scripts": ["./assets/js/background-opera.js"]
+  },
+  "permissions": [
+    "tabs"
+  ]
+}