← All changes | modules/related-posts/related-posts.css +347 -0 16.2-beta → 16.3 View file →

		@@ -1,0 +1,347 @@
	1	+/**
	2	+ * Jetpack related posts
	3	+ */
	4	+
	5	+/**
	6	+ * The Gutenberg block
	7	+ */
	8	+
	9	+.jp-related-posts-i2 {
	10	+ margin-top: 1.5rem;
	11	+}
	12	+
	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;
	25	+}
	26	+
	27	+.jp-related-posts-i2__post {
	28	+ display: flex;
	29	+ flex-direction: column;
	30	+
	31	+ /* Default: 2 items by row */
	32	+ flex-basis: calc(( 100% - var(--hgap) ) / 2);
	33	+}
	34	+
	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 ~ * {
	38	+
	39	+ /* From 3 total items on, 3 items by row */
	40	+ flex-basis: calc(( 100% - var(--hgap) * 2 ) / 3);
	41	+}
	42	+
	43	+.jp-related-posts-i2__post:nth-last-child(4):first-child,
	44	+.jp-related-posts-i2__post:nth-last-child(4):first-child ~ * {
	45	+
	46	+ /* Exception for 4 total items: 2 items by row */
	47	+ flex-basis: calc(( 100% - var(--hgap) ) / 2);
	48	+}
	49	+
	50	+.jp-related-posts-i2__post-link {
	51	+ display: flex;
	52	+ flex-direction: column;
	53	+ row-gap: 0.5rem;
	54	+
	55	+ width: 100%;
	56	+ margin-bottom: 1rem;
	57	+
	58	+ line-height: 1.2;
	59	+}
	60	+
	61	+.jp-related-posts-i2__post-link:focus-visible {
	62	+ outline-offset: 2px;
	63	+}
	64	+
	65	+.jp-related-posts-i2__post-img {
	66	+ order: -1;
	67	+
	68	+ max-width: 100%;
	69	+}
	70	+
	71	+.jp-related-posts-i2__post-defs {
	72	+ margin: 0;
	73	+
	74	+ list-style-type: unset;
	75	+}
	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	+
	91	+/* List view */
	92	+
	93	+.jp-relatedposts-i2[data-layout="list"] .jp-related-posts-i2__list {
	94	+ display: block;
	95	+}
	96	+
	97	+.jp-relatedposts-i2[data-layout="list"] .jp-related-posts-i2__post {
	98	+ margin-bottom: 2rem;
	99	+}
	100	+
	101	+/* Breakpoints */
	102	+
	103	+@media only screen and (max-width: 640px) {
	104	+
	105	+ .jp-related-posts-i2__list {
	106	+ display: block;
	107	+ }
	108	+
	109	+ .jp-related-posts-i2__post {
	110	+ margin-bottom: 2rem;
	111	+ }
	112	+}
	113	+
	114	+/* Container */
	115	+
	116	+#jp-relatedposts {
	117	+ display: none;
	118	+ padding-top: 1em;
	119	+ margin: 1em 0;
	120	+ position: relative;
	121	+ clear: both;
	122	+}
	123	+
	124	+.jp-relatedposts::after {
	125	+ content: "";
	126	+ display: block;
	127	+ clear: both;
	128	+}
	129	+
	130	+/* Headline above related posts section, labeled "Related" */
	131	+
	132	+#jp-relatedposts h3.jp-relatedposts-headline {
	133	+ margin: 0 0 1em 0;
	134	+ display: inline-block;
	135	+ float: left;
	136	+ font-size: 9pt;
	137	+ font-weight: 700;
	138	+ font-family: inherit;
	139	+}
	140	+
	141	+#jp-relatedposts h3.jp-relatedposts-headline em::before {
	142	+ content: "";
	143	+ display: block;
	144	+ width: 100%;
	145	+ min-width: 30px;
	146	+ border-top: 1px solid rgba(0, 0, 0, 0.2);
	147	+ margin-bottom: 1em;
	148	+}
	149	+
	150	+#jp-relatedposts h3.jp-relatedposts-headline em {
	151	+ font-style: normal;
	152	+ font-weight: 700;
	153	+}
	154	+
	155	+/* Related posts items (wrapping items) */
	156	+
	157	+#jp-relatedposts .jp-relatedposts-items {
	158	+ clear: left;
	159	+}
	160	+
	161	+#jp-relatedposts .jp-relatedposts-items-visual {
	162	+ margin-right: -20px;
	163	+}
	164	+
	165	+/* Related posts item */
	166	+
	167	+#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
	168	+ float: left;
	169	+ width: 33%;
	170	+ margin: 0 0 1em; /* Needs to be same as the main outer wrapper for Related Posts */
	171	+ box-sizing: border-box;
	172	+}
	173	+
	174	+#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post {
	175	+ padding-right: 20px;
	176	+ filter: alpha(opacity=80);
	177	+ -moz-opacity: 0.8;
	178	+ opacity: 0.8;
	179	+}
	180	+
	181	+#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+4),
	182	+#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(3n+4) {
	183	+ clear: both;
	184	+}
	185	+
	186	+#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:hover .jp-relatedposts-post-title a {
	187	+ text-decoration: underline;
	188	+}
	189	+
	190	+#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:hover {
	191	+ filter: alpha(opacity=100);
	192	+ -moz-opacity: 1;
	193	+ opacity: 1;
	194	+}
	195	+
	196	+/* Related posts item content */
	197	+
	198	+#jp-relatedposts .jp-relatedposts-items-visual h4.jp-relatedposts-post-title,
	199	+#jp-relatedposts .jp-relatedposts-items p,
	200	+#jp-relatedposts .jp-relatedposts-items time {
	201	+ font-size: 14px;
	202	+ line-height: 20px;
	203	+ margin: 0;
	204	+}
	205	+
	206	+#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs {
	207	+ position: relative;
	208	+}
	209	+
	210	+#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs a.jp-relatedposts-post-aoverlay {
	211	+ position: absolute;
	212	+ top: 0;
	213	+ bottom: 0;
	214	+ left: 0;
	215	+ right: 0;
	216	+ display: block;
	217	+ border-bottom: 0;
	218	+}
	219	+
	220	+#jp-relatedposts .jp-relatedposts-items p,
	221	+#jp-relatedposts .jp-relatedposts-items time {
	222	+ margin-bottom: 0;
	223	+}
	224	+
	225	+#jp-relatedposts .jp-relatedposts-items-visual h4.jp-relatedposts-post-title {
	226	+ text-transform: none;
	227	+ margin: 0;
	228	+ font-family: inherit;
	229	+ display: block;
	230	+ max-width: 100%;
	231	+}
	232	+
	233	+#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a {
	234	+ font-size: inherit;
	235	+ font-weight: 400;
	236	+ text-decoration: none;
	237	+ filter: alpha(opacity=100);
	238	+ -moz-opacity: 1;
	239	+ opacity: 1;
	240	+}
	241	+
	242	+#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a:hover {
	243	+ text-decoration: underline;
	244	+}
	245	+
	246	+#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post img.jp-relatedposts-post-img,
	247	+#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post span {
	248	+ display: block;
	249	+ max-width: 90%;
	250	+ overflow: hidden;
	251	+ text-overflow: ellipsis;
	252	+}
	253	+
	254	+#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post img.jp-relatedposts-post-img,
	255	+#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post span {
	256	+ height: auto;
	257	+ max-width: 100%;
	258	+}
	259	+
	260	+#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date,
	261	+#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-context {
	262	+ opacity: 0.6;
	263	+}
	264	+
	265	+/* Hide the date by default, but leave the element there if
	266	+ * a theme wants to use css to make it visible. */
	267	+.jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date {
	268	+ display: none;
	269	+}
	270	+
	271	+/* Behavior when there are thumbnails in visual mode */
	272	+#jp-relatedposts .jp-relatedposts-items-visual div.jp-relatedposts-post-thumbs p.jp-relatedposts-post-excerpt {
	273	+ display: none;
	274	+}
	275	+
	276	+/* Behavior when there are no thumbnails in visual mode */
	277	+#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs p.jp-relatedposts-post-excerpt {
	278	+ overflow: hidden;
	279	+}
	280	+
	281	+#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs span {
	282	+ margin-bottom: 1em;
	283	+}
	284	+
	285	+/* List Layout */
	286	+#jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post {
	287	+ clear: both;
	288	+ width: 100%;
	289	+}
	290	+
	291	+#jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post img.jp-relatedposts-post-img {
	292	+ float: left;
	293	+ overflow: hidden;
	294	+ max-width: 33%;
	295	+ margin-right: 3%;
	296	+}
	297	+
	298	+#jp-relatedposts .jp-relatedposts-list h4.jp-relatedposts-post-title {
	299	+ display: inline-block;
	300	+ max-width: 63%;
	301	+}
	302	+
	303	+/*
	304	+ * Responsive
	305	+ */
	306	+
	307	+@media only screen and (max-width: 640px) {
	308	+
	309	+ #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
	310	+ width: 50%;
	311	+ }
	312	+
	313	+ #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n) {
	314	+ clear: left;
	315	+ }
	316	+
	317	+ #jp-relatedposts .jp-relatedposts-items-visual {
	318	+ margin-right: 20px;
	319	+ }
	320	+}
	321	+
	322	+@media only screen and (max-width: 320px) {
	323	+
	324	+ #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
	325	+ width: 100%;
	326	+ clear: both;
	327	+ margin: 0 0 1em;
	328	+ }
	329	+
	330	+ #jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post img.jp-relatedposts-post-img,
	331	+ #jp-relatedposts .jp-relatedposts-list h4.jp-relatedposts-post-title {
	332	+ float: none;
	333	+ max-width: 100%;
	334	+ margin-right: 0;
	335	+ }
	336	+}
	337	+
	338	+/*
	339	+ * Hide the related post section in the print view of a post
	340	+ */
	341	+
	342	+@media print {
	343	+
	344	+ .jp-relatedposts {
	345	+ display: none !important;
	346	+ }
	347	+}