diff options
| author | tfabritz <t.fabritz@gmail.com> | 2022-04-28 19:48:39 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-04-28 19:48:39 +0300 |
| commit | 74065c9c951193333d39aabc2045cc4fac10dc9b (patch) | |
| tree | 1733220b6000075c4b2e14496949838f01aab032 /assets | |
| parent | e2b79aa90d57369b01556f36920d122fd3a337f5 (diff) | |
Make bg image configurable (#84)v6.4.0
* Make bg image configurable
* fix prod config
* override bg on custom theme scss
Co-authored-by: Curtis Timson <curt@live.co.uk>
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/scss/hugotheme/main.scss | 6 | ||||
| -rw-r--r-- | assets/scss/layout/_wrapper.scss | 92 | ||||
| -rw-r--r-- | assets/scss/main.scss | 3 |
3 files changed, 55 insertions, 46 deletions
diff --git a/assets/scss/hugotheme/main.scss b/assets/scss/hugotheme/main.scss index de91d93..9fe9e17 100644 --- a/assets/scss/hugotheme/main.scss +++ b/assets/scss/hugotheme/main.scss @@ -1,3 +1,9 @@ img { max-width: 100%; +} + +#wrapper { + >.bg { + background-image: url('../../images/overlay.png'), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("../../"+ $backgroundPath); + } }
\ No newline at end of file diff --git a/assets/scss/layout/_wrapper.scss b/assets/scss/layout/_wrapper.scss index 7b1bd55..987f356 100644 --- a/assets/scss/layout/_wrapper.scss +++ b/assets/scss/layout/_wrapper.scss @@ -6,59 +6,59 @@ /* Wrapper */
- #wrapper {
- @include vendor('transition', 'opacity #{_duration(menu)} ease');
- position: relative;
- z-index: 1;
- overflow: hidden;
+#wrapper {
+ @include vendor('transition', 'opacity #{_duration(menu)} ease');
+ position: relative;
+ z-index: 1;
+ overflow: hidden;
- > .bg {
- position: absolute;
- top: 0;
+ >.bg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: _palette(wrapper-bg);
+ background-image: url('../../images/overlay.png'), linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('../../images/bg.jpg');
+ background-size: auto, auto, 100% auto;
+ background-position: center, center, top center;
+ background-repeat: repeat, no-repeat, no-repeat;
+ background-attachment: scroll, scroll, scroll;
+ z-index: -1;
+
+ &.fixed {
+ position: fixed;
+ width: 100vw;
+ height: 100vh;
+ }
+ }
+
+ &.fade-in {
+ &:before {
+ @include vendor('pointer-events', 'none');
+ @include vendor('transition', 'opacity 1s ease-in-out');
+ @include vendor('transition-delay', '0.75s');
+ background: _palette(invert, bg);
+ content: '';
+ display: block;
+ height: 100%;
left: 0;
+ opacity: 0;
+ position: fixed;
+ top: 0;
width: 100%;
- height: 100%;
- background-color: _palette(wrapper-bg);
- background-image: url('../../images/overlay.png'), linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url('../../images/bg.jpg');
- background-size: auto, auto, 100% auto;
- background-position: center, center, top center;
- background-repeat: repeat, no-repeat, no-repeat;
- background-attachment: scroll, scroll, scroll;
- z-index: -1;
-
- &.fixed {
- position: fixed;
- width: 100vw;
- height: 100vh;
- }
}
- &.fade-in {
+ body.is-preload & {
&:before {
- @include vendor('pointer-events', 'none');
- @include vendor('transition', 'opacity 1s ease-in-out');
- @include vendor('transition-delay', '0.75s');
- background: _palette(invert, bg);
- content: '';
- display: block;
- height: 100%;
- left: 0;
- opacity: 0;
- position: fixed;
- top: 0;
- width: 100%;
- }
-
- body.is-preload & {
- &:before {
- opacity: 1;
- }
+ opacity: 1;
}
}
+ }
- @include orientation(portrait) {
- > .bg {
- background-size: auto, auto, auto 175%;
- }
+ @include orientation(portrait) {
+ >.bg {
+ background-size: auto, auto, auto 175%;
}
- }
\ No newline at end of file + }
+}
\ No newline at end of file diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 38e2c56..feba7d0 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -14,6 +14,9 @@ Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
+// Variables
+$backgroundPath: "{{ .Site.Params.backgroundPath | default "images/bg.jpg" }}";
+
// Breakpoints.
@include breakpoints((default: (1681px, null),
|