GitRoot

  1/*
  2** Stylesheet to style HTML structured as
  3**
  4** <article>
  5**   <section> (title slide) </section>
  6**   <section> (slide 2) </section>
  7**   <section> (slide ...n) </section>
  8** </article>
  9** 
 10** into a basic "slide deck presentation".
 11**
 12** Michael Thornburgh, <zenomt@zenomt.com>
 13**
 14** Based on "Creating a Slide Deck with Just HTML and CSS"
 15** by Nathan Knowler, https://codepen.io/knowler/pen/eYGRwyb
 16*/
 17
 18* { box-sizing: border-box; }
 19
 20:root {
 21	font-family: Avenir Next, Arial, Helvetica, system-ui;
 22}
 23
 24html, body {
 25	block-size: 100%;
 26	counter-reset: slide;
 27	margin: 0;
 28}
 29
 30@media screen {
 31	article {
 32		block-size: 100%;
 33		display: flex;
 34		flex-direction: column;
 35		overflow-y: scroll;
 36		scroll-snap-type: y mandatory;
 37	}
 38}
 39
 40h1, h2 { font-size: 120%; }
 41
 42section > * { margin: 0 0 2vh; }
 43
 44/* Show the slide counter */
 45article > ::before, article > ::after {
 46	content: counter(slide);
 47	position: absolute;
 48	inset-block-end: 1vh;
 49	inset-inline-end: 1vh;
 50	padding: 1.5vh;
 51	font-size: 3.0vmin;
 52	font-weight: 700;
 53	font-variant: tabular-nums;
 54	line-height: 1;
 55}
 56article > ::before {
 57    content: attr(data-footer);
 58    inset-inline-start: 1vh;
 59    inset-inline-end: unset;
 60}
 61
 62section {
 63	flex: 0 0 100%;
 64	scroll-snap-align: start;
 65	block-size: 100%;
 66	margin: 10vh 5vw;
 67	position: relative;
 68	display: flex;
 69	flex-direction: column;
 70	padding: 10vh 5vw;
 71	break-before: page;
 72	counter-increment: slide;
 73	max-height: 100vh;
 74	contain: layout;
 75}
 76
 77/* Title slide layout */
 78section:first-of-type {
 79	display: grid;
 80	place-content: center;
 81	text-align: center;
 82	font-size: 7.0vmin;
 83	line-height: 1.1;
 84}
 85
 86section:first-of-type > * { margin: 0; }
 87
 88/* Regular slide layout */
 89
 90/* Put regular slide first element at the top */
 91
 92section:nth-of-type(n+2) {
 93	align-content: center;
 94	justify-content: start;
 95	text-align: left;
 96	font-size: 5.0vmin;
 97	line-height: 1.3;
 98}
 99
100section:nth-of-type(n+2) > :first-child {
101	flex: 0 0 auto;
102	margin-bottom: 0;
103	width: 100%;
104}
105
106section:nth-of-type(n+2) > :not(:first-child) {
107	flex: 0 0 1fr;
108	margin-inline: 2.5vw;
109}
110
111/* Center the 2nd through last items in the space after the first item */
112section:nth-of-type(n+2) > :nth-child(2) { margin-top: auto; }
113section:nth-of-type(n+2) > :last-child { margin-bottom: auto; }
114
115p {
116	min-height: 0;
117	max-height: 100%;
118}
119
120pre { font-size: 2.5vmin; }
121
122svg, img {
123	padding: 2vh 0;
124	margin: 0;
125	min-height: 0;
126	max-height: 100%;
127	min-width: 0;
128	max-width: 100%;
129	object-fit: contain;
130}
131
132p :is(img, svg) {
133	width: 100%;
134	height: 100%;
135}
136
137ul > li > ul { list-style-type: square; }
138
139ul, ol { padding-left: 4vw; }
140
141section > :is(ul, ol) { padding-right: 4vw; }
142
143blockquote {
144	padding: 0 2vw;
145	border-left: 0.75vw solid;
146	font-size: larger;
147}
148
149blockquote > * { margin: 0 }
150
151table {
152	font-size: 2.5vmin;
153	border-collapse: collapse;
154	color: inherit;
155}
156
157th, td {
158	padding: 1vh;
159	border: 0.25vh solid;
160}