Changeset 6086

Timestamp:

11/07/2017 10:59:56 PM (7 years ago)

Author:

coreymckrill

Message:

WordCamp Central: Modify markup for regional promos banner

The old markup didn't properly support the mobile version of the
banner. This commit attempts to add art direction and better support
while still being cross browser compatible.

This also uses different images for the banner.

Location:

sites/trunk/wordcamp.org/public_html/wp-content/themes/wordcamp-central-2012

Files:

• header.php (modified) (1 diff)
• style.css (modified) (2 diffs)

sites/trunk/wordcamp.org/public_html/wp-content/themes/wordcamp-central-2012/header.php

@@ -64 +64 @@
     <section class="regional-camps-promo">
         <a href="https://2017.us.wordcamp.org/tickets/">
-            <img
-                src="https://s.w.org/images/home/wcus-banner-2017.png"
-                srcset="
-                    https://s.w.org/images/home/wcus-banner-2017_small.png 800w,
-                    https://s.w.org/images/home/wcus-banner-2017.png 900w,
-                    https://s.w.org/images/home/wcus-banner-2017x2.png 1800w"
-                alt="WordCamp US 2017 in Nashville banner" />
+            <picture>
+                <source
+                    srcset="
+                        https://central.wordcamp.org/files/2017/11/wcc-wcus-2017.png,
+                        https://central.wordcamp.org/files/2017/11/wcc-wcus-2017_2x.png 2x"
+                    media="(min-width: 500px)" />
+                <source
+                    srcset="https://central.wordcamp.org/files/2017/11/wcc-wcus-2017_mobile.png" />
+                <img
+                    src="https://central.wordcamp.org/files/2017/11/wcc-wcus-2017.png"
+                    alt="WordCamp US 2017 in Nashville banner" />
+            </picture>
         </a>
     </section>

sites/trunk/wordcamp.org/public_html/wp-content/themes/wordcamp-central-2012/style.css

@@ -599 +599 @@
 
 .regional-camps-promo {
-    /* background-color: #e0f5fa; */
     background-color: #000000;
-    text-align: center;
 }
 
@@ -608 +606 @@
     max-width: 960px;
     margin: 0 auto;
+    width: 100%;
 }