浏览代码

Merge pull request #2040 from rtCamp/fix/sticky-header-stratford

Stratford: Fix sticky header on AMP page
Kjell Reigstad 5 年之前
父节点
当前提交
796b107fbc
共有 4 个文件被更改,包括 73 次插入2 次删除
  1. 11 2
      stratford/functions.php
  2. 22 0
      stratford/sass/_extra-child-theme.scss
  3. 20 0
      stratford/style-rtl.css
  4. 20 0
      stratford/style.css

+ 11 - 2
stratford/functions.php

@@ -183,8 +183,10 @@ function stratford_scripts() {
 	// enqueue child RTL styles
 	// enqueue child RTL styles
 	wp_style_add_data( 'stratford-style', 'rtl', 'replace' );
 	wp_style_add_data( 'stratford-style', 'rtl', 'replace' );
 
 
-	// enqueue header spacing JS
-	wp_enqueue_script('stratford-fixed-header-spacing', get_stylesheet_directory_uri() . '/js/fixed-header-spacing.js', array(), wp_get_theme()->get( 'Version' ), true );
+	if ( ! stratford_is_amp() ) {
+		// enqueue header spacing JS.
+		wp_enqueue_script( 'stratford-fixed-header-spacing', get_stylesheet_directory_uri() . '/js/fixed-header-spacing.js', array(), wp_get_theme()->get( 'Version' ), true );
+	}
 }
 }
 add_action( 'wp_enqueue_scripts', 'stratford_scripts', 99 );
 add_action( 'wp_enqueue_scripts', 'stratford_scripts', 99 );
 
 
@@ -197,3 +199,10 @@ function stratford_editor_styles() {
 	wp_enqueue_style( 'stratford-editor-fonts', stratford_fonts_url(), array(), null );
 	wp_enqueue_style( 'stratford-editor-fonts', stratford_fonts_url(), array(), null );
 }
 }
 add_action( 'enqueue_block_editor_assets', 'stratford_editor_styles' );
 add_action( 'enqueue_block_editor_assets', 'stratford_editor_styles' );
+
+/**
+ * Checks whether the endpoint is AMP.
+ */
+function stratford_is_amp() {
+	return ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() );
+}

+ 22 - 0
stratford/sass/_extra-child-theme.scss

@@ -16,6 +16,7 @@
  * 6.7. Posts List Block
  * 6.7. Posts List Block
  * 6.8. Search Block
  * 6.8. Search Block
  * 7. Widgets
  * 7. Widgets
+ * 8. AMP Support
  */
  */
 
 
 $color_background: #{map-deep-get($config-global, "color", "background", "default")};
 $color_background: #{map-deep-get($config-global, "color", "background", "default")};
@@ -490,3 +491,24 @@ button[data-load-more-btn] {
 	font-family: $font_family_code;
 	font-family: $font_family_code;
 	font-size: $font_size_base;
 	font-size: $font_size_base;
 }
 }
+
+/**
+ * 8. AMP Support
+ */
+html[amp] {
+	@include media( mobile ) {
+		.site-header {
+			position: sticky;
+			top: 0;
+		}
+
+		.logged-in .site-header {
+			top: 32px;
+		}
+	}
+	@media screen and ( max-width: 782px ) {
+		.logged-in .site-header {
+			top: 46px;
+		}
+	}
+}

+ 20 - 0
stratford/style-rtl.css

@@ -3972,6 +3972,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
  * 6.7. Posts List Block
  * 6.7. Posts List Block
  * 6.8. Search Block
  * 6.8. Search Block
  * 7. Widgets
  * 7. Widgets
+ * 8. AMP Support
  */
  */
 /**
 /**
  * 1. General Styles
  * 1. General Styles
@@ -4394,3 +4395,22 @@ button[data-load-more-btn].has-background:visited {
 	font-family: "Inconsolata", monospace;
 	font-family: "Inconsolata", monospace;
 	font-size: 1rem;
 	font-size: 1rem;
 }
 }
+
+/**
+ * 8. AMP Support
+ */
+@media only screen and (min-width: 560px) {
+	html[amp] .site-header {
+		position: sticky;
+		top: 0;
+	}
+	html[amp] .logged-in .site-header {
+		top: 32px;
+	}
+}
+
+@media screen and (max-width: 782px) {
+	html[amp] .logged-in .site-header {
+		top: 46px;
+	}
+}

+ 20 - 0
stratford/style.css

@@ -4001,6 +4001,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
  * 6.7. Posts List Block
  * 6.7. Posts List Block
  * 6.8. Search Block
  * 6.8. Search Block
  * 7. Widgets
  * 7. Widgets
+ * 8. AMP Support
  */
  */
 /**
 /**
  * 1. General Styles
  * 1. General Styles
@@ -4423,3 +4424,22 @@ button[data-load-more-btn].has-background:visited {
 	font-family: "Inconsolata", monospace;
 	font-family: "Inconsolata", monospace;
 	font-size: 1rem;
 	font-size: 1rem;
 }
 }
+
+/**
+ * 8. AMP Support
+ */
+@media only screen and (min-width: 560px) {
+	html[amp] .site-header {
+		position: sticky;
+		top: 0;
+	}
+	html[amp] .logged-in .site-header {
+		top: 32px;
+	}
+}
+
+@media screen and (max-width: 782px) {
+	html[amp] .logged-in .site-header {
+		top: 46px;
+	}
+}