diff --git a/layouts/scroll.hbs b/layouts/scroll.hbs new file mode 100644 index 0000000..d0658b7 --- /dev/null +++ b/layouts/scroll.hbs @@ -0,0 +1,16 @@ + + +{{> (include_partial "layouts/partials/head") }} + + + +
+
+ {{> (include_block_template) }} +
+
+ +{{> (include_partial "layouts/partials/scripts") }} + + + diff --git a/layouts/styles/_page--view-swiper.scss b/layouts/styles/_page--view-swiper.scss new file mode 100644 index 0000000..6ec1749 --- /dev/null +++ b/layouts/styles/_page--view-swiper.scss @@ -0,0 +1,9 @@ +.swiper { + &-slide { + width: initial; + } + + &-wrapper { + height: initial; + } +} diff --git a/layouts/styles/page--view.css b/layouts/styles/page--view.css index 2ec90db..664d8f2 100644 --- a/layouts/styles/page--view.css +++ b/layouts/styles/page--view.css @@ -5,13 +5,28 @@ body { main { margin-left: auto; margin-right: auto; + min-height: 100%; + overflow-x: hidden; +} +main .swiper-slide { + width: initial; +} +main .swiper-wrapper { + height: initial; } .body--iframe { overflow-y: hidden; } .body--iframe main { - overflow: auto; + overflow-y: auto; +} + +.fullscreen_layout { + background-color: #9cc3ff; + min-height: 100%; + background-image: url("https://i.ibb.co/pjwL8D1/shapelined-JBKdviwe-XI-unsplash.jpg"); + background-size: cover; } /*# sourceMappingURL=page--view.css.map */ diff --git a/layouts/styles/page--view.css.map b/layouts/styles/page--view.css.map index be478d6..589a3b5 100644 --- a/layouts/styles/page--view.css.map +++ b/layouts/styles/page--view.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["page--view.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;;;AAIF;EACE;;AAEA;EACE","file":"page--view.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["page--view.scss","_page--view-swiper.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;;ACPA;EACE;;AAGF;EACE;;;ADSJ;EACE;;AAEA;EAGE;;;AAIJ;EACE;EACA;EACA;EACA","file":"page--view.css"} \ No newline at end of file diff --git a/layouts/styles/page--view.scss b/layouts/styles/page--view.scss index 8ab9f21..9afa398 100644 --- a/layouts/styles/page--view.scss +++ b/layouts/styles/page--view.scss @@ -5,6 +5,11 @@ body { main { margin-left: auto; margin-right: auto; + min-height: 100%; + overflow-x: hidden; + + // Fixes scrolling issues of swiperJS. Should be included in all projects. + @import "page--view-swiper"; } // iFrame mode @@ -12,6 +17,16 @@ main { overflow-y: hidden; main { - overflow: auto; + // If you change to "overflow: initial", the margin-top/bottom of first/last element will be not included. + // Test on fresh block setup where heading has margin-top. + overflow-y: auto; } } + +.fullscreen_layout { + background-color: #9cc3ff; + min-height: 100%; + background-image: url('https://i.ibb.co/pjwL8D1/shapelined-JBKdviwe-XI-unsplash.jpg'); + background-size: cover; +} +