Jelajahi Sumber

Tidy up image and text treatment on various screen sizes. .

Kjell Reigstad 4 tahun lalu
induk
melakukan
a84f354724

+ 17 - 6
quadrat/assets/theme.css

@@ -99,13 +99,18 @@
 	flex-basis: auto;
 }
 
-.is-style-quadrat-diamond-posts .wp-block-column:last-child {
-	max-width: 400px;
-	flex-shrink: 0;
+@media (min-width: 600px) {
+	.is-style-quadrat-diamond-posts .wp-block-column:last-child {
+		max-width: 300px;
+		flex-shrink: 0;
+	}
+	.is-style-quadrat-diamond-posts .wp-block-column:first-child {
+		padding-right: 2em;
+	}
 }
 
 .is-style-quadrat-diamond-posts .wp-block-post-featured-image {
-	width: 400px;
+	width: 300px;
 }
 
 @media (max-width: 599px) {
@@ -118,7 +123,7 @@
 	-o-object-fit: cover;
 	   object-fit: cover;
 	width: 100%;
-	height: 400px;
+	height: 300px;
 }
 
 .is-style-quadrat-diamond-posts .wp-block-post-template li {
@@ -483,10 +488,16 @@ ul ul {
 	margin-left: 20%;
 }
 
-.wp-block-query-loop .wp-block-post-title {
+.wp-block-query-loop .wp-block-post-title,
+.wp-block-query .wp-block-post-title {
 	font-size: var(--wp--custom--heading--h3--font-size);
 }
 
+.wp-block-query-loop .wp-block-post-excerpt__more-text,
+.wp-block-query .wp-block-post-excerpt__more-text {
+	font-size: var(--wp--preset--font-size--tiny) !important;
+}
+
 .wp-block-query-pagination {
 	border-top: 1px solid var(--wp--custom--color--primary);
 }

+ 10 - 5
quadrat/sass/block-styles/_query.scss

@@ -13,20 +13,25 @@
 	} 
 	.wp-block-column {
 		flex-basis: auto;
-		&:last-child {
-			max-width: 400px;
-			flex-shrink: 0;
+		@media (min-width: #{ $break-small }) {
+			&:last-child {
+				max-width: 300px;
+				flex-shrink: 0;
+			}
+			&:first-child {
+				padding-right: 2em;
+			}
 		}
 	}
 	.wp-block-post-featured-image {
-		width: 400px;
+		width: 300px;
 		@media (max-width: #{ ($break-small - 1) }) {
 			width: 100%;
 		}
 		img {
 			object-fit: cover;
 			width: 100%;
-			height: 400px;
+			height: 300px;
 		}
 	}
 	.wp-block-post-template {

+ 7 - 1
quadrat/sass/blocks/_query.scss

@@ -1,5 +1,11 @@
-.wp-block-query-loop {
+.wp-block-query-loop,
+.wp-block-query {
 	.wp-block-post-title {
 		font-size: var(--wp--custom--heading--h3--font-size);
 	}
+
+	// Important is necessary to override any other font size rules applied to the exerpt.
+	.wp-block-post-excerpt__more-text {
+		font-size: var(--wp--preset--font-size--tiny) !important;
+	}
 }