From ff3a001311ea235c62fd15c27a47ecb1a1f391f4 Mon Sep 17 00:00:00 2001 From: andrewthegreat5 Date: Tue, 11 Feb 2020 19:26:35 +1300 Subject: [PATCH] v4.2.0, added css prefixes so other browsers work better --- css.css | 92 ++++++++- cssOrig.css | 449 ++++++++++++++++++++++++++++++++++++++++++ service-worker.js | 2 +- service-worker.js.map | 2 +- settings.html | 2 +- 5 files changed, 540 insertions(+), 7 deletions(-) create mode 100644 cssOrig.css diff --git a/css.css b/css.css index 3837916..3bf8258 100644 --- a/css.css +++ b/css.css @@ -12,7 +12,6 @@ /*Main dropdown, Hover cards, Tooltips*/ --shadow64: 0 25.6px 57.6px 0 rgba(0, 0, 0, .22), 0 4.8px 14.4px 0 rgba(0, 0, 0, .18); /* Panels, Pop up dialogs*/ - --Tshadow4: 0 1.6px 3.6px rgba(0, 0, 0, .132), 0 0.3px 0.9px rgba(0, 0, 0, .108); /*Cards, Grid item thumbnails*/ --Tshadow8: 0 3.2px 7.2px rgba(0, 0, 0, .132), 0 0.6px 1.8px rgba(0, 0, 0, .108); @@ -25,14 +24,30 @@ html { font-family: 'Lato', sans-serif; + background: -o-linear-gradient(135deg, rgb(238, 119, 82), rgb(231, 60, 126), rgb(35, 166, 213), rgb(35, 213, 171)); background: linear-gradient(-45deg, rgb(238, 119, 82), rgb(231, 60, 126), rgb(35, 166, 213), rgb(35, 213, 171)); background-size: 400% 400%; + -webkit-animation: Gradient 15s ease infinite; animation: Gradient 15s ease infinite; margin: 0; width: 100%; height: 100vh; } +@-webkit-keyframes Gradient { + 0% { + background-position: 0% 50% + } + + 50% { + background-position: 100% 50% + } + + 100% { + background-position: 0% 50% + } +} + @keyframes Gradient { 0% { background-position: 0% 50% @@ -56,8 +71,11 @@ html { left: 0; background-color: rgba(255, 255, 255, 0.1); overflow-x: hidden; + -webkit-transition: width 0.25s cubic-bezier(0.25, 0.1, 0.1, 1); + -o-transition: width 0.25s cubic-bezier(0.25, 0.1, 0.1, 1); transition: width 0.25s cubic-bezier(0.25, 0.1, 0.1, 1); padding-top: 4%; + -webkit-backdrop-filter: var(--mainBlur); backdrop-filter: var(--mainBlur); } @@ -70,8 +88,14 @@ html { left: 22vw; background-color: var(--mainIMG); overflow-x: hidden; + -webkit-transition: left 0.25s cubic-bezier(0.25, 0.1, 0.1, 1), -webkit-box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.1, 1); + transition: left 0.25s cubic-bezier(0.25, 0.1, 0.1, 1), -webkit-box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.1, 1); + -o-transition: left 0.25s cubic-bezier(0.25, 0.1, 0.1, 1), box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.1, 1); transition: left 0.25s cubic-bezier(0.25, 0.1, 0.1, 1), box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.1, 1); + transition: left 0.25s cubic-bezier(0.25, 0.1, 0.1, 1), box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.1, 1), -webkit-box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.1, 1); + -webkit-box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, .132), 0 1.2px 3.6px 0 rgba(0, 0, 0, .108), 50vw 0px 0px 50vw rgba(0, 0, 0, 0); box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, .132), 0 1.2px 3.6px 0 rgba(0, 0, 0, .108), 50vw 0px 0px 50vw rgba(0, 0, 0, 0); + -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } @@ -102,7 +126,9 @@ html { padding: 2% 5% 2% 5%; width: 75%; margin: 0% 0% 2% 10%; + -webkit-box-shadow: var(--shadow16); box-shadow: var(--shadow16); + -webkit-backdrop-filter: var(--mainBlur); backdrop-filter: var(--mainBlur); } @@ -116,7 +142,9 @@ html { background: var(--mainIMG); width: 28%; margin: 0% 0% 2% 10%; + -webkit-box-shadow: var(--shadow16); box-shadow: var(--shadow16); + -webkit-backdrop-filter: var(--mainBlur); backdrop-filter: var(--mainBlur); } @@ -153,7 +181,12 @@ p { height: 0.3vw; background-color: rgb(255, 255, 255); position: absolute; + -webkit-transition: -webkit-transform 0.15s ease; + transition: -webkit-transform 0.15s ease; + -o-transition: transform 0.15s ease; transition: transform 0.15s ease; + transition: transform 0.15s ease, -webkit-transform 0.15s ease; + -webkit-box-shadow: var(--shadow4); box-shadow: var(--shadow4); } @@ -173,30 +206,50 @@ p { .hamburger--arrowalt .hamburger-inner::before { /*transition closed*/ + -webkit-transition: top 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); + transition: top 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); + -o-transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); + transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt .hamburger-inner::after { /*transition closed*/ + -webkit-transition: bottom 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); + transition: bottom 0.1s 0.1s ease, -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); + -o-transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); + transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt.is-active .hamburger-inner::before { /*transition open*/ top: 0; + -webkit-transform: translate3d(-36%, -220%, 0) rotate(-45deg) scale(0.7, 1); transform: translate3d(-36%, -220%, 0) rotate(-45deg) scale(0.7, 1); + -webkit-transition: top 0.15s ease, -webkit-transform 0.07s 0.07s ease-in-out; + transition: top 0.15s ease, -webkit-transform 0.07s 0.07s ease-in-out; + -o-transition: top 0.15s ease, transform 0.07s 0.07s ease-in-out; transition: top 0.15s ease, transform 0.07s 0.07s ease-in-out; + transition: top 0.15s ease, transform 0.07s 0.07s ease-in-out, -webkit-transform 0.07s 0.07s ease-in-out; } .hamburger--arrowalt.is-active .hamburger-inner::after { /*transition open*/ bottom: 0; + -webkit-transform: translate3d(-36%, 208%, 0) rotate(45deg) scale(0.7, 1); transform: translate3d(-36%, 208%, 0) rotate(45deg) scale(0.7, 1); + -webkit-transition: bottom 0.15s ease, -webkit-transform 0.07s 0.07s ease-in-out; + transition: bottom 0.15s ease, -webkit-transform 0.07s 0.07s ease-in-out; + -o-transition: bottom 0.15s ease, transform 0.07s 0.07s ease-in-out; transition: bottom 0.15s ease, transform 0.07s 0.07s ease-in-out; + transition: bottom 0.15s ease, transform 0.07s 0.07s ease-in-out, -webkit-transform 0.07s 0.07s ease-in-out; } .hamburger.is-active { padding-left: 25%; + -webkit-transition: padding-left 0.15s ease; + -o-transition: padding-left 0.15s ease; transition: padding-left 0.15s ease; } @@ -216,7 +269,10 @@ p { color: rgb(255, 255, 255); width: 100vw; height: 0; + -webkit-box-shadow: var(--shadow64); box-shadow: var(--shadow64); + -webkit-transition: padding 0.25s cubic-bezier(0.25, 0.1, 0.1, 1); + -o-transition: padding 0.25s cubic-bezier(0.25, 0.1, 0.1, 1); transition: padding 0.25s cubic-bezier(0.25, 0.1, 0.1, 1); overflow: hidden; } @@ -228,6 +284,8 @@ p { font-weight: bold; float: right; cursor: pointer; + -webkit-transition: color 0.15s ease; + -o-transition: color 0.15s ease; transition: color 0.15s ease; } @@ -248,12 +306,16 @@ select { padding: 12px 20px; margin: 8px 0; display: inline-block; + -webkit-box-sizing: border-box; box-sizing: border-box; outline: none; border: none; border-bottom: 0px solid var(--accentBlue); border-top: 0px solid var(--accentBlue); + -webkit-transition: border-bottom 0.25s cubic-bezier(0.25, 0.1, 0.1, 1), border-top 0.25s cubic-bezier(0.25, 0.1, 0.1, 1); + -o-transition: border-bottom 0.25s cubic-bezier(0.25, 0.1, 0.1, 1), border-top 0.25s cubic-bezier(0.25, 0.1, 0.1, 1); transition: border-bottom 0.25s cubic-bezier(0.25, 0.1, 0.1, 1), border-top 0.25s cubic-bezier(0.25, 0.1, 0.1, 1); + -webkit-box-shadow: var(--shadow4); box-shadow: var(--shadow4); background-color: var(--textInvert); } @@ -274,6 +336,7 @@ input[type=submit] { margin: 3% 0 0 0; border: none; cursor: pointer; + -webkit-box-shadow: var(--shadow8); box-shadow: var(--shadow8); } @@ -291,10 +354,16 @@ input[type=submit]:hover { .tgl *:after, .tgl *:before, .tgl+.tgl-btn { + -webkit-box-sizing: border-box; box-sizing: border-box; + -webkit-box-shadow: var(--shadow4); box-shadow: var(--shadow4); } +.tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl+.tgl-btn::-moz-selection { + background: none; +} + .tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, @@ -310,6 +379,9 @@ input[type=submit]:hover { height: 2.5em; position: relative; cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; user-select: none; float: right; } @@ -337,13 +409,18 @@ input[type=submit]:hover { .tgl-skewed+.tgl-btn { overflow: hidden; + -webkit-backface-visibility: hidden; backface-visibility: hidden; + -webkit-transition: all .25s ease; + -o-transition: all .25s ease; transition: all .25s ease; background: rgb(255, 255, 255); } .tgl-skewed+.tgl-btn:after, .tgl-skewed+.tgl-btn:before { display: inline-block; + -webkit-transition: all .25s ease; + -o-transition: all .25s ease; transition: all .25s ease; width: 100%; text-align: center; @@ -387,8 +464,8 @@ input[type=submit]:hover { .tgl-skewed:checked+.tgl-btn:active:after { left: 10%; } -/*toggle end here*/ +/*toggle end here*/ .foot { font-size: 75%; padding-left: 15%; @@ -400,7 +477,9 @@ input[type=submit]:hover { padding: 2% 5% 2% 5%; width: 75%; margin: 0% 0% 2% 10%; + -webkit-box-shadow: var(--shadow16); box-shadow: var(--shadow16); + -webkit-backdrop-filter: var(--mainBlur); backdrop-filter: var(--mainBlur); } @@ -410,6 +489,8 @@ input[type=submit]:hover { width: 100%; max-height: 0px; z-index: 1; + -webkit-transition: max-height 0.25s cubic-bezier(0.25, 0.1, 0.1, 1); + -o-transition: max-height 0.25s cubic-bezier(0.25, 0.1, 0.1, 1); transition: max-height 0.25s cubic-bezier(0.25, 0.1, 0.1, 1); } @@ -436,14 +517,17 @@ input[type=submit]:hover { .closebtn { margin: 6% 10% 0 -7.5%; } + .tgl+.tgl-btn { width: 4.1em; height: 2.15em; } + .tgl-skewed+.tgl-btn:after, .tgl-skewed+.tgl-btn:before { line-height: 2.15em; } - .lower{ - bottom: 18vw; + + .lower { + bottom: 8vw; } } diff --git a/cssOrig.css b/cssOrig.css new file mode 100644 index 0000000..28900cd --- /dev/null +++ b/cssOrig.css @@ -0,0 +1,449 @@ +:root { + --mainText: rgb(0, 0, 0); + --mainIMG: rgba(255, 255, 255, 0.4); + --textInvert: rgb(255, 255, 255); + --accentBlue: rgb(0, 148, 255); + --mainBlur: blur(15px); + --shadow4: 0 1.6px 3.6px 0 rgba(0, 0, 0, .132), 0 0.3px 0.9px 0 rgba(0, 0, 0, .108); + /*Cards, Grid item thumbnails*/ + --shadow8: 0 3.2px 7.2px 0 rgba(0, 0, 0, .132), 0 0.6px 1.8px 0 rgba(0, 0, 0, .108); + /*Command bars, Command dropdowns, Context menus*/ + --shadow16: 0 6.4px 14.4px 0 rgba(0, 0, 0, .132), 0 1.2px 3.6px 0 rgba(0, 0, 0, .108); + /*Main dropdown, Hover cards, Tooltips*/ + --shadow64: 0 25.6px 57.6px 0 rgba(0, 0, 0, .22), 0 4.8px 14.4px 0 rgba(0, 0, 0, .18); + /* Panels, Pop up dialogs*/ + + --Tshadow4: 0 1.6px 3.6px rgba(0, 0, 0, .132), 0 0.3px 0.9px rgba(0, 0, 0, .108); + /*Cards, Grid item thumbnails*/ + --Tshadow8: 0 3.2px 7.2px rgba(0, 0, 0, .132), 0 0.6px 1.8px rgba(0, 0, 0, .108); + /*Command bars, Command dropdowns, Context menus*/ + --Tshadow16: 0 6.4px 14.4px rgba(0, 0, 0, .132), 0 1.2px 3.6px rgba(0, 0, 0, .108); + /*Main dropdown, Hover cards, Tooltips*/ + --Tshadow64: 0 25.6px 57.6px rgba(0, 0, 0, .22), 0 4.8px 14.4px rgba(0, 0, 0, .18); + /* Panels, Pop up dialogs*/ +} + +html { + font-family: 'Lato', sans-serif; + background: linear-gradient(-45deg, rgb(238, 119, 82), rgb(231, 60, 126), rgb(35, 166, 213), rgb(35, 213, 171)); + background-size: 400% 400%; + animation: Gradient 15s ease infinite; + margin: 0; + width: 100%; + height: 100vh; +} + +@keyframes Gradient { + 0% { + background-position: 0% 50% + } + + 50% { + background-position: 100% 50% + } + + 100% { + background-position: 0% 50% + } +} + +.sidenav { + height: 100vh; + width: 22vw; + position: fixed; + z-index: 2; + top: 0; + left: 0; + background-color: rgba(255, 255, 255, 0.1); + overflow-x: hidden; + transition: width 0.25s cubic-bezier(0.25, 0.1, 0.1, 1); + padding-top: 4%; + backdrop-filter: var(--mainBlur); +} + +.mouseout { + height: 100vh; + width: 5vw; + position: fixed; + z-index: 3; + top: 0; + left: 22vw; + background-color: var(--mainIMG); + overflow-x: hidden; + transition: left 0.25s cubic-bezier(0.25, 0.1, 0.1, 1), box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.1, 1); + box-shadow: 0 6.4px 14.4px 0 rgba(0, 0, 0, .132), 0 1.2px 3.6px 0 rgba(0, 0, 0, .108), 50vw 0px 0px 50vw rgba(0, 0, 0, 0); + backdrop-filter: blur(20px); +} + +.sidenav a { + /*menu pane links, can have gaps in text with alt 0160*/ + z-index: 2; + padding: 0.8vw 0vw 1.2vw 25%; + text-decoration: none; + font-size: 2.8vw; + color: rgb(255, 255, 255); + display: block; + text-shadow: var(--Tshadow4); +} + +.sidenav a.active, .sidenav a:hover { + color: rgb(0, 0, 0); +} + +.title { + font-size: 300%; + color: rgb(255, 255, 255); + text-shadow: var(--Tshadow4); + margin: 1% 0% 1.5% 11%; +} + +.bodyText { + background: var(--mainIMG); + padding: 2% 5% 2% 5%; + width: 75%; + margin: 0% 0% 2% 10%; + box-shadow: var(--shadow16); + backdrop-filter: var(--mainBlur); +} + +.TextImg { + width: 45%; + margin: 0% 5% 2% 0%; + float: right; +} + +.bodyImg { + background: var(--mainIMG); + width: 28%; + margin: 0% 0% 2% 10%; + box-shadow: var(--shadow16); + backdrop-filter: var(--mainBlur); +} + +p { + color: var(--mainText); + font-size: 125%; +} + +.hamburger { + /*hamburger menu*/ + padding: 14% 0 0 19%; + display: inline-block; + margin: 0; + overflow: visible; +} + +.hamburger-box { + /*container*/ + width: 3vw; + height: 3vw; + display: inline-block; + position: relative; +} + +.hamburger-inner { + /*center bar*/ + display: block; + top: 50%; +} + +.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { + /*bar style*/ + width: 3vw; + height: 0.3vw; + background-color: rgb(255, 255, 255); + position: absolute; + transition: transform 0.15s ease; + box-shadow: var(--shadow4); +} + +.hamburger-inner::before { + /*extra bar*/ + top: -1vw; + content: ""; + display: block; +} + +.hamburger-inner::after { + /*extra bar*/ + bottom: -1vw; + content: ""; + display: block; +} + +.hamburger--arrowalt .hamburger-inner::before { + /*transition closed*/ + transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); +} + +.hamburger--arrowalt .hamburger-inner::after { + /*transition closed*/ + transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); +} + +.hamburger--arrowalt.is-active .hamburger-inner::before { + /*transition open*/ + top: 0; + transform: translate3d(-36%, -220%, 0) rotate(-45deg) scale(0.7, 1); + transition: top 0.15s ease, transform 0.07s 0.07s ease-in-out; +} + +.hamburger--arrowalt.is-active .hamburger-inner::after { + /*transition open*/ + bottom: 0; + transform: translate3d(-36%, 208%, 0) rotate(45deg) scale(0.7, 1); + transition: bottom 0.15s ease, transform 0.07s 0.07s ease-in-out; +} + +.hamburger.is-active { + padding-left: 25%; + transition: padding-left 0.15s ease; +} + +.lower { + /*link at bottom of nav menu*/ + position: absolute; + bottom: 6vw; +} + +.banner { + /*banner prompt*/ + top: 0; + left: 0; + position: fixed; + padding: 0 20px 0 7.5vw; + background-color: var(--accentBlue); + color: rgb(255, 255, 255); + width: 100vw; + height: 0; + box-shadow: var(--shadow64); + transition: padding 0.25s cubic-bezier(0.25, 0.1, 0.1, 1); + overflow: hidden; +} + +.closebtn { + /*banner prompt close button*/ + margin: 0 10% 0 -7.5%; + color: rgb(255, 255, 255); + font-weight: bold; + float: right; + cursor: pointer; + transition: color 0.15s ease; +} + +.closebtn:hover { + color: var(--mainText); +} + +label { + /*input label*/ + color: var(--mainText); +} + +input[type=text], +select { + /*input box*/ + color: var(--mainText); + width: 100%; + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + box-sizing: border-box; + outline: none; + border: none; + border-bottom: 0px solid var(--accentBlue); + border-top: 0px solid var(--accentBlue); + transition: border-bottom 0.25s cubic-bezier(0.25, 0.1, 0.1, 1), border-top 0.25s cubic-bezier(0.25, 0.1, 0.1, 1); + box-shadow: var(--shadow4); + background-color: var(--textInvert); +} + +input[type=text]:focus, +select:focus { + /*input border when focused*/ + border-bottom: 2px solid var(--accentBlue); + border-top: 2px solid var(--accentBlue); +} + +input[type=submit] { + /*submit button*/ + width: 100%; + background-color: var(--accentBlue); + color: var(--textInvert); + padding: 14px 20px; + margin: 3% 0 0 0; + border: none; + cursor: pointer; + box-shadow: var(--shadow8); +} + +input[type=submit]:hover { + background-color: rgb(65, 175, 255); +} + +/*toggle start here*/ +.tgl { + display: none; +} + +.tgl, .tgl:after, .tgl:before, +.tgl *, +.tgl *:after, +.tgl *:before, +.tgl+.tgl-btn { + box-sizing: border-box; + box-shadow: var(--shadow4); +} + +.tgl::selection, .tgl:after::selection, .tgl:before::selection, +.tgl *::selection, +.tgl *:after::selection, +.tgl *:before::selection, +.tgl+.tgl-btn::selection { + background: none; +} + +.tgl+.tgl-btn { + outline: 0; + display: block; + width: 5em; + height: 2.5em; + position: relative; + cursor: pointer; + user-select: none; + float: right; +} + +.tgl+.tgl-btn:after, .tgl+.tgl-btn:before { + position: relative; + display: block; + content: ""; + width: 50%; + height: 100%; + text-shadow: var(--Tshadow4); +} + +.tgl+.tgl-btn:after { + left: 0; +} + +.tgl+.tgl-btn:before { + display: none; +} + +.tgl:checked+.tgl-btn:after { + left: 50%; +} + +.tgl-skewed+.tgl-btn { + overflow: hidden; + backface-visibility: hidden; + transition: all .25s ease; + background: rgb(255, 255, 255); +} + +.tgl-skewed+.tgl-btn:after, .tgl-skewed+.tgl-btn:before { + display: inline-block; + transition: all .25s ease; + width: 100%; + text-align: center; + position: absolute; + line-height: 2.5em; + font-weight: bold; + color: var(--accentBlue); +} + +.tgl-skewed+.tgl-btn:after { + left: 100%; + content: attr(data-tg-on); + color: rgb(255, 255, 255); +} + +.tgl-skewed+.tgl-btn:before { + left: 0; + content: attr(data-tg-off); +} + +.tgl-skewed+.tgl-btn:active { + background: rgb(255, 255, 255); +} + +.tgl-skewed+.tgl-btn:active:before { + left: -10%; +} + +.tgl-skewed:checked+.tgl-btn { + background: var(--accentBlue); +} + +.tgl-skewed:checked+.tgl-btn:before { + left: -100%; +} + +.tgl-skewed:checked+.tgl-btn:after { + left: 0; +} + +.tgl-skewed:checked+.tgl-btn:active:after { + left: 10%; +} +/*toggle end here*/ + +.foot { + font-size: 75%; + padding-left: 15%; +} + +.dropbtn { + /*dropdown hover*/ + background: var(--mainIMG); + padding: 2% 5% 2% 5%; + width: 75%; + margin: 0% 0% 2% 10%; + box-shadow: var(--shadow16); + backdrop-filter: var(--mainBlur); +} + +.dropdown-content { + border-top: 2px solid var(--accentBlue); + overflow: hidden; + width: 100%; + max-height: 0px; + z-index: 1; + transition: max-height 0.25s cubic-bezier(0.25, 0.1, 0.1, 1); +} + +.dropdown-content a { + display: block; +} + +@media (orientation:portrait) { + .TextImg { + width: 75%; + float: none; + margin: 0% 0% 4% 10%; + } + + .bodyImg { + width: 85%; + margin: 0% 0% 4% 10%; + } + + .bodyText { + margin: 0% 0% 4% 10%; + } + + .closebtn { + margin: 6% 10% 0 -7.5%; + } + .tgl+.tgl-btn { + width: 4.1em; + height: 2.15em; + } + .tgl-skewed+.tgl-btn:after, .tgl-skewed+.tgl-btn:before { + line-height: 2.15em; + } + .lower{ + bottom: 8vw; + } +} diff --git a/service-worker.js b/service-worker.js index 1731e41..1473b5e 100644 --- a/service-worker.js +++ b/service-worker.js @@ -1,2 +1,2 @@ -if(!self.define){const e=async e=>{if("require"!==e&&(e+=".js"),!c[e]&&(await new Promise(async i=>{if("document"in self){const c=document.createElement("script");c.src=e,document.head.appendChild(c),c.onload=i}else importScripts(e),i()}),!c[e]))throw new Error(`Module ${e} didn’t register its module`);return c[e]},i=async(i,c)=>{const r=await Promise.all(i.map(e));c(1===r.length?r[0]:r)};i.toUrl=e=>`./${e}`;const c={require:Promise.resolve(i)};self.define=(i,r,s)=>{c[i]||(c[i]=new Promise(async c=>{let a={};const o={uri:location.origin+i.slice(1)},n=await Promise.all(r.map(i=>"exports"===i?a:"module"===i?o:e(i))),d=s(...n);a.default||(a.default=d),c(a)}))}}define("./service-worker.js",["./workbox-2aa9f459"],(function(e){"use strict";self.addEventListener("message",e=>{e.data&&"SKIP_WAITING"===e.data.type&&self.skipWaiting()}),e.precacheAndRoute([{url:"404.html",revision:"3ec9027c4ac61fbae49cc2a3ba394f0c"},{url:"browserconfig.xml",revision:"50a9ff381a1e81db6661287e7c50e78d"},{url:"css.css",revision:"5fd1a10d3cdf74eeaa09ce1b164aed40"},{url:"img/android-chrome-192x192.png",revision:"588ffbcf644e29c1a1ea38a20a89f519"},{url:"img/android-chrome-512x512.png",revision:"d44cc477c19fe99280010735eda66b6a"},{url:"img/apple-touch-icon.png",revision:"ffb54c178723fe071726e5a884b3bcef"},{url:"img/favicon-16x16.png",revision:"8e7f45a80eeb52e847fd71205e92e360"},{url:"img/favicon.ico",revision:"6f4c928202529be2d9fd341358f0b6bb"},{url:"img/favicon.png",revision:"0cff3693d19344342062a4162c276467"},{url:"img/logo.png",revision:"9b611ddf812a2d610c2085fa084d552a"},{url:"img/mstile-150x150.png",revision:"85562b286fb13d2b618160925032bdbe"},{url:"index.html",revision:"da26d1e49bff023f238c7496a47f04ba"},{url:"js/script.js",revision:"dc5998e399bea7290cf81c8384a34b3e"},{url:"page1.html",revision:"50bc8aec5b4efe8a064ac40a1607e2ad"},{url:"page2.html",revision:"2d7b5e3bc50fcf41e273b6e7fdc8e712"},{url:"README.md",revision:"a8d438f48cc4ed769c785978690f5056"},{url:"settings.html",revision:"daa7ad10d1d5678b6979c7d507030c6b"},{url:"signup.html",revision:"f39757926bfaaa02c5a8efcdc11667bd"},{url:"site.webmanifest",revision:"49ded6e6d329dd25eea73db6a9204ba2"},{url:"sounds/close.mp3",revision:"33616695a0de16662e4fb6194cc985e2"},{url:"sounds/hover.mp3",revision:"a7e508fdf6acc76cfbcc345039ede9b5"},{url:"sounds/open.mp3",revision:"b1e7c97d7bc89ba3f0619891feb563c0"}],{})})); +if(!self.define){const e=async e=>{if("require"!==e&&(e+=".js"),!c[e]&&(await new Promise(async i=>{if("document"in self){const c=document.createElement("script");c.src=e,document.head.appendChild(c),c.onload=i}else importScripts(e),i()}),!c[e]))throw new Error(`Module ${e} didn’t register its module`);return c[e]},i=async(i,c)=>{const r=await Promise.all(i.map(e));c(1===r.length?r[0]:r)};i.toUrl=e=>`./${e}`;const c={require:Promise.resolve(i)};self.define=(i,r,s)=>{c[i]||(c[i]=new Promise(async c=>{let o={};const a={uri:location.origin+i.slice(1)},n=await Promise.all(r.map(i=>"exports"===i?o:"module"===i?a:e(i))),f=s(...n);o.default||(o.default=f),c(o)}))}}define("./service-worker.js",["./workbox-2aa9f459"],(function(e){"use strict";self.addEventListener("message",e=>{e.data&&"SKIP_WAITING"===e.data.type&&self.skipWaiting()}),e.precacheAndRoute([{url:"404.html",revision:"3ec9027c4ac61fbae49cc2a3ba394f0c"},{url:"browserconfig.xml",revision:"50a9ff381a1e81db6661287e7c50e78d"},{url:"css.css",revision:"9bb52bc592ae1af3060af4c9e9b4780e"},{url:"cssOrig.css",revision:"c3dd1f9b3bfc733288d3c407bc90ce6c"},{url:"img/android-chrome-192x192.png",revision:"588ffbcf644e29c1a1ea38a20a89f519"},{url:"img/android-chrome-512x512.png",revision:"d44cc477c19fe99280010735eda66b6a"},{url:"img/apple-touch-icon.png",revision:"ffb54c178723fe071726e5a884b3bcef"},{url:"img/favicon-16x16.png",revision:"8e7f45a80eeb52e847fd71205e92e360"},{url:"img/favicon.ico",revision:"6f4c928202529be2d9fd341358f0b6bb"},{url:"img/favicon.png",revision:"0cff3693d19344342062a4162c276467"},{url:"img/logo.png",revision:"9b611ddf812a2d610c2085fa084d552a"},{url:"img/mstile-150x150.png",revision:"85562b286fb13d2b618160925032bdbe"},{url:"img/star.jpg",revision:"e69eb70b9be4b68d00243272d35ca449"},{url:"index.html",revision:"da26d1e49bff023f238c7496a47f04ba"},{url:"js/script.js",revision:"dc5998e399bea7290cf81c8384a34b3e"},{url:"page1.html",revision:"50bc8aec5b4efe8a064ac40a1607e2ad"},{url:"page2.html",revision:"2d7b5e3bc50fcf41e273b6e7fdc8e712"},{url:"README.md",revision:"a8d438f48cc4ed769c785978690f5056"},{url:"settings.html",revision:"5500d776c9f0fcfcb487e82f3b13b7e9"},{url:"signup.html",revision:"f39757926bfaaa02c5a8efcdc11667bd"},{url:"site.webmanifest",revision:"49ded6e6d329dd25eea73db6a9204ba2"},{url:"sounds/close.mp3",revision:"33616695a0de16662e4fb6194cc985e2"},{url:"sounds/hover.mp3",revision:"a7e508fdf6acc76cfbcc345039ede9b5"},{url:"sounds/open.mp3",revision:"b1e7c97d7bc89ba3f0619891feb563c0"}],{})})); //# sourceMappingURL=service-worker.js.map diff --git a/service-worker.js.map b/service-worker.js.map index 9b85504..a050b41 100644 --- a/service-worker.js.map +++ b/service-worker.js.map @@ -1 +1 @@ -{"version":3,"file":"service-worker.js","sources":["../../AppData/Local/Temp/004a1774ea8ca76276e1a6cddff81cb6/service-worker.js"],"sourcesContent":["import {precacheAndRoute as workbox_precaching_precacheAndRoute} from 'C:/Users/Andrew/AppData/Roaming/npm/node_modules/workbox-cli/node_modules/workbox-precaching/precacheAndRoute.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nself.addEventListener('message', (event) => {\n if (event.data && event.data.type === 'SKIP_WAITING') {\n self.skipWaiting();\n }\n});\n\n\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n {\n \"url\": \"404.html\",\n \"revision\": \"3ec9027c4ac61fbae49cc2a3ba394f0c\"\n },\n {\n \"url\": \"browserconfig.xml\",\n \"revision\": \"50a9ff381a1e81db6661287e7c50e78d\"\n },\n {\n \"url\": \"css.css\",\n \"revision\": \"5fd1a10d3cdf74eeaa09ce1b164aed40\"\n },\n {\n \"url\": \"img/android-chrome-192x192.png\",\n \"revision\": \"588ffbcf644e29c1a1ea38a20a89f519\"\n },\n {\n \"url\": \"img/android-chrome-512x512.png\",\n \"revision\": \"d44cc477c19fe99280010735eda66b6a\"\n },\n {\n \"url\": \"img/apple-touch-icon.png\",\n \"revision\": \"ffb54c178723fe071726e5a884b3bcef\"\n },\n {\n \"url\": \"img/favicon-16x16.png\",\n \"revision\": \"8e7f45a80eeb52e847fd71205e92e360\"\n },\n {\n \"url\": \"img/favicon.ico\",\n \"revision\": \"6f4c928202529be2d9fd341358f0b6bb\"\n },\n {\n \"url\": \"img/favicon.png\",\n \"revision\": \"0cff3693d19344342062a4162c276467\"\n },\n {\n \"url\": \"img/logo.png\",\n \"revision\": \"9b611ddf812a2d610c2085fa084d552a\"\n },\n {\n \"url\": \"img/mstile-150x150.png\",\n \"revision\": \"85562b286fb13d2b618160925032bdbe\"\n },\n {\n \"url\": \"index.html\",\n \"revision\": \"da26d1e49bff023f238c7496a47f04ba\"\n },\n {\n \"url\": \"js/script.js\",\n \"revision\": \"dc5998e399bea7290cf81c8384a34b3e\"\n },\n {\n \"url\": \"page1.html\",\n \"revision\": \"50bc8aec5b4efe8a064ac40a1607e2ad\"\n },\n {\n \"url\": \"page2.html\",\n \"revision\": \"2d7b5e3bc50fcf41e273b6e7fdc8e712\"\n },\n {\n \"url\": \"README.md\",\n \"revision\": \"a8d438f48cc4ed769c785978690f5056\"\n },\n {\n \"url\": \"settings.html\",\n \"revision\": \"daa7ad10d1d5678b6979c7d507030c6b\"\n },\n {\n \"url\": \"signup.html\",\n \"revision\": \"f39757926bfaaa02c5a8efcdc11667bd\"\n },\n {\n \"url\": \"site.webmanifest\",\n \"revision\": \"49ded6e6d329dd25eea73db6a9204ba2\"\n },\n {\n \"url\": \"sounds/close.mp3\",\n \"revision\": \"33616695a0de16662e4fb6194cc985e2\"\n },\n {\n \"url\": \"sounds/hover.mp3\",\n \"revision\": \"a7e508fdf6acc76cfbcc345039ede9b5\"\n },\n {\n \"url\": \"sounds/open.mp3\",\n \"revision\": \"b1e7c97d7bc89ba3f0619891feb563c0\"\n }\n], {});\n\n\n\n\n\n\n\n\n"],"names":["self","addEventListener","event","data","type","skipWaiting"],"mappings":"wuBAmBAA,KAAKC,iBAAiB,UAAYC,IAC5BA,EAAMC,MAA4B,iBAApBD,EAAMC,KAAKC,MAC3BJ,KAAKK,mCAY2B,CAClC,KACS,oBACK,oCAEd,KACS,6BACK,oCAEd,KACS,mBACK,oCAEd,KACS,0CACK,oCAEd,KACS,0CACK,oCAEd,KACS,oCACK,oCAEd,KACS,iCACK,oCAEd,KACS,2BACK,oCAEd,KACS,2BACK,oCAEd,KACS,wBACK,oCAEd,KACS,kCACK,oCAEd,KACS,sBACK,oCAEd,KACS,wBACK,oCAEd,KACS,sBACK,oCAEd,KACS,sBACK,oCAEd,KACS,qBACK,oCAEd,KACS,yBACK,oCAEd,KACS,uBACK,oCAEd,KACS,4BACK,oCAEd,KACS,4BACK,oCAEd,KACS,4BACK,oCAEd,KACS,2BACK,qCAEb"} \ No newline at end of file +{"version":3,"file":"service-worker.js","sources":["../../AppData/Local/Temp/6d88d589fb8868df4611799c4ca557ef/service-worker.js"],"sourcesContent":["import {precacheAndRoute as workbox_precaching_precacheAndRoute} from 'C:/Users/Andrew/AppData/Roaming/npm/node_modules/workbox-cli/node_modules/workbox-precaching/precacheAndRoute.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\n\n\n\n\n\n\nself.addEventListener('message', (event) => {\n if (event.data && event.data.type === 'SKIP_WAITING') {\n self.skipWaiting();\n }\n});\n\n\n\n\n/**\n * The precacheAndRoute() method efficiently caches and responds to\n * requests for URLs in the manifest.\n * See https://goo.gl/S9QRab\n */\nworkbox_precaching_precacheAndRoute([\n {\n \"url\": \"404.html\",\n \"revision\": \"3ec9027c4ac61fbae49cc2a3ba394f0c\"\n },\n {\n \"url\": \"browserconfig.xml\",\n \"revision\": \"50a9ff381a1e81db6661287e7c50e78d\"\n },\n {\n \"url\": \"css.css\",\n \"revision\": \"9bb52bc592ae1af3060af4c9e9b4780e\"\n },\n {\n \"url\": \"cssOrig.css\",\n \"revision\": \"c3dd1f9b3bfc733288d3c407bc90ce6c\"\n },\n {\n \"url\": \"img/android-chrome-192x192.png\",\n \"revision\": \"588ffbcf644e29c1a1ea38a20a89f519\"\n },\n {\n \"url\": \"img/android-chrome-512x512.png\",\n \"revision\": \"d44cc477c19fe99280010735eda66b6a\"\n },\n {\n \"url\": \"img/apple-touch-icon.png\",\n \"revision\": \"ffb54c178723fe071726e5a884b3bcef\"\n },\n {\n \"url\": \"img/favicon-16x16.png\",\n \"revision\": \"8e7f45a80eeb52e847fd71205e92e360\"\n },\n {\n \"url\": \"img/favicon.ico\",\n \"revision\": \"6f4c928202529be2d9fd341358f0b6bb\"\n },\n {\n \"url\": \"img/favicon.png\",\n \"revision\": \"0cff3693d19344342062a4162c276467\"\n },\n {\n \"url\": \"img/logo.png\",\n \"revision\": \"9b611ddf812a2d610c2085fa084d552a\"\n },\n {\n \"url\": \"img/mstile-150x150.png\",\n \"revision\": \"85562b286fb13d2b618160925032bdbe\"\n },\n {\n \"url\": \"img/star.jpg\",\n \"revision\": \"e69eb70b9be4b68d00243272d35ca449\"\n },\n {\n \"url\": \"index.html\",\n \"revision\": \"da26d1e49bff023f238c7496a47f04ba\"\n },\n {\n \"url\": \"js/script.js\",\n \"revision\": \"dc5998e399bea7290cf81c8384a34b3e\"\n },\n {\n \"url\": \"page1.html\",\n \"revision\": \"50bc8aec5b4efe8a064ac40a1607e2ad\"\n },\n {\n \"url\": \"page2.html\",\n \"revision\": \"2d7b5e3bc50fcf41e273b6e7fdc8e712\"\n },\n {\n \"url\": \"README.md\",\n \"revision\": \"a8d438f48cc4ed769c785978690f5056\"\n },\n {\n \"url\": \"settings.html\",\n \"revision\": \"5500d776c9f0fcfcb487e82f3b13b7e9\"\n },\n {\n \"url\": \"signup.html\",\n \"revision\": \"f39757926bfaaa02c5a8efcdc11667bd\"\n },\n {\n \"url\": \"site.webmanifest\",\n \"revision\": \"49ded6e6d329dd25eea73db6a9204ba2\"\n },\n {\n \"url\": \"sounds/close.mp3\",\n \"revision\": \"33616695a0de16662e4fb6194cc985e2\"\n },\n {\n \"url\": \"sounds/hover.mp3\",\n \"revision\": \"a7e508fdf6acc76cfbcc345039ede9b5\"\n },\n {\n \"url\": \"sounds/open.mp3\",\n \"revision\": \"b1e7c97d7bc89ba3f0619891feb563c0\"\n }\n], {});\n\n\n\n\n\n\n\n\n"],"names":["self","addEventListener","event","data","type","skipWaiting"],"mappings":"wuBAmBAA,KAAKC,iBAAiB,UAAYC,IAC5BA,EAAMC,MAA4B,iBAApBD,EAAMC,KAAKC,MAC3BJ,KAAKK,mCAY2B,CAClC,KACS,oBACK,oCAEd,KACS,6BACK,oCAEd,KACS,mBACK,oCAEd,KACS,uBACK,oCAEd,KACS,0CACK,oCAEd,KACS,0CACK,oCAEd,KACS,oCACK,oCAEd,KACS,iCACK,oCAEd,KACS,2BACK,oCAEd,KACS,2BACK,oCAEd,KACS,wBACK,oCAEd,KACS,kCACK,oCAEd,KACS,wBACK,oCAEd,KACS,sBACK,oCAEd,KACS,wBACK,oCAEd,KACS,sBACK,oCAEd,KACS,sBACK,oCAEd,KACS,qBACK,oCAEd,KACS,yBACK,oCAEd,KACS,uBACK,oCAEd,KACS,4BACK,oCAEd,KACS,4BACK,oCAEd,KACS,4BACK,oCAEd,KACS,2BACK,qCAEb"} \ No newline at end of file diff --git a/settings.html b/settings.html index d41435e..0e42c84 100644 --- a/settings.html +++ b/settings.html @@ -146,7 +146,7 @@

Settings


Author: Andrew Blake


-

Version 4.1.1

+

Version 4.2.0