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');
}
?>
<img src="<?php echo $image; ?>" alt="<?php echo $img_alt ?>" loading="eager">
<div class="promo-text"><a class="understrap-read-more-link" href="<?php echo get_permalink($page->ID);?>"><?php the_title($page->ID); ?></a></div>
</div>
</div>
<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>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="swiper-button-prev" data-id="<?= $id ?>"></div>
<div class="swiper-button-next" data-id="<?= $id ?>"></div>
</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() ) {
<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<?php if ( has_post_thumbnail() ) { ?>
<div class='cap-wrap home-header' style=" background-image: url('<?php echo $url;?> ')">
<div class='cap-wrap header' style=" background-image: url('<?php echo $url;?> ')">
<div class="content-container">
<div class="container" style="height: 100%;">
<div class="col-md-12 fx-style">
<div class="search-box"><?php the_field('search_box_content'); ?><div class="search-button">Search</div></div>
<?php the_field('header_text'); ?>
<div class="search-box"><div id="search-box-content"><?php the_field('page_search_block', 'option'); ?></div> <div class="search-button">Search</div></div>
<div class="header_text"> <?php the_field('header_text'); ?> </div>
</div>
</div>
</div>
......@@ -66,7 +66,7 @@ if ( is_front_page() ) {
<div class="col-md-12 content-area" id="primary">
<main class="site-main" id="main" role="main">
<div class="header_text mobile"> <?php the_field('header_text'); ?> </div>
<?php
while ( have_posts() ) {
the_post();
......
......@@ -27,6 +27,7 @@ $container = get_theme_mod( 'understrap_container_type' );
<a rel="home" class="site-title" href="<?php echo esc_url( home_url( '/' ) ); ?>" itemprop="url">
<div class="">MSF CLIMATE HUB</div>
</a>
<?= do_shortcode('[wpml_language_selector_widget link_current=0]') ?>
</div>
<!-- <button
class="navbar-toggler"
......@@ -57,5 +58,5 @@ $container = get_theme_mod( 'understrap_container_type' );
?>
</div><!-- .container(-fluid) -->
<?= do_shortcode('[wpml_language_selector_widget link_current=0]') ?>
</nav><!-- #main-nav -->
......
......@@ -20663,97 +20663,28 @@
$$1.fn.DataTable[prop] = val;
});
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>';
const pageHeader = document.querySelector("#main-nav");
const toggleMenu = pageHeader.querySelector(".mega-toggle-block");
pageHeader.querySelector(".mega-menu-toggle.mega-menu-open");
const menuWrapper = pageHeader.querySelector("#mega-menu-primary");
menuWrapper.innerHTML = menuWrapper.innerHTML + addstuff;
const level1Links = pageHeader.querySelectorAll("li.mega-menu-item-has-children > a.mega-menu-link");
const listWrapper2 = pageHeader.querySelector(".list-wrapper2");
const listWrapper3 = pageHeader.querySelector(".list-wrapper3");
const subMenuWrapper2 = listWrapper2.querySelector(".sub-menu-wrapper");
const subMenuWrapper3 = listWrapper3.querySelector(".sub-menu-wrapper");
const backOneLevelBtns = pageHeader.querySelectorAll(".back-one-level");
const isVisibleClass = "is-visible";
const isActiveClass = "is-active";
const isBtVisible = "is-bt-active";
for (const level1Link of level1Links) {
level1Link.addEventListener("click", function (e) {
const siblingList = level1Link.nextElementSibling;
console.log('clicked level1Links');
if (siblingList) {
e.preventDefault();
this.classList.add(isActiveClass);
const cloneSiblingList = siblingList.cloneNode(true);
subMenuWrapper2.innerHTML = "";
subMenuWrapper2.append(cloneSiblingList);
listWrapper2.classList.add(isVisibleClass);
setTimeout(() => {
backOneLevelBtns[0].classList.add(isBtVisible);
}, 1000);
}
});
}
listWrapper2.addEventListener("click", function (e) {
const target = e.target;
const parent = target.closest("a");
if (target.tagName.toLowerCase() === "a" && target.nextElementSibling) {
const siblingList = target.nextElementSibling;
e.preventDefault();
target.classList.add(isActiveClass);
const cloneSiblingList = siblingList.cloneNode(true);
subMenuWrapper3.innerHTML = "";
subMenuWrapper3.append(cloneSiblingList);
listWrapper3.classList.add(isVisibleClass);
setTimeout(() => {
backOneLevelBtns[1].classList.add(isBtVisible);
}, 1000);
} else if (parent.tagName.toLowerCase() === "a" && parent.nextElementSibling) {
const siblingList = parent.nextElementSibling;
e.preventDefault();
parent.classList.add(isActiveClass);
const cloneSiblingList = siblingList.cloneNode(true);
subMenuWrapper3.innerHTML = "";
subMenuWrapper3.append(cloneSiblingList);
listWrapper3.classList.add(isVisibleClass);
setTimeout(() => {
backOneLevelBtns[1].classList.add(isBtVisible);
}, 1000);
}
});
for (const backOneLevelBtn of backOneLevelBtns) {
backOneLevelBtn.addEventListener("click", function () {
console.log(this);
this.style.display = "";
const parent = this.closest(".list-wrapper");
parent.classList.remove(isVisibleClass);
this.classList.remove(isBtVisible);
setTimeout(() => {
parent.scrollTo({
top: 0,
behavior: 'smooth'
});
}, 500);
});
toggleMenu.addEventListener("click", function () {
setTimeout(() => {
console.log('clicked toggleMenu');
listWrapper2.scrollTo({
top: 0,
behavior: 'smooth'
});
listWrapper3.scrollTo({
top: 0,
behavior: 'smooth'
});
}, 500);
});
}
// Search Filter
var Search = function ($) {
function init() {
$('.search-box').css('margin-right', $('#main-nav .container').css('margin-right'));
$('.search-box').css('opacity', '1');
$('.badge').css('margin-right', $('#main-nav .container').css('margin-right'));
$('#pojo-a11y-toolbar').css('margin-right', $('#main-nav .container').css('margin-right'));
$('.badge').css('opacity', '1');
setTimeout(() => {
$('.badge').css('transition', '4s ease-in-out');
}, "100");
$(window).on('resize', function () {
$('.search-box').css('transition', '0s ease-in-out');
$('.search-box').css('margin-right', $('#main-nav .container').css('margin-right'));
$('#pojo-a11y-toolbar').css('margin-right', $('#main-nav .container').css('margin-right'));
$('.badge').css('transition', '0s ease-in-out');
$('.badge').css('margin-right', $('#main-nav .container').css('margin-right'));
setTimeout(() => {
$('.badge').css('transition', '4s ease-in-out');
$('.search-box').css('transition', 'all 0.5s ease-in-out 0s');
}, "100");
});
$(".searchandfilter ul li:contains('hidden')").hide();
$('<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 '));
$(document).on("click", ".search-filter-reset-custom", function (e) {
......@@ -26198,7 +26129,7 @@
var PerView = 3;
var offset = 0;
var space = 20;
var SlidesPerGroup = 1;
var SlidesPerGroup = 3;
var _id = jQuery(this).parent().attr('id');
if ($(window).width() < 600) {
offset = 0;
......@@ -26214,7 +26145,7 @@
slidesOffsetBefore: offset,
spaceBetween: space,
slidesPerGroup: SlidesPerGroup,
centeredSlides: true,
// centeredSlides: true,
loop: false,
lazy: true,
pagination: {
......@@ -26237,10 +26168,12 @@
};
new Swiper(this, swiper_params);
});
$('.carousel ').css('margin-left', "-" + $('#content').css('margin-left'));
$(window).on('resize', function () {
$('.carousel ').css('margin-left', "-" + $('#content').css('margin-left'));
});
// $('.carousel ').css('margin-left',"-"+$('#content').css('margin-left'));
// $(window).on('resize', function(){
// $('.carousel ').css('margin-left',"-"+$('#content').css('margin-left'));
// });
});
var mobile_article_list = [];
......@@ -26249,7 +26182,7 @@
if (size == 2) {
li += "<li class='article-card lg'><a href='" + post_obj['href'] + "'>";
if (post_obj['img_src']) {
li += "<div class='scale-wrapper'><img src='" + post_obj['img_src'] + "' /></div>";
li += "<div class='image-large'><div class='scale-wrapper'><img src='" + post_obj['img_src'] + "' /></div><div class='overlay'></div></div>";
}
if (post_obj['title'].length > 100) {
li += "<div class='content reduce'><p>" + post_obj['title'] + "</p><span class='anchor-dots'></span></div>";
......@@ -26263,7 +26196,7 @@
} else {
li += "<li class='article-card sm'><a href='" + post_obj['href'] + "'>";
if (post_obj['img_src']) {
li += "<div class='image'><div class='scale-wrapper'><img src='" + post_obj['img_src'] + "' /></div></div>";
li += "<div class='image'><div class='scale-wrapper'><img src='" + post_obj['img_src'] + "' /></div><div class='overlay'></div></div>";
}
if (post_obj['title'].length > 100) {
li += "<div class='content reduce'><p>" + post_obj['title'] + "</p>";
......@@ -26409,7 +26342,7 @@
if ($(that).parents('.related').find('.related-block.hidden[data-related-segment="' + (segment + 1) + '"]').length == 0) {
$(that).remove();
}
}, 500);
}, 100);
});
$('.news-and-stories-block').each(function () {
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 @@
// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;
$badge = get_field('badge');
?>
......@@ -20,11 +20,7 @@ $badge = get_field('badge');
<div class="entry-content">
<?php if($badge){
$badge_content = get_field('badge_content');
echo "<div class='badge'><span>".$badge_content['badge_label']."</span><div class='badge_content'><p>".$badge_content['badge_text']."</p></div></div>";
}?>
<?php
the_content();
......
......@@ -21,6 +21,7 @@ $post_thumbnail_id = get_post_thumbnail_id($post->ID);
$thumbnail_image = get_posts(array('p' => $post_thumbnail_id, 'post_type' => 'attachment'));
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'full' );
$subhead = get_field('subhead');
//$badge = get_field('badge');
if ($thumbnail_image && isset($thumbnail_image[0])) {
$img_description = $thumbnail_image[0]->post_content;
......@@ -36,11 +37,25 @@ if ($thumbnail_image && isset($thumbnail_image[0])) {
?>
<?php if ( has_post_thumbnail() ) { ?>
<header class="entry-header page" style=" background-image: url('<?php echo $url;?> ')">
<div class="container" tabindex="-1" style="">
<div class="search-box"><div id="search-box-content"><?php the_field('page_search_block', 'option'); ?></div> <div class="search-button">Search</div></div>
</div>
<header class="entry-header header page" style=" background-image: url('<?php echo $url;?> ')">
<div class="content-container">
<div class="container" style="height: 100%;">
<div class="col-md-12 fx-style">
<div class="search-box"><div id="search-box-content"><?php the_field('page_search_block', 'option'); ?></div> <div class="search-button">Search</div></div>
<div class="header_text">
<div class="breadcrumb"><?php get_breadcrumb(); ?></div>
<?php the_field('header_text'); ?>
</div>
<?php if($badge){
$badge_content = get_field('badge_content');
echo "<div class='badge'><span>".$badge_content['badge_label']."</span><div class='badge_content'><p>".$badge_content['badge_text']."</p></div></div>";
}?>
</div>
</div>
</div>
<div class='side-caption header-caption <?= (empty($copy) && empty($cap)) ? "hide" : "" ?>'>
<a class='copy-link' aria-label="Header Slide Caption" href='#' ></a>
<span class='image-side-caption'>
<span class='cap'><?= $photo_caption ?></span>
......@@ -49,13 +64,15 @@ if ($thumbnail_image && isset($thumbnail_image[0])) {
</div>
</header><!-- .entry-header -->
<?php } ?>
<div class="wrapper" id="page-wrapper">
<div class="wrapper" id="full-width-page-wrapper">
<div class="<?php echo esc_attr( $container ); ?>" id="content" tabindex="-1">
<div class="<?php echo esc_attr( $container ); ?>" id="content">
<main class="col-sm-12 col-md-12 content-area site-main site-main" id="main">
<div class="breadcrumb"><?php get_breadcrumb(); ?></div>
<div class="col-md-12 content-area" id="primary">
<main class="site-main" id="main" role="main">
<div class="header_text mobile"><div class="breadcrumb"><?php get_breadcrumb(); ?></div> <?php the_field('header_text'); ?> </div>
<?php
while ( have_posts() ) {
......@@ -65,11 +82,13 @@ if ($thumbnail_image && isset($thumbnail_image[0])) {
}
?>
</main><!-- #main -->
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- #content -->
</div><!-- #content -->
</div><!-- #page-wrapper -->
</div><!-- #full-width-page-wrapper -->
<?php
get_footer();
......
......@@ -23,7 +23,7 @@ jQuery(document).ready(function($) {
var PerView = 3
var offset =0;
var space = 20;
var SlidesPerGroup= 1;
var SlidesPerGroup= 3;
var _id = jQuery(this).parent().attr('id');
......@@ -46,7 +46,7 @@ jQuery(document).ready(function($) {
slidesOffsetBefore: offset,
spaceBetween: space,
slidesPerGroup: SlidesPerGroup ,
centeredSlides: true,
// centeredSlides: true,
loop: false,
lazy: true,
pagination: {
......@@ -76,12 +76,12 @@ jQuery(document).ready(function($) {
});
$('.carousel ').css('margin-left',"-"+$('#content').css('margin-left'));
// $('.carousel ').css('margin-left',"-"+$('#content').css('margin-left'));
$(window).on('resize', function(){
$('.carousel ').css('margin-left',"-"+$('#content').css('margin-left'));
// $(window).on('resize', function(){
// $('.carousel ').css('margin-left',"-"+$('#content').css('margin-left'));
});
// });
});
\ No newline at end of file
......
......@@ -7,7 +7,7 @@ function postItem(post_obj, size, sides, side_index, side_alternate, labels) {
if(size == 2) {
li += "<li class='article-card lg'><a href='"+post_obj['href']+"'>";
if(post_obj['img_src']) {
li += "<div class='scale-wrapper'><img src='"+post_obj['img_src']+"' /></div>";
li += "<div class='image-large'><div class='scale-wrapper'><img src='"+post_obj['img_src']+"' /></div><div class='overlay'></div></div>";
}
if(post_obj['title'].length > 100) {
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) {
} else {
li += "<li class='article-card sm'><a href='"+post_obj['href']+"'>";
if(post_obj['img_src']) {
li += "<div class='image'><div class='scale-wrapper'><img src='"+post_obj['img_src']+"' /></div></div>";
li += "<div class='image'><div class='scale-wrapper'><img src='"+post_obj['img_src']+"' /></div><div class='overlay'></div></div>";
}
if(post_obj['title'].length > 100) {
li += "<div class='content reduce'><p>"+post_obj['title']+"</p>";
......@@ -194,7 +194,7 @@ jQuery(function($) {
if($(that).parents('.related').find('.related-block.hidden[data-related-segment="'+(segment+1)+'"]').length == 0) {
$(that).remove();
}
}, 500);
}, 100);
});
......
......@@ -7,6 +7,29 @@ var Search = (function($) {
function init() {
$('.search-box').css('margin-right', $('#main-nav .container').css('margin-right'));
$('.search-box').css('opacity', '1');
$('.badge').css('margin-right', $('#main-nav .container').css('margin-right'));
$('#pojo-a11y-toolbar').css('margin-right', $('#main-nav .container').css('margin-right'));
$('.badge').css('opacity', '1');
setTimeout(() => {
$('.badge').css('transition', '4s ease-in-out');
}, "100");
$(window).on('resize', function(){
$('.search-box').css('transition', '0s ease-in-out');
$('.search-box').css('margin-right', $('#main-nav .container').css('margin-right'));
$('#pojo-a11y-toolbar').css('margin-right', $('#main-nav .container').css('margin-right'));
$('.badge').css('transition', '0s ease-in-out');
$('.badge').css('margin-right', $('#main-nav .container').css('margin-right'));
setTimeout(() => {
$('.badge').css('transition', '4s ease-in-out');
$('.search-box').css('transition', 'all 0.5s ease-in-out 0s');
}, "100");
});
$(".searchandfilter ul li:contains('hidden')").hide();
$('<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 ' ) );
......
......@@ -4,7 +4,7 @@ import LazyLoad from "vanilla-lazyload";
import DataTable from 'datatables.net-dt';
import "./_menu_mobile";
//import "./_menu_mobile";
import "./_search";
import "./_header_menu";
import "./_side_menu";
......
.call-out-block{
background-size: cover;
min-height: 18.75rem;
position: relative;
overflow: hidden;
text-align: center;
......@@ -10,7 +9,6 @@
color:#fff;
margin-left:-50%;
margin-right:-50%;
margin-bottom: -1.5625rem;
margin-top: 1.5625rem;
padding-left:50%;
padding-right:50%;
......@@ -20,8 +18,10 @@
min-height: 15.625rem;
}
h2{
padding-top: 32px;
@media screen and (max-width: 48rem) {
font-size: 1.5rem;
font-size: 22px;
line-height: 25px;
}
}
......@@ -47,11 +47,11 @@
background-color: #EE0000;
color: #fff;
border: none;
font-size: 1.1875rem;
font-size: 14px;
font-weight: 500;
margin: 0.625rem 0 0rem 0;
padding: 0.9375rem 3.75rem;
line-height: 1.625rem;
margin: 24px 0 50px 0;
padding: 8px 46px;
line-height: 17px;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
......@@ -59,8 +59,8 @@
border-radius: 2.5rem !important;
font-weight: bold;
@media screen and (max-width: 48rem) {
font-size: 1rem;
padding: 0.9375rem 1.875rem;
font-size: 16px;
}
}
......
......@@ -18,10 +18,9 @@
// carousel css
.carousel:not(.is-admin) {
background-color: transparent !important;
left: -1.25rem;
width: 100vw;
margin-top: 1.875rem;
margin-bottom: 1.875rem;
left: -5%;
width: 110%;
margin-top:24px;
padding: 0rem 3.125rem;
@media only screen and (max-width: 48.875rem) {
padding-right: 30px !important;
......@@ -36,21 +35,24 @@
display: flex;
justify-content: center;
align-items: center;
max-width: 75rem;
//max-width: 75rem;
margin: 0 auto;
overflow: hidden;
}
.carousel-content{
padding: 0rem 3.125rem;
//padding: 0rem 3.125rem;
height: 260px;
@media only screen and (max-width: 48.875rem) {
padding: 0rem 0.625rem;
}
}
.promo-image{
//width: 325px;
height: 178px;
width: 340px;
height: 186px;
overflow: hidden;
padding: 0px 4px;
@media only screen and (max-width: 48.875rem) {
width: 100%;
height: auto;
......@@ -71,8 +73,8 @@ padding: 0rem 3.125rem;
text-align: left;
}
.promo-text{
margin-left: 1.25rem;
margin-left: 1.25rem;
margin-left: 0px;
margin-top: 24px;
text-align: left;
font-size: 1rem;
line-height: 1.5rem;
......@@ -87,7 +89,7 @@ padding: 0rem 3.125rem;
}
.understrap-read-more-link{
font-weight: bold;
text-transform: uppercase;
text-transform: capitalize;
text-decoration: none;
}
......@@ -109,12 +111,13 @@ padding: 0rem 3.125rem;
.swiper-button-prev{
background-color: #EE0000;
width:2.1875rem !important;
height:2.1875rem !important;
border: 0rem solid #EE0000;
border-radius: 0rem 1.25rem 1.25rem 0rem;
border-radius: 1.25rem;
display: none;
left: -15px !important;
top:calc(50% - 1rem) !important;
&:after{
content:"" !important;
......@@ -126,7 +129,7 @@ padding: 0rem 3.125rem;
display: inline-block;
position: absolute;
top: 0.5rem;
left: 0.8125rem;
left: 11px;
}
}
......@@ -135,13 +138,14 @@ padding: 0rem 3.125rem;
background-color: #EE0000;
right: 0rem !important;
top:calc(50% - 1rem) !important;
@media only screen and (max-width:25rem) {
right: -0.625rem !important;
}
width:2.1875rem !important;
height:2.1875rem !important;
border: 0rem solid #EE0000;
border-radius: 1.25rem 0rem 0rem 1.25rem;
border-radius: 1.25rem;
display: none;
&:after{
......
......@@ -7,6 +7,8 @@ body{
}
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
max-width: 1067px !important;
padding-right: 0px;
padding-left: 0px;
}
@import "mega_menu";
......@@ -30,3 +32,4 @@ body{
@import "text_size_increased";
@import "relevant_resources";
@import "post_list_load_more";
......
......@@ -251,9 +251,9 @@ blockquote{
.badge{
opacity: 0;
position: absolute;
right: 0%;
top: -3.125rem;
box-shadow: 0rem 0.1875rem 0.375rem #0000003D;
border-radius: 1.25rem;
width: auto;
......@@ -261,8 +261,9 @@ blockquote{
z-index: 98;
padding: 0.625rem 1.25rem;
background-color: #fff;
transition: 4s ease-in-out;
transition: 0s ease-in-out;
color: #000000;
bottom: 40px;
@media only screen and (max-width: 48.875rem) {
padding: 0.625rem 1.25rem;
}
......@@ -302,7 +303,7 @@ blockquote{
font-size: 0.875rem;
line-height: 1.125rem;
font-weight: normal;
color: #000000;
color: #000000 !important;
text-align: left;
word-wrap: break-word;
word-wrap: break-word;
......
......@@ -39,6 +39,9 @@
padding-left: 0px;
display: inline-block;
padding-right: 0px;
@media only screen and (max-width: 48.875rem) {
display: block;
}
a{
color: #000;
font-size: 16px;
......@@ -56,6 +59,9 @@
display: inline-block;
padding-left: 10px;
padding-right: 10px;
@media only screen and (max-width: 48.875rem) {
content: "";
}
}
li:last-of-type::after{
display: none;
......
.home-header{
.header{
position: relative;
height: 100%;
overflow: hidden;
......@@ -6,6 +6,9 @@
background-repeat: no-repeat;
background-size: cover;
background-position: center;
@media only screen and (max-width: 48.875rem) {
min-height: 260px;
}
img{
width: 100%;
......@@ -23,42 +26,93 @@
font-weight: bold;
text-align: left;
margin-left: 0px;
margin-top: 0px;
@media only screen and (max-width: 48.875rem) {
font-size: 1.125rem;
line-height:1.375rem ;
}
}
.content-container{
position: absolute;
bottom: 0rem;
width: 100%;
}
.content-container{
position: absolute;
bottom: 0rem;
width: 100%;
display: flex;
flex-direction: column;
height: 90%;
max-height: 37.5rem;
justify-content: center;
background: transparent linear-gradient(180deg, #1A181800 0%, #000000 100%) 0% 0% no-repeat padding-box;
@media only screen and (max-width: 48.875rem) {
background:transparent;
}
p{
color: #fff;
font-size: 22px;
line-height: 28px;
text-align: left;
max-width: 550px;
margin-bottom: 44px;
}
.fx-style{
max-width: 1067px!important;
margin: auto;
display: flex;
flex-direction: column;
height: 90%;
max-height: 37.5rem;
justify-content: center;
background: transparent linear-gradient(180deg, #1A181800 0%, #000000 100%) 0% 0% no-repeat padding-box;
p{
height: 100%;
justify-content: flex-end;
}
}
.header.page{
h1{
font-size: 40px;
line-height: 45px;
}
p{
color: #fff;
font-size: 18px;
line-height: 24px;
}
.breadcrumb{
border-radius: 4px;
font-size: .75rem;
margin-bottom: 1.25rem;
background-color: #000;
color: #fff;
width: fit-content;
display: block;
position: relative;
padding: 0px 5px;
margin-bottom: 15px;
a{
text-decoration: none;
text-transform: capitalize;
color: #fff;
font-size: 22px;
line-height: 28px;
text-align: left;
max-width: 550px;
margin-bottom: 44px;
}
span{
margin: 0rem 0.625rem;
}
.fx-style{
display: flex;
flex-direction: column;
height: 100%;
strong{
font-weight: normal;
}
}
.image-side-caption{
background: rgba(0,0,0,1);
}
}
.side-caption {
&:hover, &:focus-within {
bottom:0 !important;
......@@ -97,7 +151,7 @@
}
.image-side-caption {
background: rgba(0,0,0,0.7);
background: rgba(0,0,0,1);
@media screen and (max-width: 48rem) {
background: rgba(0,0,0,1);
}
......@@ -117,3 +171,37 @@
color:white;
}
}
.full-black{
background-color: #000;
margin-left: -50%;
margin-right: -50%;
padding-left: calc(50% - 5px);
padding-right:calc(50% - 5px);
padding-top: 31px;
padding-bottom: 20px;
h2{
color:#fff;
font-size: 22px;
line-height: 28px;
margin-bottom: 24px;
}
a{
color: #EE0000;
font-size: 18px;
line-height: 22px;
}
a:hover{
color:#669999;
text-decoration: none !important;
}
p{
color: #fff;
font-size: 16px;
line-height: 21px;
}
p:has(a){
margin-bottom: 12px;
}
}
\ No newline at end of file
......
.wpml-ls-statics-shortcode_actions.wpml-ls.wpml-ls-legacy-list-horizontal{
position: absolute;
right: 20px;
top: 15px;
display: flex;
padding-top: 2px;
@media only screen and (max-width: 48.875rem) {
position: absolute;
right: 0px;
top:-12px;
}
a{
color: #000;
color: #EE0000;
font-weight: bold;
font-size: 22px;
font-size: 16px;
margin-right: 30px;
padding: 0px 10px 6px;
}
a:hover{
color: #699!important;
}
.wpml-ls-link{
// padding: 0px;
}
}
.admin-bar .wpml-ls-statics-shortcode_actions.wpml-ls.wpml-ls-legacy-list-horizontal{
......
......@@ -12,6 +12,10 @@
padding-left: 1.6875rem;
margin-left: 30px;
text-decoration: none;
width: calc(100% - 127px);
@media only screen and (max-width: 48.875rem) {
//width: calc(60% - 127px);
}
}
......@@ -23,6 +27,7 @@
margin-top: 0.9375rem;
z-index: 999;
position: relative;
width: 100%;
.navbar-brand{
margin-right:0px ;
width: 127px;
......@@ -38,14 +43,17 @@
#main-nav{
box-shadow: 0rem 0.1875rem 0.375rem #00000029;
//z-index: 9999;
@media only screen and (max-width: 48.875rem) {
height: 90PX;
}
}
#main-nav .container{
flex-direction: column;
align-items: flex-start;
margin-bottom: 0.625rem;
@media only screen and (max-width: 62.5rem) {
height: 5.625rem;
padding-top: 1.5625rem;
height: 90px;
padding-top:0px;
margin-bottom: 0rem;
}
......@@ -54,13 +62,16 @@
@media only screen and (max-width: 62.5rem) {
.branding{
margin-top: 0rem;
margin-top: 6px;
padding-left: 15px;
}
.site-title{
font-size: 1.25rem;
line-height: 1.5rem;
margin-left: 0rem;
padding-left: 1.2rem;
height: 33px;
align-self: end;
}
.navbar-brand{
......@@ -90,6 +101,9 @@
background-color: #fff;
z-index: 99;
top: 0rem;
@media only screen and (max-width: 48.875rem) {
height: 90px;
}
}
.admin-bar #wrapper-navbar {
......
......@@ -315,7 +315,7 @@
#mega-menu-wrap-primary{
width: 100%;
height: 1.875rem;
top: 3.4375rem;
top: 2.4375rem;
right: 0rem;
position:absolute;
background: transparent;
......@@ -326,10 +326,11 @@
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-right .mega-toggle-block:only-child{
background-color: #EE0000;
border-radius: 50%;
width: 2.5rem;
height: 2.5rem;
width: 35px;
height: 35px;
margin-right: 0.9375rem;
}
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-blocks-right .mega-toggle-block:active:only-child{
background-color: #669999;
......@@ -442,6 +443,11 @@
color: #fff;
margin: 0rem 0 0 0.3813rem;
line-height: 2.5rem;
@media only screen and (max-width: 62.5rem) {
line-height: 35px;
font-size: 23px;
}
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a{
......
......@@ -44,7 +44,7 @@
background-size: cover;
background-position: center;
@media screen and (max-width: 59.375rem) {
min-height: 430px;
min-height: 260px;
}
}
.search-box:hover,
......@@ -52,9 +52,13 @@
width: 100%;
height: 90px;
max-width: 1066px;
position: relative;
margin: auto;
right: unset;
position: absolute;
right: 0px;
@media only screen and (max-width: 48.875rem) {
width: 95%;
right: 2.5%;
}
}
......@@ -85,23 +89,24 @@
.search-box{
opacity: 0;
background-color: #fff;
border-radius: 1.25rem ;
max-width: 80%;
max-width:1067px;
margin: auto;
top: 2.5rem;
position: relative;
position: absolute;
top:0px;
box-shadow: -2px 7px 7px 0 rgba(0,0,0,.25);
transition: 0.5s ease-in-out;
height: 56px;
width: 56px;
float: right;
right: 0px;
overflow: hidden;
@media only screen and (max-width: 48.875rem) {
padding: 0rem 0.625rem ;
max-width: 90%;
right: 5%;
margin-top: 3.5rem;
margin-top: .5rem;
}
.search-button{
......@@ -237,31 +242,33 @@
right: 0.625rem;
}
#page-wrapper{
#full-width-page-wrapper{
margin: 0.625rem 1.875rem 0 1.875rem;
min-height: 50vh;
padding-bottom: 0px;
@media(max-width: 48rem) {
// margin: 2.5rem 2.5rem 0 2.5rem;
}
.breadcrumb{
font-size: 0.75rem;
margin-bottom: 1.25rem;
a{
text-decoration: none;
text-transform: capitalize;
}
span{
margin: 0rem 0.625rem;
.breadcrumb{
font-size: 0.75rem;
margin-bottom: 0.25rem;
a{
text-decoration: none;
text-transform: capitalize;
}
span{
margin: 0rem 0.625rem;
}
}
}
h1{
font-size: 2.8125rem;
line-height: 3.25rem;
font-size: 36px;
line-height: 40px;
font-weight: bold;
}
h1+p {
.entry-content p:first-of-type {
font-weight: bold;
}
}
......@@ -451,4 +458,23 @@ h1+p {
}
}
}
\ No newline at end of file
}
.fx-style{
.header_text{
display: block;
@media only screen and (max-width: 48.875rem) {
display: none;
}
}
}
.header_text.mobile{
display: none;
margin-bottom: 24px;
p{
font-size: 18px;
line-height: 24px;
}
@media only screen and (max-width: 48.875rem) {
display: block;
}
}
......
......@@ -20,8 +20,9 @@
}
#pojo-a11y-toolbar{
position: absolute;
position: relative;
top: 1.25rem;
@media screen and (max-width: 62.5rem){
top: 0rem;
}
......@@ -32,20 +33,21 @@
}
#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle{
z-index: 9999 !important;
right: 115px !important;
}
#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a{
width:40px;
width:20px;
box-shadow:none !important;
position: absolute;
padding-left: 5px !important;
//right: -16.875rem!important;
}
.pojo-a11y-toolbar-overlay {
position: absolute;
position: relative;
top: 3.125rem;
right: 0rem;
display: none;
border-radius: 0rem 0rem 0.625rem 0.625rem;
svg{
......@@ -58,40 +60,39 @@
#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle svg {
max-width: inherit;
border: 0.125rem #000 solid;
border: 1px #000 solid;
border-radius: 50%;
padding: 0.1875rem;
height: 1.75rem;
width: 1.75rem;
height:20px;
width:20px;
}
.pojo-a11y-toolbar-open{
z-index: 99999;
.pojo-a11y-toolbar-toggle svg {
border: 0.125rem #669999 solid !important;
border: 1px #669999 solid !important;
color: #669999;
}
.pojo-a11y-toolbar-toggle a{
color: #669999;
text-decoration: none;
background-color: transparent !important;
}
.pojo-a11y-toolbar-overlay {
position: absolute;
top: 3.125rem;
right: 0rem;
display:block;
@media screen and (max-width: 62.5rem){
top: 2.125rem;
}
}
}
#gt_float_wrapper .gt_float_switcher{
background-color: transparent !important;
}
[lang="zh-CN"]{
#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a{
right: -15rem!important;
}
}
.pojo-a11y-toolbar-text{
font-size: 1rem;
}
......@@ -111,7 +112,7 @@
.pojo-a11y-toolbar-toggle-link:hover{
color: #669999 !important;
svg {
border: 0.125rem #669999 solid !important;
border: 1px #669999 solid !important;
}
}
......@@ -119,5 +120,32 @@
text-decoration: none;
}
\ No newline at end of file
.pojo-a11y-toolbar-inner::before{
content: "";
display: block;
width: 90%;
height: 1px;
background-color: #ccc;
margin: auto;
}
#pojo-a11y-toolbar.pojo-a11y-toolbar-right .pojo-a11y-toolbar-toggle{
right: 40px !important;
}
.pojo-a11y-toolbar-open{
.pojo-a11y-toolbar-link.pojo-a11y-toolbar-toggle-link::after{
content: "";
display: block;
position: relative;
margin-top: 6px;
margin-bottom: 10px;
margin-left: 4px;
width: 13px;
height: 7px;
background-repeat: no-repeat;
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>');
@media screen and (max-width: 62.5rem){
display: none;
}
}
}
\ No newline at end of file
......
......@@ -3,7 +3,7 @@
flex-direction: row-reverse;
flex-wrap: wrap;
justify-content: center;
margin:2.25rem 0;
margin:24px 0;
.post-list-left-col {
flex-basis: 50%;
......@@ -24,7 +24,7 @@
list-style: none;
padding:0;
margin:0;
gap: 24px;
gap: 12px;
.article-card {
min-height: 117px;
// max-height: 8.438rem;
......@@ -34,12 +34,29 @@
text-decoration: none;
}
&.lg {
min-height: 30.438rem;
max-height: 30.438rem;
min-height: 28rem;
max-height: 28rem;
.image-large{
position: relative;
}
.overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
transition: .5s ease;
background-color: transparent;
}
.scale-wrapper {
min-height: 291px;
max-height: 291px;
overflow: hidden;
position: relative;
}
img {
height: 100%;
......@@ -52,6 +69,18 @@
}
}
&.sm {
.overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
transition: .5s ease;
background-color: transparent;
}
.content {
padding-bottom:0; //not sure why this was 1rem
line-height: 1.125rem;
......@@ -61,13 +90,16 @@
transition: transform .3s;
}
&:hover {
.overlay{
background: rgba(0,0,0,0.4);
}
a {
color: #699;
text-decoration: underline;
}
img {
transform: scale(1.05);
opacity: 0.8;
// transform: scale(1.05);
//opacity: 0.8;
}
}
}
......@@ -77,13 +109,14 @@
.article-card {
max-width: 31.875rem;
min-width: 31.875rem;
max-width: 31rem;
min-width: 31rem;
min-height: 8.438rem;
a {
color:white;
gap: 1.625rem;
&:hover {
p {
text-decoration: underline;
font-size: 18px;
......@@ -99,6 +132,9 @@
a {
flex-direction: column;
}
a:hover{
}
.content {
min-height: 8.25rem;
padding-top:1rem;
......@@ -169,6 +205,7 @@
max-height: 117px;
object-fit: cover;
overflow: hidden;
position: relative;
img {
object-fit: cover;
height: 100%;
......@@ -198,6 +235,20 @@
}
}
.load-more-link-out{
border-radius: 40px;
padding: 8px 88px;
background: #EE0000;
text-transform: uppercase;
font-size: 14px;
color: #fff;
font-weight: bold;
}
.load-more-link-out:hover{
background: #669999;
color: #fff;
}
.mobile-article-list {
display: none;
......
......@@ -25,7 +25,7 @@
}
.content{
width: 50%;
width: 66.66%;
display: flex;
flex-direction: column;
justify-content: flex-start;
......@@ -33,10 +33,15 @@
@media screen and (max-width: 56.25rem) {
width: 100%;
}
p{
font-weight: normal !important;
font-size: 16px;
line-height: 20px;
}
}
.image{
background-size: cover;
width: 50%;
width: 33.33%;
overflow: hidden;
border-radius: 0rem 0rem 1.25rem 1.25rem;
position: relative;
......