diff --git a/src/components/theme/Header/HomepageSlider.jsx b/src/components/theme/Header/HomepageSlider.jsx index 90bd65d..9206283 100644 --- a/src/components/theme/Header/HomepageSlider.jsx +++ b/src/components/theme/Header/HomepageSlider.jsx @@ -113,19 +113,14 @@ class HomepageSlider extends Component { }; createDescription(children) { - const items = children.map( (child) => ( + const items = children.map((child) => (
{child.text}

- {child.linkText} + {child.linkText}
- )); - return ( -
- {items} -
- ); - }; + return
{items}
; + } getSlides(items) { const slidesArr = items ? items : this.props.items; @@ -137,7 +132,28 @@ class HomepageSlider extends Component { original: item.image, thumbnail: item.image, title: item.title, - description: this.createDescription(item.children || [{text: "Monocultures harbour less biodiversity than mixed forests.", link:"google.com", linkText: "Learn more about forest management"}, {text: "Natural disturbances like droughts and pests and storms decrease forest health", link: "google.com", linkText:"Learn more about forest health and resilience."}]) + description: this.createDescription( + item.children || [ + { + text: + 'Monocultures harbour less biodiversity than mixed forests.', + link: 'google.com', + linkText: 'Learn more about forest management', + }, + { + text: + 'Monocultures harbour less biodiversity than mixed forests.', + link: 'google.com', + linkText: 'Learn more about forest management', + }, + { + text: + 'Natural disturbances like droughts and pests and storms decrease forest health', + link: 'google.com', + linkText: 'Learn more about forest health and resilience.', + }, + ], + ), }; })) || []; @@ -172,42 +188,49 @@ class HomepageSlider extends Component { // if (!this.state.slides.length) return ''; const slides = this.getSlides(this.props.items); return ( -
- {/* (this.slider1 = slider)} - {...settings} - > - {this.state.slides} - - (this.slider2 = slider)} - slidesToShow={3} - slidesToScroll={1} - swipeToSlide={true} - focusOnSelect={true} - > - {this.state.slides} - */} - {/* */} - +
+
+ {/* (this.slider1 = slider)} + {...settings} + > + {this.state.slides} + + (this.slider2 = slider)} + slidesToShow={3} + slidesToScroll={1} + swipeToSlide={true} + focusOnSelect={true} + > + {this.state.slides} + */} + {/* */} + +
+
+ Some additional informative text over here to fill up the spaceeeee.{' '} +

+ Find out more! +
); } diff --git a/theme/addons/volto-addons/imagecards/carousel.overrides b/theme/addons/volto-addons/imagecards/carousel.overrides index dda3974..62402ce 100644 --- a/theme/addons/volto-addons/imagecards/carousel.overrides +++ b/theme/addons/volto-addons/imagecards/carousel.overrides @@ -68,31 +68,67 @@ .slider-text { display: flex; justify-content: space-around; + + @media (max-width: 1300px) { + flex-direction: column; + } +} + +.extra-header { + position: relative; + top: -1px; + height: 70px; + padding: 15px; + padding-left: 50px; + margin-bottom: 15px; + background-color: white; + border-radius: 2px; + -webkit-box-shadow: 0px 1px 6px 0 #c7d5d8; + -moz-box-shadow: 0px 1px 6px 0 #c7d5d8; + box-shadow: 0px 1px 6px 0 #c7d5d8; + color: #7b1; + font-weight: bold; + text-transform: uppercase; } .slider-child { - width: 345px; + width: 320px; + span { position: relative; - top: 30px; - font-weight: normal; + top: 20px; + font-weight: bold; + + @media (max-width: 1300px) { + display: none; + } + } + + @media (max-width: 1300px) { + width: auto; + margin: 0 auto; } a { - font-weight: bold; - color: white; - border-style: solid; - border-color: white; - position:relative; - top: 100px; - padding: 10px; display: block; - height:80px; + width: 320px; + height: 70px; + + padding: 10px; + background-color: #588613; + color: white; + font-weight: bold; + + @media (min-width: 1300px) { + position: absolute; + top: 250px; + } } + a:hover { - border-color: #006b96; + background-color: #49730a; + color: white; } - } .slide-overlay { @@ -216,10 +252,10 @@ position: absolute; // bottom : 40%; top: 20%; - text-align: center; - width: 100%; left: unset; + width: 100%; color: white; + text-align: center; @media (max-width: 700px) { margin-left: 1rem; diff --git a/theme/site/collections/menu.overrides b/theme/site/collections/menu.overrides index c2cec53..cccde7e 100644 --- a/theme/site/collections/menu.overrides +++ b/theme/site/collections/menu.overrides @@ -317,7 +317,6 @@ } .navigation .menu > .dropdown.item > .menu { - left: 50%; // box-shadow : 0px 0px 25px 0px rgba(0, 0, 0, 0.2); left: 50%; @@ -403,7 +402,6 @@ } .sticky-inner-wrapper { - z-index: 10; background: @stickyMenuColor; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); diff --git a/theme/site/globals/site.overrides b/theme/site/globals/site.overrides index ba311f1..f6ae6db 100644 --- a/theme/site/globals/site.overrides +++ b/theme/site/globals/site.overrides @@ -123,8 +123,6 @@ body.has-toolbar { height: 600px !important; } - - .lead-mobile-nav { position: absolute; z-index: 1; @@ -158,13 +156,13 @@ body.has-toolbar { text-decoration: none; .lead-nav-icon { - fill: #554535 !important; position: absolute; - right: 10px; top: 6px; + right: 10px; + fill: #554535 !important; } - .lead-nav-icon:hover{ + .lead-nav-icon:hover { fill: #cd4200 !important; } } @@ -192,7 +190,6 @@ body.has-toolbar { } .lead-navigation-item { - padding: 12px 20px; border: 2px solid #f7f7f5; @@ -214,7 +211,6 @@ body.has-toolbar { } } - .lead-navigation-item:hover { background: white; @@ -1048,7 +1044,6 @@ ul.ui.list li:before, } .unlist { - padding-left: 0; list-style-type: none; @@ -1312,10 +1307,10 @@ h5 { .slide-body { position: absolute; top: 20%; - text-align: center; left: unset; width: 100%; color: #fff; + text-align: center; @media (max-width: 700px) { margin-left: 1rem; @@ -1661,7 +1656,6 @@ span.float-right { .forest-comparation { .land-data-wrapper { - margin-bottom: 0; background-color: @tileBackgroundColor;