Skip to content

Jeff Balicki / FP_Canada

Go to a project
Toggle navigation
Toggle navigation pinning
1038aaf5 by Jeff Balicki
Options

numbers

1 parent 224446ed
Inline Side-by-side
Showing 6 changed files with 177 additions and 12 deletions
...@@ -16554,6 +16554,14 @@ ss3-force-full-width { ...@@ -16554,6 +16554,14 @@ ss3-force-full-width {
16554 color: #fff; 16554 color: #fff;
16555 line-height: 2.125rem; 16555 line-height: 2.125rem;
16556 } 16556 }
16557 @media (max-width: 1300px) {
16558 .intro {
16559 margin-left: -100%;
16560 padding-left: 100%;
16561 margin-right: -50%;
16562 padding-right: 50%;
16563 }
16564 }
16557 @media (max-width: 800px) { 16565 @media (max-width: 800px) {
16558 .intro { 16566 .intro {
16559 margin-left: -30%; 16567 margin-left: -30%;
...@@ -16564,7 +16572,6 @@ ss3-force-full-width { ...@@ -16564,7 +16572,6 @@ ss3-force-full-width {
16564 } 16572 }
16565 @media (max-width: 600px) { 16573 @media (max-width: 600px) {
16566 .intro { 16574 .intro {
16567 min-height: 750px;
16568 margin-left: -10%; 16575 margin-left: -10%;
16569 padding-left: 15%; 16576 padding-left: 15%;
16570 margin-right: -10%; 16577 margin-right: -10%;
...@@ -16587,6 +16594,14 @@ ss3-force-full-width { ...@@ -16587,6 +16594,14 @@ ss3-force-full-width {
16587 color: #333F48; 16594 color: #333F48;
16588 line-height: 1.3125rem; 16595 line-height: 1.3125rem;
16589 } 16596 }
16597 @media (max-width: 1300px) {
16598 .yellow {
16599 margin-left: -100%;
16600 padding-left: 100%;
16601 margin-right: -50%;
16602 padding-right: 50%;
16603 }
16604 }
16590 @media (max-width: 800px) { 16605 @media (max-width: 800px) {
16591 .yellow { 16606 .yellow {
16592 margin-left: -30%; 16607 margin-left: -30%;
...@@ -16597,7 +16612,6 @@ ss3-force-full-width { ...@@ -16597,7 +16612,6 @@ ss3-force-full-width {
16597 } 16612 }
16598 @media (max-width: 600px) { 16613 @media (max-width: 600px) {
16599 .yellow { 16614 .yellow {
16600 min-height: 750px;
16601 margin-left: -10%; 16615 margin-left: -10%;
16602 padding-left: 15%; 16616 padding-left: 15%;
16603 margin-right: -10%; 16617 margin-right: -10%;
...@@ -16606,22 +16620,46 @@ ss3-force-full-width { ...@@ -16606,22 +16620,46 @@ ss3-force-full-width {
16606 } 16620 }
16607 .yellow .number-text { 16621 .yellow .number-text {
16608 display: inline-block; 16622 display: inline-block;
16609 margin-left: 10px; 16623 margin-left: -10px;
16624 }
16625 .yellow .number-text:first-of-type {
16626 padding-right: 15px;
16610 } 16627 }
16611 .yellow span.number-big { 16628 .yellow span.number-big {
16612 font-family: "Calibri-bold"; 16629 font-family: "Calibri-bold";
16613 font-size: 12.8125rem; 16630 font-size: 12.8125rem;
16614 color: #012169; 16631 color: #012169;
16615 } 16632 }
16633 @media (max-width: 1300px) {
16634 .yellow span.number-big {
16635 line-height: 7.5rem;
16636 font-size: 8.5rem;
16637 display: inline-block;
16638 padding-right: 10px;
16639 }
16640 }
16616 .yellow span.number-med { 16641 .yellow span.number-med {
16617 font-family: "Calibri-bold"; 16642 font-family: "Calibri-bold";
16618 font-size: 2.4375rem; 16643 font-size: 2.4375rem;
16619 color: #333F48; 16644 color: #333F48;
16620 margin-left: 0px; 16645 margin-left: 0px;
16621 } 16646 }
16647 @media (max-width: 1300px) {
16648 .yellow span.number-med {
16649 font-size: 1.75rem;
16650 display: inline-block;
16651 width: 50%;
16652 }
16653 }
16622 .yellow span.number-med.last { 16654 .yellow span.number-med.last {
16623 margin-left: -25px; 16655 margin-left: -25px;
16624 } 16656 }
16657 @media (max-width: 1300px) {
16658 .yellow span.number-med.last {
16659 margin-left: 0px;
16660 width: 60%;
16661 }
16662 }
16625 16663
16626 .body { 16664 .body {
16627 margin-left: -100%; 16665 margin-left: -100%;
...@@ -16631,6 +16669,14 @@ ss3-force-full-width { ...@@ -16631,6 +16669,14 @@ ss3-force-full-width {
16631 padding-top: 50px; 16669 padding-top: 50px;
16632 padding-bottom: 50px; 16670 padding-bottom: 50px;
16633 } 16671 }
16672 @media (max-width: 1300px) {
16673 .body {
16674 margin-left: -100%;
16675 padding-left: 100%;
16676 margin-right: -50%;
16677 padding-right: 50%;
16678 }
16679 }
16634 @media (max-width: 800px) { 16680 @media (max-width: 800px) {
16635 .body { 16681 .body {
16636 margin-left: -30%; 16682 margin-left: -30%;
...@@ -16641,7 +16687,6 @@ ss3-force-full-width { ...@@ -16641,7 +16687,6 @@ ss3-force-full-width {
16641 } 16687 }
16642 @media (max-width: 600px) { 16688 @media (max-width: 600px) {
16643 .body { 16689 .body {
16644 min-height: 750px;
16645 margin-left: -10%; 16690 margin-left: -10%;
16646 padding-left: 15%; 16691 padding-left: 15%;
16647 margin-right: -10%; 16692 margin-right: -10%;
...@@ -16653,10 +16698,27 @@ ss3-force-full-width { ...@@ -16653,10 +16698,27 @@ ss3-force-full-width {
16653 margin-bottom: 0px !important; 16698 margin-bottom: 0px !important;
16654 } 16699 }
16655 16700
16701 @media (max-width: 1300px) {
16702 .body.numbers .wp-block-columns {
16703 flex-wrap: wrap;
16704 }
16705 }
16706 @media (max-width: 1300px) {
16707 .body.numbers .wp-block-columns .wp-block-column {
16708 margin-left: 0em !important;
16709 flex-basis: 100% !important;
16710 }
16711 }
16712
16656 .numbers-block { 16713 .numbers-block {
16657 padding: 40px 50px 30px 50px; 16714 padding: 40px 50px 30px 50px;
16658 margin-bottom: 30px; 16715 margin-bottom: 30px;
16659 } 16716 }
16717 @media (max-width: 1300px) {
16718 .numbers-block {
16719 margin-bottom: 20px;
16720 }
16721 }
16660 .numbers-block h3, .numbers-block .h3 { 16722 .numbers-block h3, .numbers-block .h3 {
16661 margin-top: 50px; 16723 margin-top: 50px;
16662 margin-bottom: -60px; 16724 margin-bottom: -60px;
...@@ -16675,6 +16737,17 @@ ss3-force-full-width { ...@@ -16675,6 +16737,17 @@ ss3-force-full-width {
16675 .numbers-block h3 span.number, .numbers-block .h3 span.number { 16737 .numbers-block h3 span.number, .numbers-block .h3 span.number {
16676 font-size: 12.8125rem; 16738 font-size: 12.8125rem;
16677 width: 33%; 16739 width: 33%;
16740 padding-right: 10px;
16741 }
16742 @media (max-width: 1300px) {
16743 .numbers-block h3 span.number, .numbers-block .h3 span.number {
16744 width: unset;
16745 }
16746 }
16747 @media (max-width: 800px) {
16748 .numbers-block h3 span.number, .numbers-block .h3 span.number {
16749 width: unset;
16750 }
16678 } 16751 }
16679 .numbers-block p { 16752 .numbers-block p {
16680 color: #fff; 16753 color: #fff;
...@@ -16691,6 +16764,12 @@ ss3-force-full-width { ...@@ -16691,6 +16764,12 @@ ss3-force-full-width {
16691 width: 72%; 16764 width: 72%;
16692 display: inline-block; 16765 display: inline-block;
16693 } 16766 }
16767 @media (max-width: 1200px) {
16768 .find-text {
16769 width: 100%;
16770 display: block;
16771 }
16772 }
16694 16773
16695 .find-number { 16774 .find-number {
16696 color: #012169; 16775 color: #012169;
...@@ -16702,6 +16781,13 @@ ss3-force-full-width { ...@@ -16702,6 +16781,13 @@ ss3-force-full-width {
16702 padding-right: 30px; 16781 padding-right: 30px;
16703 text-align: right; 16782 text-align: right;
16704 } 16783 }
16784 @media (max-width: 1200px) {
16785 .find-number {
16786 text-align: left;
16787 width: 100%;
16788 display: block;
16789 }
16790 }
16705 16791
16706 .wp-block-group.gray { 16792 .wp-block-group.gray {
16707 background-color: #f2f2f2; 16793 background-color: #f2f2f2;
...@@ -16712,6 +16798,14 @@ ss3-force-full-width { ...@@ -16712,6 +16798,14 @@ ss3-force-full-width {
16712 padding-top: 50px; 16798 padding-top: 50px;
16713 padding-bottom: 50px; 16799 padding-bottom: 50px;
16714 } 16800 }
16801 @media (max-width: 1300px) {
16802 .wp-block-group.gray {
16803 margin-left: -100%;
16804 padding-left: 100%;
16805 margin-right: -50%;
16806 padding-right: 50%;
16807 }
16808 }
16715 @media (max-width: 800px) { 16809 @media (max-width: 800px) {
16716 .wp-block-group.gray { 16810 .wp-block-group.gray {
16717 margin-left: -30%; 16811 margin-left: -30%;
...@@ -16722,7 +16816,6 @@ ss3-force-full-width { ...@@ -16722,7 +16816,6 @@ ss3-force-full-width {
16722 } 16816 }
16723 @media (max-width: 600px) { 16817 @media (max-width: 600px) {
16724 .wp-block-group.gray { 16818 .wp-block-group.gray {
16725 min-height: 750px;
16726 margin-left: -10%; 16819 margin-left: -10%;
16727 padding-left: 15%; 16820 padding-left: 15%;
16728 margin-right: -10%; 16821 margin-right: -10%;
......
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.
...@@ -131,6 +131,12 @@ div#n2-ss-2item3{ ...@@ -131,6 +131,12 @@ div#n2-ss-2item3{
131 color: #fff; 131 color: #fff;
132 line-height: 34px; 132 line-height: 34px;
133 } 133 }
134 @media (max-width: 1300px) {
135 margin-left: -100%;
136 padding-left: 100%;
137 margin-right: -50%;
138 padding-right: 50%;
139 }
134 @media (max-width: 800px) { 140 @media (max-width: 800px) {
135 margin-left: -30%; 141 margin-left: -30%;
136 padding-left: 35%; 142 padding-left: 35%;
...@@ -138,7 +144,6 @@ div#n2-ss-2item3{ ...@@ -138,7 +144,6 @@ div#n2-ss-2item3{
138 padding-right: 35%; 144 padding-right: 35%;
139 } 145 }
140 @media (max-width: 600px) { 146 @media (max-width: 600px) {
141 min-height: 750px;
142 margin-left: -10%; 147 margin-left: -10%;
143 padding-left: 15%; 148 padding-left: 15%;
144 margin-right: -10%; 149 margin-right: -10%;
...@@ -161,6 +166,12 @@ div#n2-ss-2item3{ ...@@ -161,6 +166,12 @@ div#n2-ss-2item3{
161 color: #333F48; 166 color: #333F48;
162 line-height: 21px; 167 line-height: 21px;
163 } 168 }
169 @media (max-width: 1300px) {
170 margin-left: -100%;
171 padding-left: 100%;
172 margin-right: -50%;
173 padding-right: 50%;
174 }
164 @media (max-width: 800px) { 175 @media (max-width: 800px) {
165 margin-left: -30%; 176 margin-left: -30%;
166 padding-left: 35%; 177 padding-left: 35%;
...@@ -168,7 +179,6 @@ div#n2-ss-2item3{ ...@@ -168,7 +179,6 @@ div#n2-ss-2item3{
168 padding-right: 35%; 179 padding-right: 35%;
169 } 180 }
170 @media (max-width: 600px) { 181 @media (max-width: 600px) {
171 min-height: 750px;
172 margin-left: -10%; 182 margin-left: -10%;
173 padding-left: 15%; 183 padding-left: 15%;
174 margin-right: -10%; 184 margin-right: -10%;
...@@ -176,13 +186,23 @@ div#n2-ss-2item3{ ...@@ -176,13 +186,23 @@ div#n2-ss-2item3{
176 } 186 }
177 .number-text { 187 .number-text {
178 display: inline-block; 188 display: inline-block;
179 margin-left: 10px; 189 margin-left: -10px;
180 //width: 49%; 190 //width: 49%;
181 } 191 }
192 .number-text:first-of-type{
193 padding-right: 15px;
194 }
195
182 span.number-big{ 196 span.number-big{
183 font-family: "Calibri-bold"; 197 font-family: "Calibri-bold";
184 font-size: 205px; 198 font-size: 205px;
185 color: #012169; 199 color: #012169;
200 @media (max-width: 1300px) {
201 line-height: 120px;
202 font-size: 136px;
203 display:inline-block;
204 padding-right: 10px;
205 }
186 206
187 } 207 }
188 span.number-med{ 208 span.number-med{
...@@ -190,10 +210,19 @@ span.number-med{ ...@@ -190,10 +210,19 @@ span.number-med{
190 font-size: 39px; 210 font-size: 39px;
191 color: #333F48; 211 color: #333F48;
192 margin-left: 0px; 212 margin-left: 0px;
213 @media (max-width: 1300px) {
214 font-size: 28px;
215 display:inline-block;
216 width: 50%;
217 }
218
193 } 219 }
194 span.number-med.last{ 220 span.number-med.last{
195 margin-left: -25px; 221 margin-left: -25px;
196 222 @media (max-width: 1300px) {
223 margin-left: 0px;
224 width: 60%;
225 }
197 } 226 }
198 227
199 } 228 }
...@@ -205,6 +234,12 @@ span.number-med.last{ ...@@ -205,6 +234,12 @@ span.number-med.last{
205 padding-right: 45%; 234 padding-right: 45%;
206 padding-top: 50px; 235 padding-top: 50px;
207 padding-bottom: 50px; 236 padding-bottom: 50px;
237 @media (max-width: 1300px) {
238 margin-left: -100%;
239 padding-left: 100%;
240 margin-right: -50%;
241 padding-right: 50%;
242 }
208 @media (max-width: 800px) { 243 @media (max-width: 800px) {
209 margin-left: -30%; 244 margin-left: -30%;
210 padding-left: 35%; 245 padding-left: 35%;
...@@ -212,7 +247,6 @@ span.number-med.last{ ...@@ -212,7 +247,6 @@ span.number-med.last{
212 padding-right: 35%; 247 padding-right: 35%;
213 } 248 }
214 @media (max-width: 600px) { 249 @media (max-width: 600px) {
215 min-height: 750px;
216 margin-left: -10%; 250 margin-left: -10%;
217 padding-left: 15%; 251 padding-left: 15%;
218 margin-right: -10%; 252 margin-right: -10%;
...@@ -223,10 +257,26 @@ span.number-med.last{ ...@@ -223,10 +257,26 @@ span.number-med.last{
223 margin-bottom: 0px !important; 257 margin-bottom: 0px !important;
224 } 258 }
225 259
260 .body.numbers{
261 .wp-block-columns{
262 @media (max-width: 1300px) {
263 flex-wrap: wrap;
264 }
265 .wp-block-column {
266 @media (max-width: 1300px) {
267 margin-left: 0em !important;
268 flex-basis: 100%!important;
269 }
270 }
271 }
272 }
226 273
227 .numbers-block{ 274 .numbers-block{
228 padding:40px 50px 30px 50px; 275 padding:40px 50px 30px 50px;
229 margin-bottom: 30px; 276 margin-bottom: 30px;
277 @media (max-width: 1300px) {
278 margin-bottom: 20px;
279 }
230 h3{ 280 h3{
231 margin-top: 50px; 281 margin-top: 50px;
232 margin-bottom: -60px; 282 margin-bottom: -60px;
...@@ -245,6 +295,13 @@ span.number-med.last{ ...@@ -245,6 +295,13 @@ span.number-med.last{
245 span.number{ 295 span.number{
246 font-size: 205px; 296 font-size: 205px;
247 width: 33%; 297 width: 33%;
298 padding-right: 10px;
299 @media (max-width: 1300px) {
300 width: unset;
301 }
302 @media (max-width: 800px) {
303 width: unset;
304 }
248 } 305 }
249 } 306 }
250 p{ 307 p{
...@@ -264,6 +321,10 @@ span.number-med.last{ ...@@ -264,6 +321,10 @@ span.number-med.last{
264 line-height: 44px; 321 line-height: 44px;
265 width: 72%; 322 width: 72%;
266 display: inline-block; 323 display: inline-block;
324 @media (max-width: 1200px) {
325 width: 100%;
326 display: block;
327 }
267 } 328 }
268 .find-number{ 329 .find-number{
269 color: #012169; 330 color: #012169;
...@@ -274,6 +335,11 @@ span.number-med.last{ ...@@ -274,6 +335,11 @@ span.number-med.last{
274 display: inline-block; 335 display: inline-block;
275 padding-right: 30px; 336 padding-right: 30px;
276 text-align: right; 337 text-align: right;
338 @media (max-width: 1200px) {
339 text-align: left;
340 width: 100%;
341 display: block;
342 }
277 } 343 }
278 344
279 345
...@@ -285,6 +351,12 @@ span.number-med.last{ ...@@ -285,6 +351,12 @@ span.number-med.last{
285 padding-right: 45%; 351 padding-right: 45%;
286 padding-top: 50px; 352 padding-top: 50px;
287 padding-bottom: 50px; 353 padding-bottom: 50px;
354 @media (max-width: 1300px) {
355 margin-left: -100%;
356 padding-left: 100%;
357 margin-right: -50%;
358 padding-right: 50%;
359 }
288 @media (max-width: 800px) { 360 @media (max-width: 800px) {
289 margin-left: -30%; 361 margin-left: -30%;
290 padding-left: 35%; 362 padding-left: 35%;
...@@ -292,7 +364,7 @@ span.number-med.last{ ...@@ -292,7 +364,7 @@ span.number-med.last{
292 padding-right: 35%; 364 padding-right: 35%;
293 } 365 }
294 @media (max-width: 600px) { 366 @media (max-width: 600px) {
295 min-height: 750px; 367
296 margin-left: -10%; 368 margin-left: -10%;
297 padding-left: 15%; 369 padding-left: 15%;
298 margin-right: -10%; 370 margin-right: -10%;
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
5 Author: the Understrap Contributors 5 Author: the Understrap Contributors
6 Author URI: https://github.com/understrap/understrap-child/graphs/contributors 6 Author URI: https://github.com/understrap/understrap-child/graphs/contributors
7 Template: understrap 7 Template: understrap
8 Version: 1.1.31 8 Version: 1.1.32
9 License: GNU General Public License v2 or later 9 License: GNU General Public License v2 or later
10 License URI: http://www.gnu.org/licenses/gpl-2.0.html 10 License URI: http://www.gnu.org/licenses/gpl-2.0.html
11 Text Domain: understrap-child 11 Text Domain: understrap-child
......