Skip to content

MSF / msf-climate-hub

Go to a project
Toggle navigation
Toggle navigation pinning
bdf10794 by Jeff Balicki
Options

slider 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 06c376b5
Expand all
Inline Side-by-side
Showing 19 changed files with 272 additions and 61 deletions
...@@ -36,28 +36,112 @@ $carousel_style = get_field('carousel_style'); ...@@ -36,28 +36,112 @@ $carousel_style = get_field('carousel_style');
36 <div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> "> 36 <div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> ">
37 <?php switch($carousel_style){ 37 <?php switch($carousel_style){
38 38
39 case 'promo': ?> 39 case 'video': ?>
40 40
41 <?php if( have_rows('promo_items') ): ?> 41 <?php if( have_rows('promo_items') ): ?>
42 <div class=" carousel-items promo-carousel"> 42 <div class=" carousel-items promo-carousel">
43 <div class='swiper-wrapper'> 43 <div class='swiper-wrapper'>
44 <?php while( the_repeater_field('promo_items') ): ?> 44 <?php while( the_repeater_field('promo_items') ): ?>
45 <?php $page = get_sub_field('page'); ?> 45 <?php $index = get_row_index();
46 $modalId = 'modal-' .$index; ?>
47 <div class="swiper-slide">
48 <div class="carousel-content">
49 <a href="javascript:void(0)" class="video_open" data-bs-toggle="modal" data-bs-target="#<?php echo $modalId; ?>" >
50 <div class="promo-image video" >
51 <?php $image = get_sub_field('place_holder');
52 if( !empty( $image ) ): ?>
53 <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" loading="eager" />
54 <?php endif; ?>
55 </div>
56 <div class="promo-text"><?php echo get_sub_field('title'); ?></div>
57 </a>
58 </div>
59 </div>
60
61
62 <?php endwhile; ?>
63 </div>
64 <div class="swiper-button-prev" data-id="<?= $id ?>"></div>
65 <div class="swiper-button-next" data-id="<?= $id ?>"></div>
66 </div>
67 <?php if( have_rows('promo_items') ): ?>
68 <?php while( the_repeater_field('promo_items') ): ?>
69 <?php $index = get_row_index();
70 $modalId = 'modal-' .$index; ?>
71 <?php $iframe = get_sub_field('video');
72
73 // Use preg_match to find iframe src.
74 preg_match('/src="(.+?)"/', $iframe, $matches);
75 $src = $matches[1];
76
77
78
79 // Add extra parameters to src and replace HTML.
80 $params = array(
81 'controls' => 1,
82 'hd' => 1,
83 'autohide' => 1,
84 'enablejsapi' => 1,
85 'version' =>3,
86
87 );
88 $new_src = add_query_arg($params, $src);
89 $iframe = str_replace($src, $new_src, $iframe);
90 error_log($src);
91 error_log($iframe);
92 // Add extra attributes to iframe HTML.
93 $attributes = 'frameborder="0"';
94 $iframe = str_replace('></iframe>', ' ' . $attributes . '></iframe>', $iframe);
95 $iframe = str_replace('<iframe', '<iframe class="yt_player_iframe" ', $iframe);
96 error_log($iframe); ?>
97 <div class="modal" id="<?php echo $modalId; ?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
98 <div class="modal-dialog modal-dialog-centered modal-xl">
99 <div class="modal-content">
100 <div class="modal-header">
101 <h5 class="modal-title"></h5>
102 <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
103 </div>
104 <div class="modal-body">
105 <?php echo $iframe; ?>
106 </div>
107 </div>
108 </div>
109 </div>
110 <script>
111 var myModalEl = document.getElementById('<?php echo $modalId ?>')
112 myModalEl.addEventListener('hidden.bs.modal', function (event) {
113 jQuery('.yt_player_iframe').each(function(){
114 this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')
115 });
116 });
117 </script>
118 <?php endwhile; ?>
119 <?php endif; ?>
120 <?php else: ?>
121 <p>Please add some slides.</p>
122 <?php endif; ?>
123
124 <?php break;
125 case 'pdf': ?>
126
127 <?php if( have_rows('promo_items') ): ?>
128 <div class=" carousel-items promo-carousel pdf-carousel">
129 <div class='swiper-wrapper'>
130 <?php while( the_repeater_field('promo_items') ): ?>
131 <?php $page = get_sub_field('pdf'); ?>
46 <div class="swiper-slide"> 132 <div class="swiper-slide">
47 <div class="carousel-content"> 133 <div class="carousel-content">
48 134 <a href="<?php echo $page ?>" class="pdf_open" >
49 135 <div class="promo-image pdf" >
50 <div class="promo-image" > 136 <?php $image = get_sub_field('place_holder');
51 <?php $image = get_the_post_thumbnail_url( $page->ID, 'medium' ); 137 if( !empty( $image ) ): ?>
52 $thumbnail_id = get_post_meta( $page->ID, '_thumbnail_id', true ); 138 <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" loading="eager" />
53 $img_alt = get_post_meta ( $thumbnail_id, '_wp_attachment_image_alt', true ); 139 <?php endif; ?>
54 if(!$img_alt){
55 $img_alt = get_the_title($thumbnail_id);
56 }
57 ?>
58 <img src="<?php echo $image; ?>" alt="<?php echo $img_alt ?>" loading="eager"> 140 <img src="<?php echo $image; ?>" alt="<?php echo $img_alt ?>" loading="eager">
59 </div> 141 </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> 142 <div class="promo-text"><?php echo get_sub_field('title'); ?></div>
143 </a>
144
61 145
62 </div> 146 </div>
63 </div> 147 </div>
...@@ -65,7 +149,8 @@ $carousel_style = get_field('carousel_style'); ...@@ -65,7 +149,8 @@ $carousel_style = get_field('carousel_style');
65 </div> 149 </div>
66 <div class="swiper-button-prev" data-id="<?= $id ?>"></div> 150 <div class="swiper-button-prev" data-id="<?= $id ?>"></div>
67 <div class="swiper-button-next" data-id="<?= $id ?>"></div> 151 <div class="swiper-button-next" data-id="<?= $id ?>"></div>
68 </div> 152 </div>
153
69 <?php else: ?> 154 <?php else: ?>
70 <p>Please add some slides.</p> 155 <p>Please add some slides.</p>
71 <?php endif; ?> 156 <?php endif; ?>
......
...@@ -6061,8 +6061,8 @@ textarea.form-control-lg { ...@@ -6061,8 +6061,8 @@ textarea.form-control-lg {
6061 --bs-modal-padding: 1rem; 6061 --bs-modal-padding: 1rem;
6062 --bs-modal-margin: 0.5rem; 6062 --bs-modal-margin: 0.5rem;
6063 --bs-modal-color: ; 6063 --bs-modal-color: ;
6064 --bs-modal-bg: #fff; 6064 --bs-modal-bg: transparent;
6065 --bs-modal-border-color: var(--bs-border-color-translucent); 6065 --bs-modal-border-color: transparent;
6066 --bs-modal-border-width: 1px; 6066 --bs-modal-border-width: 1px;
6067 --bs-modal-border-radius: 0.5rem; 6067 --bs-modal-border-radius: 0.5rem;
6068 --bs-modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); 6068 --bs-modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
...@@ -6070,12 +6070,12 @@ textarea.form-control-lg { ...@@ -6070,12 +6070,12 @@ textarea.form-control-lg {
6070 --bs-modal-header-padding-x: 1rem; 6070 --bs-modal-header-padding-x: 1rem;
6071 --bs-modal-header-padding-y: 1rem; 6071 --bs-modal-header-padding-y: 1rem;
6072 --bs-modal-header-padding: 1rem 1rem; 6072 --bs-modal-header-padding: 1rem 1rem;
6073 --bs-modal-header-border-color: var(--bs-border-color); 6073 --bs-modal-header-border-color: transparent;
6074 --bs-modal-header-border-width: 1px; 6074 --bs-modal-header-border-width: 1px;
6075 --bs-modal-title-line-height: 1.5; 6075 --bs-modal-title-line-height: 1.5;
6076 --bs-modal-footer-gap: 0.5rem; 6076 --bs-modal-footer-gap: 0.5rem;
6077 --bs-modal-footer-bg: ; 6077 --bs-modal-footer-bg: ;
6078 --bs-modal-footer-border-color: var(--bs-border-color); 6078 --bs-modal-footer-border-color: transparent;
6079 --bs-modal-footer-border-width: 1px; 6079 --bs-modal-footer-border-width: 1px;
6080 position: fixed; 6080 position: fixed;
6081 top: 0; 6081 top: 0;
...@@ -6880,9 +6880,9 @@ textarea.form-control-lg { ...@@ -6880,9 +6880,9 @@ textarea.form-control-lg {
6880 --bs-offcanvas-padding-x: 1rem; 6880 --bs-offcanvas-padding-x: 1rem;
6881 --bs-offcanvas-padding-y: 1rem; 6881 --bs-offcanvas-padding-y: 1rem;
6882 --bs-offcanvas-color: ; 6882 --bs-offcanvas-color: ;
6883 --bs-offcanvas-bg: #fff; 6883 --bs-offcanvas-bg: transparent;
6884 --bs-offcanvas-border-width: 1px; 6884 --bs-offcanvas-border-width: 1px;
6885 --bs-offcanvas-border-color: var(--bs-border-color-translucent); 6885 --bs-offcanvas-border-color: transparent;
6886 --bs-offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); 6886 --bs-offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
6887 } 6887 }
6888 6888
...@@ -19890,6 +19890,8 @@ ul.sf_date_field .sf-datepicker { ...@@ -19890,6 +19890,8 @@ ul.sf_date_field .sf-datepicker {
19890 @media only screen and (max-width: 48.875rem) { 19890 @media only screen and (max-width: 48.875rem) {
19891 .header_text.mobile { 19891 .header_text.mobile {
19892 display: block; 19892 display: block;
19893 max-width: 85vw;
19894 overflow: hidden;
19893 } 19895 }
19894 } 19896 }
19895 19897
...@@ -20301,38 +20303,20 @@ ul.sf_date_field .sf-datepicker { ...@@ -20301,38 +20303,20 @@ ul.sf_date_field .sf-datepicker {
20301 line-height: 1.25rem; 20303 line-height: 1.25rem;
20302 } 20304 }
20303 20305
20304 .swiper-pagination-bullet {
20305 background: #fff !important;
20306 border: 0.125rem solid #2c2c2c !important;
20307 height: 0.625rem !important;
20308 width: 0.625rem !important;
20309 border-radius: 0% !important;
20310 background-color: #666666 !important;
20311 border: 0.0625rem solid #666666 !important;
20312 opacity: 0.25 !important;
20313 }
20314
20315 .swiper-pagination-bullet-active {
20316 opacity: 1 !important;
20317 }
20318
20319 .swiper-pagination {
20320 bottom: -2.5rem !important;
20321 }
20322
20323 .carousel:not(.is-admin) { 20306 .carousel:not(.is-admin) {
20324 background-color: transparent !important; 20307 background-color: transparent !important;
20325 left: -5%; 20308 left: -5%;
20326 width: 110%; 20309 width: 110%;
20327 margin-top: 24px; 20310 margin-top: 24px;
20311 margin-bottom: 24px;
20328 padding: 0rem 3.125rem; 20312 padding: 0rem 3.125rem;
20313 height: 280px;
20329 } 20314 }
20330 @media only screen and (max-width: 67.063rem) { 20315 @media only screen and (max-width: 67.063rem) {
20331 .carousel:not(.is-admin) { 20316 .carousel:not(.is-admin) {
20332 left: 0%; 20317 left: 0%;
20333 width: 100vw; 20318 width: 100vw;
20334 padding: 0rem 0rem; 20319 padding: 0rem 0rem;
20335 overflow: scroll;
20336 } 20320 }
20337 } 20321 }
20338 20322
...@@ -20360,18 +20344,27 @@ ul.sf_date_field .sf-datepicker { ...@@ -20360,18 +20344,27 @@ ul.sf_date_field .sf-datepicker {
20360 width: 340px; 20344 width: 340px;
20361 height: 186px; 20345 height: 186px;
20362 overflow: hidden; 20346 overflow: hidden;
20363 padding: 0px 4px; 20347 background-color: #F2F2F2;
20348 transition: all 0.5s ease-in-out;
20364 } 20349 }
20365 @media only screen and (max-width: 67.063rem) { 20350 @media only screen and (max-width: 67.063rem) {
20366 .promo-image { 20351 .promo-image {
20367 min-height: 186px !important; 20352 min-height: 186px !important;
20368 max-height: 186px !important; 20353 max-height: 186px !important;
20369 max-width: 340px; 20354 max-width: 80vw;
20370 min-width: 340px; 20355 min-width: 80vw;
20371 } 20356 }
20372 } 20357 }
20373 .promo-image img { 20358 .promo-image img {
20374 width: 100%; 20359 width: 100%;
20360 transition: all 0.5s ease-in-out;
20361 }
20362
20363 .promo-image.pdf {
20364 width: 270px;
20365 }
20366 .promo-image.pdf img {
20367 width: auto;
20375 } 20368 }
20376 20369
20377 .promo-carousel h2, .promo-carousel .h2 { 20370 .promo-carousel h2, .promo-carousel .h2 {
...@@ -20391,6 +20384,26 @@ ul.sf_date_field .sf-datepicker { ...@@ -20391,6 +20384,26 @@ ul.sf_date_field .sf-datepicker {
20391 font-size: 1rem; 20384 font-size: 1rem;
20392 line-height: 1.5rem; 20385 line-height: 1.5rem;
20393 text-align: left; 20386 text-align: left;
20387 color: #000;
20388 text-decoration: none;
20389 max-width: 320px;
20390 }
20391 .promo-carousel .pdf_open,
20392 .promo-carousel .video_open {
20393 text-decoration: none !important;
20394 font-weight: bold;
20395 }
20396 .promo-carousel .pdf_open:hover,
20397 .promo-carousel .video_open:hover {
20398 text-decoration: underline !important;
20399 }
20400 .promo-carousel .pdf_open:hover .promo-image,
20401 .promo-carousel .video_open:hover .promo-image {
20402 background-color: #c2c2c2;
20403 }
20404 .promo-carousel .pdf_open:hover .promo-image img,
20405 .promo-carousel .video_open:hover .promo-image img {
20406 filter: brightness(0.5);
20394 } 20407 }
20395 .promo-carousel .understrap-read-more-link { 20408 .promo-carousel .understrap-read-more-link {
20396 font-weight: bold; 20409 font-weight: bold;
...@@ -20401,6 +20414,25 @@ ul.sf_date_field .sf-datepicker { ...@@ -20401,6 +20414,25 @@ ul.sf_date_field .sf-datepicker {
20401 text-decoration: underline; 20414 text-decoration: underline;
20402 } 20415 }
20403 20416
20417 .swiper-pagination-bullet {
20418 background: #fff !important;
20419 border: 0.125rem solid #2c2c2c !important;
20420 height: 0.625rem !important;
20421 width: 0.625rem !important;
20422 border-radius: 0% !important;
20423 background-color: #666666 !important;
20424 border: 0.0625rem solid #666666 !important;
20425 opacity: 0.25 !important;
20426 }
20427
20428 .swiper-pagination-bullet-active {
20429 opacity: 1 !important;
20430 }
20431
20432 .swiper-pagination {
20433 bottom: -2.5rem !important;
20434 }
20435
20404 .swiper-button-next.swiper-button-disabled, 20436 .swiper-button-next.swiper-button-disabled,
20405 .swiper-button-prev.swiper-button-disabled { 20437 .swiper-button-prev.swiper-button-disabled {
20406 pointer-events: all !important; 20438 pointer-events: all !important;
...@@ -20492,6 +20524,18 @@ ul.sf_date_field .sf-datepicker { ...@@ -20492,6 +20524,18 @@ ul.sf_date_field .sf-datepicker {
20492 @media only screen and (max-width: 67.063rem) { 20524 @media only screen and (max-width: 67.063rem) {
20493 .swiper-slide { 20525 .swiper-slide {
20494 margin-right: 24px; 20526 margin-right: 24px;
20527 max-width: 80vw;
20528 min-width: 80vw;
20529 }
20530 }
20531
20532 .pdf-carousel .swiper-slide {
20533 width: 270px !important;
20534 }
20535 @media only screen and (max-width: 67.063rem) {
20536 .pdf-carousel .swiper-slide {
20537 width: auto !important;
20538 margin-right: 24px;
20495 } 20539 }
20496 } 20540 }
20497 20541
...@@ -20506,6 +20550,44 @@ ul.sf_date_field .sf-datepicker { ...@@ -20506,6 +20550,44 @@ ul.sf_date_field .sf-datepicker {
20506 } 20550 }
20507 } 20551 }
20508 20552
20553 .modal.show {
20554 background: rgba(0, 0, 0, 0.6);
20555 }
20556
20557 .modal-backdrop {
20558 display: none !important;
20559 }
20560
20561 .modal-header .btn-close {
20562 opacity: 1 !important;
20563 }
20564
20565 .modal-header .btn-close:hover {
20566 filter: invert(59%) sepia(6%) saturate(1815%) hue-rotate(131deg) brightness(94%) contrast(89%) !important;
20567 }
20568
20569 .modal-body iframe {
20570 width: 100%;
20571 height: 100%;
20572 min-height: 60vh;
20573 margin: auto;
20574 }
20575
20576 .promo-image.video {
20577 position: relative;
20578 }
20579
20580 .promo-image.video:after {
20581 content: "";
20582 position: absolute;
20583 width: 66px;
20584 height: 66px;
20585 left: 50%;
20586 top: 50%;
20587 transform: translate(-50%, -50%);
20588 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="65.928" height="65.928" viewBox="0 0 65.928 65.928"><defs><clipPath id="clip-path"><rect id="Rectangle_250" data-name="Rectangle 250" width="65.928" height="65.928" fill="%23fff"/></clipPath></defs><g id="Group_1994" data-name="Group 1994" opacity="0.6"><g id="Group_1914" data-name="Group 1914"><path id="Path_1401" data-name="Path 1401" d="M112.886,81.243,91.2,94.52V67.966Z" transform="translate(-66.167 -48.109)" fill="%23fff"/><g id="Group_1516" data-name="Group 1516"><g id="Group_1515" data-name="Group 1515" clip-path="url(%23clip-path)"><path id="Path_1402" data-name="Path 1402" d="M32.964,65.928A32.964,32.964,0,1,1,65.929,32.964,33,33,0,0,1,32.964,65.928m0-57.886A24.922,24.922,0,1,0,57.887,32.964,24.95,24.95,0,0,0,32.964,8.042" fill="%23fff"/></g></g></g></g></svg>');
20589 }
20590
20509 .pojo-a11y-grayscale { 20591 .pojo-a11y-grayscale {
20510 overflow-y: scroll !important; 20592 overflow-y: scroll !important;
20511 } 20593 }
...@@ -20525,6 +20607,7 @@ ul.sf_date_field .sf-datepicker { ...@@ -20525,6 +20607,7 @@ ul.sf_date_field .sf-datepicker {
20525 #pojo-a11y-toolbar { 20607 #pojo-a11y-toolbar {
20526 position: relative; 20608 position: relative;
20527 top: 1.25rem; 20609 top: 1.25rem;
20610 z-index: 999 !important;
20528 } 20611 }
20529 @media screen and (max-width: 62.5rem) { 20612 @media screen and (max-width: 62.5rem) {
20530 #pojo-a11y-toolbar { 20613 #pojo-a11y-toolbar {
...@@ -20537,7 +20620,7 @@ ul.sf_date_field .sf-datepicker { ...@@ -20537,7 +20620,7 @@ ul.sf_date_field .sf-datepicker {
20537 } 20620 }
20538 20621
20539 #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle { 20622 #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle {
20540 z-index: 9999 !important; 20623 z-index: 999 !important;
20541 } 20624 }
20542 20625
20543 #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a { 20626 #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a {
...@@ -21190,6 +21273,7 @@ ul.sf_date_field .sf-datepicker { ...@@ -21190,6 +21273,7 @@ ul.sf_date_field .sf-datepicker {
21190 width: 100%; 21273 width: 100%;
21191 -o-object-fit: cover; 21274 -o-object-fit: cover;
21192 object-fit: cover; 21275 object-fit: cover;
21276 transition: all 0.5s ease-in-out;
21193 } 21277 }
21194 .news-and-stories-block ul .article-card.lg a { 21278 .news-and-stories-block ul .article-card.lg a {
21195 gap: 0; 21279 gap: 0;
...@@ -21219,11 +21303,15 @@ ul.sf_date_field .sf-datepicker { ...@@ -21219,11 +21303,15 @@ ul.sf_date_field .sf-datepicker {
21219 color: #699; 21303 color: #699;
21220 text-decoration: underline; 21304 text-decoration: underline;
21221 } 21305 }
21306 .news-and-stories-block ul .article-card:hover img {
21307 filter: brightness(0.5);
21308 }
21309
21222 .article-card { 21310 .article-card {
21223 max-width: 31rem; 21311 max-width: 31rem;
21224 min-width: 31rem; 21312 min-width: 31rem;
21225 min-height: 8.438rem; 21313 min-height: 8.438rem;
21226 margin-right: 24px; 21314 margin-right: 12px;
21227 } 21315 }
21228 .article-card a { 21316 .article-card a {
21229 color: white; 21317 color: white;
...@@ -21350,6 +21438,13 @@ ul.sf_date_field .sf-datepicker { ...@@ -21350,6 +21438,13 @@ ul.sf_date_field .sf-datepicker {
21350 color: #fff; 21438 color: #fff;
21351 font-weight: bold; 21439 font-weight: bold;
21352 } 21440 }
21441 @media only screen and (min-width: 67.063rem) {
21442 .load-more-link-out {
21443 margin: auto;
21444 display: block;
21445 width: 300px;
21446 }
21447 }
21353 21448
21354 .load-more-link-out:hover { 21449 .load-more-link-out:hover {
21355 background: #669999; 21450 background: #669999;
...@@ -21377,12 +21472,12 @@ ul.sf_date_field .sf-datepicker { ...@@ -21377,12 +21472,12 @@ ul.sf_date_field .sf-datepicker {
21377 } 21472 }
21378 .mobile-article-list ul { 21473 .mobile-article-list ul {
21379 flex-wrap: nowrap; 21474 flex-wrap: nowrap;
21380 width: 1800px; 21475 width: 1400px;
21381 } 21476 }
21382 .mobile-article-list .sm, 21477 .mobile-article-list .sm,
21383 .mobile-article-list .lg { 21478 .mobile-article-list .lg {
21384 max-width: 340px; 21479 max-width: 80vw;
21385 min-width: 340px; 21480 min-width: 80vw;
21386 } 21481 }
21387 .mobile-article-list .sm .image, 21482 .mobile-article-list .sm .image,
21388 .mobile-article-list .lg .image { 21483 .mobile-article-list .lg .image {
......
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.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
...@@ -127,4 +127,18 @@ function megamenu_override_default_theme($value) { ...@@ -127,4 +127,18 @@ function megamenu_override_default_theme($value) {
127 // return $custom_logo_attr; 127 // return $custom_logo_attr;
128 // } ,10,3); 128 // } ,10,3);
129 129
130
...\ No newline at end of file ...\ No newline at end of file
130
131
132
133
134 function getName() {
135 $characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
136 $randomString = '';
137 $n=10;
138 for ($i = 0; $i < $n; $i++) {
139 $index = rand(0, strlen($characters) - 1);
140 $randomString .= $characters[$index];
141 }
142
143 return $randomString;
144 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -26127,7 +26127,7 @@ ...@@ -26127,7 +26127,7 @@
26127 var thisSwiper = this; 26127 var thisSwiper = this;
26128 var swiper_params = { 26128 var swiper_params = {
26129 modules: [Navigation, Pagination, A11y, Keyboard], 26129 modules: [Navigation, Pagination, A11y, Keyboard],
26130 slidesOffsetAfter: 0, 26130 slidesOffsetAfter: 100,
26131 slidesOffsetBefore: 0, 26131 slidesOffsetBefore: 0,
26132 spaceBetween: 24, 26132 spaceBetween: 24,
26133 // centeredSlides: true, 26133 // centeredSlides: true,
...@@ -26187,7 +26187,7 @@ ...@@ -26187,7 +26187,7 @@
26187 if (size == 2) { 26187 if (size == 2) {
26188 li += "<li class='article-card lg'><a href='" + post_obj['href'] + "'>"; 26188 li += "<li class='article-card lg'><a href='" + post_obj['href'] + "'>";
26189 if (post_obj['img_src']) { 26189 if (post_obj['img_src']) {
26190 li += "<div class='image large'><div class='scale-wrapper'><img src='" + post_obj['img_src'] + "' /></div><div class='overlay'></div></div>"; 26190 li += "<div class='image large'><div class='scale-wrapper'><img src='" + post_obj['img_src'] + "' /></div></div>";
26191 } 26191 }
26192 if (post_obj['title'].length > 100) { 26192 if (post_obj['title'].length > 100) {
26193 li += "<div class='content reduce'><p>" + post_obj['title'] + "</p><span class='anchor-dots'></span></div>"; 26193 li += "<div class='content reduce'><p>" + post_obj['title'] + "</p><span class='anchor-dots'></span></div>";
...@@ -26201,7 +26201,7 @@ ...@@ -26201,7 +26201,7 @@
26201 } else { 26201 } else {
26202 li += "<li class='article-card sm'><a href='" + post_obj['href'] + "'>"; 26202 li += "<li class='article-card sm'><a href='" + post_obj['href'] + "'>";
26203 if (post_obj['img_src']) { 26203 if (post_obj['img_src']) {
26204 li += "<div class='image'><div class='scale-wrapper'><img src='" + post_obj['img_src'] + "' /></div><div class='overlay'></div></div>"; 26204 li += "<div class='image'><div class='scale-wrapper'><img src='" + post_obj['img_src'] + "' /></div></div>";
26205 } 26205 }
26206 if (post_obj['title'].length > 100) { 26206 if (post_obj['title'].length > 100) {
26207 li += "<div class='content reduce'><p>" + post_obj['title'] + "</p>"; 26207 li += "<div class='content reduce'><p>" + post_obj['title'] + "</p>";
......
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.
...@@ -25,7 +25,7 @@ jQuery(document).ready(function($) { ...@@ -25,7 +25,7 @@ jQuery(document).ready(function($) {
25 25
26 var swiper_params = { 26 var swiper_params = {
27 modules: [Navigation, Pagination, A11y, Keyboard], 27 modules: [Navigation, Pagination, A11y, Keyboard],
28 slidesOffsetAfter: 0, 28 slidesOffsetAfter: 100,
29 slidesOffsetBefore: 0, 29 slidesOffsetBefore: 0,
30 spaceBetween: 24, 30 spaceBetween: 24,
31 // centeredSlides: true, 31 // centeredSlides: true,
...@@ -89,4 +89,6 @@ jQuery(document).ready(function($) { ...@@ -89,4 +89,6 @@ jQuery(document).ready(function($) {
89 // }); 89 // });
90 90
91 91
92
93
92 }); 94 });
...\ 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='image large'><div class='scale-wrapper'><img src='"+post_obj['img_src']+"' /></div><div class='overlay'></div></div>"; 10 li += "<div class='image large'><div class='scale-wrapper'><img src='"+post_obj['img_src']+"' /></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 class='overlay'></div></div>"; 24 li += "<div class='image'><div class='scale-wrapper'><img src='"+post_obj['img_src']+"' /></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>";
......
...@@ -7,6 +7,12 @@ $purple: #5533ff; // Thats a sample how you could change a BootStrap variable. ...@@ -7,6 +7,12 @@ $purple: #5533ff; // Thats a sample how you could change a BootStrap variable.
7 $primary: #000; // Once we've changed the value, we'll also make it the primary brand color. 7 $primary: #000; // Once we've changed the value, we'll also make it the primary brand color.
8 8
9 9
10 $modal-header-border-color: transparent;
11 $modal-footer-border-color: transparent;
12 $modal-content-bg: transparent;
13 $modal-content-border-color: transparent;
14
15
10 @font-face { 16 @font-face {
11 font-family: "PT Sans",sans-serif; font-weight:bold; 17 font-family: "PT Sans",sans-serif; font-weight:bold;
12 src: local("/../fonts/PTSans-Bold.ttf"); 18 src: local("/../fonts/PTSans-Bold.ttf");
......
...@@ -476,5 +476,7 @@ h1{ ...@@ -476,5 +476,7 @@ h1{
476 } 476 }
477 @media only screen and (max-width: 48.875rem) { 477 @media only screen and (max-width: 48.875rem) {
478 display: block; 478 display: block;
479 max-width: 85vw;
480 overflow: hidden;
479 } 481 }
480 } 482 }
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
22 #pojo-a11y-toolbar{ 22 #pojo-a11y-toolbar{
23 position: relative; 23 position: relative;
24 top: 1.25rem; 24 top: 1.25rem;
25 25 z-index: 999 !important;
26 @media screen and (max-width: 62.5rem){ 26 @media screen and (max-width: 62.5rem){
27 top: 0rem; 27 top: 0rem;
28 } 28 }
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
32 right: 0rem !important; 32 right: 0rem !important;
33 } 33 }
34 #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle{ 34 #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle{
35 z-index: 9999 !important; 35 z-index: 999 !important;
36 36
37 } 37 }
38 #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a{ 38 #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a{
......
...@@ -69,6 +69,7 @@ ...@@ -69,6 +69,7 @@
69 height: 100%; 69 height: 100%;
70 width: 100%; 70 width: 100%;
71 object-fit: cover; 71 object-fit: cover;
72 transition: all 0.5s ease-in-out;
72 } 73 }
73 a { 74 a {
74 gap:0; 75 gap:0;
...@@ -105,6 +106,7 @@ ...@@ -105,6 +106,7 @@
105 text-decoration: underline; 106 text-decoration: underline;
106 } 107 }
107 img { 108 img {
109 filter: brightness(0.5);
108 // transform: scale(1.05); 110 // transform: scale(1.05);
109 //opacity: 0.8; 111 //opacity: 0.8;
110 } 112 }
...@@ -119,7 +121,7 @@ ...@@ -119,7 +121,7 @@
119 max-width: 31rem; 121 max-width: 31rem;
120 min-width: 31rem; 122 min-width: 31rem;
121 min-height: 8.438rem; 123 min-height: 8.438rem;
122 margin-right: 24px; 124 margin-right: 12px;
123 a { 125 a {
124 color:white; 126 color:white;
125 gap: 1.625rem; 127 gap: 1.625rem;
...@@ -254,6 +256,11 @@ ...@@ -254,6 +256,11 @@
254 font-size: 14px; 256 font-size: 14px;
255 color: #fff; 257 color: #fff;
256 font-weight: bold; 258 font-weight: bold;
259 @media only screen and (min-width: 67.063rem) {
260 margin: auto;
261 display: block;
262 width: 300px;
263 }
257 } 264 }
258 .load-more-link-out:hover{ 265 .load-more-link-out:hover{
259 background: #669999; 266 background: #669999;
...@@ -283,12 +290,12 @@ ...@@ -283,12 +290,12 @@
283 width: 100vw; 290 width: 100vw;
284 ul{ 291 ul{
285 flex-wrap: nowrap; 292 flex-wrap: nowrap;
286 width: 1800px; 293 width: 1400px;
287 } 294 }
288 .sm, 295 .sm,
289 .lg{ 296 .lg{
290 max-width: 340px ; 297 max-width: 80vw;
291 min-width: 340px ; 298 min-width: 80vw;
292 .image{ 299 .image{
293 position: relative; 300 position: relative;
294 min-height: 186px; 301 min-height: 186px;
......