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

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