diff --git a/background/abstract.jpg b/background/abstract.jpg new file mode 100644 index 00000000..6a441d30 Binary files /dev/null and b/background/abstract.jpg differ diff --git a/background/gray-steps.jpg b/background/gray-steps.jpg new file mode 100644 index 00000000..91529fb5 Binary files /dev/null and b/background/gray-steps.jpg differ diff --git a/background/tallneck.png b/background/tallneck.png new file mode 100755 index 00000000..bcf7d8ef Binary files /dev/null and b/background/tallneck.png differ diff --git a/css/background.css b/css/background.css new file mode 100644 index 00000000..41c04928 --- /dev/null +++ b/css/background.css @@ -0,0 +1,36 @@ +.background { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + pointer-events: none; + z-index: var(--z-index-background); +} + +.background-image { + background-image: var(--background-image); + background-attachment: fixed; + background-size: cover; + background-position: center; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + display: block; + opacity: var(--background-opacity); + /* filter: blur(var(--background-blur)) grayscale(var(--background-grayscale)); */ +} + +.background-accent { + background-color: rgba(var(--accent), var(--background-accent-opacity)); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + display: block; +} diff --git a/css/base.css b/css/base.css index f69ca95d..ff33735f 100644 --- a/css/base.css +++ b/css/base.css @@ -1,39 +1,50 @@ :root { - --black: #222222; - --white: #ffffff; - --gray-01: #262831; - --gray-02: #2f333e; - --gray-03: #393e4b; - --gray-04: #434958; - --gray-05: #4d5465; - --gray-06: #575f72; - --gray-07: #616a7f; - --gray-08: #6b758c; - --gray-09: #758099; - --gray-10: #7f8ba6; - --gray-11: #8997b4; - --gray-12: #95a2bb; - --gray-13: #a2adc3; - --gray-14: #aeb8cb; - --gray-15: #bbc3d3; - --gray-16: #c7ceda; - --gray-17: #d4d9e2; - --gray-18: #e0e4ea; - --gray-19: #edeff2; - --gray-20: #fafafa; - --root-font-size: 14px; - --radius: 2px; + --black: 0, 0, 0; + --white: 255, 255, 255; + --gray-01: 38, 40, 49; + --gray-02: 47, 51, 62; + --gray-03: 57, 62, 75; + --gray-04: 67, 73, 88; + --gray-05: 77, 84, 101; + --gray-06: 87, 95, 114; + --gray-07: 97, 106, 127; + --gray-08: 107, 117, 140; + --gray-09: 117, 128, 153; + --gray-10: 127, 139, 166; + --gray-11: 137, 151, 180; + --gray-12: 149, 162, 187; + --gray-13: 162, 173, 195; + --gray-14: 174, 184, 203; + --gray-15: 187, 195, 211; + --gray-16: 199, 206, 218; + --gray-17: 212, 217, 226; + --gray-18: 224, 228, 234; + --gray-19: 237, 239, 242; + --gray-20: 250, 250, 250; --accent: 0, 255, 0; - --line-width: 3px; - --background: var(--gray-01); + --root-font-size: 14px; + --radius: 0.2em; + --line-width: 0.2em; + --background: rgb(var(--gray-01)); --gutter: 0.5em; --animation-speed-fast: 0.2s; - --animation-speed-medium: 0.3s; - --animation-speed-slow: 0.4s; + --animation-speed-medium: 0.4s; + --animation-speed-slow: 0.6s; --font-regular: "Open Sans Regular", sans-serif; --font-bold: "Open Sans Bold", sans-serif; --font-light: "Open Sans Light", sans-serif; --font-fjalla: "Fjalla One Regular", sans-serif; + --z-index-background: 1000; + --z-index-link: 2000; + --z-index-header: 3000; + --z-index-tip: 4000; + --z-index-shade: 5000; + --z-index-modal: 6000; + --z-index-menu: 7000; + --background-image: none; + --background-opacity: 1; + --background-accent-opacity: 0; + --background-blur: 0; /* breakpoint reference */ /* can not be used in @media as of yet */ --breakpoint-sm: 550px; @@ -41,12 +52,6 @@ --breakpoint-lg: 900px; --breakpoint-xl: 1100px; --breakpoint-xxl: 1600px; - --z-index-link: 1000; - --z-index-header: 2000; - --z-index-tip: 3000; - --z-index-shade: 4000; - --z-index-modal: 5000; - --z-index-menu: 6000; } :root.is-link-block { @@ -73,7 +78,7 @@ ::selection { background-color: rgb(var(--accent)); - color: var(--white); + color: rgb(var(--white)); } html { @@ -82,8 +87,28 @@ html { body { background-color: var(--background); - color: var(--white); + color: rgb(var(--white)); font-size: 1rem; line-height: 1.6; font-family: var(--font-regular); + display: flex; + flex-direction: column; + height: 100vh; +} + +.is-alignment-vertical-top body { + justify-content: flex-start; +} + +.is-alignment-vertical-center body { + justify-content: center; +} + +.is-alignment-vertical-bottom body { + justify-content: flex-end; +} + +.is-link body { + display: inherit; + height: inherit; } diff --git a/css/button.css b/css/button.css index daa1d4e1..7bbf6e25 100644 --- a/css/button.css +++ b/css/button.css @@ -3,10 +3,10 @@ button, input[type="button"], input[type="reset"], input[type="submit"] { - background-color: var(--gray-02); + background-color: rgb(var(--gray-02)); padding: 0.125em 1em; margin: 0 0 1em 0; - color: var(--gray-12); + color: rgb(var(--gray-12)); font-size: 1em; font-family: var(--font-regular); min-height: 2.5em; @@ -39,10 +39,10 @@ input[type="reset"]:hover, input[type="reset"]:focus, input[type="submit"]:hover, input[type="submit"]:focus { - background-color: var(--gray-03); - border-bottom-color: var(--gray-08); - color: var(--white); - outline: 0; + background-color: rgb(var(--gray-03)); + border-bottom-color: rgb(var(--gray-08)); + color: rgb(var(--white)); + outline: none; } button:active, @@ -50,9 +50,9 @@ button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { - background-color: var(--gray-04); + background-color: rgb(var(--gray-04)); border-bottom-color: rgb(var(--accent)); - color: var(--white); + color: rgb(var(--white)); transition: none; } @@ -64,9 +64,9 @@ button[disabled]:focus, .button[disabled]:focus, button[disabled]:active, .button[disabled]:active { - background-color: var(--gray-02); + background-color: rgb(var(--gray-02)); border-color: transparent; - color: var(--gray-04); + color: rgb(var(--gray-04)); cursor: default; } @@ -84,7 +84,7 @@ button [class*=" icon-"], .button.active { border-bottom-color: rgb(var(--accent)); - color: var(--white); + color: rgb(var(--white)); } .button-small { @@ -148,3 +148,31 @@ button [class*=" button-"]:last-child, .button [class*=" button-"]:last-child { margin-right: 0; } + +.button-link { + background-color: transparent; + border: 0; + color: rgb(var(--gray-10)); +} + +.button-link[disabled] { + background-color: transparent; + color: transparent; +} + +.button-link:hover[disabled], +.button-link:focus[disabled] { + background-color: transparent; + color: transparent; +} + +.button-link:hover, +.button-link:focus { + background-color: transparent; + color: rgb(var(--gray-14)); +} + +.button-link:active { + background-color: transparent; + color: rgb(var(--gray-18)); +} diff --git a/css/clock.css b/css/clock.css index 042eda12..08cfa5f3 100644 --- a/css/clock.css +++ b/css/clock.css @@ -4,7 +4,7 @@ border-radius: var(--radius); font-size: 1em; font-family: var(--font-fjalla); - color: var(--white); + color: rgb(var(--white)); width: 100%; min-height: 2.5em; display: flex; @@ -47,17 +47,11 @@ } .clock-hours { - color: var(--white); -} - -.clock-minutes { - color: var(--gray-16); -} - -.clock-seconds { - color: var(--gray-12); + color: rgb(var(--white)); } +.clock-minutes, +.clock-seconds, .clock-meridiem { - color: var(--gray-10); + color: rgb(var(--gray-19)); } diff --git a/css/date.css b/css/date.css index 15be7812..94fcf211 100644 --- a/css/date.css +++ b/css/date.css @@ -4,7 +4,7 @@ border-radius: var(--radius); font-size: 1em; font-family: var(--font-fjalla); - color: var(--white); + color: rgb(var(--white)); width: 100%; min-height: 2.5em; display: flex; @@ -46,18 +46,12 @@ margin-right: 0.125em; } -.date-date { - color: var(--white); -} - .date-day { - color: var(--gray-16); -} - -.date-month { - color: var(--gray-12); + color: rgb(var(--white)); } +.date-date, +.date-month, .date-year { - color: var(--gray-10); + color: rgb(var(--gray-19)); } diff --git a/css/form.css b/css/form.css index ba0fbcc8..00fb28d5 100644 --- a/css/form.css +++ b/css/form.css @@ -4,10 +4,10 @@ input[type="password"], input[type="search"], input[type="tel"], input[type="text"] { - background-color: var(--gray-14); + background-color: rgb(var(--gray-14)); padding: 0 0.5em; margin: 0 0 1em 0; - color: var(--black); + color: rgb(var(--black)); font-size: 1em; font-family: var(--font-regular); line-height: 2.5em; @@ -58,23 +58,32 @@ input[type="text"][disabled]:focus, input[type="text"][disabled]::placeholder, input[type="text"][disabled]:hover::placeholder, input[type="text"][disabled]:focus::placeholder { - background-color: var(--gray-04); - color: var(--gray-08); + background-color: rgb(var(--gray-04)); + color: rgb(var(--gray-08)); border-color: transparent; cursor: default; box-shadow: none; } +input[type="email"][disabled]~.input-helper, +input[type="number"][disabled]~.input-helper, +input[type="password"][disabled]~.input-helper, +input[type="search"][disabled]~.input-helper, +input[type="tel"][disabled]~.input-helper, +input[type="text"][disabled]~.input-helper { + color: rgb(var(--gray-06)); +} + input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover { - background-color: var(--gray-16); - border-color: var(--gray-10); - color: var(--black); - outline: 0; + background-color: rgb(var(--gray-16)); + border-color: rgb(var(--gray-10)); + color: rgb(var(--black)); + outline: none; } input[type="email"]:focus, @@ -83,10 +92,10 @@ input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus { - background-color: var(--white); + background-color: rgb(var(--white)); border-color: transparent; - color: var(--black); - outline: 0; + color: rgb(var(--black)); + outline: none; z-index: 2; box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 var(--line-width) rgb(var(--accent)); } @@ -97,7 +106,7 @@ input[type="password"]::placeholder, input[type="search"]::placeholder, input[type="tel"]::placeholder, input[type="text"]::placeholder { - color: var(--gray-10); + color: rgb(var(--gray-10)); transition: all var(--animation-speed-fast) ease-in-out; } @@ -107,7 +116,7 @@ input[type="password"]:hover::placeholder, input[type="search"]:hover::placeholder, input[type="tel"]:hover::placeholder, input[type="text"]:hover::placeholder { - color: var(--gray-12); + color: rgb(var(--gray-12)); } input[type="email"]:focus::placeholder, @@ -116,19 +125,19 @@ input[type="password"]:focus::placeholder, input[type="search"]:focus::placeholder, input[type="tel"]:focus::placeholder, input[type="text"]:focus::placeholder { - color: var(--gray-14); + color: rgb(var(--gray-14)); } label { padding: 0.5em 0; - color: var(--gray-16); + color: rgb(var(--gray-16)); margin-bottom: 0; font-size: 1em; display: block; } label[disabled] { - color: var(--gray-04); + color: rgb(var(--gray-04)); } input[type="color"] { @@ -144,7 +153,7 @@ input[type="color"] { } input[type="color"]:focus { - outline: 0; + outline: none; } input[type="color"]::-webkit-color-swatch-wrapper { @@ -215,7 +224,7 @@ input[type="radio"] { input[type="checkbox"]+label, input[type="radio"]+label { - color: var(--gray-12); + color: rgb(var(--gray-12)); font-size: 1em; font-family: var(--font-regular); min-height: 2.5em; @@ -243,19 +252,19 @@ input[type="checkbox"]:focus+label, input[type="checkbox"]:hover+label, input[type="radio"]:focus+label, input[type="radio"]:hover+label { - color: var(--white); + color: rgb(var(--white)); } input[type="checkbox"]:active+label, input[type="radio"]:active+label { - color: var(--white); + color: rgb(var(--white)); } input[type="checkbox"]:focus+label .label-icon, input[type="checkbox"]:hover+label .label-icon, input[type="radio"]:focus+label .label-icon, input[type="radio"]:hover+label .label-icon { - color: var(--white); + color: rgb(var(--white)); } input[type="checkbox"]:active+label .label-icon, @@ -266,14 +275,14 @@ input[type="radio"]:active+label .label-icon { input[type="checkbox"]:checked+label, input[type="radio"]:checked+label { - color: var(--gray-16); + color: rgb(var(--gray-16)); } input[type="checkbox"]:not([disabled]):hover:checked+label, input[type="checkbox"]:not([disabled]):focus:checked+label, input[type="radio"]:not([disabled]):hover:checked+label, input[type="radio"]:not([disabled]):focus:checked+label { - color: var(--white); + color: rgb(var(--white)); } input[type="checkbox"]:checked+label .label-icon, @@ -299,10 +308,10 @@ input[type="checkbox"]:hover+.input-label-button, input[type="checkbox"]:focus+.input-label-button, input[type="radio"]:hover+.input-label-button, input[type="radio"]:focus+.input-label-button { - background-color: var(--gray-03); - border-bottom-color: var(--gray-10); - color: var(--white); - outline: 0; + background-color: rgb(var(--gray-03)); + border-bottom-color: rgb(var(--gray-10)); + color: rgb(var(--white)); + outline: none; } input[type="color"]:active+.input-label-button, @@ -320,21 +329,21 @@ input[type="radio"]:checked+.input-label-button { input[type="color"][disabled]+.input-label-button, input[type="checkbox"][disabled]+.input-label-button, input[type="radio"][disabled]+.input-label-button { - background-color: var(--gray-02); + background-color: rgb(var(--gray-02)); border-color: transparent; - color: var(--gray-04); + color: rgb(var(--gray-04)); cursor: default; } input[type="checkbox"][disabled]+label, input[type="radio"][disabled]+label { - color: var(--gray-04); + color: rgb(var(--gray-04)); cursor: default; } input[type="checkbox"][disabled]+label .label-icon, input[type="radio"][disabled]+label .label-icon { - color: var(--gray-04); + color: rgb(var(--gray-04)); cursor: default; } @@ -368,3 +377,189 @@ input[type="radio"]+label .label-icon:before { input[type="radio"]:checked+label .label-icon:before { content: "\e837"; } + +input[type="range"] { + /* background-color: rgb(var(--gray-08)); */ + background-color: transparent; + padding: 0; + margin: 0 0 1em 0; + color: rgb(var(--black)); + font-size: 1em; + font-family: var(--font-regular); + height: 2em; + width: 100%; + border: 0; + border-radius: var(--radius); + cursor: pointer; + position: relative; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-appearance: none; +} + +input[type="range"]:before { + content: ""; + position: absolute; + top: 50%; + left: 0; + background-color: rgb(var(--gray-08)); + height: var(--line-width); + width: 100%; + border: 0; + border-radius: var(--radius); + transform: translate(0, -50%); + transition: all var(--animation-speed-fast) ease-in-out; +} + +input[type="range"]:focus { + outline: none; +} + +input[type="range"]:focus:before { + background-color: rgb(var(--white)); +} + +input[type="range"][disabled] { + cursor: default; +} + +input[type="range"][disabled]:before { + background-color: rgb(var(--gray-04)); + cursor: default; +} + +input[type="range"]::-webkit-slider-runnable-track { + background-color: transparent; + margin: 0 -0.5em; + padding: 0; + border: 0; + -webkit-appearance: none; +} + +input[type="range"]::-webkit-slider-thumb { + background-color: rgb(var(--gray-01)); + color: rgb(var(--gray-12)); + margin: 0; + padding: 0; + border-width: var(--line-width); + border-style: solid; + border-color: rgb(var(--accent)); + border-radius: 100%; + position: relative; + height: 1em; + width: 1em; + cursor: pointer; + box-sizing: border-box; + z-index: 2; + transform: scale(1); + transition: all var(--animation-speed-fast) ease-in-out; + -webkit-appearance: none; +} + +input[type="range"]:active::-webkit-slider-thumb { + transform: scale(0.9); +} + +input[type="range"]:focus::-webkit-slider-thumb { + transform: scale(1.2); + outline: none; +} + +input[type="range"]::-webkit-slider-thumb:focus, +input[type="range"]::-webkit-slider-thumb:hover { + outline: none; + text-decoration: none; +} + +input[type="range"]::-webkit-slider-thumb:active { + outline: none; + text-decoration: none; +} + +input[type="range"][disabled]::-webkit-slider-thumb { + border-color: rgb(var(--gray-08)); + cursor: default; +} + +input[type="range"][disabled]:active::-webkit-slider-thumb, +input[type="range"][disabled]:focus::-webkit-slider-thumb { + transform: scale(1); + outline: none; +} + +input[type="range"]::-moz-range-track { + background-color: rgb(var(--gray-08)); + margin: 0 -0.5em; + padding: 0; + border: 0; + height: var(--line-width); + width: 100%; + border: 0; + border-radius: var(--radius); + transition: all var(--animation-speed-fast) ease-in-out; + -webkit-appearance: none; +} + +input[type="range"]::-moz-range-thumb { + background-color: rgb(var(--gray-01)); + color: rgb(var(--gray-12)); + margin: 0; + padding: 0; + border-width: var(--line-width); + border-style: solid; + border-color: rgb(var(--accent)); + border-radius: 100%; + position: relative; + height: 1em; + width: 1em; + cursor: pointer; + box-sizing: border-box; + z-index: 2; + transform: scale(1); + transition: all var(--animation-speed-fast) ease-in-out; + -webkit-appearance: none; +} + +input[type="range"]:active::-moz-range-thumb { + transform: scale(0.9); +} + +input[type="range"]:focus::-moz-range-thumb { + transform: scale(1.2); + outline: none; +} + +input[type="range"]::-moz-range-thumb:focus, +input[type="range"]::-moz-range-thumb:hover { + outline: none; + text-decoration: none; +} + +input[type="range"]::-moz-range-thumb:active { + outline: none; + text-decoration: none; +} + +input[type="range"]::-moz-range-progress { + background-color: rgb(var(--accent)); + height: calc(var(--line-width) * 1.5); + border-radius: var(--radius); +} + +input[type="range"][disabled]::-moz-range-track { + background-color: rgb(var(--gray-04)); +} + +input[type="range"][disabled]::-moz-range-thumb { + border-color: rgb(var(--gray-08)); + cursor: default; +} + +input[type="range"][disabled]:active::-moz-range-thumb, +input[type="range"][disabled]:focus::-moz-range-thumb { + transform: scale(1); + outline: none; +} + +input[type="range"][disabled]::-moz-range-progress { + background-color: rgb(var(--gray-08)); +} diff --git a/css/header.css b/css/header.css index 0f60d419..73ca3a57 100644 --- a/css/header.css +++ b/css/header.css @@ -1,14 +1,21 @@ .header { - background-color: var(--background); - position: fixed; - top: 0; - left: 0; width: 100%; z-index: var(--z-index-header); } +.is-link .header { + position: fixed; + top: 0; + left: 0; + transition: background-color var(--animation-speed-fast) ease-in-out; +} + +.header-background { + background-color: rgba(var(--gray-01), 0.95); +} + .header-area { - margin: calc(var(--gutter) * 4) calc(var(--gutter) * -1) calc(var(--gutter) * 2) calc(var(--gutter) * -1); + margin: calc(var(--gutter) * 4) calc(var(--gutter) * -1); display: flex; flex-direction: row; flex-wrap: wrap; @@ -24,17 +31,28 @@ flex-wrap: nowrap; justify-content: center; align-items: center; + position: relative; } -.is-alignment-left .header-area { +.header-search-input[type="text"] { + padding-right: 3em; +} + +.header-search-clear { + position: absolute; + top: 0; + right: 0; +} + +.is-alignment-horizontal-left .header-area { justify-content: flex-start; } -.is-alignment-center .header-area { +.is-alignment-horizontal-center .header-area { justify-content: center; } -.is-alignment-right .header-area { +.is-alignment-horizontal-right .header-area { justify-content: flex-end; } diff --git a/css/link.css b/css/link.css index a50d3c0d..b03d6a20 100644 --- a/css/link.css +++ b/css/link.css @@ -3,6 +3,11 @@ width: 100vw; position: relative; z-index: var(--z-index-link); + display: none; +} + +.is-link .link { + display: block; } .is-scroll-past-end .link { @@ -50,7 +55,7 @@ } .link-panel-front { - background-color: var(--gray-02); + background-color: rgb(var(--gray-02)); border-radius: var(--radius); padding: 0 1em; width: 100%; @@ -76,8 +81,8 @@ .link-panel-front:hover, .link-panel-front:focus { - background-color: var(--gray-03); - outline: 0; + background-color: rgb(var(--gray-03)); + outline: none; text-decoration: none; } @@ -85,12 +90,17 @@ .link-item:focus-within .link-panel-front, .link-item:hover .link-panel-front { text-decoration: none; - outline: 0; - background-color: var(--gray-03); - height: calc(100% - var(--url-height)); + outline: none; + background-color: rgb(var(--gray-03)); box-shadow: 0 2px 1em 0 rgba(0, 0, 0, 0.4); } +.is-link-url .link-item:focus .link-panel-front, +.is-link-url .link-item:focus-within .link-panel-front, +.is-link-url .link-item:hover .link-panel-front { + height: calc(100% - var(--url-height)); +} + .link-panel-back { display: flex; flex-direction: column; @@ -134,7 +144,7 @@ border: 0; padding-left: 0; padding-right: 0; - color: var(--gray-02); + color: rgb(var(--gray-02)); flex-grow: 1; flex-basis: 50%; } @@ -149,12 +159,12 @@ .link-control-item:focus, .link-control-item:hover { - color: var(--black); + color: rgb(var(--black)); background-color: rgba(255, 255, 255, 0.2); } .link-control-item:active { - color: var(--black); + color: rgb(var(--black)); background-color: rgba(255, 255, 255, 0.4); transition: none; } @@ -164,11 +174,15 @@ width: 100%; height: 0; overflow: hidden; - display: flex; + display: none; align-items: center; transition: all var(--animation-speed-fast) ease-in-out; } +.is-link-url .link-url { + display: flex; +} + .is-link-block .link-url { justify-content: center; } @@ -186,7 +200,7 @@ .link-url-text { margin: 0; font-size: 0.7em; - color: var(--black); + color: rgb(var(--black)); font-family: var(--font-regular); white-space: nowrap; overflow: hidden; @@ -218,32 +232,37 @@ .link-item:hover .link-letter, .link-item:focus .link-letter { - color: var(--white); + color: rgb(var(--white)); } .link-panel-front:focus .link-letter { - color: var(--white); + color: rgb(var(--white)); } .link-name { margin: 0; font-size: 0.9em; font-family: var(--font-regular); - color: var(--gray-12); + color: rgb(var(--gray-12)); white-space: nowrap; overflow: hidden; max-width: 100%; text-overflow: ellipsis; + display: none; transition: all var(--animation-speed-fast) ease-in-out; } +.is-link-name .link-name { + display: block; +} + .link-item:hover .link-name, .link-item:focus .link-name { - color: var(--white); + color: rgb(var(--white)); } .link-panel-front:focus .link-name { - color: var(--white); + color: rgb(var(--white)); } .link-empty { @@ -253,7 +272,7 @@ } .link-empty-heading { - color: var(--gray-04); + color: rgb(var(--gray-16)); } .is-link-block .link-name { diff --git a/css/menu.css b/css/menu.css index b68040bc..13c3e182 100644 --- a/css/menu.css +++ b/css/menu.css @@ -1,5 +1,5 @@ .menu { - background-color: var(--gray-02); + background-color: rgb(var(--gray-01)); border-radius: var(--radius); position: fixed; top: 1em; @@ -13,7 +13,7 @@ } .menu:focus { - outline: 0; + outline: none; } .is-menu-open .menu { @@ -45,6 +45,7 @@ .menu-nav-item { flex-grow: 1; + flex-basis: 0; } .menu-nav-item:not(:last-child) { @@ -63,7 +64,7 @@ .menu-item { padding-bottom: 2em; - border-bottom: var(--line-width) solid var(--gray-04); + border-bottom: var(--line-width) solid rgb(var(--gray-04)); } .menu-item:last-child, @@ -73,16 +74,18 @@ } .menu-close { + background-color: transparent; margin: 0; - padding-top: 1.25em; - padding-bottom: 1.25em; + padding-top: 0.75em; + padding-bottom: 0.75em; border-radius: 0; } .menu-nav-button { + background-color: transparent; margin: 0; - padding-top: 1.5em; - padding-bottom: 1.5em; + padding-top: 1em; + padding-bottom: 1em; border-radius: 0; } @@ -95,7 +98,13 @@ @media (min-width: 550px) { .menu { - max-height: calc(90vh - 2em); + max-height: inherit; + } + + .menu-content { + padding: 2em; + max-height: 70vh; + overflow-y: scroll; } .menu-nav { @@ -108,6 +117,7 @@ .menu-content-area { grid-template-columns: repeat(2, 1fr); + margin-bottom: 10vh; } } diff --git a/css/modal.css b/css/modal.css index 95e92de5..d7fad4d4 100644 --- a/css/modal.css +++ b/css/modal.css @@ -37,10 +37,8 @@ } .modal-body { - background-color: var(--gray-02); + background-color: rgb(var(--gray-01)); border-radius: var(--radius) var(--radius) 0 0; - border-bottom: 1em solid transparent; - border-bottom-color: var(--gray-02); padding: 2em; max-height: calc(90vh - 3.6666666667em); overflow: scroll; @@ -52,19 +50,19 @@ .modal-heading {} .modal-heading:focus { - outline: 0; + outline: none; } .modal-controls { - background-color: var(--gray-02); - margin: -1em 0 0; + background-color: rgb(var(--gray-01)); position: relative; z-index: 2; border-radius: 0 0 var(--radius) var(--radius); display: flex; } -.modal-controls .button { +.modal-button { + background-color: transparent; border-radius: 0; margin: 0; padding-top: 1.5em; @@ -72,10 +70,10 @@ flex-basis: 50%; } -.modal-controls .button:first-child { +.modal-controls .modal-button:first-child { border-radius: 0 0 0 var(--radius); } -.modal-controls .button:last-child { +.modal-controls .modal-button:last-child { border-radius: 0 0 var(--radius) 0 } diff --git a/css/reset.css b/css/reset.css index 884cb711..06bb2de2 100644 --- a/css/reset.css +++ b/css/reset.css @@ -32,7 +32,7 @@ body { } [tabindex="-1"]:focus { - outline: 0 !important; + outline: none !important; } hr { @@ -141,7 +141,7 @@ a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus { } a:not([href]):not([tabindex]):focus { - outline: 0; + outline: none; } pre, diff --git a/css/shade.css b/css/shade.css index d2098682..e17eaeb2 100644 --- a/css/shade.css +++ b/css/shade.css @@ -1,5 +1,7 @@ .shade { - background-color: rgba(var(--accent), 0.5); + /* background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0, rgba(var(--accent), 0.6) 100%); */ + /* background-color: rgba(var(--accent), 0.5); */ + background-color: rgba(var(--black), 0.5); position: fixed; top: -1em; left: -1em; diff --git a/css/tip.css b/css/tip.css index 65d0696e..7d4ee771 100644 --- a/css/tip.css +++ b/css/tip.css @@ -45,10 +45,10 @@ .tip-message { padding: 0.5em 1em; - background-color: var(--gray-04); + background-color: rgb(var(--gray-04)); border: 0; border-radius: calc(var(--radius) * 2); - color: var(--gray-18); + color: rgb(var(--gray-18)); font-size: 0.8em; font-family: var(--font-regular); text-align: center; @@ -59,7 +59,7 @@ .tip-arrow { border: 0.5em solid transparent; - border-top-color: var(--gray-04); + border-top-color: rgb(var(--gray-04)); position: absolute; width: 0; height: 0; diff --git a/css/typography.css b/css/typography.css index 9eb03b20..60e16e8a 100644 --- a/css/typography.css +++ b/css/typography.css @@ -17,42 +17,42 @@ h1 { h2 { font-size: 1.2em; font-family: var(--font-regular); - color: var(--gray-18); + color: rgb(var(--gray-18)); } h3 { font-size: 1.1em; font-family: var(--font-regular); - color: var(--gray-18); + color: rgb(var(--gray-18)); } h4 { font-size: 1em; font-family: var(--font-regular); - color: var(--gray-18); + color: rgb(var(--gray-18)); } h5 { font-size: 1em; font-family: var(--font-bold); - color: var(--gray-18); + color: rgb(var(--gray-18)); } h6 { font-size: 0.75em; font-family: var(--font-bold); - color: var(--gray-18); + color: rgb(var(--gray-18)); } p { - color: var(--white); - margin: 0; + color: rgb(var(--white)); + margin: 0 0 1em 0; line-height: 1.5; } hr { border: 0; - border-top: 1px solid var(--gray-04); + border-top: 1px solid rgb(var(--gray-04)); border-radius: var(--radius); margin: 1em 0; clear: both; @@ -65,27 +65,27 @@ strong { } a { - color: var(--gray-16); + color: rgb(var(--gray-16)); text-decoration: none; } a:link, a:visited { - color: var(--gray-16); + color: rgb(var(--gray-16)); } a:focus { text-decoration: none; - outline: 0; + outline: none; } a:hover { - color: var(--white); + color: rgb(var(--white)); text-decoration: underline; } a:active { - color: var(--white); + color: rgb(var(--white)); } ol, @@ -127,9 +127,9 @@ table { table thead tr td, table thead tr th { - background-color: var(--gray-03); + background-color: rgb(var(--gray-03)); border: 0; - border-bottom: 1px solid var(--gray-04); + border-bottom: 1px solid rgb(var(--gray-04)); padding: 0.5em; margin: 0; text-align: left; @@ -138,7 +138,7 @@ table thead tr th { } table tr:nth-child(odd) { - background-color: var(--gray-02); + background-color: rgb(var(--gray-02)); } table tbody tr td, diff --git a/css/utilities.css b/css/utilities.css index e2b210d7..861951db 100644 --- a/css/utilities.css +++ b/css/utilities.css @@ -1,12 +1,20 @@ -.u-list-unstyled { +.list-unstyled { padding-left: 0; margin-bottom: 0; } -.u-list-unstyled li { +.list-unstyled li { list-style-type: none; } -.u-list-inline li { +.list-inline li { display: inline-block; } + +.small { + font-size: 0.8em; +} + +.muted { + color: rgb(var(--gray-12)); +} diff --git a/index.html b/index.html index 60293c04..409eccdf 100644 --- a/index.html +++ b/index.html @@ -25,11 +25,16 @@ + +
+
+
+
@@ -42,10 +47,10 @@
- +
-
@@ -89,7 +94,7 @@
-
    +
      • @@ -99,6 +104,9 @@
      • +
    • + +
    @@ -135,14 +143,14 @@

    Date

    -
    - - -
    +
    + + +
    @@ -193,7 +201,7 @@
    - +
    @@ -208,22 +216,53 @@
-

Alignment

+

Horizontal Alignment

- - + +
- - + +
- - + +
+
+

Vertical Alignment

+
+ + +
+
+ + +
+
+ + +
+

Available when Bookmarks are not shown.

+
@@ -334,6 +406,7 @@ + diff --git a/js/background.js b/js/background.js new file mode 100644 index 00000000..eed3aecd --- /dev/null +++ b/js/background.js @@ -0,0 +1,42 @@ +var background = (function() { + + var render = function() { + var html = helper.e("html"); + var background = helper.e(".background"); + var backgroundImage = helper.e(".background-image"); + if (state.get().background.image.active) { + helper.removeClass(background, "is-hidden"); + html.style.setProperty("--background-image", "url(\"" + state.get().background.image.url + "\")"); + html.style.setProperty("--background-blur", state.get().background.image.blur + "px"); + html.style.setProperty("--background-grayscale", state.get().background.image.grayscale); + html.style.setProperty("--background-opacity", state.get().background.image.opacity); + html.style.setProperty("--background-accent-opacity", state.get().background.image.accentOpacity); + if (state.get().background.image.blur > 0 && state.get().background.image.grayscale > 0) { + backgroundImage.style.setProperty("filter", "blur(var(--background-blur)) grayscale(var(--background-grayscale))"); + } else if (state.get().background.image.blur > 0 && state.get().background.image.grayscale == 0) { + backgroundImage.style.setProperty("filter", "blur(var(--background-blur))"); + } else if (state.get().background.image.blur == 0 && state.get().background.image.grayscale > 0) { + backgroundImage.style.setProperty("filter", "grayscale(var(--background-grayscale))"); + }; + } else { + helper.addClass(background, "is-hidden"); + html.style.setProperty("--background-image", "none"); + html.style.setProperty("--background-blur", "none"); + html.style.setProperty("--background-grayscale", "none"); + html.style.setProperty("--background-opacity", "none"); + html.style.setProperty("--background-accent-opacity", "none"); + backgroundImage.style.setProperty("filter", "none"); + }; + }; + + var init = function() { + render(); + }; + + // exposed methods + return { + render: render, + init: init + }; + +})(); diff --git a/js/control.js b/js/control.js index 8fbac4d8..29b15109 100644 --- a/js/control.js +++ b/js/control.js @@ -54,10 +54,14 @@ var control = (function() { helper.e(".control-header-search-engine-custom-url").value = state.get().header.search.engine.custom.url; }; var _alignment = function() { - helper.removeClass(html, "is-alignment-left"); - helper.removeClass(html, "is-alignment-center"); - helper.removeClass(html, "is-alignment-right"); - helper.addClass(html, "is-alignment-" + state.get().layout.alignment); + helper.removeClass(html, "is-alignment-horizontal-left"); + helper.removeClass(html, "is-alignment-horizontal-center"); + helper.removeClass(html, "is-alignment-horizontal-right"); + helper.removeClass(html, "is-alignment-vertical-top"); + helper.removeClass(html, "is-alignment-vertical-center"); + helper.removeClass(html, "is-alignment-vertical-bottom"); + helper.addClass(html, "is-alignment-horizontal-" + state.get().layout.alignment.horizontal); + helper.addClass(html, "is-alignment-vertical-" + state.get().layout.alignment.vertical); }; var _link = function() { var view = { @@ -71,6 +75,21 @@ var control = (function() { } }; view[state.get().link.style](); + if (state.get().link.show.active) { + helper.addClass(html, "is-link"); + } else { + helper.removeClass(html, "is-link"); + }; + if (state.get().link.show.name) { + helper.addClass(html, "is-link-name"); + } else { + helper.removeClass(html, "is-link-name"); + }; + if (state.get().link.show.url) { + helper.addClass(html, "is-link-url"); + } else { + helper.removeClass(html, "is-link-url"); + }; }; var _layout = function() { helper.removeClass(html, "is-layout-fluid"); @@ -203,11 +222,65 @@ var control = (function() { }); }; }; + var _link = function() { + if (state.get().link.show.active) { + helper.e(".control-link-show-name").disabled = false; + helper.e(".control-link-show-url").disabled = false; + helper.e(".control-link-style-block").disabled = false; + helper.e(".control-link-style-list").disabled = false; + helper.e(".control-link-new-tab").disabled = false; + helper.e(".control-link-sort-none").disabled = false; + helper.e(".control-link-sort-name").disabled = false; + helper.e(".control-link-sort-letter").disabled = false; + helper.e(".control-layout-alignment-vertical-top").disabled = true; + helper.e(".control-layout-alignment-vertical-center").disabled = true; + helper.e(".control-layout-alignment-vertical-bottom").disabled = true; + } else { + helper.e(".control-link-show-name").disabled = true; + helper.e(".control-link-show-url").disabled = true; + helper.e(".control-link-style-block").disabled = true; + helper.e(".control-link-style-list").disabled = true; + helper.e(".control-link-new-tab").disabled = true; + helper.e(".control-link-sort-none").disabled = true; + helper.e(".control-link-sort-name").disabled = true; + helper.e(".control-link-sort-letter").disabled = true; + helper.e(".control-layout-alignment-vertical-top").disabled = false; + helper.e(".control-layout-alignment-vertical-center").disabled = false; + helper.e(".control-layout-alignment-vertical-bottom").disabled = false; + }; + }; + var _background = function() { + if (state.get().background.image.active) { + helper.e("[for=control-background-image-url]").removeAttribute("disabled"); + helper.e(".control-background-image-url").disabled = false; + helper.e("[for=control-background-image-opacity]").removeAttribute("disabled"); + helper.e(".control-background-image-opacity").disabled = false; + helper.e("[for=control-background-image-blur]").removeAttribute("disabled"); + helper.e(".control-background-image-blur").disabled = false; + helper.e("[for=control-background-image-grayscale]").removeAttribute("disabled"); + helper.e(".control-background-image-grayscale").disabled = false; + helper.e("[for=control-background-image-accent-opacity]").removeAttribute("disabled"); + helper.e(".control-background-image-accent-opacity").disabled = false; + } else { + helper.e("[for=control-background-image-url]").setAttribute("disabled", ""); + helper.e(".control-background-image-url").disabled = true; + helper.e("[for=control-background-image-opacity]").setAttribute("disabled", ""); + helper.e(".control-background-image-opacity").disabled = true; + helper.e("[for=control-background-image-blur]").setAttribute("disabled", ""); + helper.e(".control-background-image-blur").disabled = true; + helper.e("[for=control-background-image-grayscale]").setAttribute("disabled", ""); + helper.e(".control-background-image-grayscale").disabled = true; + helper.e("[for=control-background-image-accent-opacity]").setAttribute("disabled", ""); + helper.e(".control-background-image-accent-opacity").disabled = true; + }; + }; _edit(); _date(); _clock(); _search(); _theme(); + _link(); + _background(); }; var _bind = function() { @@ -262,6 +335,34 @@ var control = (function() { link.render(); data.save(); }); + helper.e(".control-link-show-active").addEventListener("change", function() { + state.change({ + path: "link.show.active", + value: this.checked + }); + render(); + dependents(); + header.render(); + data.save(); + }); + helper.e(".control-link-show-name").addEventListener("change", function() { + state.change({ + path: "link.show.name", + value: this.checked + }); + render(); + dependents(); + data.save(); + }); + helper.e(".control-link-show-url").addEventListener("change", function() { + state.change({ + path: "link.show.url", + value: this.checked + }); + render(); + dependents(); + data.save(); + }); helper.eA("input[name='control-link-style']").forEach(function(arrayItem, index) { arrayItem.addEventListener("change", function() { state.change({ @@ -481,10 +582,20 @@ var control = (function() { header.render(); data.save(); }, false); - helper.eA("input[name='control-layout-alignment']").forEach(function(arrayItem, index) { + helper.eA("input[name='control-layout-alignment-horizontal']").forEach(function(arrayItem, index) { arrayItem.addEventListener("change", function() { state.change({ - path: "layout.alignment", + path: "layout.alignment.horizontal", + value: this.value + }); + render(); + data.save(); + }, false); + }); + helper.eA("input[name='control-layout-alignment-vertical']").forEach(function(arrayItem, index) { + arrayItem.addEventListener("change", function() { + state.change({ + path: "layout.alignment.vertical", value: this.value }); render(); @@ -510,6 +621,56 @@ var control = (function() { render(); data.save(); }, false); + helper.e(".control-background-image-active").addEventListener("change", function() { + state.change({ + path: "background.image.active", + value: this.checked + }); + render(); + dependents(); + background.render(); + data.save(); + }, false); + helper.e(".control-background-image-url").addEventListener("input", function() { + state.change({ + path: "background.image.url", + value: this.value + }); + background.render(); + data.save(); + }, false); + helper.e(".control-background-image-opacity").addEventListener("input", function() { + state.change({ + path: "background.image.opacity", + value: (100 - parseInt(this.value)) / 100 + }); + background.render(); + data.save(); + }, false); + helper.e(".control-background-image-blur").addEventListener("input", function() { + state.change({ + path: "background.image.blur", + value: parseInt(this.value, 10) + }); + background.render(); + data.save(); + }, false); + helper.e(".control-background-image-grayscale").addEventListener("input", function() { + state.change({ + path: "background.image.grayscale", + value: parseInt(this.value, 10) / 100 + }); + background.render(); + data.save(); + }, false); + helper.e(".control-background-image-accent-opacity").addEventListener("input", function() { + state.change({ + path: "background.image.accentOpacity", + value: parseInt(this.value, 10) / 100 + }); + background.render(); + data.save(); + }, false); }; var update = function() { @@ -518,6 +679,9 @@ var control = (function() { helper.e(".control-layout-theme-random").checked = state.get().layout.theme.random.active; helper.e(".control-layout-theme-style-" + state.get().layout.theme.random.style).checked = true; helper.e(".control-link-new-tab").value = state.get().link.style.newTab; + helper.e(".control-link-show-active").checked = state.get().link.show.active; + helper.e(".control-link-show-name").checked = state.get().link.show.name; + helper.e(".control-link-show-url").checked = state.get().link.show.url; helper.e(".control-link-style-" + state.get().link.style).checked = true; helper.e(".control-link-sort-" + state.get().link.sort).checked = true; helper.e(".control-header-search-active").checked = state.get().header.search.active; @@ -538,9 +702,16 @@ var control = (function() { helper.e(".control-header-edit-add-active").checked = state.get().header.editAdd.active; helper.e(".control-header-accent-active").checked = state.get().header.accent.active; helper.e(".control-header-date-character-length-" + state.get().header.date.characterLength).checked = true; - helper.e(".control-layout-alignment-" + state.get().layout.alignment).checked = true; + helper.e(".control-layout-alignment-horizontal-" + state.get().layout.alignment.horizontal).checked = true; + helper.e(".control-layout-alignment-vertical-" + state.get().layout.alignment.vertical).checked = true; helper.e(".control-layout-container-" + state.get().layout.container).checked = true; helper.e(".control-layout-scroll-past-end").checked = state.get().layout.scrollPastEnd; + helper.e(".control-background-image-active").checked = state.get().background.image.active; + helper.e(".control-background-image-url").value = state.get().background.image.url; + helper.e(".control-background-image-opacity").value = 100 - (state.get().background.image.opacity * 100); + helper.e(".control-background-image-blur").value = state.get().background.image.blur; + helper.e(".control-background-image-grayscale").value = state.get().background.image.grayscale * 100; + helper.e(".control-background-image-accent-opacity").value = (state.get().background.image.accentOpacity * 100); }; var init = function() { diff --git a/js/date.js b/js/date.js index 26ba8be9..cbfdb801 100644 --- a/js/date.js +++ b/js/date.js @@ -62,12 +62,12 @@ var date = (function() { value: "date-item date-year" }] }); - if (state.get().header.date.show.date) { - date.appendChild(dateNumber); - }; if (state.get().header.date.show.day) { date.appendChild(day); }; + if (state.get().header.date.show.date) { + date.appendChild(dateNumber); + }; if (state.get().header.date.show.month) { date.appendChild(month); }; diff --git a/js/header.js b/js/header.js index ee2f4897..1531ed25 100644 --- a/js/header.js +++ b/js/header.js @@ -4,6 +4,9 @@ var header = (function() { window.addEventListener("resize", function(event) { render(); }, false); + window.addEventListener("scroll", function(event) { + _addHeaderBackground(); + }, false); helper.eA(".container").forEach(function(arrayItem, index) { arrayItem.addEventListener("transitionend", function() { render(); @@ -11,13 +14,26 @@ var header = (function() { }); }; + var _addHeaderBackground = function() { + var html = helper.e("html"); + var header = helper.e(".header"); + var scrollPosition = document.documentElement.scrollTop; + var fontSize = parseInt(getComputedStyle(html).fontSize, 10); + if (scrollPosition > (fontSize * 2)) { + helper.addClass(header, "header-background"); + } else { + helper.removeClass(header, "header-background"); + }; + }; + var render = function() { var html = helper.e("html"); var header = helper.e(".header"); var link = helper.e(".link"); var height = parseInt(getComputedStyle(header).height, 10); - var fontSize = parseInt(getComputedStyle(html).fontSize, 10); - link.style.marginTop = (height + fontSize) + "px"; + // var fontSize = parseInt(getComputedStyle(html).fontSize, 10); + // link.style.marginTop = (height + fontSize) + "px"; + link.style.marginTop = height + "px"; }; var init = function() { diff --git a/js/init.js b/js/init.js index 409f4282..a6a53b1c 100644 --- a/js/init.js +++ b/js/init.js @@ -46,3 +46,6 @@ tip.init(); // render header height padding header.init(); + +// render background image +background.init(); diff --git a/js/keyboard.js b/js/keyboard.js index 427d307c..d2c5418e 100644 --- a/js/keyboard.js +++ b/js/keyboard.js @@ -22,8 +22,10 @@ var keyboard = (function() { }; // ctrl+alt+a if (event.ctrlKey && event.altKey && event.keyCode == 65) { - menu.close(); - link.add(); + if (state.get().link.show.active) { + menu.close(); + link.add(); + }; }; // ctrl+alt+m if (event.ctrlKey && event.altKey && event.keyCode == 77) { @@ -33,20 +35,22 @@ var keyboard = (function() { }; // ctrl+alt+e if (event.ctrlKey && event.altKey && event.keyCode == 69) { - if (state.get().edit.active) { - state.change({ - path: "edit.active", - value: false - }); - } else { - state.change({ - path: "edit.active", - value: true - }); + if (state.get().link.show.active) { + if (state.get().edit.active) { + state.change({ + path: "edit.active", + value: false + }); + } else { + state.change({ + path: "edit.active", + value: true + }); + }; + control.update(); + control.render(); + data.save(); }; - control.update(); - control.render(); - data.save(); }; // ctrl+alt+r if (event.ctrlKey && event.altKey && event.keyCode == 82) { diff --git a/js/link.js b/js/link.js index 556cdd38..1747ad33 100644 --- a/js/link.js +++ b/js/link.js @@ -192,7 +192,7 @@ var link = (function() { value: "text" }, { key: "class", - value: "link-form-input-url" + value: "link-form-input-url mb-0" }, { key: "id", value: "url" diff --git a/js/modal.js b/js/modal.js index 19add079..ab1e634d 100644 --- a/js/modal.js +++ b/js/modal.js @@ -58,11 +58,11 @@ var modal = (function() { modalControls.setAttribute("class", "modal-controls"); var actionButton = document.createElement("button"); actionButton.setAttribute("tabindex", "1"); - actionButton.setAttribute("class", "button button-primary button-block"); + actionButton.setAttribute("class", "modal-button button button-primary button-block"); actionButton.textContent = options.actionText; var cancelButton = document.createElement("button"); cancelButton.setAttribute("tabindex", "1"); - cancelButton.setAttribute("class", "button button-primary button-block"); + cancelButton.setAttribute("class", "modal-button button button-primary button-block"); cancelButton.textContent = options.cancelText; modalControls.appendChild(cancelButton); modalControls.appendChild(actionButton); diff --git a/js/state.js b/js/state.js index c4a54acf..b8e1bdcd 100644 --- a/js/state.js +++ b/js/state.js @@ -53,13 +53,21 @@ var state = (function() { } }, link: { + show: { + active: true, + name: true, + url: true + }, editObject: null, newTab: false, style: "block", sort: "none" }, layout: { - alignment: "left", + alignment: { + horizontal: "left", + vertical: "top" + }, container: "wide", scrollPastEnd: true, theme: { @@ -74,6 +82,16 @@ var state = (function() { } }, }, + background: { + image: { + active: false, + url: "../background/gray-steps.jpg", + blur: 0, + opacity: 1, + grayscale: 0, + accentOpacity: 0 + } + }, edit: { active: false }, diff --git a/js/update.js b/js/update.js index 5335bd2a..3a19d932 100644 --- a/js/update.js +++ b/js/update.js @@ -41,6 +41,29 @@ var update = (function() { return data; }; + var _update_240 = function(data) { + data.state.link.show = { + active: true, + name: true, + url: true + }; + data.state.layout.alignment = { + horizontal: data.state.layout.alignment, + vertical: "top" + }; + data.state.background = { + image: { + active: false, + url: "../background/gray-steps.jpg", + blur: 0, + opacity: 1, + accentOpacity: 0 + } + }; + data.version = 2.40; + return data; + }; + // var _update_300 = function(data) { // data.version = 3.00; // return data; @@ -63,6 +86,10 @@ var update = (function() { console.log("\trunning update", 2.30); data = _update_230(data); }; + if (data.version < 2.40) { + console.log("\trunning update", 2.40); + data = _update_240(data); + }; // if (data.version < 3.00) { // console.log("\t# running update", 3.00); // data = _update_300(data); diff --git a/js/version.js b/js/version.js index 1588a54f..8784da6b 100644 --- a/js/version.js +++ b/js/version.js @@ -1,7 +1,7 @@ var version = (function() { // version is normally bumped when the state needs changing or any new functionality is added - var current = "2.3.0"; + var current = "2.4.0"; var get = function() { var number = current.split(".");