浏览代码

Merge pull request #409 from Automattic/libre-2-fix-header-weirdness-2

Libre 2: Add container to help make sure header pseudo element doesn't cause side scrolling.
Laurel 6 年之前
父节点
当前提交
c08fb4ca27
共有 3 个文件被更改,包括 72 次插入66 次删除
  1. 29 28
      libre-2/footer.php
  2. 37 36
      libre-2/header.php
  3. 6 2
      libre-2/style.css

+ 29 - 28
libre-2/footer.php

@@ -9,54 +9,55 @@
 
 ?>
 
-	</div><!-- #content -->
+		</div><!-- #content -->
 
-	<footer id="colophon" class="site-footer" role="contentinfo">
-		<?php if ( is_active_sidebar( 'sidebar-2' ) || is_active_sidebar( 'sidebar-3' ) || is_active_sidebar( 'sidebar-4' ) ) : ?>
+		<footer id="colophon" class="site-footer" role="contentinfo">
+			<?php if ( is_active_sidebar( 'sidebar-2' ) || is_active_sidebar( 'sidebar-3' ) || is_active_sidebar( 'sidebar-4' ) ) : ?>
 
-			<div class="footer-widgets clear">
+				<div class="footer-widgets clear">
 
-				<?php if ( is_active_sidebar( 'sidebar-2' ) ) : ?>
+					<?php if ( is_active_sidebar( 'sidebar-2' ) ) : ?>
 
-					<div class="widget-area">
+						<div class="widget-area">
 
-						<?php dynamic_sidebar( 'sidebar-2' ); ?>
+							<?php dynamic_sidebar( 'sidebar-2' ); ?>
 
-					</div><!-- .widget-area -->
+						</div><!-- .widget-area -->
 
-				<?php endif; ?>
+					<?php endif; ?>
 
-				<?php if ( is_active_sidebar( 'sidebar-3' ) ) : ?>
+					<?php if ( is_active_sidebar( 'sidebar-3' ) ) : ?>
 
-					<div class="widget-area">
+						<div class="widget-area">
 
-						<?php dynamic_sidebar( 'sidebar-3' ); ?>
+							<?php dynamic_sidebar( 'sidebar-3' ); ?>
 
-					</div><!-- .widget-area -->
+						</div><!-- .widget-area -->
 
-				<?php endif; ?>
+					<?php endif; ?>
 
-				<?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
+					<?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
 
-					<div class="widget-area">
+						<div class="widget-area">
 
-						<?php dynamic_sidebar( 'sidebar-4' ); ?>
+							<?php dynamic_sidebar( 'sidebar-4' ); ?>
 
-					</div><!-- .widget-area -->
+						</div><!-- .widget-area -->
 
-				<?php endif; ?>
+					<?php endif; ?>
 
-			</div><!-- .footer-widgets -->
+				</div><!-- .footer-widgets -->
 
-		<?php endif; ?>
+			<?php endif; ?>
 
-		<div class="site-info">
-			<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'libre-2' ) ); ?>"><?php printf( esc_html__( 'Proudly powered by %s', 'libre-2' ), 'WordPress' ); ?></a>
-			<span class="sep"> | </span>
-			<?php printf( esc_html__( 'Theme: %1$s by %2$s.', 'libre-2' ), 'Libre 2', '<a href="http://wordpress.com/themes/" rel="designer">Automattic</a>' ); ?>
-		</div><!-- .site-info -->
-	</footer><!-- #colophon -->
-</div><!-- #page -->
+			<div class="site-info">
+				<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'libre-2' ) ); ?>"><?php printf( esc_html__( 'Proudly powered by %s', 'libre-2' ), 'WordPress' ); ?></a>
+				<span class="sep"> | </span>
+				<?php printf( esc_html__( 'Theme: %1$s by %2$s.', 'libre-2' ), 'Libre 2', '<a href="http://wordpress.com/themes/" rel="designer">Automattic</a>' ); ?>
+			</div><!-- .site-info -->
+		</footer><!-- #colophon -->
+	</div><!-- #page -->
+</div><!-- .site-wrapper -->
 
 <?php wp_footer(); ?>
 

+ 37 - 36
libre-2/header.php

@@ -18,43 +18,44 @@
 </head>
 
 <body <?php body_class(); ?>>
-<div id="page" class="hfeed site">
-	<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'libre-2' ); ?></a>
-	<?php if ( get_header_image() ) : ?>
-	<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
-		<img src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="" class="custom-header">
-	</a>
-	<?php endif; // End header image check. ?>
-	<header id="masthead" class="site-header" role="banner">
-		<div class="site-branding">
-			<?php if ( function_exists( 'the_custom_logo' ) ) : ?>
-				<?php the_custom_logo(); ?>
-			<?php endif; ?>
-			<?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;
-				$description = get_bloginfo( 'description', 'display' );
-				if ( $description || is_customize_preview() ) : ?>
-					<p class="site-description"><?php echo $description; ?></p>
-			<?php endif; ?>
-		</div><!-- .site-branding -->
+<div class="site-wrapper">
+	<div id="page" class="hfeed site">
+		<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'libre-2' ); ?></a>
+		<?php if ( get_header_image() ) : ?>
+		<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
+			<img src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="" class="custom-header">
+		</a>
+		<?php endif; // End header image check. ?>
+		<header id="masthead" class="site-header" role="banner">
+			<div class="site-branding">
+				<?php if ( function_exists( 'the_custom_logo' ) ) : ?>
+					<?php the_custom_logo(); ?>
+				<?php endif; ?>
+				<?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;
+					$description = get_bloginfo( 'description', 'display' );
+					if ( $description || is_customize_preview() ) : ?>
+						<p class="site-description"><?php echo $description; ?></p>
+				<?php endif; ?>
+			</div><!-- .site-branding -->
 
-		<div class="nav-wrapper">
-			<nav id="site-navigation" class="main-navigation" role="navigation">
-				<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">&#9776; <?php esc_html_e( 'Menu', 'libre-2' ); ?></button>
-				<?php wp_nav_menu( array( 'theme_location' => 'menu-1', 'menu_id' => 'primary-menu' ) ); ?>
-				<?php libre_2_social_menu(); ?>
-			</nav><!-- #site-navigation -->
+			<div class="nav-wrapper">
+				<nav id="site-navigation" class="main-navigation" role="navigation">
+					<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">&#9776; <?php esc_html_e( 'Menu', 'libre-2' ); ?></button>
+					<?php wp_nav_menu( array( 'theme_location' => 'menu-1', 'menu_id' => 'primary-menu' ) ); ?>
+					<?php libre_2_social_menu(); ?>
+				</nav><!-- #site-navigation -->
 
-			<?php // Add Woocommerce Cart to header if Woocommerce exists
-				if ( class_exists( 'WooCommerce' ) ) {
-					libre_2_woocommerce_header_cart();
-				} 
-			?>
-		</div>
+				<?php // Add Woocommerce Cart to header if Woocommerce exists
+					if ( class_exists( 'WooCommerce' ) ) {
+						libre_2_woocommerce_header_cart();
+					}
+				?>
+			</div>
 
-	</header><!-- #masthead -->
+		</header><!-- #masthead -->
 
-	<div id="content" class="site-content">
+		<div id="content" class="site-content">

+ 6 - 2
libre-2/style.css

@@ -375,7 +375,6 @@ big {
 --------------------------------------------------------------*/
 html {
 	box-sizing: border-box;
-	overflow-x: hidden;
 }
 
 *,
@@ -389,6 +388,10 @@ body {
 	word-wrap: break-word;
 }
 
+.site-wrapper {
+	overflow-x: hidden;
+}
+
 blockquote:before,
 blockquote:after,
 q:before,
@@ -614,7 +617,8 @@ textarea {
 	padding-top: 1.75em;
 }
 
-@media (min-width: 720px) {
+/* Fakes out header background so it looks like it spans the whole browser window */
+@media (min-width: 1120px) {
 	.singular .site-header:before,
 	.singular .site-header:after {
 		background: inherit;