From a122f9acc2bd9df455a8f85effe0d62dee924e7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikola=20Forr=C3=B3?= <nikola@mraveniste.cc>
Date: Sun, 16 Sep 2018 12:47:56 +0200
Subject: [PATCH] Use small variant of Hero image

---
 blueprints/modular/hero.yaml       | 40 +++++++++++++++++++++++++----
 blueprints/partials/blog-bits.yaml | 41 +++++++++++++++++++++++++-----
 css-compiled/theme.min.css         |  2 +-
 scss/theme/_framework.scss         | 24 -----------------
 templates/modular/hero.html.twig   |  4 +++
 templates/partials/hero.html.twig  | 25 ++++++++++++++----
 6 files changed, 95 insertions(+), 41 deletions(-)

diff --git a/blueprints/modular/hero.yaml b/blueprints/modular/hero.yaml
index e5e46c8..900b797 100644
--- a/blueprints/modular/hero.yaml
+++ b/blueprints/modular/hero.yaml
@@ -9,11 +9,6 @@ form:
           type: tab
           title: Hero
           fields:
-            header.hero_classes:
-              type: text
-              label: Hero Classes
-              markdown: true
-              description: 'There are several Hero class options that can be listed here (space separated):<br />`text-light`, `text-dark`, `title-h1h2`, `parallax`, `overlay-dark-gradient`, `overlay-light-gradient`, `overlay-dark`, `overlay-light`, `hero-fullscreen`, `hero-large`, `hero-medium`, `hero-small`, `hero-tiny`<br />Please consult the [Quark documentation](https://github.com/getgrav/grav-theme-quark#hero-options) for more details.'
             header.hero_image:
               type: filepicker
               label: Hero Image
@@ -21,6 +16,13 @@ form:
               toggleable: true
               description: 'If not specified, this defaults to the first image found in the page''s folder'
 
+            header.hero_image_small:
+              type: filepicker
+              label: Hero Image (small variant)
+              preview_images: true
+              toggleable: true
+              description: 'If not specified, this defaults to the first image found in the page''s folder'
+
             header.hero_autosize:
               type: toggle
               label: Hero Image Autosize
@@ -50,7 +52,35 @@ form:
               preview_images: true
               toggleable: true
 
+            header.hero_background_image_small:
+              type: filepicker
+              label: Hero Background Image (small variant)
+              preview_images: true
+              toggleable: true
+
             header.hero_background_color:
               type: colorpicker
               label: Hero Background Color
               toggleable: true
+
+            header.hero_height:
+              type: text
+              size: small
+              label: Hero Height
+              description: Height in pixels
+              default: 500
+              validate:
+                type: number
+                min: 100
+                max: 1000
+
+            header.hero_height_small:
+              type: text
+              size: small
+              label: Hero Height (small variant)
+              description: Height in pixels
+              default: 350
+              validate:
+                type: number
+                min: 100
+                max: 1000
diff --git a/blueprints/partials/blog-bits.yaml b/blueprints/partials/blog-bits.yaml
index 3b1c585..a672dc3 100644
--- a/blueprints/partials/blog-bits.yaml
+++ b/blueprints/partials/blog-bits.yaml
@@ -4,12 +4,6 @@ form:
       type: spacer
       title: Hero Section
 
-    header.hero_classes:
-      type: text
-      label: Hero Classes
-      markdown: true
-      description: 'There are several Hero class options that can be listed here (space separated):<br />`text-light`, `text-dark`, `title-h1h2`, `parallax`, `overlay-dark-gradient`, `overlay-light-gradient`, `overlay-dark`, `overlay-light`, `hero-fullscreen`, `hero-large`, `hero-medium`, `hero-small`, `hero-tiny`<br />Please consult the [Quark documentation](https://github.com/getgrav/grav-theme-quark#hero-options) for more details.'
-
     header.hero_image:
       type: filepicker
       label: Hero Image
@@ -17,6 +11,13 @@ form:
       toggleable: true
       description: 'If not specified, this defaults to the first image found in the page''s folder'
 
+    header.hero_image_small:
+      type: filepicker
+      label: Hero Image (small variant)
+      preview_images: true
+      toggleable: true
+      description: 'If not specified, this defaults to the first image found in the page''s folder'
+
     header.hero_autosize:
       type: toggle
       label: Hero Image Autosize
@@ -46,11 +47,39 @@ form:
       preview_images: true
       toggleable: true
 
+    header.hero_background_image_small:
+      type: filepicker
+      label: Hero Background Image (small variant)
+      preview_images: true
+      toggleable: true
+
     header.hero_background_color:
       type: colorpicker
       label: Hero Background Color
       toggleable: true
 
+    header.hero_height:
+      type: text
+      size: small
+      label: Hero Height
+      description: Height in pixels
+      default: 500
+      validate:
+        type: number
+        min: 100
+        max: 1000
+
+    header.hero_height_small:
+      type: text
+      size: small
+      label: Hero Height (small variant)
+      description: Height in pixels
+      default: 350
+      validate:
+        type: number
+        min: 100
+        max: 1000
+
     toggles_title:
       type: spacer
       title: Configuration
diff --git a/css-compiled/theme.min.css b/css-compiled/theme.min.css
index 4ba9f98..2d8887a 100644
--- a/css-compiled/theme.min.css
+++ b/css-compiled/theme.min.css
@@ -1 +1 @@
-html{height:100%;background:#0f0f0f}#body-wrapper{padding-top:4rem}#body-wrapper .container{padding:2rem 0 2rem}.hero+#start>#body-wrapper{padding-top:0}section.section{padding-left:1rem;padding-right:1rem;position:relative}.overlay-light,.overlay-dark,.overlay-light-gradient,.overlay-dark-gradient{z-index:0}.hero{display:flex;align-items:center;justify-content:center;padding-top:6rem;padding-bottom:7rem}.hero.hero-fullscreen{height:100vh}.hero.hero-large{height:500px}.hero.hero-medium{height:400px}.hero.hero-small{height:110px}.hero.hero-tiny{height:8rem}.hero h1{color:#242931;font-size:4rem !important}.hero h2{color:rgba(36,41,49,0.8);font-size:2.5rem !important}.hero h1+h2{margin-top:-45px !important}.hero p{font-size:130%;font-weight:300}.hero #to-start{display:inline-block;position:absolute;bottom:10px;font-size:2rem;cursor:pointer}.image-overlay{position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1}.overlay-light .image-overlay{background:rgba(255,255,255,0.4)}.overlay-light-gradient .image-overlay{background:linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255,255,255,0.2))}.overlay-dark .image-overlay{background:rgba(0,0,0,0.4)}.overlay-dark-gradient .image-overlay{background:linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.2))}.title-center h1,.title-center h2{text-align:center}.title-h1h2 h1{font-weight:100}.title-h1h2 h1 strong,.title-h1h2 h1 bold{font-weight:400}.title-h1h2 h1+h2,.title-center h1+h2{margin-top:-35px;margin-bottom:50px;font-weight:700}a:focus{outline:none !important}img{max-width:100%}pre:not(.phpdebugbar-widgets-code-block) code{background:#f8f8f8;display:block;padding:1rem !important;line-height:1.5;color:inherit;border-radius:2px;overflow-x:auto}pre.xdebug-var-dump{background:#f8f8f8;display:block;padding:1rem !important;line-height:1.5;color:inherit;border-radius:2px;overflow-x:auto}i.fa.fa-heart.pulse,i.fa.fa-heart-o.pulse{color:#920}b,strong{font-weight:700}.heavy{font-weight:700}.light{font-weight:200}.text-light{color:rgba(255,255,255,0.8)}.text-light h1,.text-light h2,.text-light h3,.text-light h4,.text-light h5,.text-light h6{color:rgba(255,255,255,0.9)}#error{text-align:center;position:relative;margin-top:5rem}#error .icon{font-size:50px}#messages{margin-bottom:1rem}#messages .icon{font-size:120%}.notices{margin:1.5rem 0}.notices p{margin:1rem 0}h1,h2,h3,h4,h5,h6{color:rgba(255,255,255,0.9)}body{color:rgba(255,255,255,0.9);background:#222}.flex{display:flex;justify-content:space-between;flex-wrap:wrap}.left-aligned{float:left;margin-right:1rem;margin-bottom:1rem}form .button-wrapper{margin-top:0.75rem;margin-bottom:1rem}form span.required{color:#e85600;font-weight:700;font-size:150%}form .form-input[type=range]{appearance:slider-horizontal}form .form-input[type=range]:focus{box-shadow:none;border:none}.mobile-container{position:absolute;top:40%;left:0;margin:0 auto;z-index:2}.mobile-logo svg{max-width:80px;margin-top:1rem;margin-left:1.4rem}.mobile-menu{display:none;top:0;right:0;z-index:3;position:fixed}@media (max-width: 840px){.mobile-menu{display:block}}.mobile-menu .button_container{position:absolute;top:1rem;right:1rem;height:27px;width:35px;cursor:pointer;z-index:100;transition:opacity .25s ease, top 0.5s ease}.mobile-menu .button_container:hover{opacity:.7}.mobile-menu .button_container.active{position:fixed}.mobile-menu .button_container.active .top{transform:translateY(11px) translateX(0) rotate(45deg);background:#fff}.mobile-menu .button_container.active .middle{opacity:0;background:#fff}.mobile-menu .button_container.active .bottom{transform:translateY(-11px) translateX(0) rotate(-45deg);background:#fff}.mobile-menu .button_container span{background:#ffc740;border:none;height:5px;width:100%;position:absolute;top:0;left:0;transition:all .35s ease;cursor:pointer}.mobile-menu .button_container span:nth-of-type(2){top:11px}.mobile-menu .button_container span:nth-of-type(3){top:22px}.overlay{position:fixed;background:#000;top:0;left:0;width:100%;height:0%;opacity:0;visibility:hidden;transition:opacity .35s, visibility .35s, height .35s}.overlay.open{opacity:.95;visibility:visible;height:100%}.overlay nav{position:relative;margin:0 auto;text-align:center}.overlay-menu{height:calc(100% - 90px);overflow-y:scroll}.overlay-menu>.tree{text-align:left}.treemenu.treemenu-root{margin:1rem}.treemenu li{list-style:none;margin:0 0 1px;padding:5px 0;line-height:1.2rem;background:rgba(102,113,137,0.1)}.treemenu li a{display:block;margin-left:1.2rem;font-size:1rem}.treemenu li a:hover,.treemenu li a:focus,.treemenu li a.active{color:#ffce5a !important;text-decoration:none}.treemenu ul{margin:0 0 0 1rem}.treemenu .toggler{cursor:pointer;vertical-align:top;font-size:1.1rem;line-height:1rem;padding-left:5px;float:left}.treemenu .toggler:before{display:inline-block;margin-right:2pt}.treemenu li.tree-empty>.toggler{opacity:0.3;cursor:default}.treemenu li.tree-empty>.toggler:before{content:"\2022"}.treemenu li.tree-closed>.toggler:before{content:"+"}.treemenu li.tree-opened>.toggler:before{content:"\2212"}.mobile-nav-open{overflow-y:hidden}.default-animation,#header,#header .navbar-section,#header .logo svg,#header .logo h1,#modular-features.small .feature-icon i,#modular-features .feature-icon{transition:all 0.5s ease}.pulse{animation-name:pulse_animation;animation-duration:2000ms;transform-origin:70% 70%;animation-iteration-count:infinite;animation-timing-function:linear}@keyframes pulse_animation{0%{transform:scale(1)}30%{transform:scale(1)}40%{transform:scale(1.08)}50%{transform:scale(1)}60%{transform:scale(1)}70%{transform:scale(1.05)}80%{transform:scale(1)}100%{transform:scale(1)}}.notices{color:#fff !important;background-color:rgba(15,15,15,0.9) !important;border:1px solid rgba(0,0,0,0.125) !important;border-radius:0.25rem !important;padding:25px}.notices h1,.notices h2,.notices h3,.notices h4,.notices h5,.notices h6{margin-top:0.5rem}.notices.yellow{border-color:#f39c12 !important}.notices.green{border-color:#00bc8c !important}.notices.red{border-color:#e74c3c !important}.notices.blue{border-color:#3498db !important}#header{width:100%;height:4rem;font-size:0.7rem;font-weight:700;background:rgba(15,15,15,0.9);color:#fff;position:fixed;top:0;z-index:2}#header a{color:rgba(255,255,255,0.7)}#header a.active{color:#fff !important}#header .dropmenu ul ul a{color:rgba(255,255,255,0.7)}#header .navbar-section{height:4rem}#header .logo svg{width:80px;display:inherit}#header .logo h1{height:4rem;line-height:4rem;vertical-align:middle;margin:0 0 0 0.5rem;white-space:nowrap;text-transform:uppercase;font-size:1.75rem}#header .logo h1 a{color:#fff !important}#header.scrolled{height:2.3rem}#header.scrolled .navbar-section{height:2.3rem}#header.scrolled .logo svg{width:45px}#header.scrolled ~ .mobile-menu .button_container{top:0.5rem}.login-status-wrapper{white-space:nowrap}.login-status-wrapper .icon{font-size:120%}#footer{color:#acb3c2;background:rgba(15,15,15,0.9);padding:1rem 1rem 0;text-align:center}#footer p{display:inline-block}#footer p a{color:rgba(255,255,255,0.7);padding-right:0.6rem}#footer p a:hover{color:#fff}@media (max-width: 840px){.dropmenu{display:none}}.dropmenu ul{white-space:nowrap;margin:0;display:flex}.dropmenu ul li{position:relative;margin:0}.dropmenu ul li a{text-decoration:none;padding:7px 30px 7px 20px;display:block}.dropmenu ul li a:hover,.dropmenu ul li a:focus,.dropmenu ul li a.active{color:#fff !important}.dropmenu ul li a:before{content:'\f107';font-family:'Font Awesome\ 5 Free';display:inline-block;vertical-align:middle;float:right;margin-right:-20px}.dropmenu ul li a:only-child{padding-right:20px}.dropmenu ul li a:only-child:before{content:''}.dropmenu ul li:hover>ul{display:block;visibility:visible}.dropmenu ul ul li a:before{content:'\f105'}.dropmenu ul ul{position:absolute;top:100%;list-style:none;background:rgba(15,15,15,0.9);visibility:hidden}.dropmenu ul ul ul{position:absolute;left:100%;top:0}.dropmenu>ul>li{display:inline-block}.dropmenu.animated ul li{transition:background .7s, color 0.5s}.dropmenu.animated ul li:hover>ul{opacity:1;transform:translateY(0)}.dropmenu.animated ul ul{transition:transform .3s, opacity .5s;opacity:0;transform:translateY(-10px)}.extra-spacing:not(.col-12),:not(.col12)>.e-content{padding-right:1rem}@media (max-width: 840px){.extra-spacing:not(.col-12),:not(.col12)>.e-content{padding-right:0}}#breadcrumbs{padding-left:0;display:flex;align-items:center;margin-top:-1rem;margin-bottom:1rem}#breadcrumbs i{display:none}#breadcrumbs span,#breadcrumbs a{padding:0 0.5rem}#breadcrumbs span:first-child,#breadcrumbs a:first-child{padding-left:0}#breadcrumbs span:not(:first-child)::before,#breadcrumbs a:not(:first-child)::before{color:#e7e9ed;content:"/";padding-right:1rem}.blog-listing .bricklayer-column{padding-left:0px;padding-right:25px}.blog-listing .card{margin-bottom:25px;border:0;box-shadow:0 10px 45px -9px rgba(0,0,0,0.1)}.blog-listing .card-footer{text-align:right}.blog-listing .blog-date{font-size:13px}.content-title{margin-bottom:2rem}.content-title h2{margin-bottom:0.5rem}.label{font-size:12px;text-transform:uppercase}ul.pagination{justify-content:center}.prev-next{margin-top:4rem}#sidebar ul.related-pages{box-shadow:none;padding:0}#sidebar ul.related-pages li{border-bottom:1px solid #e7e9ed}#sidebar ul.related-pages li:last-child{border-bottom:0}#sidebar ul.archives{list-style:none;margin-left:0}#sidebar ul.archives .label{vertical-align:text-top}#modular-hero #to-start{bottom:3.5rem}#modular-features{text-align:center}#modular-features.offset-box .frame-box{margin:-3rem -1.4rem 3rem;padding:1rem 1rem;background:#fff;box-shadow:0 0 75px 0 rgba(69,77,93,0.1)}#modular-features.small .columns{margin-top:-1rem}#modular-features.small .column:hover .feature-icon i{color:#ffc740}#modular-features.small .feature-icon{display:block;justify-content:left}#modular-features.small .feature-icon i{position:relative;display:inherit;font-size:70px;margin:0 auto 1rem;transform:none;left:auto;top:auto;color:#acb3c2}#modular-features.small .feature-icon h6{text-transform:none}#modular-features .frame-box{padding:3rem 0}#modular-features .frame-box>p{max-width:600px;margin-left:auto;margin-right:auto}#modular-features .column{padding:1rem}#modular-features .column:hover .feature-icon{color:#acb3c2}#modular-features .column:hover .feature-icon h6{color:#ffc740}#modular-features .column:hover .feature-content{color:#667189}#modular-features .feature-icon{font-size:130px;height:100px;color:#f6f6f8;display:flex;align-items:center;justify-content:center;position:relative;margin:1rem 0}#modular-features .feature-icon i{position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%)}#modular-features .feature-icon h6{background:#fff;line-height:1;z-index:1;text-transform:uppercase;font-weight:600;margin:0;display:block;color:#667189}#modular-features .feature-content{color:#acb3c2}#modular-text,#modular-schedule,#modular-instagram{padding-top:2rem;padding-bottom:3rem}.module-lighter{background:#252525}.module-darker{background:#1f1f1f}
+html{height:100%;background:#0f0f0f}#body-wrapper{padding-top:4rem}#body-wrapper .container{padding:2rem 0 2rem}.hero+#start>#body-wrapper{padding-top:0}section.section{padding-left:1rem;padding-right:1rem;position:relative}.overlay-light,.overlay-dark,.overlay-light-gradient,.overlay-dark-gradient{z-index:0}.hero{display:flex;align-items:center;justify-content:center;padding-top:6rem;padding-bottom:7rem}.hero h1{color:#242931;font-size:4rem !important}.hero h2{color:rgba(36,41,49,0.8);font-size:2.5rem !important}.hero h1+h2{margin-top:-45px !important}.hero p{font-size:130%;font-weight:300}.hero #to-start{display:inline-block;position:absolute;bottom:10px;font-size:2rem;cursor:pointer}.image-overlay{position:absolute;top:0;bottom:0;left:0;right:0;z-index:-1}.overlay-light .image-overlay{background:rgba(255,255,255,0.4)}.overlay-light-gradient .image-overlay{background:linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255,255,255,0.2))}.overlay-dark .image-overlay{background:rgba(0,0,0,0.4)}.overlay-dark-gradient .image-overlay{background:linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.2))}.title-center h1,.title-center h2{text-align:center}.title-h1h2 h1{font-weight:100}.title-h1h2 h1 strong,.title-h1h2 h1 bold{font-weight:400}.title-h1h2 h1+h2,.title-center h1+h2{margin-top:-35px;margin-bottom:50px;font-weight:700}a:focus{outline:none !important}img{max-width:100%}pre:not(.phpdebugbar-widgets-code-block) code{background:#f8f8f8;display:block;padding:1rem !important;line-height:1.5;color:inherit;border-radius:2px;overflow-x:auto}pre.xdebug-var-dump{background:#f8f8f8;display:block;padding:1rem !important;line-height:1.5;color:inherit;border-radius:2px;overflow-x:auto}i.fa.fa-heart.pulse,i.fa.fa-heart-o.pulse{color:#920}b,strong{font-weight:700}.heavy{font-weight:700}.light{font-weight:200}.text-light{color:rgba(255,255,255,0.8)}.text-light h1,.text-light h2,.text-light h3,.text-light h4,.text-light h5,.text-light h6{color:rgba(255,255,255,0.9)}#error{text-align:center;position:relative;margin-top:5rem}#error .icon{font-size:50px}#messages{margin-bottom:1rem}#messages .icon{font-size:120%}.notices{margin:1.5rem 0}.notices p{margin:1rem 0}h1,h2,h3,h4,h5,h6{color:rgba(255,255,255,0.9)}body{color:rgba(255,255,255,0.9);background:#222}.flex{display:flex;justify-content:space-between;flex-wrap:wrap}.left-aligned{float:left;margin-right:1rem;margin-bottom:1rem}form .button-wrapper{margin-top:0.75rem;margin-bottom:1rem}form span.required{color:#e85600;font-weight:700;font-size:150%}form .form-input[type=range]{appearance:slider-horizontal}form .form-input[type=range]:focus{box-shadow:none;border:none}.mobile-container{position:absolute;top:40%;left:0;margin:0 auto;z-index:2}.mobile-logo svg{max-width:80px;margin-top:1rem;margin-left:1.4rem}.mobile-menu{display:none;top:0;right:0;z-index:3;position:fixed}@media (max-width: 840px){.mobile-menu{display:block}}.mobile-menu .button_container{position:absolute;top:1rem;right:1rem;height:27px;width:35px;cursor:pointer;z-index:100;transition:opacity .25s ease, top 0.5s ease}.mobile-menu .button_container:hover{opacity:.7}.mobile-menu .button_container.active{position:fixed}.mobile-menu .button_container.active .top{transform:translateY(11px) translateX(0) rotate(45deg);background:#fff}.mobile-menu .button_container.active .middle{opacity:0;background:#fff}.mobile-menu .button_container.active .bottom{transform:translateY(-11px) translateX(0) rotate(-45deg);background:#fff}.mobile-menu .button_container span{background:#ffc740;border:none;height:5px;width:100%;position:absolute;top:0;left:0;transition:all .35s ease;cursor:pointer}.mobile-menu .button_container span:nth-of-type(2){top:11px}.mobile-menu .button_container span:nth-of-type(3){top:22px}.overlay{position:fixed;background:#000;top:0;left:0;width:100%;height:0%;opacity:0;visibility:hidden;transition:opacity .35s, visibility .35s, height .35s}.overlay.open{opacity:.95;visibility:visible;height:100%}.overlay nav{position:relative;margin:0 auto;text-align:center}.overlay-menu{height:calc(100% - 90px);overflow-y:scroll}.overlay-menu>.tree{text-align:left}.treemenu.treemenu-root{margin:1rem}.treemenu li{list-style:none;margin:0 0 1px;padding:5px 0;line-height:1.2rem;background:rgba(102,113,137,0.1)}.treemenu li a{display:block;margin-left:1.2rem;font-size:1rem}.treemenu li a:hover,.treemenu li a:focus,.treemenu li a.active{color:#ffce5a !important;text-decoration:none}.treemenu ul{margin:0 0 0 1rem}.treemenu .toggler{cursor:pointer;vertical-align:top;font-size:1.1rem;line-height:1rem;padding-left:5px;float:left}.treemenu .toggler:before{display:inline-block;margin-right:2pt}.treemenu li.tree-empty>.toggler{opacity:0.3;cursor:default}.treemenu li.tree-empty>.toggler:before{content:"\2022"}.treemenu li.tree-closed>.toggler:before{content:"+"}.treemenu li.tree-opened>.toggler:before{content:"\2212"}.mobile-nav-open{overflow-y:hidden}.default-animation,#header,#header .navbar-section,#header .logo svg,#header .logo h1,#modular-features.small .feature-icon i,#modular-features .feature-icon{transition:all 0.5s ease}.pulse{animation-name:pulse_animation;animation-duration:2000ms;transform-origin:70% 70%;animation-iteration-count:infinite;animation-timing-function:linear}@keyframes pulse_animation{0%{transform:scale(1)}30%{transform:scale(1)}40%{transform:scale(1.08)}50%{transform:scale(1)}60%{transform:scale(1)}70%{transform:scale(1.05)}80%{transform:scale(1)}100%{transform:scale(1)}}.notices{color:#fff !important;background-color:rgba(15,15,15,0.9) !important;border:1px solid rgba(0,0,0,0.125) !important;border-radius:0.25rem !important;padding:25px}.notices h1,.notices h2,.notices h3,.notices h4,.notices h5,.notices h6{margin-top:0.5rem}.notices.yellow{border-color:#f39c12 !important}.notices.green{border-color:#00bc8c !important}.notices.red{border-color:#e74c3c !important}.notices.blue{border-color:#3498db !important}#header{width:100%;height:4rem;font-size:0.7rem;font-weight:700;background:rgba(15,15,15,0.9);color:#fff;position:fixed;top:0;z-index:2}#header a{color:rgba(255,255,255,0.7)}#header a.active{color:#fff !important}#header .dropmenu ul ul a{color:rgba(255,255,255,0.7)}#header .navbar-section{height:4rem}#header .logo svg{width:80px;display:inherit}#header .logo h1{height:4rem;line-height:4rem;vertical-align:middle;margin:0 0 0 0.5rem;white-space:nowrap;text-transform:uppercase;font-size:1.75rem}#header .logo h1 a{color:#fff !important}#header.scrolled{height:2.3rem}#header.scrolled .navbar-section{height:2.3rem}#header.scrolled .logo svg{width:45px}#header.scrolled ~ .mobile-menu .button_container{top:0.5rem}.login-status-wrapper{white-space:nowrap}.login-status-wrapper .icon{font-size:120%}#footer{color:#acb3c2;background:rgba(15,15,15,0.9);padding:1rem 1rem 0;text-align:center}#footer p{display:inline-block}#footer p a{color:rgba(255,255,255,0.7);padding-right:0.6rem}#footer p a:hover{color:#fff}@media (max-width: 840px){.dropmenu{display:none}}.dropmenu ul{white-space:nowrap;margin:0;display:flex}.dropmenu ul li{position:relative;margin:0}.dropmenu ul li a{text-decoration:none;padding:7px 30px 7px 20px;display:block}.dropmenu ul li a:hover,.dropmenu ul li a:focus,.dropmenu ul li a.active{color:#fff !important}.dropmenu ul li a:before{content:'\f107';font-family:'Font Awesome\ 5 Free';display:inline-block;vertical-align:middle;float:right;margin-right:-20px}.dropmenu ul li a:only-child{padding-right:20px}.dropmenu ul li a:only-child:before{content:''}.dropmenu ul li:hover>ul{display:block;visibility:visible}.dropmenu ul ul li a:before{content:'\f105'}.dropmenu ul ul{position:absolute;top:100%;list-style:none;background:rgba(15,15,15,0.9);visibility:hidden}.dropmenu ul ul ul{position:absolute;left:100%;top:0}.dropmenu>ul>li{display:inline-block}.dropmenu.animated ul li{transition:background .7s, color 0.5s}.dropmenu.animated ul li:hover>ul{opacity:1;transform:translateY(0)}.dropmenu.animated ul ul{transition:transform .3s, opacity .5s;opacity:0;transform:translateY(-10px)}.extra-spacing:not(.col-12),:not(.col12)>.e-content{padding-right:1rem}@media (max-width: 840px){.extra-spacing:not(.col-12),:not(.col12)>.e-content{padding-right:0}}#breadcrumbs{padding-left:0;display:flex;align-items:center;margin-top:-1rem;margin-bottom:1rem}#breadcrumbs i{display:none}#breadcrumbs span,#breadcrumbs a{padding:0 0.5rem}#breadcrumbs span:first-child,#breadcrumbs a:first-child{padding-left:0}#breadcrumbs span:not(:first-child)::before,#breadcrumbs a:not(:first-child)::before{color:#e7e9ed;content:"/";padding-right:1rem}.blog-listing .bricklayer-column{padding-left:0px;padding-right:25px}.blog-listing .card{margin-bottom:25px;border:0;box-shadow:0 10px 45px -9px rgba(0,0,0,0.1)}.blog-listing .card-footer{text-align:right}.blog-listing .blog-date{font-size:13px}.content-title{margin-bottom:2rem}.content-title h2{margin-bottom:0.5rem}.label{font-size:12px;text-transform:uppercase}ul.pagination{justify-content:center}.prev-next{margin-top:4rem}#sidebar ul.related-pages{box-shadow:none;padding:0}#sidebar ul.related-pages li{border-bottom:1px solid #e7e9ed}#sidebar ul.related-pages li:last-child{border-bottom:0}#sidebar ul.archives{list-style:none;margin-left:0}#sidebar ul.archives .label{vertical-align:text-top}#modular-hero #to-start{bottom:3.5rem}#modular-features{text-align:center}#modular-features.offset-box .frame-box{margin:-3rem -1.4rem 3rem;padding:1rem 1rem;background:#fff;box-shadow:0 0 75px 0 rgba(69,77,93,0.1)}#modular-features.small .columns{margin-top:-1rem}#modular-features.small .column:hover .feature-icon i{color:#ffc740}#modular-features.small .feature-icon{display:block;justify-content:left}#modular-features.small .feature-icon i{position:relative;display:inherit;font-size:70px;margin:0 auto 1rem;transform:none;left:auto;top:auto;color:#acb3c2}#modular-features.small .feature-icon h6{text-transform:none}#modular-features .frame-box{padding:3rem 0}#modular-features .frame-box>p{max-width:600px;margin-left:auto;margin-right:auto}#modular-features .column{padding:1rem}#modular-features .column:hover .feature-icon{color:#acb3c2}#modular-features .column:hover .feature-icon h6{color:#ffc740}#modular-features .column:hover .feature-content{color:#667189}#modular-features .feature-icon{font-size:130px;height:100px;color:#f6f6f8;display:flex;align-items:center;justify-content:center;position:relative;margin:1rem 0}#modular-features .feature-icon i{position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%)}#modular-features .feature-icon h6{background:#fff;line-height:1;z-index:1;text-transform:uppercase;font-weight:600;margin:0;display:block;color:#667189}#modular-features .feature-content{color:#acb3c2}#modular-text,#modular-schedule,#modular-instagram{padding-top:2rem;padding-bottom:3rem}.module-lighter{background:#252525}.module-darker{background:#1f1f1f}
diff --git a/scss/theme/_framework.scss b/scss/theme/_framework.scss
index dac5f5a..4106221 100644
--- a/scss/theme/_framework.scss
+++ b/scss/theme/_framework.scss
@@ -34,30 +34,6 @@ section.section {
   padding-top: 6rem;
   padding-bottom: 7rem;
 
-  &.hero-fullscreen {
-    height: 100vh;
-  }
-
-  &.hero-large {
-    height: 500px;
-  }
-
-  &.hero-medium {
-    height: 400px;
-  }
-
-  &.hero-small {
-    height: 110px;
-  }
-
-  &.hero-tiny {
-    height: 8rem;
-  }
-
-  //&.parallax {
-  //  background-attachment: fixed;
-  //}
-
   h1 {
     color: $header-text;
     font-size: 4rem !important;
diff --git a/templates/modular/hero.html.twig b/templates/modular/hero.html.twig
index 1f34314..217c47c 100644
--- a/templates/modular/hero.html.twig
+++ b/templates/modular/hero.html.twig
@@ -1,9 +1,13 @@
 {% set grid_size = theme_var('grid-size') %}
 {% set hero_image = page.header.hero_image ? page.media[page.header.hero_image] : page.media.images|first %}
+{% set hero_image_small = page.header.hero_image_small ? page.media[page.header.hero_image_small] : page.media.images|first %}
 {% set hero_position = page.header.hero_position ? page.header.hero_position : 50 %}
 {% set hero_size = page.header.hero_autosize ? 'cover' : 'auto' %}
 {% set hero_background_image = page.header.hero_background_image ? page.media[page.header.hero_background_image] : null %}
+{% set hero_background_image_small = page.header.hero_background_image_small ? page.media[page.header.hero_background_image_small] : null %}
 {% set hero_background_color = page.header.hero_background_color %}
+{% set hero_height = page.header.hero_height ? page.header.hero_height : 500 %}
+{% set hero_height_small = page.header.hero_height_small ? page.header.hero_height_small : 350 %}
 
 {{ dump(hero_image) }}
 
diff --git a/templates/partials/hero.html.twig b/templates/partials/hero.html.twig
index 51a27ff..20a3011 100644
--- a/templates/partials/hero.html.twig
+++ b/templates/partials/hero.html.twig
@@ -1,8 +1,23 @@
-<section id="{{ id }}" class="section hero {{ page.header.hero_classes }} {{ page.header.background.parallax ? 'parallax' : '' }}"
-         style="background:
-            {% if hero_image %}url({{ hero_image.url }}) {{ hero_position }}% bottom/{{ hero_size }} no-repeat{% endif %}
-            {% if hero_background_image %}, url({{ hero_background_image.url }}) repeat{% endif %}
-            {% if hero_background_color %} {{ hero_background_color }}{% endif %};">
+<style scoped>
+.hero-scoped {
+    background:
+        {% if hero_image %}url({{ hero_image.url }}) {{ hero_position }}% bottom/{{ hero_size }} no-repeat{% endif %}
+        {% if hero_background_image %}, url({{ hero_background_image.url }}) repeat{% endif %}
+        {% if hero_background_color %} {{ hero_background_color }}{% endif %};
+    height: {{ hero_height }}px;
+}
+
+@media (max-height: 1000px), (max-width: 700px) {
+    .hero-scoped {
+        background:
+            {% if hero_image_small %}url({{ hero_image_small.url }}) {{ hero_position }}% bottom/{{ hero_size }} no-repeat{% endif %}
+            {% if hero_background_image_small %}, url({{ hero_background_image_small.url }}) repeat{% endif %}
+            {% if hero_background_color %} {{ hero_background_color }}{% endif %};
+        height: {{ hero_height_small }}px;
+    }
+}
+</style>
+<section id="{{ id }}" class="section hero hero-scoped">
     <div class="image-overlay"></div>
     <section class="container {{ grid_size }}" style="text-align: {{ page.header.hero_align|default('center') }}">
         {{ content }}