Changeset 6993

Timestamp:

03/31/2018 01:00:27 AM (8 years ago)

Author:

iandunn

Message:

WP15: Format events list in columns.

Location:

sites/trunk/wp15.wordpress.net/public_html/content/themes/twentyseventeen-wp15

Files:

• page-about.php (modified) (1 diff)
• style.css (modified) (4 diffs)

sites/trunk/wp15.wordpress.net/public_html/content/themes/twentyseventeen-wp15/page-about.php

@@ -28 +28 @@
                                         <img src="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/images/confetti-divider.svg" alt="<?php esc_attr_e( 'Confetti with the WordPress logo and WP15 color scheme', 'wp15' ); ?>" />
 
-                                        <p>
+                                        <p class="wp10-nostalgia">
                                                 <?php printf(
                                                         wp_kses_data( __( 'Check out <a href="%s">this post about the WordPress 10th anniversary</a>.', 'wp15' ) ),

sites/trunk/wp15.wordpress.net/public_html/content/themes/twentyseventeen-wp15/style.css

@@ -138 +138 @@
  */
 .page-slug-about h1,
-.page-slug-about p {
+.wp10-nostalgia {
         text-align: center;
 }
@@ -149 +149 @@
         position: relative;
         height: 500px;
-        width: 64vw;
+        width: 80vw;
         left: 50%;
         right: 50%;
-        margin-left: -32vw;
-        margin-right: -32vw;
+        margin-left: -40vw;
+        margin-right: -40vw;
         margin-top: 2em;
         margin-bottom: 4em;
@@ -159 +159 @@
 }
 
+@media screen and ( max-width: 48em ) {
+        #wp15-events-map {
+                width: 100%;
+                margin: 2em auto 3em;
+                left: auto;
+                right: auto;
+        }
+}
+
 .wp15-events-list {
+        display: grid;
+        grid-template-columns: repeat( auto-fill, minmax( 300px, 1fr ) );
+        grid-gap: 2em;
+        width: 80vw;
+        margin-left: calc( -1 * ( (80vw - 100%) / 2 ) );
         list-style-type: none;
 }
 
 .wp15-events-list li {
-        margin-bottom: 3em;
+        margin-bottom: 1em;
 }
 
@@ -171 +185 @@
 .wp15-event-date-time {
         margin-bottom: .5em;
-        text-align: center;
 }