Skip to content

MSF / msf-climate-hub

Go to a project
Toggle navigation
Toggle navigation pinning
7b99a648 by Jeff Balicki
Options

desktop -v2 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 4aee2f3f
Expand all
Inline Side-by-side
Showing 30 changed files with 459 additions and 249 deletions
...@@ -56,16 +56,13 @@ $carousel_style = get_field('carousel_style'); ...@@ -56,16 +56,13 @@ $carousel_style = get_field('carousel_style');
56 } 56 }
57 ?> 57 ?>
58 <img src="<?php echo $image; ?>" alt="<?php echo $img_alt ?>" loading="eager"> 58 <img src="<?php echo $image; ?>" alt="<?php echo $img_alt ?>" loading="eager">
59 <div class="promo-text"><a class="understrap-read-more-link" href="<?php echo get_permalink($page->ID);?>"><?php the_title($page->ID); ?></a></div> 59 </div>
60 </div> 60 <div class="promo-text"><a class="understrap-read-more-link" href="<?php echo get_permalink($page->ID);?>"><?php echo get_the_title($page->ID); ?></a></div>
61
62 </div> 61 </div>
63 </div> 62 </div>
64 </div> 63 </div>
65 <?php endwhile; ?> 64 <?php endwhile; ?>
66 </div> 65 </div>
67 <div class="swiper-pagination"></div>
68
69 <div class="swiper-button-prev" data-id="<?= $id ?>"></div> 66 <div class="swiper-button-prev" data-id="<?= $id ?>"></div>
70 <div class="swiper-button-next" data-id="<?= $id ?>"></div> 67 <div class="swiper-button-next" data-id="<?= $id ?>"></div>
71 </div> 68 </div>
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
...@@ -34,13 +34,13 @@ if ( is_front_page() ) { ...@@ -34,13 +34,13 @@ if ( is_front_page() ) {
34 <article <?php post_class(); ?> id="post-<?php the_ID(); ?>"> 34 <article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
35 35
36 <?php if ( has_post_thumbnail() ) { ?> 36 <?php if ( has_post_thumbnail() ) { ?>
37 <div class='cap-wrap home-header' style=" background-image: url('<?php echo $url;?> ')"> 37 <div class='cap-wrap header' style=" background-image: url('<?php echo $url;?> ')">
38 38
39 <div class="content-container"> 39 <div class="content-container">
40 <div class="container" style="height: 100%;"> 40 <div class="container" style="height: 100%;">
41 <div class="col-md-12 fx-style"> 41 <div class="col-md-12 fx-style">
42 <div class="search-box"><?php the_field('search_box_content'); ?><div class="search-button">Search</div></div> 42 <div class="search-box"><div id="search-box-content"><?php the_field('page_search_block', 'option'); ?></div> <div class="search-button">Search</div></div>
43 <?php the_field('header_text'); ?> 43 <div class="header_text"> <?php the_field('header_text'); ?> </div>
44 </div> 44 </div>
45 </div> 45 </div>
46 </div> 46 </div>
...@@ -66,7 +66,7 @@ if ( is_front_page() ) { ...@@ -66,7 +66,7 @@ if ( is_front_page() ) {
66 <div class="col-md-12 content-area" id="primary"> 66 <div class="col-md-12 content-area" id="primary">
67 67
68 <main class="site-main" id="main" role="main"> 68 <main class="site-main" id="main" role="main">
69 69 <div class="header_text mobile"> <?php the_field('header_text'); ?> </div>
70 <?php 70 <?php
71 while ( have_posts() ) { 71 while ( have_posts() ) {
72 the_post(); 72 the_post();
......
...@@ -27,6 +27,7 @@ $container = get_theme_mod( 'understrap_container_type' ); ...@@ -27,6 +27,7 @@ $container = get_theme_mod( 'understrap_container_type' );
27 <a rel="home" class="site-title" href="<?php echo esc_url( home_url( '/' ) ); ?>" itemprop="url"> 27 <a rel="home" class="site-title" href="<?php echo esc_url( home_url( '/' ) ); ?>" itemprop="url">
28 <div class="">MSF CLIMATE HUB</div> 28 <div class="">MSF CLIMATE HUB</div>
29 </a> 29 </a>
30 <?= do_shortcode('[wpml_language_selector_widget link_current=0]') ?>
30 </div> 31 </div>
31 <!-- <button 32 <!-- <button
32 class="navbar-toggler" 33 class="navbar-toggler"
...@@ -57,5 +58,5 @@ $container = get_theme_mod( 'understrap_container_type' ); ...@@ -57,5 +58,5 @@ $container = get_theme_mod( 'understrap_container_type' );
57 ?> 58 ?>
58 59
59 </div><!-- .container(-fluid) --> 60 </div><!-- .container(-fluid) -->
60 <?= do_shortcode('[wpml_language_selector_widget link_current=0]') ?> 61
61 </nav><!-- #main-nav --> 62 </nav><!-- #main-nav -->
......
...@@ -20663,97 +20663,28 @@ ...@@ -20663,97 +20663,28 @@
20663 $$1.fn.DataTable[prop] = val; 20663 $$1.fn.DataTable[prop] = val;
20664 }); 20664 });
20665 20665
20666 var addstuff = '<div class="list-wrapper2 list-wrapper"><button type="button" class="back-one-level"><span>Back</span></button><div class="sub-menu-wrapper"></div></div><div class="list-wrapper3 list-wrapper"><button type="button" class="back-one-level"><span>Back</span></button><div class="sub-menu-wrapper"></div></div>';
20667 const pageHeader = document.querySelector("#main-nav");
20668 const toggleMenu = pageHeader.querySelector(".mega-toggle-block");
20669 pageHeader.querySelector(".mega-menu-toggle.mega-menu-open");
20670 const menuWrapper = pageHeader.querySelector("#mega-menu-primary");
20671 menuWrapper.innerHTML = menuWrapper.innerHTML + addstuff;
20672 const level1Links = pageHeader.querySelectorAll("li.mega-menu-item-has-children > a.mega-menu-link");
20673 const listWrapper2 = pageHeader.querySelector(".list-wrapper2");
20674 const listWrapper3 = pageHeader.querySelector(".list-wrapper3");
20675 const subMenuWrapper2 = listWrapper2.querySelector(".sub-menu-wrapper");
20676 const subMenuWrapper3 = listWrapper3.querySelector(".sub-menu-wrapper");
20677 const backOneLevelBtns = pageHeader.querySelectorAll(".back-one-level");
20678 const isVisibleClass = "is-visible";
20679 const isActiveClass = "is-active";
20680 const isBtVisible = "is-bt-active";
20681 for (const level1Link of level1Links) {
20682 level1Link.addEventListener("click", function (e) {
20683 const siblingList = level1Link.nextElementSibling;
20684 console.log('clicked level1Links');
20685 if (siblingList) {
20686 e.preventDefault();
20687 this.classList.add(isActiveClass);
20688 const cloneSiblingList = siblingList.cloneNode(true);
20689 subMenuWrapper2.innerHTML = "";
20690 subMenuWrapper2.append(cloneSiblingList);
20691 listWrapper2.classList.add(isVisibleClass);
20692 setTimeout(() => {
20693 backOneLevelBtns[0].classList.add(isBtVisible);
20694 }, 1000);
20695 }
20696 });
20697 }
20698 listWrapper2.addEventListener("click", function (e) {
20699 const target = e.target;
20700 const parent = target.closest("a");
20701 if (target.tagName.toLowerCase() === "a" && target.nextElementSibling) {
20702 const siblingList = target.nextElementSibling;
20703 e.preventDefault();
20704 target.classList.add(isActiveClass);
20705 const cloneSiblingList = siblingList.cloneNode(true);
20706 subMenuWrapper3.innerHTML = "";
20707 subMenuWrapper3.append(cloneSiblingList);
20708 listWrapper3.classList.add(isVisibleClass);
20709 setTimeout(() => {
20710 backOneLevelBtns[1].classList.add(isBtVisible);
20711 }, 1000);
20712 } else if (parent.tagName.toLowerCase() === "a" && parent.nextElementSibling) {
20713 const siblingList = parent.nextElementSibling;
20714 e.preventDefault();
20715 parent.classList.add(isActiveClass);
20716 const cloneSiblingList = siblingList.cloneNode(true);
20717 subMenuWrapper3.innerHTML = "";
20718 subMenuWrapper3.append(cloneSiblingList);
20719 listWrapper3.classList.add(isVisibleClass);
20720 setTimeout(() => {
20721 backOneLevelBtns[1].classList.add(isBtVisible);
20722 }, 1000);
20723 }
20724 });
20725 for (const backOneLevelBtn of backOneLevelBtns) {
20726 backOneLevelBtn.addEventListener("click", function () {
20727 console.log(this);
20728 this.style.display = "";
20729 const parent = this.closest(".list-wrapper");
20730 parent.classList.remove(isVisibleClass);
20731 this.classList.remove(isBtVisible);
20732 setTimeout(() => {
20733 parent.scrollTo({
20734 top: 0,
20735 behavior: 'smooth'
20736 });
20737 }, 500);
20738 });
20739 toggleMenu.addEventListener("click", function () {
20740 setTimeout(() => {
20741 console.log('clicked toggleMenu');
20742 listWrapper2.scrollTo({
20743 top: 0,
20744 behavior: 'smooth'
20745 });
20746 listWrapper3.scrollTo({
20747 top: 0,
20748 behavior: 'smooth'
20749 });
20750 }, 500);
20751 });
20752 }
20753
20754 // Search Filter 20666 // Search Filter
20755 var Search = function ($) { 20667 var Search = function ($) {
20756 function init() { 20668 function init() {
20669 $('.search-box').css('margin-right', $('#main-nav .container').css('margin-right'));
20670 $('.search-box').css('opacity', '1');
20671 $('.badge').css('margin-right', $('#main-nav .container').css('margin-right'));
20672 $('#pojo-a11y-toolbar').css('margin-right', $('#main-nav .container').css('margin-right'));
20673 $('.badge').css('opacity', '1');
20674 setTimeout(() => {
20675 $('.badge').css('transition', '4s ease-in-out');
20676 }, "100");
20677 $(window).on('resize', function () {
20678 $('.search-box').css('transition', '0s ease-in-out');
20679 $('.search-box').css('margin-right', $('#main-nav .container').css('margin-right'));
20680 $('#pojo-a11y-toolbar').css('margin-right', $('#main-nav .container').css('margin-right'));
20681 $('.badge').css('transition', '0s ease-in-out');
20682 $('.badge').css('margin-right', $('#main-nav .container').css('margin-right'));
20683 setTimeout(() => {
20684 $('.badge').css('transition', '4s ease-in-out');
20685 $('.search-box').css('transition', 'all 0.5s ease-in-out 0s');
20686 }, "100");
20687 });
20757 $(".searchandfilter ul li:contains('hidden')").hide(); 20688 $(".searchandfilter ul li:contains('hidden')").hide();
20758 $('<li class="sf-field-reset"><input type="submit" class="search-filter-reset-custom" value="CLEAR ALL" ></li>').appendTo(jQuery('#advance-search-modal .searchandfilter ul:first-child ')); 20689 $('<li class="sf-field-reset"><input type="submit" class="search-filter-reset-custom" value="CLEAR ALL" ></li>').appendTo(jQuery('#advance-search-modal .searchandfilter ul:first-child '));
20759 $(document).on("click", ".search-filter-reset-custom", function (e) { 20690 $(document).on("click", ".search-filter-reset-custom", function (e) {
...@@ -26198,7 +26129,7 @@ ...@@ -26198,7 +26129,7 @@
26198 var PerView = 3; 26129 var PerView = 3;
26199 var offset = 0; 26130 var offset = 0;
26200 var space = 20; 26131 var space = 20;
26201 var SlidesPerGroup = 1; 26132 var SlidesPerGroup = 3;
26202 var _id = jQuery(this).parent().attr('id'); 26133 var _id = jQuery(this).parent().attr('id');
26203 if ($(window).width() < 600) { 26134 if ($(window).width() < 600) {
26204 offset = 0; 26135 offset = 0;
...@@ -26214,7 +26145,7 @@ ...@@ -26214,7 +26145,7 @@
26214 slidesOffsetBefore: offset, 26145 slidesOffsetBefore: offset,
26215 spaceBetween: space, 26146 spaceBetween: space,
26216 slidesPerGroup: SlidesPerGroup, 26147 slidesPerGroup: SlidesPerGroup,
26217 centeredSlides: true, 26148 // centeredSlides: true,
26218 loop: false, 26149 loop: false,
26219 lazy: true, 26150 lazy: true,
26220 pagination: { 26151 pagination: {
...@@ -26237,10 +26168,12 @@ ...@@ -26237,10 +26168,12 @@
26237 }; 26168 };
26238 new Swiper(this, swiper_params); 26169 new Swiper(this, swiper_params);
26239 }); 26170 });
26240 $('.carousel ').css('margin-left', "-" + $('#content').css('margin-left')); 26171 // $('.carousel ').css('margin-left',"-"+$('#content').css('margin-left'));
26241 $(window).on('resize', function () { 26172
26242 $('.carousel ').css('margin-left', "-" + $('#content').css('margin-left')); 26173 // $(window).on('resize', function(){
26243 }); 26174 // $('.carousel ').css('margin-left',"-"+$('#content').css('margin-left'));
26175
26176 // });
26244 }); 26177 });
26245 26178
26246 var mobile_article_list = []; 26179 var mobile_article_list = [];
...@@ -26249,7 +26182,7 @@ ...@@ -26249,7 +26182,7 @@
26249 if (size == 2) { 26182 if (size == 2) {
26250 li += "<li class='article-card lg'><a href='" + post_obj['href'] + "'>"; 26183 li += "<li class='article-card lg'><a href='" + post_obj['href'] + "'>";
26251 if (post_obj['img_src']) { 26184 if (post_obj['img_src']) {
26252 li += "<div class='scale-wrapper'><img src='" + post_obj['img_src'] + "' /></div>"; 26185 li += "<div class='image-large'><div class='scale-wrapper'><img src='" + post_obj['img_src'] + "' /></div><div class='overlay'></div></div>";
26253 } 26186 }
26254 if (post_obj['title'].length > 100) { 26187 if (post_obj['title'].length > 100) {
26255 li += "<div class='content reduce'><p>" + post_obj['title'] + "</p><span class='anchor-dots'></span></div>"; 26188 li += "<div class='content reduce'><p>" + post_obj['title'] + "</p><span class='anchor-dots'></span></div>";
...@@ -26263,7 +26196,7 @@ ...@@ -26263,7 +26196,7 @@
26263 } else { 26196 } else {
26264 li += "<li class='article-card sm'><a href='" + post_obj['href'] + "'>"; 26197 li += "<li class='article-card sm'><a href='" + post_obj['href'] + "'>";
26265 if (post_obj['img_src']) { 26198 if (post_obj['img_src']) {
26266 li += "<div class='image'><div class='scale-wrapper'><img src='" + post_obj['img_src'] + "' /></div></div>"; 26199 li += "<div class='image'><div class='scale-wrapper'><img src='" + post_obj['img_src'] + "' /></div><div class='overlay'></div></div>";
26267 } 26200 }
26268 if (post_obj['title'].length > 100) { 26201 if (post_obj['title'].length > 100) {
26269 li += "<div class='content reduce'><p>" + post_obj['title'] + "</p>"; 26202 li += "<div class='content reduce'><p>" + post_obj['title'] + "</p>";
...@@ -26409,7 +26342,7 @@ ...@@ -26409,7 +26342,7 @@
26409 if ($(that).parents('.related').find('.related-block.hidden[data-related-segment="' + (segment + 1) + '"]').length == 0) { 26342 if ($(that).parents('.related').find('.related-block.hidden[data-related-segment="' + (segment + 1) + '"]').length == 0) {
26410 $(that).remove(); 26343 $(that).remove();
26411 } 26344 }
26412 }, 500); 26345 }, 100);
26413 }); 26346 });
26414 $('.news-and-stories-block').each(function () { 26347 $('.news-and-stories-block').each(function () {
26415 var no_load = $(this).data('no-load'), 26348 var no_load = $(this).data('no-load'),
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
7 7
8 // Exit if accessed directly. 8 // Exit if accessed directly.
9 defined( 'ABSPATH' ) || exit; 9 defined( 'ABSPATH' ) || exit;
10 $badge = get_field('badge'); 10
11 11
12 ?> 12 ?>
13 13
...@@ -20,11 +20,7 @@ $badge = get_field('badge'); ...@@ -20,11 +20,7 @@ $badge = get_field('badge');
20 20
21 21
22 <div class="entry-content"> 22 <div class="entry-content">
23 <?php if($badge){ 23
24 $badge_content = get_field('badge_content');
25 echo "<div class='badge'><span>".$badge_content['badge_label']."</span><div class='badge_content'><p>".$badge_content['badge_text']."</p></div></div>";
26
27 }?>
28 24
29 <?php 25 <?php
30 the_content(); 26 the_content();
......
...@@ -21,6 +21,7 @@ $post_thumbnail_id = get_post_thumbnail_id($post->ID); ...@@ -21,6 +21,7 @@ $post_thumbnail_id = get_post_thumbnail_id($post->ID);
21 $thumbnail_image = get_posts(array('p' => $post_thumbnail_id, 'post_type' => 'attachment')); 21 $thumbnail_image = get_posts(array('p' => $post_thumbnail_id, 'post_type' => 'attachment'));
22 $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'full' ); 22 $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'full' );
23 $subhead = get_field('subhead'); 23 $subhead = get_field('subhead');
24 //$badge = get_field('badge');
24 25
25 if ($thumbnail_image && isset($thumbnail_image[0])) { 26 if ($thumbnail_image && isset($thumbnail_image[0])) {
26 $img_description = $thumbnail_image[0]->post_content; 27 $img_description = $thumbnail_image[0]->post_content;
...@@ -36,11 +37,25 @@ if ($thumbnail_image && isset($thumbnail_image[0])) { ...@@ -36,11 +37,25 @@ if ($thumbnail_image && isset($thumbnail_image[0])) {
36 37
37 ?> 38 ?>
38 <?php if ( has_post_thumbnail() ) { ?> 39 <?php if ( has_post_thumbnail() ) { ?>
39 <header class="entry-header page" style=" background-image: url('<?php echo $url;?> ')"> 40 <header class="entry-header header page" style=" background-image: url('<?php echo $url;?> ')">
40 <div class="container" tabindex="-1" style=""> 41 <div class="content-container">
41 <div class="search-box"><div id="search-box-content"><?php the_field('page_search_block', 'option'); ?></div> <div class="search-button">Search</div></div> 42 <div class="container" style="height: 100%;">
42 </div> 43 <div class="col-md-12 fx-style">
44 <div class="search-box"><div id="search-box-content"><?php the_field('page_search_block', 'option'); ?></div> <div class="search-button">Search</div></div>
45 <div class="header_text">
46 <div class="breadcrumb"><?php get_breadcrumb(); ?></div>
47 <?php the_field('header_text'); ?>
48 </div>
49 <?php if($badge){
50 $badge_content = get_field('badge_content');
51 echo "<div class='badge'><span>".$badge_content['badge_label']."</span><div class='badge_content'><p>".$badge_content['badge_text']."</p></div></div>";
52 }?>
53 </div>
54
55 </div>
56 </div>
43 <div class='side-caption header-caption <?= (empty($copy) && empty($cap)) ? "hide" : "" ?>'> 57 <div class='side-caption header-caption <?= (empty($copy) && empty($cap)) ? "hide" : "" ?>'>
58
44 <a class='copy-link' aria-label="Header Slide Caption" href='#' ></a> 59 <a class='copy-link' aria-label="Header Slide Caption" href='#' ></a>
45 <span class='image-side-caption'> 60 <span class='image-side-caption'>
46 <span class='cap'><?= $photo_caption ?></span> 61 <span class='cap'><?= $photo_caption ?></span>
...@@ -49,13 +64,15 @@ if ($thumbnail_image && isset($thumbnail_image[0])) { ...@@ -49,13 +64,15 @@ if ($thumbnail_image && isset($thumbnail_image[0])) {
49 </div> 64 </div>
50 </header><!-- .entry-header --> 65 </header><!-- .entry-header -->
51 <?php } ?> 66 <?php } ?>
52 <div class="wrapper" id="page-wrapper"> 67 <div class="wrapper" id="full-width-page-wrapper">
53 68
54 <div class="<?php echo esc_attr( $container ); ?>" id="content" tabindex="-1"> 69 <div class="<?php echo esc_attr( $container ); ?>" id="content">
55 70
56 <main class="col-sm-12 col-md-12 content-area site-main site-main" id="main"> 71 <div class="col-md-12 content-area" id="primary">
57 72
58 <div class="breadcrumb"><?php get_breadcrumb(); ?></div> 73 <main class="site-main" id="main" role="main">
74
75 <div class="header_text mobile"><div class="breadcrumb"><?php get_breadcrumb(); ?></div> <?php the_field('header_text'); ?> </div>
59 76
60 <?php 77 <?php
61 while ( have_posts() ) { 78 while ( have_posts() ) {
...@@ -65,11 +82,13 @@ if ($thumbnail_image && isset($thumbnail_image[0])) { ...@@ -65,11 +82,13 @@ if ($thumbnail_image && isset($thumbnail_image[0])) {
65 } 82 }
66 ?> 83 ?>
67 84
68 </main><!-- #main --> 85 </main><!-- #main -->
86
87 </div><!-- #primary -->
69 88
70 </div><!-- #content --> 89 </div><!-- #content -->
71 90
72 </div><!-- #page-wrapper --> 91 </div><!-- #full-width-page-wrapper -->
73 92
74 <?php 93 <?php
75 get_footer(); 94 get_footer();
......
...@@ -23,7 +23,7 @@ jQuery(document).ready(function($) { ...@@ -23,7 +23,7 @@ jQuery(document).ready(function($) {
23 var PerView = 3 23 var PerView = 3
24 var offset =0; 24 var offset =0;
25 var space = 20; 25 var space = 20;
26 var SlidesPerGroup= 1; 26 var SlidesPerGroup= 3;
27 27
28 var _id = jQuery(this).parent().attr('id'); 28 var _id = jQuery(this).parent().attr('id');
29 29
...@@ -46,7 +46,7 @@ jQuery(document).ready(function($) { ...@@ -46,7 +46,7 @@ jQuery(document).ready(function($) {
46 slidesOffsetBefore: offset, 46 slidesOffsetBefore: offset,
47 spaceBetween: space, 47 spaceBetween: space,
48 slidesPerGroup: SlidesPerGroup , 48 slidesPerGroup: SlidesPerGroup ,
49 centeredSlides: true, 49 // centeredSlides: true,
50 loop: false, 50 loop: false,
51 lazy: true, 51 lazy: true,
52 pagination: { 52 pagination: {
...@@ -76,12 +76,12 @@ jQuery(document).ready(function($) { ...@@ -76,12 +76,12 @@ jQuery(document).ready(function($) {
76 76
77 77
78 }); 78 });
79 $('.carousel ').css('margin-left',"-"+$('#content').css('margin-left')); 79 // $('.carousel ').css('margin-left',"-"+$('#content').css('margin-left'));
80 80
81 $(window).on('resize', function(){ 81 // $(window).on('resize', function(){
82 $('.carousel ').css('margin-left',"-"+$('#content').css('margin-left')); 82 // $('.carousel ').css('margin-left',"-"+$('#content').css('margin-left'));
83 83
84 }); 84 // });
85 85
86 86
87 }); 87 });
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -7,7 +7,7 @@ function postItem(post_obj, size, sides, side_index, side_alternate, labels) { ...@@ -7,7 +7,7 @@ function postItem(post_obj, size, sides, side_index, side_alternate, labels) {
7 if(size == 2) { 7 if(size == 2) {
8 li += "<li class='article-card lg'><a href='"+post_obj['href']+"'>"; 8 li += "<li class='article-card lg'><a href='"+post_obj['href']+"'>";
9 if(post_obj['img_src']) { 9 if(post_obj['img_src']) {
10 li += "<div class='scale-wrapper'><img src='"+post_obj['img_src']+"' /></div>"; 10 li += "<div class='image-large'><div class='scale-wrapper'><img src='"+post_obj['img_src']+"' /></div><div class='overlay'></div></div>";
11 } 11 }
12 if(post_obj['title'].length > 100) { 12 if(post_obj['title'].length > 100) {
13 li += "<div class='content reduce'><p>"+post_obj['title']+"</p><span class='anchor-dots'></span></div>"; 13 li += "<div class='content reduce'><p>"+post_obj['title']+"</p><span class='anchor-dots'></span></div>";
...@@ -21,7 +21,7 @@ function postItem(post_obj, size, sides, side_index, side_alternate, labels) { ...@@ -21,7 +21,7 @@ function postItem(post_obj, size, sides, side_index, side_alternate, labels) {
21 } else { 21 } else {
22 li += "<li class='article-card sm'><a href='"+post_obj['href']+"'>"; 22 li += "<li class='article-card sm'><a href='"+post_obj['href']+"'>";
23 if(post_obj['img_src']) { 23 if(post_obj['img_src']) {
24 li += "<div class='image'><div class='scale-wrapper'><img src='"+post_obj['img_src']+"' /></div></div>"; 24 li += "<div class='image'><div class='scale-wrapper'><img src='"+post_obj['img_src']+"' /></div><div class='overlay'></div></div>";
25 } 25 }
26 if(post_obj['title'].length > 100) { 26 if(post_obj['title'].length > 100) {
27 li += "<div class='content reduce'><p>"+post_obj['title']+"</p>"; 27 li += "<div class='content reduce'><p>"+post_obj['title']+"</p>";
...@@ -194,7 +194,7 @@ jQuery(function($) { ...@@ -194,7 +194,7 @@ jQuery(function($) {
194 if($(that).parents('.related').find('.related-block.hidden[data-related-segment="'+(segment+1)+'"]').length == 0) { 194 if($(that).parents('.related').find('.related-block.hidden[data-related-segment="'+(segment+1)+'"]').length == 0) {
195 $(that).remove(); 195 $(that).remove();
196 } 196 }
197 }, 500); 197 }, 100);
198 198
199 }); 199 });
200 200
......
...@@ -7,6 +7,29 @@ var Search = (function($) { ...@@ -7,6 +7,29 @@ var Search = (function($) {
7 7
8 function init() { 8 function init() {
9 9
10 $('.search-box').css('margin-right', $('#main-nav .container').css('margin-right'));
11 $('.search-box').css('opacity', '1');
12
13 $('.badge').css('margin-right', $('#main-nav .container').css('margin-right'));
14 $('#pojo-a11y-toolbar').css('margin-right', $('#main-nav .container').css('margin-right'));
15
16 $('.badge').css('opacity', '1');
17 setTimeout(() => {
18 $('.badge').css('transition', '4s ease-in-out');
19 }, "100");
20
21 $(window).on('resize', function(){
22 $('.search-box').css('transition', '0s ease-in-out');
23 $('.search-box').css('margin-right', $('#main-nav .container').css('margin-right'));
24 $('#pojo-a11y-toolbar').css('margin-right', $('#main-nav .container').css('margin-right'));
25 $('.badge').css('transition', '0s ease-in-out');
26 $('.badge').css('margin-right', $('#main-nav .container').css('margin-right'));
27 setTimeout(() => {
28 $('.badge').css('transition', '4s ease-in-out');
29 $('.search-box').css('transition', 'all 0.5s ease-in-out 0s');
30 }, "100");
31 });
32
10 $(".searchandfilter ul li:contains('hidden')").hide(); 33 $(".searchandfilter ul li:contains('hidden')").hide();
11 $('<li class="sf-field-reset"><input type="submit" class="search-filter-reset-custom" value="CLEAR ALL" ></li>').appendTo( jQuery( '#advance-search-modal .searchandfilter ul:first-child ' ) ); 34 $('<li class="sf-field-reset"><input type="submit" class="search-filter-reset-custom" value="CLEAR ALL" ></li>').appendTo( jQuery( '#advance-search-modal .searchandfilter ul:first-child ' ) );
12 35
......
...@@ -4,7 +4,7 @@ import LazyLoad from "vanilla-lazyload"; ...@@ -4,7 +4,7 @@ import LazyLoad from "vanilla-lazyload";
4 import DataTable from 'datatables.net-dt'; 4 import DataTable from 'datatables.net-dt';
5 5
6 6
7 import "./_menu_mobile"; 7 //import "./_menu_mobile";
8 import "./_search"; 8 import "./_search";
9 import "./_header_menu"; 9 import "./_header_menu";
10 import "./_side_menu"; 10 import "./_side_menu";
......
1 .call-out-block{ 1 .call-out-block{
2 background-size: cover; 2 background-size: cover;
3 min-height: 18.75rem;
4 position: relative; 3 position: relative;
5 overflow: hidden; 4 overflow: hidden;
6 text-align: center; 5 text-align: center;
...@@ -10,7 +9,6 @@ ...@@ -10,7 +9,6 @@
10 color:#fff; 9 color:#fff;
11 margin-left:-50%; 10 margin-left:-50%;
12 margin-right:-50%; 11 margin-right:-50%;
13 margin-bottom: -1.5625rem;
14 margin-top: 1.5625rem; 12 margin-top: 1.5625rem;
15 padding-left:50%; 13 padding-left:50%;
16 padding-right:50%; 14 padding-right:50%;
...@@ -20,8 +18,10 @@ ...@@ -20,8 +18,10 @@
20 min-height: 15.625rem; 18 min-height: 15.625rem;
21 } 19 }
22 h2{ 20 h2{
21 padding-top: 32px;
23 @media screen and (max-width: 48rem) { 22 @media screen and (max-width: 48rem) {
24 font-size: 1.5rem; 23 font-size: 22px;
24 line-height: 25px;
25 } 25 }
26 26
27 } 27 }
...@@ -47,11 +47,11 @@ ...@@ -47,11 +47,11 @@
47 background-color: #EE0000; 47 background-color: #EE0000;
48 color: #fff; 48 color: #fff;
49 border: none; 49 border: none;
50 font-size: 1.1875rem; 50 font-size: 14px;
51 font-weight: 500; 51 font-weight: 500;
52 margin: 0.625rem 0 0rem 0; 52 margin: 24px 0 50px 0;
53 padding: 0.9375rem 3.75rem; 53 padding: 8px 46px;
54 line-height: 1.625rem; 54 line-height: 17px;
55 text-decoration: none; 55 text-decoration: none;
56 text-transform: uppercase; 56 text-transform: uppercase;
57 display: inline-block; 57 display: inline-block;
...@@ -59,8 +59,8 @@ ...@@ -59,8 +59,8 @@
59 border-radius: 2.5rem !important; 59 border-radius: 2.5rem !important;
60 font-weight: bold; 60 font-weight: bold;
61 @media screen and (max-width: 48rem) { 61 @media screen and (max-width: 48rem) {
62 font-size: 1rem; 62 font-size: 16px;
63 padding: 0.9375rem 1.875rem; 63
64 } 64 }
65 } 65 }
66 66
......
...@@ -18,10 +18,9 @@ ...@@ -18,10 +18,9 @@
18 // carousel css 18 // carousel css
19 .carousel:not(.is-admin) { 19 .carousel:not(.is-admin) {
20 background-color: transparent !important; 20 background-color: transparent !important;
21 left: -1.25rem; 21 left: -5%;
22 width: 100vw; 22 width: 110%;
23 margin-top: 1.875rem; 23 margin-top:24px;
24 margin-bottom: 1.875rem;
25 padding: 0rem 3.125rem; 24 padding: 0rem 3.125rem;
26 @media only screen and (max-width: 48.875rem) { 25 @media only screen and (max-width: 48.875rem) {
27 padding-right: 30px !important; 26 padding-right: 30px !important;
...@@ -36,21 +35,24 @@ ...@@ -36,21 +35,24 @@
36 display: flex; 35 display: flex;
37 justify-content: center; 36 justify-content: center;
38 align-items: center; 37 align-items: center;
39 max-width: 75rem; 38 //max-width: 75rem;
40 margin: 0 auto; 39 margin: 0 auto;
41 overflow: hidden; 40 overflow: hidden;
42 41
43 42
44 } 43 }
45 .carousel-content{ 44 .carousel-content{
46 padding: 0rem 3.125rem; 45 //padding: 0rem 3.125rem;
46 height: 260px;
47 @media only screen and (max-width: 48.875rem) { 47 @media only screen and (max-width: 48.875rem) {
48 padding: 0rem 0.625rem; 48 padding: 0rem 0.625rem;
49 } 49 }
50 } 50 }
51 .promo-image{ 51 .promo-image{
52 //width: 325px; 52 width: 340px;
53 height: 178px; 53 height: 186px;
54 overflow: hidden;
55 padding: 0px 4px;
54 @media only screen and (max-width: 48.875rem) { 56 @media only screen and (max-width: 48.875rem) {
55 width: 100%; 57 width: 100%;
56 height: auto; 58 height: auto;
...@@ -71,8 +73,8 @@ padding: 0rem 3.125rem; ...@@ -71,8 +73,8 @@ padding: 0rem 3.125rem;
71 text-align: left; 73 text-align: left;
72 } 74 }
73 .promo-text{ 75 .promo-text{
74 margin-left: 1.25rem; 76 margin-left: 0px;
75 margin-left: 1.25rem; 77 margin-top: 24px;
76 text-align: left; 78 text-align: left;
77 font-size: 1rem; 79 font-size: 1rem;
78 line-height: 1.5rem; 80 line-height: 1.5rem;
...@@ -87,7 +89,7 @@ padding: 0rem 3.125rem; ...@@ -87,7 +89,7 @@ padding: 0rem 3.125rem;
87 } 89 }
88 .understrap-read-more-link{ 90 .understrap-read-more-link{
89 font-weight: bold; 91 font-weight: bold;
90 text-transform: uppercase; 92 text-transform: capitalize;
91 text-decoration: none; 93 text-decoration: none;
92 94
93 } 95 }
...@@ -109,12 +111,13 @@ padding: 0rem 3.125rem; ...@@ -109,12 +111,13 @@ padding: 0rem 3.125rem;
109 111
110 .swiper-button-prev{ 112 .swiper-button-prev{
111 background-color: #EE0000; 113 background-color: #EE0000;
112
113 width:2.1875rem !important; 114 width:2.1875rem !important;
114 height:2.1875rem !important; 115 height:2.1875rem !important;
115 border: 0rem solid #EE0000; 116 border: 0rem solid #EE0000;
116 border-radius: 0rem 1.25rem 1.25rem 0rem; 117 border-radius: 1.25rem;
117 display: none; 118 display: none;
119 left: -15px !important;
120 top:calc(50% - 1rem) !important;
118 121
119 &:after{ 122 &:after{
120 content:"" !important; 123 content:"" !important;
...@@ -126,7 +129,7 @@ padding: 0rem 3.125rem; ...@@ -126,7 +129,7 @@ padding: 0rem 3.125rem;
126 display: inline-block; 129 display: inline-block;
127 position: absolute; 130 position: absolute;
128 top: 0.5rem; 131 top: 0.5rem;
129 left: 0.8125rem; 132 left: 11px;
130 } 133 }
131 134
132 } 135 }
...@@ -135,13 +138,14 @@ padding: 0rem 3.125rem; ...@@ -135,13 +138,14 @@ padding: 0rem 3.125rem;
135 background-color: #EE0000; 138 background-color: #EE0000;
136 139
137 right: 0rem !important; 140 right: 0rem !important;
141 top:calc(50% - 1rem) !important;
138 @media only screen and (max-width:25rem) { 142 @media only screen and (max-width:25rem) {
139 right: -0.625rem !important; 143 right: -0.625rem !important;
140 } 144 }
141 width:2.1875rem !important; 145 width:2.1875rem !important;
142 height:2.1875rem !important; 146 height:2.1875rem !important;
143 border: 0rem solid #EE0000; 147 border: 0rem solid #EE0000;
144 border-radius: 1.25rem 0rem 0rem 1.25rem; 148 border-radius: 1.25rem;
145 display: none; 149 display: none;
146 150
147 &:after{ 151 &:after{
......
...@@ -7,6 +7,8 @@ body{ ...@@ -7,6 +7,8 @@ body{
7 } 7 }
8 .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{ 8 .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
9 max-width: 1067px !important; 9 max-width: 1067px !important;
10 padding-right: 0px;
11 padding-left: 0px;
10 } 12 }
11 13
12 @import "mega_menu"; 14 @import "mega_menu";
...@@ -30,3 +32,4 @@ body{ ...@@ -30,3 +32,4 @@ body{
30 @import "text_size_increased"; 32 @import "text_size_increased";
31 @import "relevant_resources"; 33 @import "relevant_resources";
32 @import "post_list_load_more"; 34 @import "post_list_load_more";
35
......
...@@ -251,9 +251,9 @@ blockquote{ ...@@ -251,9 +251,9 @@ blockquote{
251 251
252 252
253 .badge{ 253 .badge{
254 opacity: 0;
254 position: absolute; 255 position: absolute;
255 right: 0%; 256 right: 0%;
256 top: -3.125rem;
257 box-shadow: 0rem 0.1875rem 0.375rem #0000003D; 257 box-shadow: 0rem 0.1875rem 0.375rem #0000003D;
258 border-radius: 1.25rem; 258 border-radius: 1.25rem;
259 width: auto; 259 width: auto;
...@@ -261,8 +261,9 @@ blockquote{ ...@@ -261,8 +261,9 @@ blockquote{
261 z-index: 98; 261 z-index: 98;
262 padding: 0.625rem 1.25rem; 262 padding: 0.625rem 1.25rem;
263 background-color: #fff; 263 background-color: #fff;
264 transition: 4s ease-in-out; 264 transition: 0s ease-in-out;
265 color: #000000; 265 color: #000000;
266 bottom: 40px;
266 @media only screen and (max-width: 48.875rem) { 267 @media only screen and (max-width: 48.875rem) {
267 padding: 0.625rem 1.25rem; 268 padding: 0.625rem 1.25rem;
268 } 269 }
...@@ -302,7 +303,7 @@ blockquote{ ...@@ -302,7 +303,7 @@ blockquote{
302 font-size: 0.875rem; 303 font-size: 0.875rem;
303 line-height: 1.125rem; 304 line-height: 1.125rem;
304 font-weight: normal; 305 font-weight: normal;
305 color: #000000; 306 color: #000000 !important;
306 text-align: left; 307 text-align: left;
307 word-wrap: break-word; 308 word-wrap: break-word;
308 word-wrap: break-word; 309 word-wrap: break-word;
......
...@@ -39,6 +39,9 @@ ...@@ -39,6 +39,9 @@
39 padding-left: 0px; 39 padding-left: 0px;
40 display: inline-block; 40 display: inline-block;
41 padding-right: 0px; 41 padding-right: 0px;
42 @media only screen and (max-width: 48.875rem) {
43 display: block;
44 }
42 a{ 45 a{
43 color: #000; 46 color: #000;
44 font-size: 16px; 47 font-size: 16px;
...@@ -56,6 +59,9 @@ ...@@ -56,6 +59,9 @@
56 display: inline-block; 59 display: inline-block;
57 padding-left: 10px; 60 padding-left: 10px;
58 padding-right: 10px; 61 padding-right: 10px;
62 @media only screen and (max-width: 48.875rem) {
63 content: "";
64 }
59 } 65 }
60 li:last-of-type::after{ 66 li:last-of-type::after{
61 display: none; 67 display: none;
......
1 .home-header{ 1 .header{
2 position: relative; 2 position: relative;
3 height: 100%; 3 height: 100%;
4 overflow: hidden; 4 overflow: hidden;
...@@ -6,6 +6,9 @@ ...@@ -6,6 +6,9 @@
6 background-repeat: no-repeat; 6 background-repeat: no-repeat;
7 background-size: cover; 7 background-size: cover;
8 background-position: center; 8 background-position: center;
9 @media only screen and (max-width: 48.875rem) {
10 min-height: 260px;
11 }
9 12
10 img{ 13 img{
11 width: 100%; 14 width: 100%;
...@@ -23,42 +26,93 @@ ...@@ -23,42 +26,93 @@
23 font-weight: bold; 26 font-weight: bold;
24 text-align: left; 27 text-align: left;
25 margin-left: 0px; 28 margin-left: 0px;
29 margin-top: 0px;
26 @media only screen and (max-width: 48.875rem) { 30 @media only screen and (max-width: 48.875rem) {
27 font-size: 1.125rem; 31 font-size: 1.125rem;
28 line-height:1.375rem ; 32 line-height:1.375rem ;
29 } 33 }
30 } 34 }
31 35
32 .content-container{ 36 }
33 position: absolute; 37
34 bottom: 0rem; 38 .content-container{
35 width: 100%; 39 position: absolute;
40 bottom: 0rem;
41 width: 100%;
42 display: flex;
43 flex-direction: column;
44 height: 90%;
45 max-height: 37.5rem;
46 justify-content: center;
47 background: transparent linear-gradient(180deg, #1A181800 0%, #000000 100%) 0% 0% no-repeat padding-box;
48 @media only screen and (max-width: 48.875rem) {
49 background:transparent;
50 }
51 p{
52 color: #fff;
53 font-size: 22px;
54 line-height: 28px;
55 text-align: left;
56 max-width: 550px;
57 margin-bottom: 44px;
58 }
59 .fx-style{
60 max-width: 1067px!important;
61 margin: auto;
36 display: flex; 62 display: flex;
37 flex-direction: column; 63 flex-direction: column;
38 height: 90%; 64 height: 100%;
39 max-height: 37.5rem; 65 justify-content: flex-end;
40 justify-content: center; 66
41 background: transparent linear-gradient(180deg, #1A181800 0%, #000000 100%) 0% 0% no-repeat padding-box; 67 }
42 p{ 68
69 }
70 .header.page{
71 h1{
72 font-size: 40px;
73 line-height: 45px;
74
75 }
76 p{
77 color: #fff;
78 font-size: 18px;
79 line-height: 24px;
80
81
82 }
83
84 .breadcrumb{
85 border-radius: 4px;
86 font-size: .75rem;
87 margin-bottom: 1.25rem;
88 background-color: #000;
89 color: #fff;
90 width: fit-content;
91 display: block;
92 position: relative;
93 padding: 0px 5px;
94 margin-bottom: 15px;
95 a{
96 text-decoration: none;
97 text-transform: capitalize;
43 color: #fff; 98 color: #fff;
44 font-size: 22px; 99
45 line-height: 28px; 100 }
46 text-align: left; 101 span{
47 max-width: 550px; 102 margin: 0rem 0.625rem;
48 margin-bottom: 44px;
49 } 103 }
50 .fx-style{ 104 strong{
51 display: flex; 105 font-weight: normal;
52 flex-direction: column;
53 height: 100%;
54 } 106 }
55 107
56 } 108 }
57 109 .image-side-caption{
58 110 background: rgba(0,0,0,1);
59 111
112 }
60 } 113 }
61 114
115
62 .side-caption { 116 .side-caption {
63 &:hover, &:focus-within { 117 &:hover, &:focus-within {
64 bottom:0 !important; 118 bottom:0 !important;
...@@ -97,7 +151,7 @@ ...@@ -97,7 +151,7 @@
97 } 151 }
98 152
99 .image-side-caption { 153 .image-side-caption {
100 background: rgba(0,0,0,0.7); 154 background: rgba(0,0,0,1);
101 @media screen and (max-width: 48rem) { 155 @media screen and (max-width: 48rem) {
102 background: rgba(0,0,0,1); 156 background: rgba(0,0,0,1);
103 } 157 }
...@@ -117,3 +171,37 @@ ...@@ -117,3 +171,37 @@
117 color:white; 171 color:white;
118 } 172 }
119 } 173 }
174 .full-black{
175 background-color: #000;
176 margin-left: -50%;
177 margin-right: -50%;
178 padding-left: calc(50% - 5px);
179 padding-right:calc(50% - 5px);
180 padding-top: 31px;
181 padding-bottom: 20px;
182 h2{
183 color:#fff;
184 font-size: 22px;
185 line-height: 28px;
186 margin-bottom: 24px;
187
188 }
189 a{
190 color: #EE0000;
191 font-size: 18px;
192 line-height: 22px;
193 }
194 a:hover{
195 color:#669999;
196 text-decoration: none !important;
197
198 }
199 p{
200 color: #fff;
201 font-size: 16px;
202 line-height: 21px;
203 }
204 p:has(a){
205 margin-bottom: 12px;
206 }
207 }
...\ No newline at end of file ...\ No newline at end of file
......
1 .wpml-ls-statics-shortcode_actions.wpml-ls.wpml-ls-legacy-list-horizontal{ 1 .wpml-ls-statics-shortcode_actions.wpml-ls.wpml-ls-legacy-list-horizontal{
2 position: absolute; 2 display: flex;
3 right: 20px; 3 padding-top: 2px;
4 top: 15px; 4 @media only screen and (max-width: 48.875rem) {
5 position: absolute;
6 right: 0px;
7 top:-12px;
8 }
5 a{ 9 a{
6 color: #000; 10 color: #EE0000;
7 font-weight: bold; 11 font-weight: bold;
8 font-size: 22px; 12 font-size: 16px;
13 margin-right: 30px;
14 padding: 0px 10px 6px;
9 } 15 }
10 a:hover{ 16 a:hover{
11 color: #699!important; 17 color: #699!important;
12 } 18 }
19 .wpml-ls-link{
20 // padding: 0px;
21 }
13 } 22 }
14 23
15 .admin-bar .wpml-ls-statics-shortcode_actions.wpml-ls.wpml-ls-legacy-list-horizontal{ 24 .admin-bar .wpml-ls-statics-shortcode_actions.wpml-ls.wpml-ls-legacy-list-horizontal{
......
...@@ -12,6 +12,10 @@ ...@@ -12,6 +12,10 @@
12 padding-left: 1.6875rem; 12 padding-left: 1.6875rem;
13 margin-left: 30px; 13 margin-left: 30px;
14 text-decoration: none; 14 text-decoration: none;
15 width: calc(100% - 127px);
16 @media only screen and (max-width: 48.875rem) {
17 //width: calc(60% - 127px);
18 }
15 19
16 } 20 }
17 21
...@@ -23,6 +27,7 @@ ...@@ -23,6 +27,7 @@
23 margin-top: 0.9375rem; 27 margin-top: 0.9375rem;
24 z-index: 999; 28 z-index: 999;
25 position: relative; 29 position: relative;
30 width: 100%;
26 .navbar-brand{ 31 .navbar-brand{
27 margin-right:0px ; 32 margin-right:0px ;
28 width: 127px; 33 width: 127px;
...@@ -38,14 +43,17 @@ ...@@ -38,14 +43,17 @@
38 #main-nav{ 43 #main-nav{
39 box-shadow: 0rem 0.1875rem 0.375rem #00000029; 44 box-shadow: 0rem 0.1875rem 0.375rem #00000029;
40 //z-index: 9999; 45 //z-index: 9999;
46 @media only screen and (max-width: 48.875rem) {
47 height: 90PX;
48 }
41 } 49 }
42 #main-nav .container{ 50 #main-nav .container{
43 flex-direction: column; 51 flex-direction: column;
44 align-items: flex-start; 52 align-items: flex-start;
45 margin-bottom: 0.625rem; 53 margin-bottom: 0.625rem;
46 @media only screen and (max-width: 62.5rem) { 54 @media only screen and (max-width: 62.5rem) {
47 height: 5.625rem; 55 height: 90px;
48 padding-top: 1.5625rem; 56 padding-top:0px;
49 margin-bottom: 0rem; 57 margin-bottom: 0rem;
50 58
51 } 59 }
...@@ -54,13 +62,16 @@ ...@@ -54,13 +62,16 @@
54 62
55 @media only screen and (max-width: 62.5rem) { 63 @media only screen and (max-width: 62.5rem) {
56 .branding{ 64 .branding{
57 margin-top: 0rem; 65 margin-top: 6px;
66 padding-left: 15px;
58 } 67 }
59 .site-title{ 68 .site-title{
60 font-size: 1.25rem; 69 font-size: 1.25rem;
61 line-height: 1.5rem; 70 line-height: 1.5rem;
62 margin-left: 0rem; 71 margin-left: 0rem;
63 padding-left: 1.2rem; 72 padding-left: 1.2rem;
73 height: 33px;
74 align-self: end;
64 75
65 } 76 }
66 .navbar-brand{ 77 .navbar-brand{
...@@ -90,6 +101,9 @@ ...@@ -90,6 +101,9 @@
90 background-color: #fff; 101 background-color: #fff;
91 z-index: 99; 102 z-index: 99;
92 top: 0rem; 103 top: 0rem;
104 @media only screen and (max-width: 48.875rem) {
105 height: 90px;
106 }
93 } 107 }
94 108
95 .admin-bar #wrapper-navbar { 109 .admin-bar #wrapper-navbar {
......
...@@ -315,7 +315,7 @@ ...@@ -315,7 +315,7 @@
315 #mega-menu-wrap-primary{ 315 #mega-menu-wrap-primary{
316 width: 100%; 316 width: 100%;
317 height: 1.875rem; 317 height: 1.875rem;
318 top: 3.4375rem; 318 top: 2.4375rem;
319 right: 0rem; 319 right: 0rem;
320 position:absolute; 320 position:absolute;
321 background: transparent; 321 background: transparent;
...@@ -326,10 +326,11 @@ ...@@ -326,10 +326,11 @@
326 #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-right .mega-toggle-block:only-child{ 326 #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-right .mega-toggle-block:only-child{
327 background-color: #EE0000; 327 background-color: #EE0000;
328 border-radius: 50%; 328 border-radius: 50%;
329 width: 2.5rem; 329 width: 35px;
330 height: 2.5rem; 330 height: 35px;
331 margin-right: 0.9375rem; 331 margin-right: 0.9375rem;
332 } 332 }
333
333 #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-right .mega-toggle-block:active:only-child{ 334 #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-right .mega-toggle-block:active:only-child{
334 background-color: #669999; 335 background-color: #669999;
335 336
...@@ -442,6 +443,11 @@ ...@@ -442,6 +443,11 @@
442 color: #fff; 443 color: #fff;
443 margin: 0rem 0 0 0.3813rem; 444 margin: 0rem 0 0 0.3813rem;
444 line-height: 2.5rem; 445 line-height: 2.5rem;
446 @media only screen and (max-width: 62.5rem) {
447 line-height: 35px;
448 font-size: 23px;
449 }
450
445 } 451 }
446 452
447 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a{ 453 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a{
......
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
44 background-size: cover; 44 background-size: cover;
45 background-position: center; 45 background-position: center;
46 @media screen and (max-width: 59.375rem) { 46 @media screen and (max-width: 59.375rem) {
47 min-height: 430px; 47 min-height: 260px;
48 } 48 }
49 } 49 }
50 .search-box:hover, 50 .search-box:hover,
...@@ -52,9 +52,13 @@ ...@@ -52,9 +52,13 @@
52 width: 100%; 52 width: 100%;
53 height: 90px; 53 height: 90px;
54 max-width: 1066px; 54 max-width: 1066px;
55 position: relative; 55 position: absolute;
56 margin: auto; 56 right: 0px;
57 right: unset; 57
58 @media only screen and (max-width: 48.875rem) {
59 width: 95%;
60 right: 2.5%;
61 }
58 62
59 63
60 } 64 }
...@@ -85,23 +89,24 @@ ...@@ -85,23 +89,24 @@
85 89
86 90
87 .search-box{ 91 .search-box{
92 opacity: 0;
88 background-color: #fff; 93 background-color: #fff;
89 border-radius: 1.25rem ; 94 border-radius: 1.25rem ;
90 max-width: 80%; 95 max-width:1067px;
91 margin: auto; 96 margin: auto;
92 top: 2.5rem; 97 position: absolute;
93 position: relative; 98 top:0px;
94 box-shadow: -2px 7px 7px 0 rgba(0,0,0,.25); 99 box-shadow: -2px 7px 7px 0 rgba(0,0,0,.25);
95 transition: 0.5s ease-in-out; 100 transition: 0.5s ease-in-out;
96 height: 56px; 101 height: 56px;
97 width: 56px; 102 width: 56px;
98 float: right; 103 right: 0px;
99 overflow: hidden; 104 overflow: hidden;
100 @media only screen and (max-width: 48.875rem) { 105 @media only screen and (max-width: 48.875rem) {
101 padding: 0rem 0.625rem ; 106 padding: 0rem 0.625rem ;
102 max-width: 90%; 107 max-width: 90%;
103 right: 5%; 108 right: 5%;
104 margin-top: 3.5rem; 109 margin-top: .5rem;
105 } 110 }
106 111
107 .search-button{ 112 .search-button{
...@@ -237,31 +242,33 @@ ...@@ -237,31 +242,33 @@
237 right: 0.625rem; 242 right: 0.625rem;
238 } 243 }
239 244
240 #page-wrapper{ 245 #full-width-page-wrapper{
241 margin: 0.625rem 1.875rem 0 1.875rem; 246 margin: 0.625rem 1.875rem 0 1.875rem;
242 min-height: 50vh; 247 min-height: 50vh;
248 padding-bottom: 0px;
243 @media(max-width: 48rem) { 249 @media(max-width: 48rem) {
244 // margin: 2.5rem 2.5rem 0 2.5rem; 250 // margin: 2.5rem 2.5rem 0 2.5rem;
245 } 251 }
246 .breadcrumb{ 252 .breadcrumb{
247 font-size: 0.75rem; 253 font-size: 0.75rem;
248 margin-bottom: 1.25rem; 254 margin-bottom: 0.25rem;
249 a{ 255 a{
250 text-decoration: none; 256 text-decoration: none;
251 text-transform: capitalize; 257 text-transform: capitalize;
252 } 258 }
253 span{ 259 span{
254 margin: 0rem 0.625rem; 260 margin: 0rem 0.625rem;
261 }
262
263
255 } 264 }
256 265
257
258 }
259 h1{ 266 h1{
260 font-size: 2.8125rem; 267 font-size: 36px;
261 line-height: 3.25rem; 268 line-height: 40px;
262 font-weight: bold; 269 font-weight: bold;
263 } 270 }
264 h1+p { 271 .entry-content p:first-of-type {
265 font-weight: bold; 272 font-weight: bold;
266 } 273 }
267 } 274 }
...@@ -451,4 +458,23 @@ h1+p { ...@@ -451,4 +458,23 @@ h1+p {
451 } 458 }
452 459
453 } 460 }
454 }
...\ No newline at end of file ...\ No newline at end of file
461 }
462 .fx-style{
463 .header_text{
464 display: block;
465 @media only screen and (max-width: 48.875rem) {
466 display: none;
467 }
468 }
469 }
470 .header_text.mobile{
471 display: none;
472 margin-bottom: 24px;
473 p{
474 font-size: 18px;
475 line-height: 24px;
476 }
477 @media only screen and (max-width: 48.875rem) {
478 display: block;
479 }
480 }
......
...@@ -20,8 +20,9 @@ ...@@ -20,8 +20,9 @@
20 20
21 } 21 }
22 #pojo-a11y-toolbar{ 22 #pojo-a11y-toolbar{
23 position: absolute; 23 position: relative;
24 top: 1.25rem; 24 top: 1.25rem;
25
25 @media screen and (max-width: 62.5rem){ 26 @media screen and (max-width: 62.5rem){
26 top: 0rem; 27 top: 0rem;
27 } 28 }
...@@ -32,20 +33,21 @@ ...@@ -32,20 +33,21 @@
32 } 33 }
33 #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle{ 34 #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle{
34 z-index: 9999 !important; 35 z-index: 9999 !important;
35 right: 115px !important; 36
36 } 37 }
37 #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a{ 38 #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a{
38 width:40px; 39 width:20px;
39 box-shadow:none !important; 40 box-shadow:none !important;
40 position: absolute; 41 position: absolute;
42 padding-left: 5px !important;
41 //right: -16.875rem!important; 43 //right: -16.875rem!important;
42 44
43 } 45 }
44 46
45 .pojo-a11y-toolbar-overlay { 47 .pojo-a11y-toolbar-overlay {
46 position: absolute; 48 position: relative;
47 top: 3.125rem; 49 top: 3.125rem;
48 right: 0rem; 50
49 display: none; 51 display: none;
50 border-radius: 0rem 0rem 0.625rem 0.625rem; 52 border-radius: 0rem 0rem 0.625rem 0.625rem;
51 svg{ 53 svg{
...@@ -58,40 +60,39 @@ ...@@ -58,40 +60,39 @@
58 60
59 #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle svg { 61 #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle svg {
60 max-width: inherit; 62 max-width: inherit;
61 border: 0.125rem #000 solid; 63 border: 1px #000 solid;
62 border-radius: 50%; 64 border-radius: 50%;
63 padding: 0.1875rem; 65 padding: 0.1875rem;
64 height: 1.75rem; 66 height:20px;
65 width: 1.75rem; 67 width:20px;
66 } 68 }
67 69
68 .pojo-a11y-toolbar-open{ 70 .pojo-a11y-toolbar-open{
69 z-index: 99999; 71 z-index: 99999;
70 .pojo-a11y-toolbar-toggle svg { 72 .pojo-a11y-toolbar-toggle svg {
71 border: 0.125rem #669999 solid !important; 73 border: 1px #669999 solid !important;
72 color: #669999; 74 color: #669999;
73 } 75 }
74 .pojo-a11y-toolbar-toggle a{ 76 .pojo-a11y-toolbar-toggle a{
75 color: #669999; 77 color: #669999;
76 text-decoration: none; 78 text-decoration: none;
79 background-color: transparent !important;
77 } 80 }
78 .pojo-a11y-toolbar-overlay { 81 .pojo-a11y-toolbar-overlay {
79 position: absolute; 82 position: absolute;
80 top: 3.125rem; 83 top: 3.125rem;
81 right: 0rem; 84 right: 0rem;
82 display:block; 85 display:block;
83 86 @media screen and (max-width: 62.5rem){
87 top: 2.125rem;
88 }
84 } 89 }
85 } 90 }
86 #gt_float_wrapper .gt_float_switcher{ 91 #gt_float_wrapper .gt_float_switcher{
87 background-color: transparent !important; 92 background-color: transparent !important;
88 } 93 }
89 94
90 [lang="zh-CN"]{ 95
91 #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a{
92 right: -15rem!important;
93 }
94 }
95 .pojo-a11y-toolbar-text{ 96 .pojo-a11y-toolbar-text{
96 font-size: 1rem; 97 font-size: 1rem;
97 } 98 }
...@@ -111,7 +112,7 @@ ...@@ -111,7 +112,7 @@
111 .pojo-a11y-toolbar-toggle-link:hover{ 112 .pojo-a11y-toolbar-toggle-link:hover{
112 color: #669999 !important; 113 color: #669999 !important;
113 svg { 114 svg {
114 border: 0.125rem #669999 solid !important; 115 border: 1px #669999 solid !important;
115 } 116 }
116 117
117 } 118 }
...@@ -119,5 +120,32 @@ ...@@ -119,5 +120,32 @@
119 text-decoration: none; 120 text-decoration: none;
120 } 121 }
121 122
122
123
...\ No newline at end of file ...\ No newline at end of file
123 .pojo-a11y-toolbar-inner::before{
124 content: "";
125 display: block;
126 width: 90%;
127 height: 1px;
128 background-color: #ccc;
129 margin: auto;
130
131 }
132 #pojo-a11y-toolbar.pojo-a11y-toolbar-right .pojo-a11y-toolbar-toggle{
133 right: 40px !important;
134 }
135 .pojo-a11y-toolbar-open{
136 .pojo-a11y-toolbar-link.pojo-a11y-toolbar-toggle-link::after{
137 content: "";
138 display: block;
139 position: relative;
140 margin-top: 6px;
141 margin-bottom: 10px;
142 margin-left: 4px;
143 width: 13px;
144 height: 7px;
145 background-repeat: no-repeat;
146 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12.742" height="7.726" viewBox="0 0 12.742 7.726"><path id="Path_1502" data-name="Path 1502" d="M6.383,4.709c.442-.447.875-.89,1.313-1.328Q9.274,1.8,10.855.231a.708.708,0,0,1,1.047,0c.2.206.405.407.608.61a.694.694,0,0,1,0,1.038L9.667,4.721,6.913,7.48a.768.768,0,0,1-.515.246.734.734,0,0,1-.567-.245Q4.769,6.415,3.706,5.349L.812,2.454c-.2-.2-.395-.393-.591-.591A.69.69,0,0,1,.228.844l.6-.6a.708.708,0,0,1,1.062,0L4.456,2.792,6.311,4.64Z"/></svg>');
147 @media screen and (max-width: 62.5rem){
148 display: none;
149 }
150 }
151 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
3 flex-direction: row-reverse; 3 flex-direction: row-reverse;
4 flex-wrap: wrap; 4 flex-wrap: wrap;
5 justify-content: center; 5 justify-content: center;
6 margin:2.25rem 0; 6 margin:24px 0;
7 7
8 .post-list-left-col { 8 .post-list-left-col {
9 flex-basis: 50%; 9 flex-basis: 50%;
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
24 list-style: none; 24 list-style: none;
25 padding:0; 25 padding:0;
26 margin:0; 26 margin:0;
27 gap: 24px; 27 gap: 12px;
28 .article-card { 28 .article-card {
29 min-height: 117px; 29 min-height: 117px;
30 // max-height: 8.438rem; 30 // max-height: 8.438rem;
...@@ -34,12 +34,29 @@ ...@@ -34,12 +34,29 @@
34 text-decoration: none; 34 text-decoration: none;
35 } 35 }
36 &.lg { 36 &.lg {
37 min-height: 30.438rem; 37
38 max-height: 30.438rem; 38 min-height: 28rem;
39 max-height: 28rem;
40 .image-large{
41 position: relative;
42 }
43 .overlay{
44 position: absolute;
45 top: 0;
46 bottom: 0;
47 left: 0;
48 right: 0;
49 height: 100%;
50 width: 100%;
51 transition: .5s ease;
52 background-color: transparent;
53 }
54
39 .scale-wrapper { 55 .scale-wrapper {
40 min-height: 291px; 56 min-height: 291px;
41 max-height: 291px; 57 max-height: 291px;
42 overflow: hidden; 58 overflow: hidden;
59 position: relative;
43 } 60 }
44 img { 61 img {
45 height: 100%; 62 height: 100%;
...@@ -52,6 +69,18 @@ ...@@ -52,6 +69,18 @@
52 } 69 }
53 } 70 }
54 &.sm { 71 &.sm {
72
73 .overlay{
74 position: absolute;
75 top: 0;
76 bottom: 0;
77 left: 0;
78 right: 0;
79 height: 100%;
80 width: 100%;
81 transition: .5s ease;
82 background-color: transparent;
83 }
55 .content { 84 .content {
56 padding-bottom:0; //not sure why this was 1rem 85 padding-bottom:0; //not sure why this was 1rem
57 line-height: 1.125rem; 86 line-height: 1.125rem;
...@@ -61,13 +90,16 @@ ...@@ -61,13 +90,16 @@
61 transition: transform .3s; 90 transition: transform .3s;
62 } 91 }
63 &:hover { 92 &:hover {
93 .overlay{
94 background: rgba(0,0,0,0.4);
95 }
64 a { 96 a {
65 color: #699; 97 color: #699;
66 text-decoration: underline; 98 text-decoration: underline;
67 } 99 }
68 img { 100 img {
69 transform: scale(1.05); 101 // transform: scale(1.05);
70 opacity: 0.8; 102 //opacity: 0.8;
71 } 103 }
72 } 104 }
73 } 105 }
...@@ -77,13 +109,14 @@ ...@@ -77,13 +109,14 @@
77 109
78 110
79 .article-card { 111 .article-card {
80 max-width: 31.875rem; 112 max-width: 31rem;
81 min-width: 31.875rem; 113 min-width: 31rem;
82 min-height: 8.438rem; 114 min-height: 8.438rem;
83 a { 115 a {
84 color:white; 116 color:white;
85 gap: 1.625rem; 117 gap: 1.625rem;
86 &:hover { 118 &:hover {
119
87 p { 120 p {
88 text-decoration: underline; 121 text-decoration: underline;
89 font-size: 18px; 122 font-size: 18px;
...@@ -99,6 +132,9 @@ ...@@ -99,6 +132,9 @@
99 a { 132 a {
100 flex-direction: column; 133 flex-direction: column;
101 } 134 }
135 a:hover{
136
137 }
102 .content { 138 .content {
103 min-height: 8.25rem; 139 min-height: 8.25rem;
104 padding-top:1rem; 140 padding-top:1rem;
...@@ -169,6 +205,7 @@ ...@@ -169,6 +205,7 @@
169 max-height: 117px; 205 max-height: 117px;
170 object-fit: cover; 206 object-fit: cover;
171 overflow: hidden; 207 overflow: hidden;
208 position: relative;
172 img { 209 img {
173 object-fit: cover; 210 object-fit: cover;
174 height: 100%; 211 height: 100%;
...@@ -198,6 +235,20 @@ ...@@ -198,6 +235,20 @@
198 } 235 }
199 } 236 }
200 237
238 .load-more-link-out{
239 border-radius: 40px;
240 padding: 8px 88px;
241 background: #EE0000;
242 text-transform: uppercase;
243 font-size: 14px;
244 color: #fff;
245 font-weight: bold;
246 }
247 .load-more-link-out:hover{
248 background: #669999;
249 color: #fff;
250 }
251
201 252
202 .mobile-article-list { 253 .mobile-article-list {
203 display: none; 254 display: none;
......
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
25 } 25 }
26 26
27 .content{ 27 .content{
28 width: 50%; 28 width: 66.66%;
29 display: flex; 29 display: flex;
30 flex-direction: column; 30 flex-direction: column;
31 justify-content: flex-start; 31 justify-content: flex-start;
...@@ -33,10 +33,15 @@ ...@@ -33,10 +33,15 @@
33 @media screen and (max-width: 56.25rem) { 33 @media screen and (max-width: 56.25rem) {
34 width: 100%; 34 width: 100%;
35 } 35 }
36 p{
37 font-weight: normal !important;
38 font-size: 16px;
39 line-height: 20px;
40 }
36 } 41 }
37 .image{ 42 .image{
38 background-size: cover; 43 background-size: cover;
39 width: 50%; 44 width: 33.33%;
40 overflow: hidden; 45 overflow: hidden;
41 border-radius: 0rem 0rem 1.25rem 1.25rem; 46 border-radius: 0rem 0rem 1.25rem 1.25rem;
42 position: relative; 47 position: relative;
......