Browse Source

Don't set screen width limit on full-width items; fix full-width alignment on RTL.

Caroline Moore 6 years ago
parent
commit
e2fba597ed
1 changed files with 48 additions and 41 deletions
  1. 48 41
      affinity/blocks.css

+ 48 - 41
affinity/blocks.css

@@ -46,54 +46,61 @@ p.has-drop-cap:not(:focus)::first-letter {
 
 /* Full Width */
 
-@media screen and ( min-width: 48em ) {
-	.no-sidebar.page figure.alignfull,
-	.no-sidebar.page .wp-block-cover.alignfull,
-	.no-sidebar.page .wp-block-gallery.alignfull,
-	.no-sidebar.page .wp-block-embed.is-type-video.alignfull {
-		width: 100vw;
-		max-width: 100vw;
-		margin-left: 0;
-		margin-right: 0;
-		position: relative;
-		left: 50%;
-		transform: translateX( -50% );
-	}
+.no-sidebar.page figure.alignfull,
+.no-sidebar.page .wp-block-cover.alignfull,
+.no-sidebar.page .wp-block-gallery.alignfull,
+.no-sidebar.page .wp-block-embed.is-type-video.alignfull {
+	width: 100vw;
+	max-width: 100vw;
+	margin-left: 0;
+	margin-right: 0;
+	position: relative;
+	left: 50%;
+	transform: translateX( -50% );
+}
 
-	.no-sidebar.page .wp-block-embed.is-type-video.alignfull:before {
-		content: "";
-		display: block;
-	}
+.rtl.no-sidebar.page figure.alignfull,
+.rtl.no-sidebar.page .wp-block-cover.alignfull,
+.rtl.no-sidebar.page .wp-block-gallery.alignfull,
+.rtl.no-sidebar.page .wp-block-embed.is-type-video.alignfull {
+	left: auto;
+	right: 50%;
+	transform: translateX( 50% );
+}
 
-	.no-sidebar.page .wp-block-embed.is-type-video.alignfull iframe {
-		position:  absolute;
-		top: 0;
-		left: 0;
-		bottom: 0;
-		right: 0;
-		width: 100%;
-		height: 100%;
-	}
+.no-sidebar.page .wp-block-embed.is-type-video.alignfull:before {
+	content: "";
+	display: block;
+}
 
-	.wp-embed-aspect-1-1:before {
-		padding-top: 100%;
-	}
+.no-sidebar.page .wp-block-embed.is-type-video.alignfull iframe {
+	position:  absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	width: 100%;
+	height: 100%;
+}
 
-	.wp-embed-aspect-2-1:before {
-		padding-top: 50%;
-	}
+.wp-embed-aspect-1-1:before {
+	padding-top: 100%;
+}
 
-	.wp-embed-aspect-1-2:before {
-		padding-top: 200%;
-	}
+.wp-embed-aspect-2-1:before {
+	padding-top: 50%;
+}
 
-	.wp-embed-aspect-4-3:before {
-		padding-top: 75%;
-	}
+.wp-embed-aspect-1-2:before {
+	padding-top: 200%;
+}
 
-	.wp-embed-aspect-16-9:before {
-		padding-top: 56.25%;
-	}
+.wp-embed-aspect-4-3:before {
+	padding-top: 75%;
+}
+
+.wp-embed-aspect-16-9:before {
+	padding-top: 56.25%;
 }
 
 /* Wide Width */