Skip to content

MSF / msf-climate-hub

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

www 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent de383dd6
Inline Side-by-side
Showing 7 changed files with 57 additions and 69 deletions
...@@ -17867,27 +17867,22 @@ p { ...@@ -17867,27 +17867,22 @@ p {
17867 padding: 0.625rem 1.25rem; 17867 padding: 0.625rem 1.25rem;
17868 background-color: #fff; 17868 background-color: #fff;
17869 transition: 4s ease-in-out; 17869 transition: 4s ease-in-out;
17870 color: #000000;
17870 } 17871 }
17871 @media only screen and (max-width: 48.875rem) { 17872 @media only screen and (max-width: 48.875rem) {
17872 .badge { 17873 .badge {
17873 padding: 0.625rem 1.25rem; 17874 padding: 0.625rem 1.25rem;
17874 } 17875 }
17875 } 17876 }
17876 .badge .badge-title { 17877 .badge span {
17877 color: #000000; 17878 display: block;
17879 margin-right: 20px;
17878 font-size: 1rem; 17880 font-size: 1rem;
17879 line-height: 1.875rem; 17881 line-height: 1.875rem;
17880 font-weight: bold; 17882 font-weight: bold;
17881 position: relative; 17883 right: 0px;
17882 display: inline-block;
17883 }
17884 @media only screen and (max-width: 48.875rem) {
17885 .badge .badge-title {
17886 font-size: 0rem;
17887 line-height: 0rem;
17888 }
17889 } 17884 }
17890 .badge .badge-title:after { 17885 .badge:after {
17891 content: ""; 17886 content: "";
17892 display: inline-block; 17887 display: inline-block;
17893 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="clip-path"><rect id="Rectangle_249" data-name="Rectangle 249" width="4.525" height="13.303" fill="%23fff"/></clipPath></defs><g id="Group_1856" data-name="Group 1856" transform="translate(-1152 -683)"><circle id="Ellipse_2" data-name="Ellipse 2" cx="10" cy="10" r="10" transform="translate(1152 683)" fill="%234d4d4d"/><g id="Group_1855" data-name="Group 1855" transform="translate(1160.196 686.107)"><g id="Group_1854" data-name="Group 1854" transform="translate(0 0)" clip-path="url(%23clip-path)"><path id="Path_1493" data-name="Path 1493" d="M.308,5.032V4.579q.271-.109.615-.226t.706-.208q.362-.09.688-.154A3.073,3.073,0,0,1,2.9,3.928l.326.217-1.7,8.036H2.86v.471a3.262,3.262,0,0,1-.887.471,2.948,2.948,0,0,1-1,.181,1.009,1.009,0,0,1-.751-.235A.76.76,0,0,1,0,12.525a4.52,4.52,0,0,1,.054-.706q.054-.344.145-.76L1.466,5.213ZM1.774,1.014a.968.968,0,0,1,.29-.742A1.066,1.066,0,0,1,2.824,0a1.118,1.118,0,0,1,.8.271.968.968,0,0,1,.29.742.889.889,0,0,1-.29.706,1.168,1.168,0,0,1-.8.253,1.113,1.113,0,0,1-.76-.253.889.889,0,0,1-.29-.706" transform="translate(0 0)" fill="%23fff"/></g></g></g></svg>'); 17888 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="clip-path"><rect id="Rectangle_249" data-name="Rectangle 249" width="4.525" height="13.303" fill="%23fff"/></clipPath></defs><g id="Group_1856" data-name="Group 1856" transform="translate(-1152 -683)"><circle id="Ellipse_2" data-name="Ellipse 2" cx="10" cy="10" r="10" transform="translate(1152 683)" fill="%234d4d4d"/><g id="Group_1855" data-name="Group 1855" transform="translate(1160.196 686.107)"><g id="Group_1854" data-name="Group 1854" transform="translate(0 0)" clip-path="url(%23clip-path)"><path id="Path_1493" data-name="Path 1493" d="M.308,5.032V4.579q.271-.109.615-.226t.706-.208q.362-.09.688-.154A3.073,3.073,0,0,1,2.9,3.928l.326.217-1.7,8.036H2.86v.471a3.262,3.262,0,0,1-.887.471,2.948,2.948,0,0,1-1,.181,1.009,1.009,0,0,1-.751-.235A.76.76,0,0,1,0,12.525a4.52,4.52,0,0,1,.054-.706q.054-.344.145-.76L1.466,5.213ZM1.774,1.014a.968.968,0,0,1,.29-.742A1.066,1.066,0,0,1,2.824,0a1.118,1.118,0,0,1,.8.271.968.968,0,0,1,.29.742.889.889,0,0,1-.29.706,1.168,1.168,0,0,1-.8.253,1.113,1.113,0,0,1-.76-.253.889.889,0,0,1-.29-.706" transform="translate(0 0)" fill="%23fff"/></g></g></g></svg>');
...@@ -17897,13 +17892,10 @@ p { ...@@ -17897,13 +17892,10 @@ p {
17897 height: 1.25rem; 17892 height: 1.25rem;
17898 margin-left: 0.625rem; 17893 margin-left: 0.625rem;
17899 top: 0.25rem; 17894 top: 0.25rem;
17900 position: relative; 17895 position: absolute;
17901 } 17896 right: 10px;
17902 @media only screen and (max-width: 48.875rem) { 17897 top: 15px;
17903 .badge .badge-title:after { 17898 margin-left: 10px;
17904 margin-left: 0rem;
17905 top: 0.125rem;
17906 }
17907 } 17899 }
17908 .badge .badge_content { 17900 .badge .badge_content {
17909 width: 0px; 17901 width: 0px;
...@@ -17911,6 +17903,7 @@ p { ...@@ -17911,6 +17903,7 @@ p {
17911 overflow: hidden; 17903 overflow: hidden;
17912 transition: 1s ease-in-out; 17904 transition: 1s ease-in-out;
17913 max-width: 16.875rem; 17905 max-width: 16.875rem;
17906 transition: 0.8s ease-in-out;
17914 } 17907 }
17915 .badge p { 17908 .badge p {
17916 width: 16.875rem; 17909 width: 16.875rem;
...@@ -17934,27 +17927,9 @@ p { ...@@ -17934,27 +17927,9 @@ p {
17934 padding: 0.625rem 1.25rem; 17927 padding: 0.625rem 1.25rem;
17935 } 17928 }
17936 } 17929 }
17937 .badge:hover .badge-title {
17938 display: block;
17939 }
17940 @media only screen and (max-width: 48.875rem) {
17941 .badge:hover .badge-title {
17942 font-size: 1rem;
17943 line-height: 1.875rem;
17944 }
17945 }
17946 .badge:hover .badge-title:after {
17947 float: right;
17948 }
17949 @media only screen and (max-width: 48.875rem) {
17950 .badge:hover .badge-title:after {
17951 margin-left: 0.625rem;
17952 top: 0.25rem;
17953 }
17954 }
17955 .badge:hover .badge_content { 17930 .badge:hover .badge_content {
17956 width: auto; 17931 width: 300px;
17957 height: auto; 17932 height: 100px;
17958 overflow: hidden; 17933 overflow: hidden;
17959 } 17934 }
17960 17935
......
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.
...@@ -22,7 +22,7 @@ $badge = get_field('badge'); ...@@ -22,7 +22,7 @@ $badge = get_field('badge');
22 <div class="entry-content"> 22 <div class="entry-content">
23 <?php if($badge){ 23 <?php if($badge){
24 $badge_content = get_field('badge_content'); 24 $badge_content = get_field('badge_content');
25 echo "<div class='badge'><div class='badge-title'>".$badge_content['badge_label']."</div><div class='badge_content'><p>".$badge_content['badge_text']."</p></div></div>"; 25 echo "<div class='badge'><span>".$badge_content['badge_label']."</span><div class='badge_content'><p>".$badge_content['badge_text']."</p></div></div>";
26 26
27 }?> 27 }?>
28 28
......
...@@ -236,19 +236,17 @@ blockquote{ ...@@ -236,19 +236,17 @@ blockquote{
236 padding: 0.625rem 1.25rem; 236 padding: 0.625rem 1.25rem;
237 background-color: #fff; 237 background-color: #fff;
238 transition: 4s ease-in-out; 238 transition: 4s ease-in-out;
239 color: #000000;
239 @media only screen and (max-width: 48.875rem) { 240 @media only screen and (max-width: 48.875rem) {
240 padding: 0.625rem 1.25rem; 241 padding: 0.625rem 1.25rem;
241 } 242 }
242 .badge-title{ 243 span{
243 color: #000000; 244 display: block;
245 margin-right: 20px;
244 font-size: 1rem; 246 font-size: 1rem;
245 line-height: 1.875rem; 247 line-height: 1.875rem;
246 font-weight: bold; 248 font-weight: bold;
247 position: relative; 249 right: 0px;
248 display: inline-block;
249 @media only screen and (max-width: 48.875rem) {
250 font-size: 0rem;
251 line-height: 0rem;
252 } 250 }
253 &:after{ 251 &:after{
254 content: ""; 252 content: "";
...@@ -260,19 +258,34 @@ blockquote{ ...@@ -260,19 +258,34 @@ blockquote{
260 height: 1.25rem; 258 height: 1.25rem;
261 margin-left: 0.625rem; 259 margin-left: 0.625rem;
262 top: 0.25rem; 260 top: 0.25rem;
263 position: relative; 261 position: absolute;
264 @media only screen and (max-width: 48.875rem) { 262 right: 10px;
265 margin-left: 0rem; 263 top: 15px;
266 top: 0.125rem; 264 margin-left: 10px;
267 }
268 }
269 } 265 }
266
267 // .badge-title{
268 // color: #000000;
269 // font-size: 1rem;
270 // line-height: 1.875rem;
271 // font-weight: bold;
272 // position: absolute;
273 // right: 0px;
274 // display: inline-block;
275 // //left:100%;
276 // @media only screen and (max-width: 48.875rem) {
277 // font-size: 0rem;
278 // line-height: 0rem;
279 // }
280
281 // }
270 .badge_content{ 282 .badge_content{
271 width: 0px; 283 width: 0px;
272 height: 0px; 284 height: 0px;
273 overflow: hidden; 285 overflow: hidden;
274 transition: 1s ease-in-out; 286 transition: 1s ease-in-out;
275 max-width: 16.875rem; 287 max-width: 16.875rem;
288 transition: 0.8s ease-in-out;
276 } 289 }
277 p{ 290 p{
278 width: 16.875rem; 291 width: 16.875rem;
...@@ -295,23 +308,23 @@ blockquote{ ...@@ -295,23 +308,23 @@ blockquote{
295 @media only screen and (max-width: 48.875rem) { 308 @media only screen and (max-width: 48.875rem) {
296 padding: 0.625rem 1.25rem; 309 padding: 0.625rem 1.25rem;
297 } 310 }
298 .badge-title{ 311 // .badge-title{
299 display: block; 312 // display: block;
300 @media only screen and (max-width: 48.875rem) { 313 // @media only screen and (max-width: 48.875rem) {
301 font-size:1rem; 314 // font-size:1rem;
302 line-height: 1.875rem; 315 // line-height: 1.875rem;
303 } 316 // }
304 &:after{ 317 // &:after{
305 float: right; 318 // float: right;
306 @media only screen and (max-width: 48.875rem) { 319 // @media only screen and (max-width: 48.875rem) {
307 margin-left: 0.625rem; 320 // margin-left: 0.625rem;
308 top: 0.25rem; 321 // top: 0.25rem;
309 } 322 // }
310 } 323 // }
311 } 324 // }
312 .badge_content{ 325 .badge_content{
313 width: auto; 326 width: 300px;
314 height: auto; 327 height: 100px;
315 overflow: hidden; 328 overflow: hidden;
316 } 329 }
317 330
......
...@@ -2,6 +2,6 @@ ...@@ -2,6 +2,6 @@
2 Theme Name: MSF CA Child 2 Theme Name: MSF CA Child
3 Author: Tenzing Communications 3 Author: Tenzing Communications
4 Template: msf-ca 4 Template: msf-ca
5 Version: 1.0.451 5 Version: 1.0.452
6 */ 6 */
7 7
......