← All changes | modules/related-posts/related-posts.css +35 -28 13.2.4 → 16.3-a.1 View file →

		@@ -26,23 +26,26 @@
26	26
27	27	.jp-related-posts-i2__post {
28	28	display: flex;
29	29	flex-direction: column;
	30	+
30	31	/* Default: 2 items by row */
31		- flex-basis: calc( ( 100% - var(--hgap) ) / 2 );
	32	+ flex-basis: calc(( 100% - var(--hgap) ) / 2);
32	33	}
33	34
34	35	/* Quantity qeuries: see https://alistapart.com/article/quantity-queries-for-css/ */
35	36	.jp-related-posts-i2__post:nth-last-child(n+3):first-child,
36	37	.jp-related-posts-i2__post:nth-last-child(n+3):first-child ~ * {
	38	+
37	39	/* From 3 total items on, 3 items by row */
38		- flex-basis: calc( ( 100% - var(--hgap) * 2 ) / 3 );
	40	+ flex-basis: calc(( 100% - var(--hgap) * 2 ) / 3);
39	41	}
40	42
41	43	.jp-related-posts-i2__post:nth-last-child(4):first-child,
42	44	.jp-related-posts-i2__post:nth-last-child(4):first-child ~ * {
	45	+
43	46	/* Exception for 4 total items: 2 items by row */
44		- flex-basis: calc( ( 100% - var(--hgap) ) / 2 );
	47	+ flex-basis: calc(( 100% - var(--hgap) ) / 2);
45	48	}
46	49
47	50	.jp-related-posts-i2__post-link {
48	51	display: flex;
		@@ -50,9 +53,9 @@
50	53	row-gap: 0.5rem;
51	54
52	55	width: 100%;
53	56	margin-bottom: 1rem;
54		-
	57	+
55	58	line-height: 1.2;
56	59	}
57	60
58	61	.jp-related-posts-i2__post-link:focus-visible {
		@@ -76,9 +79,10 @@
76	79	position: absolute;
77	80	width: 1px;
78	81	height: 1px;
79	82	overflow: hidden;
80		- clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
	83	+ clip-path: inset(50%);
	84	+ white-space: nowrap;
81	85	}
82	86
83	87	.jp-related-posts-i2__post-defs dd {
84	88	margin: 0;
		@@ -96,8 +100,9 @@
96	100
97	101	/* Breakpoints */
98	102
99	103	@media only screen and (max-width: 640px) {
	104	+
100	105	.jp-related-posts-i2__list {
101	106	display: block;
102	107	}
103	108
		@@ -115,10 +120,10 @@
115	120	position: relative;
116	121	clear: both;
117	122	}
118	123
119		-.jp-relatedposts:after {
120		- content: '';
	124	+.jp-relatedposts::after {
	125	+ content: "";
121	126	display: block;
122	127	clear: both;
123	128	}
124	129
		@@ -128,25 +133,24 @@
128	133	margin: 0 0 1em 0;
129	134	display: inline-block;
130	135	float: left;
131	136	font-size: 9pt;
132		- font-weight: bold;
	137	+ font-weight: 700;
133	138	font-family: inherit;
134	139	}
135	140
136		-#jp-relatedposts h3.jp-relatedposts-headline em:before {
	141	+#jp-relatedposts h3.jp-relatedposts-headline em::before {
137	142	content: "";
138	143	display: block;
139	144	width: 100%;
140	145	min-width: 30px;
141		- border-top: 1px solid #dcdcde;
142		- border-top: 1px solid rgba(0,0,0,.2);
	146	+ border-top: 1px solid rgba(0, 0, 0, 0.2);
143	147	margin-bottom: 1em;
144	148	}
145	149
146	150	#jp-relatedposts h3.jp-relatedposts-headline em {
147	151	font-style: normal;
148		- font-weight: bold;
	152	+ font-weight: 700;
149	153	}
150	154
151	155	/* Related posts items (wrapping items) */
152	156
		@@ -164,17 +168,15 @@
164	168	float: left;
165	169	width: 33%;
166	170	margin: 0 0 1em; /* Needs to be same as the main outer wrapper for Related Posts */
167	171	box-sizing: border-box;
168		- -moz-box-sizing: border-box;
169		- -webkit-box-sizing: border-box;
170	172	}
171	173
172	174	#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post {
173	175	padding-right: 20px;
174	176	filter: alpha(opacity=80);
175		- -moz-opacity: .8;
176		- opacity: .8;
	177	+ -moz-opacity: 0.8;
	178	+ opacity: 0.8;
177	179	}
178	180
179	181	#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+4),
180	182	#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(3n+4) {
		@@ -199,18 +201,20 @@
199	201	font-size: 14px;
200	202	line-height: 20px;
201	203	margin: 0;
202	204	}
	205	+
203	206	#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs {
204		- position:relative;
	207	+ position: relative;
205	208	}
	209	+
206	210	#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs a.jp-relatedposts-post-aoverlay {
207		- position:absolute;
208		- top:0;
209		- bottom:0;
210		- left:0;
211		- right:0;
212		- display:block;
	211	+ position: absolute;
	212	+ top: 0;
	213	+ bottom: 0;
	214	+ left: 0;
	215	+ right: 0;
	216	+ display: block;
213	217	border-bottom: 0;
214	218	}
215	219
216	220	#jp-relatedposts .jp-relatedposts-items p,
		@@ -227,9 +231,9 @@
227	231	}
228	232
229	233	#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a {
230	234	font-size: inherit;
231		- font-weight: normal;
	235	+ font-weight: 400;
232	236	text-decoration: none;
233	237	filter: alpha(opacity=100);
234	238	-moz-opacity: 1;
235	239	opacity: 1;
		@@ -254,12 +258,13 @@
254	258	}
255	259
256	260	#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date,
257	261	#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-context {
258		- opacity: .6;
	262	+ opacity: 0.6;
259	263	}
260	264
261		-/* 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. */
262	267	.jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date {
263	268	display: none;
264	269	}
265	270
		@@ -271,8 +276,9 @@
271	276	/* Behavior when there are no thumbnails in visual mode */
272	277	#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs p.jp-relatedposts-post-excerpt {
273	278	overflow: hidden;
274	279	}
	280	+
275	281	#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs span {
276	282	margin-bottom: 1em;
277	283	}
278	284
		@@ -333,8 +339,9 @@
333	339	* Hide the related post section in the print view of a post
334	340	*/
335	341
336	342	@media print {
	343	+
337	344	.jp-relatedposts {
338		- display:none !important;
	345	+ display: none !important;
339	346	}
340		-}
	347	+}