← All changes | modules/related-posts/related-posts.css +91 -72 12.7.3 → 16.3-a.1 View file →

		@@ -5,94 +5,111 @@
5	5	/**
6	6	* The Gutenberg block
7	7	*/
8	8
9		-.jp-related-posts-i2__row {
10		- display: flex;
	9	+.jp-related-posts-i2 {
11	10	margin-top: 1.5rem;
12	11	}
13	12
14		-.jp-related-posts-i2__row:first-child {
15		- margin-top: 0;
	13	+.jp-related-posts-i2__list {
	14	+ --hgap: 1rem;
	15	+
	16	+ display: flex;
	17	+ flex-wrap: wrap;
	18	+ column-gap: var(--hgap);
	19	+ row-gap: 2rem;
	20	+
	21	+ margin: 0;
	22	+ padding: 0;
	23	+
	24	+ list-style-type: none;
16	25	}
17	26
18	27	.jp-related-posts-i2__post {
19		- flex-grow: 1;
20		- flex-basis: 0;
21		- margin: 0 10px;
22	28	display: flex;
23	29	flex-direction: column;
24		- padding-left: 0;
	30	+
	31	+ /* Default: 2 items by row */
	32	+ flex-basis: calc(( 100% - var(--hgap) ) / 2);
25	33	}
26	34
27		-.jp-related-posts-i2__row[data-post-count="3"] .jp-related-posts-i2__post {
28		- max-width: calc(33% - 20px);
29		-}
	35	+/* Quantity qeuries: see https://alistapart.com/article/quantity-queries-for-css/ */
	36	+.jp-related-posts-i2__post:nth-last-child(n+3):first-child,
	37	+.jp-related-posts-i2__post:nth-last-child(n+3):first-child ~ * {
30	38
31		-.jp-related-posts-i2__row[data-post-count="2"] .jp-related-posts-i2__post,
32		-.jp-related-posts-i2__row[data-post-count="1"] .jp-related-posts-i2__post {
33		- max-width: calc(50% - 20px);
	39	+ /* From 3 total items on, 3 items by row */
	40	+ flex-basis: calc(( 100% - var(--hgap) * 2 ) / 3);
34	41	}
35	42
36		-.jp-related-posts-i2__post-heading, .jp-related-posts-i2__post-img-link,
37		-.jp-related-posts-i2__post-date, .jp-related-posts-i2__post-context,
38		-.jp-related-posts-i2__post-author {
39		- flex-direction: row;
40		- display: block;
41		-}
	43	+.jp-related-posts-i2__post:nth-last-child(4):first-child,
	44	+.jp-related-posts-i2__post:nth-last-child(4):first-child ~ * {
42	45
43		-.jp-related-posts-i2__post-heading {
44		- margin: 0.5rem 0;
45		- font-size: 1rem;
46		- line-height: 1.2em;
	46	+ /* Exception for 4 total items: 2 items by row */
	47	+ flex-basis: calc(( 100% - var(--hgap) ) / 2);
47	48	}
48	49
49	50	.jp-related-posts-i2__post-link {
50		- display: block;
	51	+ display: flex;
	52	+ flex-direction: column;
	53	+ row-gap: 0.5rem;
	54	+
51	55	width: 100%;
52		- line-height: 1.2em;
	56	+ margin-bottom: 1rem;
	57	+
	58	+ line-height: 1.2;
53	59	}
54	60
55		-.jp-related-posts-i2__post-img-link {
	61	+.jp-related-posts-i2__post-link:focus-visible {
	62	+ outline-offset: 2px;
	63	+}
	64	+
	65	+.jp-related-posts-i2__post-img {
56	66	order: -1;
	67	+
	68	+ max-width: 100%;
57	69	}
58		-.jp-related-posts-i2__post-img-link img {
59		- width: 100%;
	70	+
	71	+.jp-related-posts-i2__post-defs {
	72	+ margin: 0;
	73	+
	74	+ list-style-type: unset;
60	75	}
61	76
	77	+/* Hide, except from screen readers */
	78	+.jp-related-posts-i2__post-defs dt {
	79	+ position: absolute;
	80	+ width: 1px;
	81	+ height: 1px;
	82	+ overflow: hidden;
	83	+ clip-path: inset(50%);
	84	+ white-space: nowrap;
	85	+}
	86	+
	87	+.jp-related-posts-i2__post-defs dd {
	88	+ margin: 0;
	89	+}
	90	+
62	91	/* List view */
63	92
64		-.jp-relatedposts-i2[data-layout="list"] .jp-related-posts-i2__row{
65		- margin-top: 0;
	93	+.jp-relatedposts-i2[data-layout="list"] .jp-related-posts-i2__list {
66	94	display: block;
67	95	}
68	96
69	97	.jp-relatedposts-i2[data-layout="list"] .jp-related-posts-i2__post {
70		- max-width: none;
71		- margin: 0;
	98	+ margin-bottom: 2rem;
72	99	}
73	100
74		-.jp-relatedposts-i2[data-layout="list"].jp-related-posts-i2__post-img-link {
75		- margin-top: 1rem;
76		-}
	101	+/* Breakpoints */
77	102
78		-/* Breakpoints */
79	103	@media only screen and (max-width: 640px) {
80		- .jp-related-posts-i2__row {
81		- margin-top: 0;
	104	+
	105	+ .jp-related-posts-i2__list {
82	106	display: block;
83	107	}
84		- .jp-related-posts-i2__row[data-post-count] .jp-related-posts-i2__post {
85		- max-width: none;
86		- margin: 0;
87		- margin-top: 1rem;
	108	+
	109	+ .jp-related-posts-i2__post {
	110	+ margin-bottom: 2rem;
88	111	}
89		- .jp-related-posts-i2__post-img-link {
90		- margin-top: 1rem;
91		- }
92		- .jp-related-posts-i2__post-img-link img {
93		- width: 350px;
94		- }
95	112	}
96	113
97	114	/* Container */
98	115
		@@ -103,10 +120,10 @@
103	120	position: relative;
104	121	clear: both;
105	122	}
106	123
107		-.jp-relatedposts:after {
108		- content: '';
	124	+.jp-relatedposts::after {
	125	+ content: "";
109	126	display: block;
110	127	clear: both;
111	128	}
112	129
		@@ -116,25 +133,24 @@
116	133	margin: 0 0 1em 0;
117	134	display: inline-block;
118	135	float: left;
119	136	font-size: 9pt;
120		- font-weight: bold;
	137	+ font-weight: 700;
121	138	font-family: inherit;
122	139	}
123	140
124		-#jp-relatedposts h3.jp-relatedposts-headline em:before {
	141	+#jp-relatedposts h3.jp-relatedposts-headline em::before {
125	142	content: "";
126	143	display: block;
127	144	width: 100%;
128	145	min-width: 30px;
129		- border-top: 1px solid #dcdcde;
130		- border-top: 1px solid rgba(0,0,0,.2);
	146	+ border-top: 1px solid rgba(0, 0, 0, 0.2);
131	147	margin-bottom: 1em;
132	148	}
133	149
134	150	#jp-relatedposts h3.jp-relatedposts-headline em {
135	151	font-style: normal;
136		- font-weight: bold;
	152	+ font-weight: 700;
137	153	}
138	154
139	155	/* Related posts items (wrapping items) */
140	156
		@@ -152,17 +168,15 @@
152	168	float: left;
153	169	width: 33%;
154	170	margin: 0 0 1em; /* Needs to be same as the main outer wrapper for Related Posts */
155	171	box-sizing: border-box;
156		- -moz-box-sizing: border-box;
157		- -webkit-box-sizing: border-box;
158	172	}
159	173
160	174	#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post {
161	175	padding-right: 20px;
162	176	filter: alpha(opacity=80);
163		- -moz-opacity: .8;
164		- opacity: .8;
	177	+ -moz-opacity: 0.8;
	178	+ opacity: 0.8;
165	179	}
166	180
167	181	#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+4),
168	182	#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(3n+4) {
		@@ -187,18 +201,20 @@
187	201	font-size: 14px;
188	202	line-height: 20px;
189	203	margin: 0;
190	204	}
	205	+
191	206	#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs {
192		- position:relative;
	207	+ position: relative;
193	208	}
	209	+
194	210	#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs a.jp-relatedposts-post-aoverlay {
195		- position:absolute;
196		- top:0;
197		- bottom:0;
198		- left:0;
199		- right:0;
200		- display:block;
	211	+ position: absolute;
	212	+ top: 0;
	213	+ bottom: 0;
	214	+ left: 0;
	215	+ right: 0;
	216	+ display: block;
201	217	border-bottom: 0;
202	218	}
203	219
204	220	#jp-relatedposts .jp-relatedposts-items p,
		@@ -215,9 +231,9 @@
215	231	}
216	232
217	233	#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a {
218	234	font-size: inherit;
219		- font-weight: normal;
	235	+ font-weight: 400;
220	236	text-decoration: none;
221	237	filter: alpha(opacity=100);
222	238	-moz-opacity: 1;
223	239	opacity: 1;
		@@ -242,12 +258,13 @@
242	258	}
243	259
244	260	#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date,
245	261	#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-context {
246		- opacity: .6;
	262	+ opacity: 0.6;
247	263	}
248	264
249		-/* Hide the date by default, but leave the element there if a theme wants to use css to make it visible. */
	265	+/* Hide the date by default, but leave the element there if
	266	+ * a theme wants to use css to make it visible. */
250	267	.jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date {
251	268	display: none;
252	269	}
253	270
		@@ -259,8 +276,9 @@
259	276	/* Behavior when there are no thumbnails in visual mode */
260	277	#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs p.jp-relatedposts-post-excerpt {
261	278	overflow: hidden;
262	279	}
	280	+
263	281	#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs span {
264	282	margin-bottom: 1em;
265	283	}
266	284
		@@ -321,8 +339,9 @@
321	339	* Hide the related post section in the print view of a post
322	340	*/
323	341
324	342	@media print {
	343	+
325	344	.jp-relatedposts {
326		- display:none !important;
	345	+ display: none !important;
327	346	}
328		-}
	347	+}