From cce69892a3cce064697d6099138d8bd317602eab Mon Sep 17 00:00:00 2001 From: David Ralph Date: Fri, 18 Jan 2019 22:36:08 +0000 Subject: [PATCH 1/5] add sass --- .gitignore | 3 + assets/css/index.css | 201 ------------------ package.json | 14 ++ src/assets/css/animate.css | 9 + src/assets/css/index.css | 1 + src/assets/css/index.css.map | 1 + .../font/roboto-v18-latin-regular.woff2 | Bin {assets => src/assets}/img/1.jpeg | Bin {assets => src/assets}/img/10.jpeg | Bin {assets => src/assets}/img/11.jpeg | Bin {assets => src/assets}/img/12.jpeg | Bin {assets => src/assets}/img/13.jpeg | Bin {assets => src/assets}/img/14.jpeg | Bin {assets => src/assets}/img/15.jpeg | Bin {assets => src/assets}/img/16.jpeg | Bin {assets => src/assets}/img/17.jpeg | Bin {assets => src/assets}/img/18.jpeg | Bin {assets => src/assets}/img/19.jpeg | Bin {assets => src/assets}/img/2.jpeg | Bin {assets => src/assets}/img/20.jpeg | Bin {assets => src/assets}/img/21.jpeg | Bin {assets => src/assets}/img/22.jpeg | Bin {assets => src/assets}/img/23.jpeg | Bin {assets => src/assets}/img/24.jpeg | Bin {assets => src/assets}/img/25.jpeg | Bin {assets => src/assets}/img/3.jpeg | Bin {assets => src/assets}/img/4.jpeg | Bin {assets => src/assets}/img/5.jpg | Bin {assets => src/assets}/img/6.jpeg | Bin {assets => src/assets}/img/7.jpeg | Bin {assets => src/assets}/img/8.jpeg | Bin {assets => src/assets}/img/9.jpeg | Bin {assets => src/assets}/img/icon.png | Bin {assets => src/assets}/js/background-opera.js | 0 {assets => src/assets}/js/index.js | 0 src/assets/scss/index.scss | 64 ++++++ src/assets/scss/modules/_background.scss | 25 +++ src/assets/scss/modules/_quote.scss | 32 +++ src/assets/scss/modules/_time-greeting.scss | 19 ++ index.html => src/index.html | 102 ++++----- .../manifest-chrome.json | 0 .../manifest-firefox.json | 0 .../manifest-opera.json | 0 43 files changed, 219 insertions(+), 252 deletions(-) create mode 100644 .gitignore delete mode 100644 assets/css/index.css create mode 100644 package.json create mode 100644 src/assets/css/animate.css create mode 100644 src/assets/css/index.css create mode 100644 src/assets/css/index.css.map rename {assets => src/assets}/font/roboto-v18-latin-regular.woff2 (100%) rename {assets => src/assets}/img/1.jpeg (100%) rename {assets => src/assets}/img/10.jpeg (100%) rename {assets => src/assets}/img/11.jpeg (100%) rename {assets => src/assets}/img/12.jpeg (100%) rename {assets => src/assets}/img/13.jpeg (100%) rename {assets => src/assets}/img/14.jpeg (100%) rename {assets => src/assets}/img/15.jpeg (100%) rename {assets => src/assets}/img/16.jpeg (100%) rename {assets => src/assets}/img/17.jpeg (100%) rename {assets => src/assets}/img/18.jpeg (100%) rename {assets => src/assets}/img/19.jpeg (100%) rename {assets => src/assets}/img/2.jpeg (100%) rename {assets => src/assets}/img/20.jpeg (100%) rename {assets => src/assets}/img/21.jpeg (100%) rename {assets => src/assets}/img/22.jpeg (100%) rename {assets => src/assets}/img/23.jpeg (100%) rename {assets => src/assets}/img/24.jpeg (100%) rename {assets => src/assets}/img/25.jpeg (100%) rename {assets => src/assets}/img/3.jpeg (100%) rename {assets => src/assets}/img/4.jpeg (100%) rename {assets => src/assets}/img/5.jpg (100%) rename {assets => src/assets}/img/6.jpeg (100%) rename {assets => src/assets}/img/7.jpeg (100%) rename {assets => src/assets}/img/8.jpeg (100%) rename {assets => src/assets}/img/9.jpeg (100%) rename {assets => src/assets}/img/icon.png (100%) rename {assets => src/assets}/js/background-opera.js (100%) rename {assets => src/assets}/js/index.js (100%) create mode 100644 src/assets/scss/index.scss create mode 100644 src/assets/scss/modules/_background.scss create mode 100644 src/assets/scss/modules/_quote.scss create mode 100644 src/assets/scss/modules/_time-greeting.scss rename index.html => src/index.html (94%) rename manifest-chrome.json => src/manifest-chrome.json (100%) rename manifest-firefox.json => src/manifest-firefox.json (100%) rename manifest-opera.json => src/manifest-opera.json (100%) 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 + + + + + + + +
+ + + +
+ +
+ + + +
+ + + + + + diff --git a/manifest-chrome.json b/src/manifest-chrome.json similarity index 100% rename from manifest-chrome.json rename to src/manifest-chrome.json diff --git a/manifest-firefox.json b/src/manifest-firefox.json similarity index 100% rename from manifest-firefox.json rename to src/manifest-firefox.json diff --git a/manifest-opera.json b/src/manifest-opera.json similarity index 100% rename from manifest-opera.json rename to src/manifest-opera.json From 78c1d70eca325d709ba0bfad00c1610fbc84f087 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Fri, 18 Jan 2019 22:50:16 +0000 Subject: [PATCH 2/5] edits --- src/assets/css/animate.css | 4 ++-- src/assets/css/index.css | 2 +- src/assets/css/index.css.map | 2 +- src/assets/scss/index.scss | 25 +++++++++++++------------ src/assets/scss/modules/_quote.scss | 3 +-- 5 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/assets/css/animate.css b/src/assets/css/animate.css index 327aa99e..7cfe335b 100644 --- a/src/assets/css/animate.css +++ b/src/assets/css/animate.css @@ -1,9 +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 index 7a8a66de..334b34a3 100644 --- a/src/assets/css/index.css +++ b/src/assets/css/index.css @@ -1 +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 */ +.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 */ diff --git a/src/assets/css/index.css.map b/src/assets/css/index.css.map index e86872bb..bd243423 100644 --- a/src/assets/css/index.css.map +++ b/src/assets/css/index.css.map @@ -1 +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 +{"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"} \ No newline at end of file diff --git a/src/assets/scss/index.scss b/src/assets/scss/index.scss index e9cb4d72..0e9edd30 100644 --- a/src/assets/scss/index.scss +++ b/src/assets/scss/index.scss @@ -20,10 +20,7 @@ @import 'modules/quote'; @import 'modules/time-greeting'; -:root { - --shadow-color: #111111CC; -} - +/* Body */ html, body { height: 100%; } body { @@ -47,18 +44,22 @@ body { 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 */ @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)); } \ No newline at end of file diff --git a/src/assets/scss/modules/_quote.scss b/src/assets/scss/modules/_quote.scss index f7789666..741a2a78 100644 --- a/src/assets/scss/modules/_quote.scss +++ b/src/assets/scss/modules/_quote.scss @@ -3,8 +3,7 @@ --shadow-shift: 0.125rem; width: 37.5%; - max-width: 37.5rem; - /* 600px on desktop */ + max-width: 37.5rem; /* 600px on desktop */ font-size: 1.5rem; text-align: center; From 5681b1c1426e3d67eee68a8dfa22f11283ad94c9 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Fri, 18 Jan 2019 22:54:15 +0000 Subject: [PATCH 3/5] let's do this now so i don't forget --- src/index.html | 14 +++++++------- src/manifest-chrome.json | 7 +++---- src/manifest-firefox.json | 8 ++++---- src/manifest-opera.json | 10 +++++----- 4 files changed, 19 insertions(+), 20 deletions(-) diff --git a/src/index.html b/src/index.html index dfe68d2e..32313706 100644 --- a/src/index.html +++ b/src/index.html @@ -21,22 +21,22 @@ - - + + New Tab - + -
+
- + -
+
@@ -46,6 +46,6 @@ - + diff --git a/src/manifest-chrome.json b/src/manifest-chrome.json index 1a6e3821..4d00d6f3 100644 --- a/src/manifest-chrome.json +++ b/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 -} - +} \ No newline at end of file diff --git a/src/manifest-firefox.json b/src/manifest-firefox.json index decc7fa8..00e1f886 100644 --- a/src/manifest-firefox.json +++ b/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" } -} +} \ No newline at end of file diff --git a/src/manifest-opera.json b/src/manifest-opera.json index 10599c4b..809e6af0 100644 --- a/src/manifest-opera.json +++ b/src/manifest-opera.json @@ -3,12 +3,12 @@ "name": "Mue", "version": "0.1", "browser_action": { - "default_icon": "./assets/img/icon.png" + "default_icon": "./assets/img/icon.png" }, "background": { - "scripts": ["./assets/js/background-opera.js"] + "scripts": ["./assets/js/background-opera.js"] }, - "permissions": [ - "tabs" - ] + "permissions": [ + "tabs" + ] } \ No newline at end of file From e324a07144f8dc10b5bc2ccdfda540708c9bd9b5 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Fri, 18 Jan 2019 23:00:54 +0000 Subject: [PATCH 4/5] Same here --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 82c3e987..48cfe553 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ Fast, open and free-to-use new tab page for most modern browsers ## Installation ### Chrome - + Link: https://chrome.google.com/webstore/detail/mue/bngmbednanpcfochchhgbkookpiaiaid @@ -20,7 +20,7 @@ Development: Read the [Development](#development) section ### Opera Development: Read the [Development](#development) section ### Firefox - + Link: https://addons.mozilla.org/en-US/firefox/addon/mue/ @@ -62,7 +62,7 @@ Development: Read the [Development](#development) section ## Screenshot *Will be updated if needed* - + ## Translations English - Quotes and Messages From 22995df121678079d6a0ef66002b0731b4d3f77d Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sat, 19 Jan 2019 13:55:24 +0000 Subject: [PATCH 5/5] some js edits as well --- README.md | 26 ++++++++++++++++++++------ src/assets/js/background-opera.js | 10 +++------- src/assets/js/index.js | 8 ++++---- 3 files changed, 27 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 48cfe553..73828561 100644 --- a/README.md +++ b/README.md @@ -20,17 +20,24 @@ Development: Read the [Development](#development) section ### Opera Development: Read the [Development](#development) section ### Firefox - + -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 +
Starting
+
    +
  1. git clone https://github.com/ohlookitsderpy/Mue (If you don't have Git just go to Clone or + download and click Download ZIP) +
  2. yarn (or npm install) +
  3. yarn run sass-watch (or npm run sass-watch) +
  4. Start developing! (See the sections below for how to set it up with your browser) +
Chrome (Click to expand)
    -
  1. git clone https://github.com/ohlookitsderpy/Mue (If you don't have Git just go to Clone or download and click Download ZIP)
  2. Rename manifest-chrome.json to manifest.json
  3. Visit chrome://extensions in Chrome
  4. Click Load unpacked (Make sure Developer Mode is on) @@ -40,7 +47,6 @@ Development: Read the [Development](#development) section
    Opera (Click to expand)
      -
    1. git clone https://github.com/ohlookitsderpy/Mue (If you don't have Git just go to Clone or download and click Download ZIP)
    2. Rename manifest-opera.json to manifest.json
    3. Visit about://extensions in Opera
    4. Click Load unpacked extension... (Make sure Developer Mode is on) @@ -49,15 +55,23 @@ Development: Read the [Development](#development) section
    Firefox (Click to expand) - 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! + 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!
      -
    1. git clone https://github.com/ohlookitsderpy/Mue (If you don't have Git just go to Clone or download and click Download ZIP)
    2. Rename manifest-firefox.json to manifest.json
    3. Visit about:debugging#addons in Firefox
    4. Click Load Temporary Add-on
    5. Go to the directory containing Mue and click on the manifest.json
    6. Enjoy your new tab!
    +
    + Other (Click to expand) + Note: To get the full new tab experience, just set your browser to open the index.html on startup and tab open +
      +
    1. Open the index.html in your browser +
    2. Enjoy your new tab! +
    +
    ## Screenshot *Will be updated if needed* diff --git a/src/assets/js/background-opera.js b/src/assets/js/background-opera.js index bc9bc2aa..df7f4478 100644 --- a/src/assets/js/background-opera.js +++ b/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") }); }); diff --git a/src/assets/js/index.js b/src/assets/js/index.js index b2293e88..547045f4 100644 --- a/src/assets/js/index.js +++ b/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 -} +} \ No newline at end of file