xwp · ThierryA · Jan 23, 2018 · Jan 19, 2018 · Jan 19, 2018 · Jan 21, 2018
diff --git a/assets/dist/css/main.css b/assets/dist/css/main.css
diff --git a/assets/html/templates/site-header.php b/assets/html/templates/site-header.php
@@ -47,11 +47,13 @@
 			<li class="menu-item"><a href="category.php#development=1">Gaming</a></li>
 			<li class="menu-item"><a href="category.php#development=1">Shopping</a></li>
 			<li class="menu-item menu-item-search-form">
-				<form method="GET" action="https://example.com/search" target="_top">
-					<input type="search" placeholder="Search">
-					<button name="submit"></button>
-				</form>
 			</li>
 		</ul>
+		<div class="wrap__item--search">
+			<form method="GET" action="https://example.com/search" target="_top">
+				<input type="search" placeholder="Search">
+				<button name="submit"></button>
+			</form>
+		</div>
 	</nav>
 </header>
diff --git a/assets/src/css/elements/_search-icon.scss b/assets/src/css/elements/_search-icon.scss
@@ -1,7 +1,10 @@
 //
 // Search Submit Button Icon
 //
+// Dev Note: used on the <button> element.
+//
 %search-icon {
+	font-size: 0;
 	position: relative;
 	background: $black;
 	border: 2px solid $white;

diff --git a/assets/src/css/modules/_header.scss b/assets/src/css/modules/_header.scss
@@ -40,6 +40,8 @@
 
 	&--header &__item--branding {
 		position: relative;
+		margin-left: auto;
+		margin-right: auto;
 
 		@media ( query( max, tablet ) ) {
 			background: $black;
@@ -61,6 +63,9 @@
 		}
 
 		&-title {
+			font-size: 56px;
+			font-weight: 700;
+			margin: 32px 0 0;
 
 			a {
 				color: $white;
@@ -149,15 +154,9 @@
 		}
 
 		@media ( query( min, tablet ) ) {
-			display: block;
-			flex-basis: 100%;
-			order: 1;
-
-			.container {
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-			}
+			display: flex;
+			flex-flow: row nowrap;
+			justify-content: space-between;
 		}
 
 		.menu-item-has-children {
@@ -168,8 +167,7 @@
 			}
 		}
 
-		.menu-item-search-form {
-			float: right;
+		.wrap__item--search {
 			margin-top: -4px;
 			margin-bottom: -4px;
 
@@ -180,9 +178,12 @@
 				font-size: 14px;
 				max-width: 70px;
 				transition: max-width 100ms linear, background-color 100ms linear;
+				color: $white;
+				text-overflow: ellipsis;
 
 				&:focus {
 					background-color: $white;
+					color: $black;
 					max-width: 200px;
 				}
 

diff --git a/footer.php b/footer.php
@@ -2,33 +2,31 @@
 /**
  * The template for displaying the footer
  *
- * Contains the closing of the #content div and all content after.
- *
  * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
  *
  * @package AMPConf
  */
 
 ?>
 
-	</div><!-- #content -->
+<footer class="wrap wrap--full-width wrap--footer">
+	<nav class="wrap__item wrap__item--footer-menu">
+		<?php
+			wp_nav_menu(
+				array(
+					'theme_location' => 'footer',
+					'menu_id'        => false,
+					'depth'          => 1,
+				)
+			);
+		?>
+	</nav>
 
-	<footer id="colophon" class="site-footer">
-		<div class="site-info">
-			<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'ampconf' ) ); ?>">
-								<?php
-								/* translators: %s: CMS name, i.e. WordPress. */
-								printf( esc_html__( 'Proudly powered by %s', 'ampconf' ), 'WordPress' );
-			?>
-			</a>
-			<span class="sep"> | </span>
-			<?php
-				/* translators: 1: Theme name, 2: Theme author. */
-				printf( esc_html__( 'Theme: %1$s by %2$s.', 'ampconf' ), 'ampconf', '<a href="http://underscores.me/">Me</a>' );
-			?>
-		</div><!-- .site-info -->
-	</footer><!-- #colophon -->
-</div><!-- #page -->
+	<p class="wrap__item wrap__item--footer-copyright">
+		<?php printf( '&copy; %s', esc_html( date( 'Y' ) ) ); ?>
+		<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
+	</p>
+</footer>
 
 <?php wp_footer(); ?>
 

diff --git a/functions.php b/functions.php
@@ -44,10 +44,11 @@ function ampconf_setup() {
 		 */
 		add_theme_support( 'post-thumbnails' );
 
-		// This theme uses wp_nav_menu() in one location.
+		// This theme uses wp_nav_menu() in multiple locations.
 		register_nav_menus(
 			array(
-				'menu-1' => esc_html__( 'Primary', 'ampconf' ),
+				'header' => esc_html__( 'Header', 'ampconf' ),
+				'footer' => esc_html__( 'Footer', 'ampconf' ),
 			)
 		);
 
@@ -130,16 +131,29 @@ function ampconf_widgets_init() {
 add_action( 'widgets_init', 'ampconf_widgets_init' );
 
 /**
- * Enqueue scripts and styles.
+ * Adds custom component scripts to the document.
+ *
+ * @todo Remove once amp-wp plugin automatically includes component scripts.
+ *
+ * @param array $amp_scripts AMP Component scripts, mapping component names to component source URLs.
+ *
+ * @return array
  */
-function ampconf_scripts() {
-	wp_enqueue_style( 'ampconf-style', get_stylesheet_uri() );
+function ampconf_amp_component_scripts( $amp_scripts ) {
+	$amp_scripts['amp-form'] = 'https://cdn.ampproject.org/v0/amp-form-0.1.js';
+	$amp_scripts['amp-bind'] = 'https://cdn.ampproject.org/v0/amp-bind-0.1.js';
 
-	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
-		wp_enqueue_script( 'comment-reply' );
-	}
+	return $amp_scripts;
+}
+add_filter( 'amp_component_scripts', 'ampconf_amp_component_scripts' );
+
+/**
+ * Enqueues styles.
+ */
+function ampconf_enqueue_styles() {
+	wp_enqueue_style( 'ampconf', get_template_directory_uri() . '/assets/dist/css/main.css' );
 }
-add_action( 'wp_enqueue_scripts', 'ampconf_scripts' );
+add_action( 'wp_enqueue_scripts', 'ampconf_enqueue_styles' );
 
 /**
  * Implement the Custom Header feature.

diff --git a/header.php b/header.php
@@ -9,6 +9,7 @@
  * @package AMPConf
  */
 
+$description = get_bloginfo( 'description', 'display' );
 ?>
 <!doctype html>
 <html amp <?php language_attributes(); ?>>
@@ -18,35 +19,38 @@
 </head>
 
 <body <?php body_class(); ?>>
-<div id="page" class="site">
 	<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'ampconf' ); ?></a>
 
-	<header id="masthead" class="site-header">
-		<div class="site-branding">
-			<?php the_custom_logo(); ?>
-			<?php if ( is_front_page() && is_home() ) : ?>
-				<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
-			<?php else : ?>
-				<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
-			<?php endif; ?>
+	<header class="wrap wrap--header wrap--header__menu-hidden" [class]="mobileMenu ? 'wrap wrap--header' : 'wrap wrap--header wrap--header__menu-hidden'">
+
+		<div class="wrap__item wrap__item--branding">
+			<<?php ampconf_branding_tag(); ?> class="wrap__item--branding-title">
+				<?php if ( has_custom_logo() ) : ?>
+					<?php the_custom_logo(); ?>
+				<?php else : ?>
+					<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
+				<?php endif; ?>
+			</<?php ampconf_branding_tag(); ?>>
 
-			<?php $description = get_bloginfo( 'description', 'display' ); ?>
 			<?php if ( $description || is_customize_preview() ) : ?>
-			<p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
+				<p class="wrap__item--branding-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
 			<?php endif; ?>
-		</div><!-- .site-branding -->
 
-		<nav id="site-navigation" class="main-navigation">
-			<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'ampconf' ); ?></button>
+			<button class="wrap__item--menu-toggle" on="tap:AMP.setState( { mobileMenu: ! mobileMenu } )" aria-controls="primary-menu" aria-expanded="false"></button>
+		</div>
+
+		<nav class="wrap__item wrap__item--menu">
 			<?php
 				wp_nav_menu(
 					array(
-						'theme_location' => 'menu-1',
-						'menu_id'        => 'primary-menu',
+						'theme_location' => 'header',
+						'menu_id'        => false,
 					)
 				);
 			?>
-		</nav><!-- #site-navigation -->
-	</header><!-- #masthead -->
 
-	<div id="content" class="site-content">
+			<div class="wrap__item--search">
+				<?php get_search_form(); ?>
+			</div>
+		</nav>
+	</header>
diff --git a/inc/template-tags.php b/inc/template-tags.php
@@ -142,3 +142,12 @@ function ampconf_post_thumbnail() {
 	endif; // End is_singular().
 	}
 endif;
+
+if ( ! function_exists( 'ampconf_branding_tag' ) ) :
+	/**
+	 * Outputs the branding in header as h1 or p, depending on the current view.
+	 */
+	function ampconf_branding_tag() {
+		echo esc_html( ( is_front_page() && is_home() ) ? 'h1' : 'p' );
+	}
+endif;