Skip to content

Jeremy Groot / stellervista-Intranet

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

link bock mobile menue 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 4bcd51d3
Inline Side-by-side
Showing 29 changed files with 1195 additions and 12 deletions
1 <?php
2
3 /**
4 * Carousel Block Template.
5 *
6 * @param array $block The block settings and attributes.
7 * @param string $content The block inner HTML (empty).
8 * @param bool $is_preview True during AJAX preview.
9 * @param (int|string) $post_id The post ID this block is saved to.
10 */
11
12 // Create id attribute allowing for custom "anchor" value.
13 $id = 'carousel-' . $block['id'];
14 if( !empty($block['anchor']) ) {
15 $id = $block['anchor'];
16 }
17
18 // Create class attribute allowing for custom "className" and "align" values.
19 $className = 'carousel';
20
21
22 if( !empty($block['className']) ) {
23 $className .= ' ' . $block['className'];
24 }
25 if( !empty($block['align']) ) {
26 $className .= ' align' . $block['align'];
27 }
28 if( $is_preview ) {
29 $className .= ' is-admin';
30 }
31
32 $carousel_style = get_field('carousel_style');
33
34 ?>
35 <div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> ">
36 <?php switch($carousel_style){
37 case 'count-up-infographic':
38 ?>
39 <?php if( have_rows('count_up_infographic_items') ): ?>
40 <div class="count-info carousel-items <?php echo $size; ?>"><div class='swiper-wrapper'>
41 <?php while( the_repeater_field('count_up_infographic_items') ):
42 ?>
43 <div class="swiper-slide">
44
45 <?php
46 ob_start();
47 include __DIR__."./../card/styles/count-up-infographic.php";
48 echo ob_get_clean();
49 ?>
50
51 </div>
52 <?php endwhile; ?>
53 </div></div>
54 <div class="swiper-button-prev" data-id="<?= $id ?>"></div>
55 <div class="swiper-button-next" data-id="<?= $id ?>"></div>
56
57 <?php else: ?>
58 <p>Please add some slides.</p>
59 <?php endif; ?>
60 <?php break;
61 case 'testimonials': ?>
62
63 <?php if( have_rows('testimonials_items') ): ?>
64 <div class="testimonials-carousel carousel-items "><div class='swiper-wrapper'>
65 <?php while( the_repeater_field('testimonials_items') ):
66 ?>
67 <div class="swiper-slide">
68
69 <?php
70 ob_start();
71 include __DIR__."./../card/styles/testimonials.php";
72 echo ob_get_clean();
73 ?>
74
75 </div>
76 <?php endwhile; ?>
77 </div></div>
78 <div class="swiper-button-prev" data-id="<?= $id ?>"></div>
79 <div class="swiper-button-next" data-id="<?= $id ?>"></div>
80 <?php else: ?>
81 <p>Please add some slides.</p>
82 <?php endif; ?>
83
84 <?php break;
85 case 'story': ?>
86
87 <?php if( have_rows('story_items') ): ?>
88 <div class="stories carousel-items "><div class='swiper-wrapper'>
89 <?php while( the_repeater_field('story_items') ):
90 ?>
91 <div class="swiper-slide">
92 <?php
93 ob_start();
94 include __DIR__."./../card/styles/story.php";
95 echo ob_get_clean();
96 ?>
97 </div>
98 <?php endwhile; ?>
99 </div></div>
100 <div class="swiper-button-prev" data-id="<?= $id ?>"></div>
101 <div class="swiper-button-next" data-id="<?= $id ?>"></div>
102
103 <?php else: ?>
104 <p>Please add some slides.</p>
105 <?php endif; ?>
106 <?php break;
107 case 'download': ?>
108
109 <?php if( have_rows('download_items') ): ?>
110 <div class="download carousel-items <?php echo $size; ?>"><div class='swiper-wrapper'>
111 <?php while( the_repeater_field('download_items') ):
112 ?>
113 <div class="swiper-slide">
114 <?php
115 ob_start();
116 include __DIR__."./../card/styles/download.php";
117 echo ob_get_clean();
118 ?>
119 </div>
120 <?php endwhile; ?>
121 </div></div>
122 <div class="swiper-button-prev" data-id="<?= $id ?>"></div>
123 <div class="swiper-button-next" data-id="<?= $id ?>"></div>
124 <?php else: ?>
125 <p>Please add some slides.</p>
126 <?php endif; ?>
127 <?php break;
128 case 'staff-diaries': ?>
129 <?php if( have_rows('staff_diaries_items') ): ?>
130 <div class="staff carousel-items <?php echo $size; ?>"><div class='swiper-wrapper'>
131 <?php while( the_repeater_field('staff_diaries_items') ):
132 ?>
133 <div class="swiper-slide">
134 <?php
135 ob_start();
136 include __DIR__."./../card/styles/staff-diaries.php";
137 echo ob_get_clean();
138 ?>
139 </div>
140 <?php endwhile; ?>
141 </div> </div>
142 <div class="swiper-button-prev" data-id="<?= $id ?>"></div>
143 <div class="swiper-button-next" data-id="<?= $id ?>"></div>
144 <?php else: ?>
145 <p>Please add some slides.</p>
146 <?php endif; ?>
147 <?php break;
148 case 'book-club': ?>
149 <?php if( have_rows('book_club_items') ): ?>
150 <div class="books carousel-items"><div class='swiper-wrapper'>
151 <?php while( the_repeater_field('book_club_items') ):
152 ?>
153 <div class="swiper-slide">
154 <?php
155 ob_start();
156 include __DIR__."./../card/styles/book-club.php";
157 echo ob_get_clean();
158 ?>
159 </div>
160 <?php endwhile; ?>
161 </div> </div>
162 <div class="swiper-button-prev" data-id="<?= $id ?>"></div>
163 <div class="swiper-button-next" data-id="<?= $id ?>"></div>
164 <?php else: ?>
165 <p>Please add some slides.</p>
166 <?php endif; ?>
167 <?php break;
168 default: ?>
169 <p>Please select style.</p>
170 <?php }; ?>
171 </div>
172
1 <svg xmlns="http://www.w3.org/2000/svg" width="29" height="7" viewBox="0 0 29 7">
2 <g id="Group_985" data-name="Group 985" transform="translate(-672 105)">
3 <circle id="Ellipse_16" data-name="Ellipse 16" cx="3.5" cy="3.5" r="3.5" transform="translate(672 -105)" fill="#699"/>
4 <circle id="Ellipse_24" data-name="Ellipse 24" cx="3.5" cy="3.5" r="3.5" transform="translate(683 -105)" fill="#699"/>
5 <circle id="Ellipse_25" data-name="Ellipse 25" cx="3.5" cy="3.5" r="3.5" transform="translate(694 -105)" fill="#699"/>
6 </g>
7 </svg>
1 <svg xmlns="http://www.w3.org/2000/svg" width="29" height="7" viewBox="0 0 29 7">
2 <g id="Group_985" data-name="Group 985" transform="translate(-672 105)">
3 <circle id="Ellipse_16" data-name="Ellipse 16" cx="3.5" cy="3.5" r="3.5" transform="translate(672 -105)" fill="#e00"/>
4 <circle id="Ellipse_24" data-name="Ellipse 24" cx="3.5" cy="3.5" r="3.5" transform="translate(683 -105)" fill="#e00"/>
5 <circle id="Ellipse_25" data-name="Ellipse 25" cx="3.5" cy="3.5" r="3.5" transform="translate(694 -105)" fill="#e00"/>
6 </g>
7 </svg>
1 <svg id="Group_1314" data-name="Group 1314" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.935" height="20.915" viewBox="0 0 20.935 20.915">
2 <defs>
3 <clipPath id="clip-path">
4 <rect id="Rectangle_151" data-name="Rectangle 151" width="20.935" height="20.915" fill="#699"/>
5 </clipPath>
6 </defs>
7 <path id="Path_1277" data-name="Path 1277" d="M0,0V20.915H20.934V9.763h-2.56v8.6H2.58V2.517h8.383V0Z" transform="translate(0 0)" fill="#699"/>
8 <g id="Group_1023" data-name="Group 1023" transform="translate(0 0)">
9 <g id="Group_1022" data-name="Group 1022" clip-path="url(#clip-path)">
10 <path id="Path_1278" data-name="Path 1278" d="M18.276,13.612,16.363,11.7l9.185-9.143H23V.016h6.913v6.9H27.374V4.478l-9.1,9.134" transform="translate(-8.975 -0.009)" fill="#699"/>
11 </g>
12 </g>
13 </svg>
1 <svg id="Group_1314" data-name="Group 1314" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.935" height="20.915" viewBox="0 0 20.935 20.915">
2 <defs>
3 <clipPath id="clip-path">
4 <rect id="Rectangle_151" data-name="Rectangle 151" width="20.935" height="20.915" fill="none"/>
5 </clipPath>
6 </defs>
7 <path id="Path_1277" data-name="Path 1277" d="M0,0V20.915H20.934V9.763h-2.56v8.6H2.58V2.517h8.383V0Z" transform="translate(0 0)" fill="#1a1818"/>
8 <g id="Group_1023" data-name="Group 1023" transform="translate(0 0)">
9 <g id="Group_1022" data-name="Group 1022" clip-path="url(#clip-path)">
10 <path id="Path_1278" data-name="Path 1278" d="M18.276,13.612,16.363,11.7l9.185-9.143H23V.016h6.913v6.9H27.374V4.478l-9.1,9.134" transform="translate(-8.975 -0.009)" fill="#1a1818"/>
11 </g>
12 </g>
13 </svg>
1 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="19.488" height="22" viewBox="0 0 19.488 22">
2 <defs>
3 <clipPath id="clip-path">
4 <rect id="Rectangle_217" data-name="Rectangle 217" width="19.488" height="22" fill="#fff"/>
5 </clipPath>
6 </defs>
7 <g id="Group_1435" data-name="Group 1435" clip-path="url(#clip-path)">
8 <path id="Path_1391" data-name="Path 1391" d="M16.973,22H2.529c-.034-.012-.067-.026-.1-.036a.858.858,0,0,1-.6-.545.918.918,0,0,1-.052-.333q0-2.112,0-4.225v-.122h-.1c-.15,0-.3,0-.449,0A1.233,1.233,0,0,1,.034,15.716.9.9,0,0,0,0,15.6V9a.689.689,0,0,0,.032-.1A1.231,1.231,0,0,1,1.267,7.864c.144,0,.287,0,.431,0,.024,0,.047,0,.08-.007V.982c0-.046,0-.092,0-.137A.867.867,0,0,1,2.332.053.986.986,0,0,1,2.7,0H13.056a.426.426,0,0,1,.333.146c.029.031.057.064.085.1Q15.52,2.58,17.568,4.916a.607.607,0,0,1,.167.43c0,.027,0,.055,0,.082V7.865h.1c.15,0,.3,0,.449,0a1.207,1.207,0,0,1,1.1.724,1.178,1.178,0,0,1,.1.534q0,1.851,0,3.7,0,1.315,0,2.63a1.577,1.577,0,0,1-.012.265,1.23,1.23,0,0,1-1.2,1.018h-.449c-.027,0-.053,0-.086,0v.125q0,2.08,0,4.16c0,.058,0,.116-.006.174a.862.862,0,0,1-.644.76c-.038.01-.075.024-.112.036M2.645.864v7H16.858c.021-.1.018-2.083,0-2.156h-3.7c-.034,0-.067,0-.1,0a.433.433,0,0,1-.418-.368A.867.867,0,0,1,12.63,5.2q0-2.108,0-4.215V.864Zm0,20.027H16.865V16.746H2.643Zm4.893-5.213c.037.006.067.013.1.016.249.021.5.047.749.06a10.291,10.291,0,0,0,1.611-.019,5.27,5.27,0,0,0,1.213-.262,2.8,2.8,0,0,0,1.8-1.774,4.044,4.044,0,0,0,.145-2.149,2.635,2.635,0,0,0-.525-1.166,2.867,2.867,0,0,0-1.453-.956,5.356,5.356,0,0,0-1.474-.2A14.208,14.208,0,0,0,7.943,9.3c-.135.014-.27.036-.407.054Zm-4.11-2.27a4.467,4.467,0,0,0,.86.014,3.354,3.354,0,0,0,1.057-.239,1.977,1.977,0,0,0,.889-.682,2.134,2.134,0,0,0,.349-1.553A1.784,1.784,0,0,0,5.391,9.442a3.378,3.378,0,0,0-1.137-.213,12.83,12.83,0,0,0-2.047.091c-.074.01-.148.025-.22.037V15.7h1.44ZM18.118,9.277c-.142-.02-3.864-.013-3.927.006V15.7c.121.018,1.381.013,1.456-.007v-1.71q0-.215,0-.431c0-.142,0-.285,0-.434H17.19c.128,0,.257,0,.385,0s.254.005.379,0v-1.18h-2.3c-.019-.173-.011-1.4.01-1.475h2.453Z" fill="#fff"/>
9 <path id="Path_1392" data-name="Path 1392" d="M162.156,186.269c.105-.013.207-.031.31-.038a3.028,3.028,0,0,1,1.028.069,1.655,1.655,0,0,1,1.265,1.3,2.968,2.968,0,0,1-.084,1.67,1.749,1.749,0,0,1-1.294,1.168,2.867,2.867,0,0,1-.772.08c-.149,0-.3-.01-.453-.015Z" transform="translate(-153.153 -175.879)" fill="#fff"/>
10 <path id="Path_1393" data-name="Path 1393" d="M61.758,187.832v-1.907c.038-.009.076-.02.114-.025a2.393,2.393,0,0,1,.945.025.994.994,0,0,1,.344.165.813.813,0,0,1,.315.53,1.123,1.123,0,0,1-.005.419.951.951,0,0,1-.716.754,1.939,1.939,0,0,1-.689.067c-.1-.006-.2-.018-.308-.027" transform="translate(-58.329 -175.546)" fill="#fff"/>
11 </g>
12 </svg>
1 (function($){
2
3 /**
4 * initializeBlock
5 *
6 * Adds custom JavaScript to the block HTML.
7 *
8 * @date 15/4/19
9 * @since 1.0.0
10 *
11 * @param object $block The block jQuery element.
12 * @param object attributes The block attributes (only available when editing).
13 * @return void
14 */
15 var initializeBlock = function( $block ) {
16 // $block.find('.carousel-items:not(.large)').slick({
17 // dots: false,
18 // infinite: true,
19 // speed: 300,
20 // slidesToShow: 4,
21 // adaptiveHeight: false,
22 // arrows:true,
23 // variableWidth: true,
24 // responsive: [
25 // {
26 // breakpoint: 1024,
27 // settings: {
28 // slidesToShow: 3,
29 // slidesToScroll: 1,
30 // }
31 // },
32 // {
33 // breakpoint: 600,
34 // settings: {
35 // slidesToShow: 2,
36 // slidesToScroll: 1
37 // }
38 // },
39 // {
40 // breakpoint: 480,
41 // settings: {
42 // slidesToShow: 1,
43 // slidesToScroll: 1
44 // }
45 // }
46 // // You can unslick at a given breakpoint now by adding:
47 // // settings: "unslick"
48 // // instead of a settings object
49 // ]
50 // });
51 // $block.find('.carousel-items.large').slick({
52 // dots: false,
53 // centerMode:true,
54 // infinite: true,
55 // speed: 300,
56 // slidesToShow: 2,
57 // adaptiveHeight: false,
58 // arrows:true,
59 // variableWidth: true,
60 // responsive: [
61 // {
62 // breakpoint: 1024,
63 // settings: {
64 // slidesToShow: 2,
65 // slidesToScroll: 1,
66 // }
67 // },
68 // {
69 // breakpoint: 600,
70 // settings: {
71 // slidesToShow: 2,
72 // slidesToScroll: 1
73 // }
74 // },
75 // {
76 // breakpoint: 480,
77 // settings: {
78 // slidesToShow: 1,
79 // slidesToScroll: 1
80 // }
81 // }
82 // // You can unslick at a given breakpoint now by adding:
83 // // settings: "unslick"
84 // // instead of a settings object
85 // ]
86 // });
87 // $('.slick-list').css('margin-left', $('.entry-content').css('margin-left'));
88
89 $($block).css('margin-left',"-"+$('.entry-content').css('margin-left'));
90
91 }
92
93 // Initialize each block on page load (front end).
94 // $(document).ready(function(){
95 // $('.carousel').each(function(){
96 // initializeBlock( $(this) );
97 // });
98 // });
99
100 // Initialize dynamic block preview (editor).
101 if( window.acf ) {
102 window.acf.addAction( 'render_block_preview/type=quote', initializeBlock );
103 }
104
105
106 })(jQuery);
107
108
109 // (function( $ ) {
110 // // the sameHeight functions makes all the selected elements of the same height
111 // $.fn.sameHeight = function() {
112
113 // var selector = this;
114 // var heights = [];
115
116 // // Save the heights of every element into an array
117 // selector.each(function(){
118 // var height = $(this).height();
119 // heights.push(height);
120 // });
121
122 // // Get the biggest height
123 // var maxHeight = Math.max.apply(null, heights);
124 // // Show in the console to verify
125 // // console.log(heights,maxHeight);
126
127 // // Set the maxHeight to every selected element
128 // selector.each(function(){
129 // $(this).height(maxHeight);
130 // });
131
132 // };
133
134 // }( jQuery ));
...\ No newline at end of file ...\ No newline at end of file
1
2 .carousel:not(.is-admin){
3 background-color: transparent !important;
4 left: -20px;
5 width: 100vw;
6 margin-top: 30px;
7 margin-bottom: 30px;
8 }
9
10
11
12 .carousel-items{
13 list-style: none;
14 margin-block-start: 0em;
15 margin-block-end: 0em;
16 margin-inline-start: 0px;
17 margin-inline-end: 0px;
18 padding-inline-start: 20px;
19 background-color: transparent !important;
20
21 }
22
23 .slick-list{
24
25 margin: auto;
26 margin-right: -20vw;
27
28
29 }
30
31
32
33
34
35 .slick-next{
36 right: 15px;
37 z-index: 9999;
38 top: calc(50% - 17.5px);
39 }
40 .slick-prev {
41 left: 0px;
42 z-index: 9999;
43 top: calc(50% - 17.5px);
44 }
45
46
47 .slick-next:before{
48
49 content: " ";
50 background-image: url(next-arrow.png);
51 background-size: cover;
52 width: 35px !important;
53 height: 35px !important;
54 display: block;
55 background-repeat: no-repeat;
56 opacity: 1;
57 }
58 .slick-prev:before,.slick-prev:before{
59
60 content: " ";
61 background-image: url(previous-arrow.png);
62 background-size: cover;
63 width: 35px !important;
64 height: 35px !important;
65 display: block;
66 background-repeat: no-repeat;
67 opacity: 1;
68 }
69
70 .slick-prev:hover:before{
71 background-image: url(previous-arrow-hover.png);
72 }
73 .slick-next:hover:before{
74 background-image: url(next-arrow-hover.png);
75 }
76
77
78
79 .count-up-infographic-block {
80 clear: both;
81 margin-right: 5px;
82
83 }
84
85 .count-up-infographic-block.vertical {
86 display: flex;
87 align-items: center;
88 justify-content: center;
89 text-align: center;
90 }
91
92 .count-up-infographic-block .infographic{
93 text-align: center;
94 }
95 .count-up-infographic-block .infographic img{
96 margin: auto;
97 margin-top: 10px;
98 width: 50px;
99 }
100 .count-up-infographic-block.vertical .infographic img{
101 width: 100px;
102 }
103
104 .count-up-infographic-block p {
105 font-size: 16px;
106 line-height: 20px;
107 color:#4D4D4D;
108 }
109
110 .count-up-infographic-block .countup{
111 font-size:35px;
112 line-height: 42px;
113 font-weight: bold;
114 }
115 .count-up-infographic-block.vertical .countup{
116 display: block;
117 margin: 10px 0px;
118 }
119
120 .count-up-infographic-block.vertical .column{
121 width: 100% !important;
122 }
123
124
125 .carousel-items li .count-up-infographic-block{
126 background-color: #F0F0F0;
127 width: 342px;
128 height: 342px;
129 }
130
131
132 .testimonials{
133 background-color:#D6EAF9;
134
135 }
136
137 .testimonial-text{
138 padding: 30px 50px;
139 }
140
141 .container.testimonials .row {
142 margin-right: -15px !important;
143 margin-left: -15px !important;
144 }
145 .container.testimonials p{
146 font-size: 16px !important;
147 line-height:21px !important;
148 font-style: italic;
149 }
150
151 .testimonials_image{
152 width: 100%;
153
154 }
155
156
157 .carousel-items li .testimonials{
158 background-color: #F0F0F0;
159 width: 683px;
160
161 }
162 .story{
163 width: 342px;
164 margin-right:30px;
165 background-color: #F0F0F0;
166 display: flex;
167 align-items: baseline;
168 align-content: center;
169 justify-content: left;
170 flex-direction: column;
171 margin-right:20px;
172 }
173
174 .story .row {
175 overflow: hidden;
176 }
177 .story .story-image{
178 min-height: 181px;
179 background-size: cover;
180 background-position: center;
181 transition: transform 0.3s ease-in;
182 -moz-transition: transform 0.3s ease-in;
183 -ms-transition: transform 0.3s ease-in;
184 -o-transition: transform 0.3s ease-in;
185 -webkit-transition: transform 0.3s ease-in;
186 }
187
188 .story h3{
189 font-size: 20px;
190 line-height: 25px;
191 margin-bottom: 20px;
192 }
193
194 .story a:hover .story-image{
195 transform:scale(1.05);
196 filter:brightness(1.075);
197 }
198
199 .story a:hover h3{
200 text-decoration: underline;
201 }
202
203 .story .story-content{
204 padding: 30px 40px 0px 40px;
205 }
206
207 .story .story-content p{
208 font-size: 16px;
209 line-height: 20px;
210 color:#4D4D4D;
211 }
212
213 .story .more-link {
214 background-image: url("more.svg");
215 background-repeat: no-repeat;
216 text-indent: -999px;
217 text-align: left;
218 overflow: hidden;
219 display: block;
220 height: 10px;
221 width: 100%;
222 align-items: flex-end;
223 margin:0px 40px 30px 40px;
224
225 }
226 .story a {
227 text-decoration: none;
228 color: inherit;
229 }
230 .story a:hover{
231 color: inherit;
232 }
233 .story a:hover .more-link {
234 background-image: url("more-hover.svg");
235 }
236 .carousel-items li .download {
237 width:449px;
238 margin-right:20px;
239 }
240 .download a{
241 text-decoration:none;
242 }
243 .download .row {
244 overflow: hidden;
245 }
246 .download .download-image{
247 min-height: 235px;
248 background-size: cover;
249 background-position: center;
250 transition: transform 0.3s ease-in;
251 -moz-transition: transform 0.3s ease-in;
252 -ms-transition: transform 0.3s ease-in;
253 -o-transition: transform 0.3s ease-in;
254 -webkit-transition: transform 0.3s ease-in;
255 }
256 .download .download-bar{
257 background-color:#EE0000;
258 position: relative;
259 }
260 .download a:hover .download-bar{
261 background-color:#669999;
262 }
263 .download a:hover .download-image {
264 transform:scale(1.05);
265 filter:brightness(1.075);
266 }
267
268 .download .download-text{
269 text-align:center;
270 padding:15px;
271 color:#fff;
272 text-transform: uppercase;
273 margin:auto;
274 width: 200px;
275
276 }
277
278 .download .download-text:after{
279 display:inline-block;
280 content: "";
281 background: url("pdf-icon.svg") no-repeat;
282 width: 20px;
283 height: 22px;
284 margin-left:10px;
285 position: absolute;
286
287 }
288
289
290 .staff-diaries {
291 width: 200px;
292 margin-right:20px;
293 }
294 .staff-diaries .staff-image{
295 min-height: 200px;
296 background-size: cover;
297 background-position: center;
298 transition: transform 0.3s ease-in;
299 -moz-transition: transform 0.3s ease-in;
300 -ms-transition: transform 0.3s ease-in;
301 -o-transition: transform 0.3s ease-in;
302 -webkit-transition: transform 0.3s ease-in;
303 }
304
305 .staff-diaries .row {
306 overflow: hidden;
307 }
308
309 .staff-diaries a:hover .staff-image {
310 transform:scale(1.05);
311 filter:brightness(1.075);
312 }
313
314 .staff-diaries .staff-content{
315 margin-top:10px;
316 font-size: 16px;
317 line-height: 20px;
318 color:#4D4D4D;
319 }
320 .staff-diaries .staff-content strong{
321 color:#000;
322 }
323
324
325 .book-club {
326 width: 200px;
327 margin-right:20px;
328 }
329 .book-club a{
330 text-decoration: none;
331 color: inherit;
332 }
333 .book-club .book-image{
334 min-height: 200px;
335 background-size: cover;
336 background-position: center;
337 position: relative;
338 transition: transform 0.3s ease-in;
339 -moz-transition: transform 0.3s ease-in;
340 -ms-transition: transform 0.3s ease-in;
341 -o-transition: transform 0.3s ease-in;
342 -webkit-transition: transform 0.3s ease-in;
343 }
344 .book-club .book-content p:first-of-type {
345 position: relative;
346 }
347 .book-club .book-content p:first-of-type::before{
348 display: inline-block;
349 content: "";
350 background: url("new-window.svg") no-repeat;
351 width: 21px;
352 height: 22px;
353 margin-left: 10px;
354 position: absolute;
355 top: 0;
356 right: 1px;
357 }
358
359 .book-club .row {
360 overflow: hidden;
361 }
362
363 .book-club a:hover .book-image {
364 transform:scale(1.05);
365 filter:brightness(1.075);
366 }
367
368 .book-club a:hover .book-content p:first-of-type::before{
369 background: url("new-window-hover.svg") no-repeat;
370
371 }
372 .book-club .book-content{
373 margin-top:10px;
374 font-size: 16px;
375 line-height: 20px;
376 color:#4D4D4D;
377 }
378
379
380 .book-club .book-content strong{
381 color:#000;
382 }
383 .book-club a:hover .book-content strong{
384 text-decoration: underline;
385 }
...\ No newline at end of file ...\ No newline at end of file
1 <?php
2
3 /**
4 * Link Block Template.
5 *
6 * @param array $block The block settings and attributes.
7 * @param string $content The block inner HTML (empty).
8 * @param bool $is_preview True during AJAX preview.
9 * @param (int|string) $post_id The post ID this block is saved to.
10 */
11
12
13
14 $fields = get_fields();
15 $style = get_field('style');
16
17 switch($style){
18 case 'image': ?>
19 <a class="block-link" href="<?php echo $fields['link']; ?>">
20 <div class="link-block image" style="background-image: url('<?php the_field('image'); ?>')">
21 <div class="link"><?php echo $fields['link_text']; ?> </div>
22 </div>
23 </a>
24 <?php
25 break;
26 case 'text': ?>
27 <a class="block-link" href="<?php echo $fields['link']; ?>">
28 <div class="link-block Text">
29 <?php echo $fields['text']; ?>
30 <div class="link"><?php echo $fields['link_text']; ?> </div>
31 </div>
32 </a>
33 <?php
34 break;
35 case 'image-text':?>
36 <a class="block-link" href="<?php echo $fields['link']; ?>">
37 <div class="link-block image-text">
38 <div class="row">
39 <div class="col-md-12 col-lg-6 text"><?php echo $fields['text']; ?></div>
40 <div class="col-md-12 col-lg-6 img" style="background-image: url('<?php the_field('image'); ?>')"> </div>
41 </div>
42 <div class="link"><?php echo $fields['link_text']; ?> </div>
43 </div>
44 </a>
45 <?php
46 break;
47 default: ?>
48 <p>Please select style.</p>
49
50 <?php };
...\ No newline at end of file ...\ No newline at end of file
...@@ -14207,12 +14207,33 @@ figure.woocommerce-product-gallery__wrapper { ...@@ -14207,12 +14207,33 @@ figure.woocommerce-product-gallery__wrapper {
14207 width: calc(100% - 280px); 14207 width: calc(100% - 280px);
14208 padding-top: 0px; 14208 padding-top: 0px;
14209 } 14209 }
14210 @media only screen and (max-width: 1260px) {
14211 #page-wrapper {
14212 width: 100%;
14213 }
14214 }
14210 #page-wrapper #content { 14215 #page-wrapper #content {
14211 position: relative; 14216 position: relative;
14212 } 14217 }
14213 14218
14219 .wrapper .container {
14220 padding: 0 160px 40px 50px;
14221 }
14222 @media only screen and (max-width: 1260px) {
14223 .wrapper .container {
14224 padding: 0;
14225 }
14226 }
14227
14228 h2, .h2 {
14229 color: #1A3668;
14230 font-size: 28px;
14231 line-height: 36px;
14232 }
14233
14214 #wrapper-navbar { 14234 #wrapper-navbar {
14215 position: relative; 14235 position: relative;
14236 z-index: 999;
14216 display: inline-block; 14237 display: inline-block;
14217 width: 275px; 14238 width: 275px;
14218 height: 768px; 14239 height: 768px;
...@@ -14221,6 +14242,55 @@ figure.woocommerce-product-gallery__wrapper { ...@@ -14221,6 +14242,55 @@ figure.woocommerce-product-gallery__wrapper {
14221 padding: 41px 27px 41px 42px; 14242 padding: 41px 27px 41px 42px;
14222 background-color: #F6F6F6; 14243 background-color: #F6F6F6;
14223 box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137); 14244 box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
14245 transition: 0.5s;
14246 }
14247 @media only screen and (max-width: 1260px) {
14248 #wrapper-navbar {
14249 position: absolute;
14250 right: -275px;
14251 }
14252 }
14253
14254 #wrapper-navbar.show {
14255 right: 0px;
14256 }
14257
14258 .navbar-toggler {
14259 display: none;
14260 z-index: 999;
14261 position: absolute;
14262 right: 290px;
14263 top: 20px;
14264 height: 54px;
14265 width: 54px;
14266 background-color: #1A3668;
14267 border-radius: 0px;
14268 transition: 0s;
14269 }
14270 @media only screen and (max-width: 1260px) {
14271 .navbar-toggler {
14272 display: block !important;
14273 }
14274 }
14275
14276 .hamburger .line {
14277 width: 30px;
14278 height: 4px;
14279 background-color: #fff;
14280 border-radius: 4px;
14281 display: block;
14282 margin: 8px auto;
14283 transition: all 0.3s ease-in-out;
14284 }
14285
14286 #wrapper-navbar.show .hamburger .line:nth-child(2) {
14287 opacity: 0;
14288 }
14289 #wrapper-navbar.show .hamburger .line:nth-child(1) {
14290 transform: translateY(13px) rotate(45deg);
14291 }
14292 #wrapper-navbar.show .hamburger .line:nth-child(3) {
14293 transform: translateY(-11px) rotate(-45deg);
14224 } 14294 }
14225 14295
14226 #main-menu { 14296 #main-menu {
...@@ -14434,4 +14504,98 @@ figure.woocommerce-product-gallery__wrapper { ...@@ -14434,4 +14504,98 @@ figure.woocommerce-product-gallery__wrapper {
14434 display: none; 14504 display: none;
14435 } 14505 }
14436 14506
14507 .entry-content .is-layout-constrained.wp-block-group {
14508 box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
14509 padding: 40px 32px;
14510 }
14511
14512 .js-accordion-item {
14513 border-top: 1px solid #000;
14514 padding: 20px 20px 15px 0px;
14515 }
14516
14517 .js-accordion-controller {
14518 color: #000;
14519 font-size: 18px;
14520 line-height: 24px;
14521 }
14522
14523 .c-accordion__content {
14524 padding: 20px 0px 10px 0px;
14525 width: 80%;
14526 }
14527
14528 .c-accordion__title:after {
14529 content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10.636' viewBox='0 0 18 10.636'%3E%3Cpath id='Path_6' data-name='Path 6' d='M392.848 305.425a1.532 1.532 0 0 1-2.227 0l-7.443-7.386a1.572 1.572 0 0 1 0-2.268l7.443-7.386a1.532 1.532 0 0 1 2.227 0 1.5 1.5 0 0 1 0 2.21l-6.329 6.281 6.329 6.339A1.5 1.5 0 0 1 392.848 305.425Z' transform='translate(-287.905 393.331) rotate(-90)' fill='%23183668'/%3E%3C/svg%3E");
14530 font-weight: 300;
14531 position: absolute;
14532 right: 0;
14533 top: 50%;
14534 transform: translateY(-50%);
14535 }
14536
14537 .is-open > .c-accordion__title:after {
14538 content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18.183' height='10.949' viewBox='0 0 18.183 10.949'%3E%3Cpath id='Path_6' data-name='Path 6' d='M392.848 305.425a1.532 1.532 0 0 1-2.227 0l-7.443-7.386a1.572 1.572 0 0 1 0-2.268l7.443-7.386a1.532 1.532 0 0 1 2.227 0 1.5 1.5 0 0 1 0 2.21l-6.329 6.281 6.329 6.339A1.5 1.5 0 0 1 392.848 305.425Z' transform='matrix(-0.017 1 -1 -0.017 312.723 -377.298)' fill='%23183668'/%3E%3C/svg%3E");
14539 }
14540
14541 h2 + .wp-block-pb-accordion-item, .h2 + .wp-block-pb-accordion-item {
14542 margin-top: 40px;
14543 }
14544
14545 .block-link {
14546 text-decoration: none;
14547 }
14548 .block-link .link-block {
14549 color: #000;
14550 height: 350px;
14551 position: relative;
14552 background-size: cover;
14553 background-position: center;
14554 box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
14555 padding: 40px 32px 0px 32px;
14556 transition: 0.5s;
14557 }
14558 .block-link .link-block .link {
14559 padding-top: 18px;
14560 text-transform: uppercase;
14561 color: #fff;
14562 font-size: 16px;
14563 line-height: 20px;
14564 position: absolute;
14565 bottom: 0px;
14566 left: 0px;
14567 width: 100%;
14568 height: 50px;
14569 text-align: center;
14570 background-size: cover;
14571 background-position: top right;
14572 background-image: url("../images/bottom-md-border.png");
14573 }
14574
14575 .block-link:hover .link-block {
14576 color: #000;
14577 background-size: 105%;
14578 background-position: center;
14579 }
14580
14581 .link-block.image-text {
14582 overflow: hidden;
14583 padding: 0px;
14584 height: auto;
14585 }
14586 .link-block.image-text .text {
14587 padding: 25px 47px 60px 47px;
14588 }
14589 .link-block.image-text .img {
14590 background-size: cover;
14591 background-position: center;
14592 }
14593 .link-block.image-text .link {
14594 padding-top: 17px;
14595 height: 50px;
14596 background-size: cover;
14597 background-position: center;
14598 background-image: url("../images/bottom-lg-border.png");
14599 }
14600
14437 /*# sourceMappingURL=child-theme.css.map */ 14601 /*# sourceMappingURL=child-theme.css.map */
...\ No newline at end of file ...\ No newline at end of file
......
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.
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
8 // Exit if accessed directly. 8 // Exit if accessed directly.
9 defined( 'ABSPATH' ) || exit; 9 defined( 'ABSPATH' ) || exit;
10 include 'inc/shortcodes.php'; 10 include 'inc/shortcodes.php';
11 include 'inc/blocks.php';
11 12
12 13
13 /** 14 /**
......
...@@ -24,17 +24,7 @@ $container = get_theme_mod( 'understrap_container_type' ); ...@@ -24,17 +24,7 @@ $container = get_theme_mod( 'understrap_container_type' );
24 <!-- Your site branding in the menu --> 24 <!-- Your site branding in the menu -->
25 <?php get_template_part( 'global-templates/navbar-branding' ); ?> 25 <?php get_template_part( 'global-templates/navbar-branding' ); ?>
26 26
27 <button 27
28 class="navbar-toggler"
29 type="button"
30 data-bs-toggle="collapse"
31 data-bs-target="#navbarNavDropdown"
32 aria-controls="navbarNavDropdown"
33 aria-expanded="false"
34 aria-label="<?php esc_attr_e( 'Toggle navigation', 'understrap' ); ?>"
35 >
36 <span class="navbar-toggler-icon"></span>
37 </button>
38 28
39 <!-- The WordPress Menu goes here --> 29 <!-- The WordPress Menu goes here -->
40 <?php 30 <?php
......
...@@ -32,7 +32,21 @@ $navbar_type = get_theme_mod( 'understrap_navbar_type', 'collapse' ); ...@@ -32,7 +32,21 @@ $navbar_type = get_theme_mod( 'understrap_navbar_type', 'collapse' );
32 <a class="skip-link <?php echo understrap_get_screen_reader_class( true ); ?>" href="#content"> 32 <a class="skip-link <?php echo understrap_get_screen_reader_class( true ); ?>" href="#content">
33 <?php esc_html_e( 'Skip to content', 'understrap' ); ?> 33 <?php esc_html_e( 'Skip to content', 'understrap' ); ?>
34 </a> 34 </a>
35 35 <button
36 class="navbar-toggler"
37 type="button"
38 data-bs-toggle="collapse"
39 data-bs-target="#wrapper-navbar"
40 aria-controls="wrapper-navbar"
41 aria-expanded="false"
42 aria-label="<?php esc_attr_e( 'Toggle navigation', 'understrap' ); ?>"
43 >
44 <div class="hamburger">
45 <span class="line"></span>
46 <span class="line"></span>
47 <span class="line"></span>
48 </div>
49 </button>
36 <?php get_template_part( 'global-templates/navbar', $navbar_type . '-' . $bootstrap_version ); ?> 50 <?php get_template_part( 'global-templates/navbar', $navbar_type . '-' . $bootstrap_version ); ?>
37 51
38 </header><!-- #wrapper-navbar --> 52 </header><!-- #wrapper-navbar -->
......
1 <?php
2
3 // Exit if accessed directly.
4 defined( 'ABSPATH' ) || exit;
5
6
7
8 add_action('acf/init', 'my_acf_init_block_types');
9 function my_acf_init_block_types() {
10
11 // Check function exists.
12 if( function_exists('acf_register_block_type') ) {
13
14 acf_register_block_type( array(
15 'title' => __( 'Carousel', 'client_textdomain' ),
16 'name' => 'carousel',
17 'render_template' => 'blocks/carousel/carousel.php',
18 'mode' => 'edit',
19 'supports' => [
20 'align' => false,
21 'anchor' => true,
22 'customClassName' => true
23 ]
24 ));
25
26
27 acf_register_block_type( array(
28 'title' => __( 'Link Blocks', 'client_textdomain' ),
29 'name' => 'link-block',
30 'render_template' => 'blocks/link-block/link-block.php',
31 'mode' => 'edit',
32 'supports' => [
33 'align' => false,
34 'anchor' => true,
35 'customClassName' => true
36 ]
37 ));
38
39 }
40 }
41
42 // if( function_exists('acf_add_options_page') ) {
43
44 // acf_add_options_page(array(
45 // 'page_title' => 'Theme General Settings',
46 // 'menu_title' => 'Theme Settings',
47 // 'menu_slug' => 'theme-general-settings',
48 // 'capability' => 'edit_posts',
49 // 'redirect' => false
50 // ));
51
52 // }
53
54
...@@ -22,6 +22,7 @@ $container = get_theme_mod( 'understrap_container_type' ); ...@@ -22,6 +22,7 @@ $container = get_theme_mod( 'understrap_container_type' );
22 <div class="wrapper" id="page-wrapper"> 22 <div class="wrapper" id="page-wrapper">
23 <div class="hero-container header-section blur-image" data-src="<?php echo the_post_thumbnail_url(); ?>" style="--med-image: url(<?php echo the_post_thumbnail_url('medium'); ?>);"> 23 <div class="hero-container header-section blur-image" data-src="<?php echo the_post_thumbnail_url(); ?>" style="--med-image: url(<?php echo the_post_thumbnail_url('medium'); ?>);">
24 <div class="full-image"> 24 <div class="full-image">
25
25 <?php $hero_content = apply_filters('the_content', get_post_meta(get_the_id(), 'hero_content', true)); 26 <?php $hero_content = apply_filters('the_content', get_post_meta(get_the_id(), 'hero_content', true));
26 if (!empty($hero_content)) {?> 27 if (!empty($hero_content)) {?>
27 <div class="container"> 28 <div class="container">
......
...@@ -13,6 +13,8 @@ ...@@ -13,6 +13,8 @@
13 @import "theme/header"; 13 @import "theme/header";
14 @import "theme/footer"; 14 @import "theme/footer";
15 @import "theme/login"; 15 @import "theme/login";
16 @import "theme/body";
17 @import "theme/link_block";
16 // @import "assets/understrap/theme/colors"; // <-------- This creates the necessary bootstrap color classes. 18 // @import "assets/understrap/theme/colors"; // <-------- This creates the necessary bootstrap color classes.
17 // @import "assets/understrap/theme/blocks"; // <-------- This adds Bootstrap styles to blocks. 19 // @import "assets/understrap/theme/blocks"; // <-------- This adds Bootstrap styles to blocks.
18 // @import "assets/understrap/theme/contact-form7"; // <-------- Contact Form 7 - Bootstrap 4 support 20 // @import "assets/understrap/theme/contact-form7"; // <-------- Contact Form 7 - Bootstrap 4 support
......
1 .entry-content{
2 .is-layout-constrained.wp-block-group{
3 box-shadow: 0px 3px 6px #00000029;
4 padding: 40px 32px;
5 }
6 }
7
8 .js-accordion-item{
9 border-top: 1px solid #000;
10 padding: 20px 20px 15px 0px;
11 }
12 .js-accordion-controller{
13 color: #000;
14 font-size: 18px;
15 line-height: 24px;
16 }
17 .c-accordion__content{
18 padding: 20px 0px 10px 0px;
19 width: 80%;
20 }
21 .c-accordion__title:after{
22 content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10.636' viewBox='0 0 18 10.636'%3E%3Cpath id='Path_6' data-name='Path 6' d='M392.848 305.425a1.532 1.532 0 0 1-2.227 0l-7.443-7.386a1.572 1.572 0 0 1 0-2.268l7.443-7.386a1.532 1.532 0 0 1 2.227 0 1.5 1.5 0 0 1 0 2.21l-6.329 6.281 6.329 6.339A1.5 1.5 0 0 1 392.848 305.425Z' transform='translate(-287.905 393.331) rotate(-90)' fill='%23183668'/%3E%3C/svg%3E");
23 font-weight: 300;
24 position: absolute;
25 right: 0;
26 top: 50%;
27 transform: translateY(-50%);
28 }
29 .is-open>.c-accordion__title:after{
30 content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18.183' height='10.949' viewBox='0 0 18.183 10.949'%3E%3Cpath id='Path_6' data-name='Path 6' d='M392.848 305.425a1.532 1.532 0 0 1-2.227 0l-7.443-7.386a1.572 1.572 0 0 1 0-2.268l7.443-7.386a1.532 1.532 0 0 1 2.227 0 1.5 1.5 0 0 1 0 2.21l-6.329 6.281 6.329 6.339A1.5 1.5 0 0 1 392.848 305.425Z' transform='matrix(-0.017 1 -1 -0.017 312.723 -377.298)' fill='%23183668'/%3E%3C/svg%3E");
31 }
32
33 h2 + .wp-block-pb-accordion-item{
34 margin-top: 40px;
35 }
36
...@@ -14,7 +14,25 @@ ...@@ -14,7 +14,25 @@
14 vertical-align: top; 14 vertical-align: top;
15 width: calc(100% - 280px); 15 width: calc(100% - 280px);
16 padding-top: 0px; 16 padding-top: 0px;
17 @media only screen and (max-width: 1260px) {
18 width: 100%;
19 }
17 #content { 20 #content {
18 position: relative; 21 position: relative;
19 } 22 }
20 } 23 }
24
25 .wrapper .container{
26 padding:0 160px 40px 50px;
27 @media only screen and (max-width: 1260px) {
28 padding:0;
29 }
30 }
31
32
33 h2{
34 color: #1A3668;
35 font-size: 28px;
36 line-height: 36px;
37
38 }
...\ No newline at end of file ...\ No newline at end of file
......
1 .block-link{
2 text-decoration: none;
3 .link-block{
4 color: #000;
5 height:350px;
6 position: relative;
7 background-size: cover;
8 background-position:center;
9 box-shadow: 0px 3px 6px #00000029;
10 padding:40px 32px 0px 32px;
11 transition: 0.5s;
12 .link{
13 padding-top: 18px;
14 text-transform: uppercase;
15 color: #fff;
16 font-size: 16px;
17 line-height: 20px;
18 position: absolute;
19 bottom: 0px;
20 left: 0px;
21 width: 100%;
22 height: 50px;
23 text-align: center;
24 background-size: cover;
25 background-position: top right;
26 background-image: url("../images/bottom-md-border.png");
27 }
28 }
29 }
30
31 .block-link:hover{
32 .link-block{
33 color: #000;
34 background-size: 105%;
35 background-position:center;
36 }
37 }
38
39 .link-block.image-text{
40 overflow: hidden;
41 padding:0px;
42 height:auto;
43 .text{
44 padding:25px 47px 60px 47px;
45 }
46 .img{
47 background-size: cover;
48 background-position:center;
49 }
50 .link{
51 padding-top: 17px;
52 height: 50px;
53 background-size: cover;
54 background-position:center;
55 background-image: url("../images/bottom-lg-border.png");
56 }
57 }
...\ No newline at end of file ...\ No newline at end of file
1 #wrapper-navbar{ 1 #wrapper-navbar{
2 position: relative; 2 position: relative;
3 z-index: 999;
3 display: inline-block; 4 display: inline-block;
4 width: 275px; 5 width: 275px;
5 height: 768px; 6 height: 768px;
...@@ -8,7 +9,59 @@ ...@@ -8,7 +9,59 @@
8 padding: 41px 27px 41px 42px; 9 padding: 41px 27px 41px 42px;
9 background-color: #F6F6F6; 10 background-color: #F6F6F6;
10 box-shadow: 0px 3px 6px #00000029; 11 box-shadow: 0px 3px 6px #00000029;
12 transition: 0.5s;
13 @media only screen and (max-width: 1260px) {
14 position: absolute;
15 right: -275px;
16 }
17
18 }
19 #wrapper-navbar.show{
20 right: 0px;
21 }
22 .navbar-toggler{
23 display: none;
24 z-index: 999;
25 position: absolute;
26 right: 290px;
27 top: 20px;
28 height: 54px;
29 width: 54px;
30 background-color: #1A3668;
31 border-radius: 0px;
32 transition: 0s;
33 @media only screen and (max-width: 1260px) {
34 display: block !important;
35 }
11 } 36 }
37
38 .hamburger .line{
39 width: 30px;
40 height: 4px;
41 background-color: #fff;
42 border-radius: 4px;
43 display: block;
44 margin: 8px auto;
45 -webkit-transition: all 0.3s ease-in-out;
46 -o-transition: all 0.3s ease-in-out;
47 transition: all 0.3s ease-in-out;
48 }
49 #wrapper-navbar.show{
50
51 .hamburger .line:nth-child(2){
52 opacity: 0;
53 }
54
55 .hamburger .line:nth-child(1){
56 transform: translateY(13px) rotate(45deg);
57 }
58
59 .hamburger .line:nth-child(3){
60 transform: translateY(-11px) rotate(-45deg);
61 }
62 }
63
64
12 #main-menu{ 65 #main-menu{
13 flex-direction: column; 66 flex-direction: column;
14 } 67 }
......