diff --git a/css/animation.css b/css/animation.css new file mode 100644 index 00000000..347faca7 --- /dev/null +++ b/css/animation.css @@ -0,0 +1,9 @@ +@keyframes appear { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} diff --git a/css/background.css b/css/background.css index 41fba018..45cb6e87 100644 --- a/css/background.css +++ b/css/background.css @@ -35,13 +35,3 @@ pointer-events: none; display: block; } - -@keyframes appear { - 0% { - opacity: 0; - } - - 100% { - opacity: 1; - } -} diff --git a/css/base.css b/css/base.css index cd7a0104..dd3fc73f 100644 --- a/css/base.css +++ b/css/base.css @@ -41,6 +41,10 @@ --z-index-shade: 5000; --z-index-modal: 6000; --z-index-menu: 7000; + --header-shade-color: transparent; + --header-shade-opacity: none; + --header-height: 0; + --header-shade-padding: 4; --background-image: none; --background-opacity: 1; --background-accent-opacity: 0; diff --git a/css/header.css b/css/header.css index 389729da..d162d232 100644 --- a/css/header.css +++ b/css/header.css @@ -1,5 +1,7 @@ .header { + padding: calc(var(--gutter) * var(--header-shade-padding)) 0; width: 100%; + position: relative; z-index: var(--z-index-header); } @@ -7,22 +9,44 @@ position: fixed; top: 0; left: 0; - transition: background-color var(--animation-speed-slow) ease-in-out; } -.header-background { - background-color: rgba(var(--gray-01), 0.95); +.header .header-shade, +.header .header-border { + content: ""; + display: block; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + pointer-events: none; +} + +.is-header-shade-style-scroll .header .header-shade { + transition: background-color var(--animation-speed-fast) ease-in-out; + animation: none; +} + +.is-header-shade-show .header .header-shade { + background-color: rgb(var(--header-shade-color)); + opacity: var(--header-shade-opacity); +} + +.is-header-shade-border-top .header .header-border { + border-top: var(--line-width) solid rgb(var(--accent)); +} + +.is-header-shade-border-bottom .header .header-border { + border-bottom: var(--line-width) solid rgb(var(--accent)); } .header-area { - margin: calc(var(--gutter) * 4) calc(var(--gutter) * -1); + margin: 0 calc(var(--gutter) * -1); display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; - /* display: grid; */ - /* grid-template-columns: auto 1fr auto auto auto; */ - /* grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); */ } .header-item { diff --git a/css/link.css b/css/link.css index 0d34bbf7..07fce62a 100644 --- a/css/link.css +++ b/css/link.css @@ -1,9 +1,11 @@ .link { margin-bottom: 2em; + margin-top: var(--header-height); width: 100vw; position: relative; z-index: var(--z-index-link); display: none; + /* transition: margin-top var(--animation-speed-fast) ease-in-out; */ } .is-bookmarks-show-link .link { diff --git a/index.html b/index.html index cfd5880e..0e4b25f3 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ New Tab + @@ -37,6 +38,8 @@
+
+
@@ -245,6 +248,39 @@

Available when Bookmarks are not shown.

+
+

Background Shade

+
+ + +
+
+ + +

Useful for when a Background Image is shown.

+
+
+ + +

The page will not scroll if Bookmarks are not shown.

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
- +
- +
- +
- +
diff --git a/js/control.js b/js/control.js index cd208959..4a7fda97 100644 --- a/js/control.js +++ b/js/control.js @@ -284,6 +284,64 @@ var control = (function() { func: function() { render(); } + }, { + element: helper.e(".control-header-shade-show"), + path: "header.shade.show", + type: "checkbox", + func: function() { + render(); + dependents(); + header.render(); + } + }, { + element: helper.e(".control-header-shade-style-always"), + path: "header.shade.style", + type: "radio", + func: function() { + render(); + header.render(); + } + }, { + element: helper.e(".control-header-shade-style-scroll"), + path: "header.shade.style", + type: "radio", + func: function() { + render(); + header.render(); + } + }, { + element: helper.e(".control-header-shade-opacity"), + path: "header.shade.opacity", + type: "range", + valueMod: ["reverse", "float"], + func: function() { + render(); + header.render(); + } + }, { + element: helper.e(".control-header-shade-padding"), + path: "header.shade.padding", + type: "range", + func: function() { + render(); + header.render(); + } + }, { + element: helper.e(".control-header-shade-border-top"), + path: "header.shade.border.top", + type: "checkbox", + func: function() { + render(); + header.render(); + } + }, { + element: helper.e(".control-header-shade-border-bottom"), + path: "header.shade.border.bottom", + type: "checkbox", + func: function() { + render(); + header.render(); + } }, { element: helper.e(".control-bookmarks-show-link"), path: "bookmarks.show.link", @@ -441,6 +499,7 @@ var control = (function() { render(); dependents(); background.render(); + header.render(); } }, { element: helper.e(".control-background-image-url"), @@ -670,6 +729,28 @@ var control = (function() { helper.removeClass(html, "is-background-image-show"); }; }; + var _header = function() { + if (state.get().header.shade.show) { + helper.addClass(html, "is-header-shade-show"); + helper.addClass(html, "is-header-shade-style-" + state.get().header.shade.style); + if (state.get().header.shade.border.top) { + helper.addClass(html, "is-header-shade-border-top"); + } else { + helper.removeClass(html, "is-header-shade-border-top"); + }; + if (state.get().header.shade.border.bottom) { + helper.addClass(html, "is-header-shade-border-bottom"); + } else { + helper.removeClass(html, "is-header-shade-border-bottom"); + }; + } else { + helper.removeClass(html, "is-header-shade-show"); + helper.removeClass(html, "is-header-shade-style-always"); + helper.removeClass(html, "is-header-shade-style-scroll"); + helper.removeClass(html, "is-header-shade-border-top"); + helper.removeClass(html, "is-header-shade-border-bottom"); + }; + }; _menu(); _alignment(); _edit(); @@ -681,6 +762,7 @@ var control = (function() { _link(); _layout(); _background(); + _header(); }; var dependents = function() { @@ -833,6 +915,27 @@ var control = (function() { helper.e(".control-background-image-accent").disabled = true; }; }; + var _header = function() { + if (state.get().header.shade.show) { + helper.e(".control-header-shade-style-always").disabled = false; + helper.e(".control-header-shade-style-scroll").disabled = false; + helper.e("[for=control-header-shade-opacity]").removeAttribute("disabled"); + helper.e(".control-header-shade-opacity").disabled = false; + helper.e("[for=control-header-shade-padding]").removeAttribute("disabled"); + helper.e(".control-header-shade-padding").disabled = false; + helper.e(".control-header-shade-border-top").disabled = false; + helper.e(".control-header-shade-border-bottom").disabled = false; + } else { + helper.e(".control-header-shade-style-always").disabled = true; + helper.e(".control-header-shade-style-scroll").disabled = true; + helper.e("[for=control-header-shade-opacity]").setAttribute("disabled", ""); + helper.e(".control-header-shade-opacity").disabled = true; + helper.e("[for=control-header-shade-padding]").setAttribute("disabled", ""); + helper.e(".control-header-shade-padding").disabled = true; + helper.e(".control-header-shade-border-top").disabled = true; + helper.e(".control-header-shade-border-bottom").disabled = true; + }; + }; _edit(); _date(); _clock(); @@ -840,6 +943,7 @@ var control = (function() { _theme(); _link(); _background(); + _header(); }; var update = function() { diff --git a/js/header.js b/js/header.js index 1531ed25..6f902824 100644 --- a/js/header.js +++ b/js/header.js @@ -1,11 +1,11 @@ var header = (function() { var _bind = function() { - window.addEventListener("resize", function(event) { + window.addEventListener("resize", function() { render(); }, false); - window.addEventListener("scroll", function(event) { - _addHeaderBackground(); + window.addEventListener("scroll", function() { + render(); }, false); helper.eA(".container").forEach(function(arrayItem, index) { arrayItem.addEventListener("transitionend", function() { @@ -14,26 +14,51 @@ 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"; - link.style.marginTop = height + "px"; + var fontSize = parseInt(getComputedStyle(html).fontSize, 10); + var scrollPosition = document.documentElement.scrollTop; + var _margin = function() { + var height = parseInt(getComputedStyle(header).height, 10); + var marginValue; + if (state.get().background.image.show && (state.get().header.shade.show && state.get().header.shade.style == "always") || state.get().header.shade.style == "always" || state.get().header.shade.border.bottom) { + marginValue = (height + fontSize); + } else { + marginValue = height; + }; + html.style.setProperty("--header-height", marginValue + "px"); + }; + var _color = function() { + if (state.get().header.shade.show) { + if (state.get().header.shade.style == "always") { + html.style.setProperty("--header-shade-color", "var(--gray-01)"); + } else if (state.get().header.shade.style == "scroll") { + if (scrollPosition > (fontSize * 2)) { + html.style.setProperty("--header-shade-color", "var(--gray-01)"); + } else { + html.style.setProperty("--header-shade-color", "transparent"); + }; + } else { + html.style.setProperty("--header-shade-color", "transparent"); + }; + } else { + html.style.setProperty("--header-shade-color", "transparent"); + }; + }; + var _opacity = function() { + if (state.get().header.shade.show) { + html.style.setProperty("--header-shade-opacity", state.get().header.shade.opacity); + }; + }; + var _padding = function() { + html.style.setProperty("--header-shade-padding", state.get().header.shade.padding); + }; + _color(); + _opacity(); + _padding(); + _margin(); }; var init = function() { diff --git a/js/helper.js b/js/helper.js index 4c027f85..2f81998f 100644 --- a/js/helper.js +++ b/js/helper.js @@ -1,6 +1,5 @@ var helper = (function() { - // methods on this object var e = function(selector) { return document.querySelector(selector); }; diff --git a/js/state.js b/js/state.js index 7daab38d..7dddf600 100644 --- a/js/state.js +++ b/js/state.js @@ -53,6 +53,16 @@ var state = (function() { }, accent: { show: true, + }, + shade: { + show: true, + padding: 4, + style: "scroll", + opacity: 0.95, + border: { + top: false, + bottom: false + } } }, bookmarks: { diff --git a/js/update.js b/js/update.js index 082e2475..1a67cfe9 100644 --- a/js/update.js +++ b/js/update.js @@ -130,6 +130,21 @@ var update = (function() { return data; }; + var _update_290 = function(data) { + data.state.header.shade = { + show: true, + padding: 4, + style: "scroll", + opacity: 0.95, + border: { + top: false, + bottom: false + } + }; + data.version = 2.90; + return data; + }; + // var _update_300 = function(data) { // data.version = 3.00; // return data; @@ -168,6 +183,10 @@ var update = (function() { console.log("\trunning update", 2.80); data = _update_280(data); }; + if (data.version < 2.90) { + console.log("\trunning update", 2.90); + data = _update_290(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 93e3456a..b24134b2 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.8.0"; + var current = "2.9.0"; var get = function() { var number = current.split(".");