Skip to content

Instantly share code, notes, and snippets.

@iiic

iiic/slides.html

Created June 1, 2021 15:28
Show Gist options
  • Save iiic/d27912ddc16b96ebaef7743a0f7ba69c to your computer and use it in GitHub Desktop.
Save iiic/d27912ddc16b96ebaef7743a0f7ba69c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
slides.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Slideshow</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
/* html {
font-size: 1rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
contain: style;
}
*,
*::before,
*::after {
-webkit-box-sizing: inherit;
box-sizing: inherit
}
[hidden],
hr {
display: none
}
body {
margin: auto;
line-height: var(--line-height);
font-family: var(--font-family);
text-align: center;
font-size: 1rem;
color: var(--color-text);
background: var(--color-bg);
display: -ms-grid;
display: grid;
-ms-grid-rows: auto 1fr auto;
grid-template-rows: auto 1fr auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
min-height: 100vh;
}
ul,
ol,
figure {
font-size: 0
}
li,
figcaption {
font-size: medium;
padding: 0.2rem 0
}
a {
color: var(--color);
display: inline-block;
font-weight: bold;
text-decoration: none
} */
article {
display: flex;
overflow: auto;
flex-flow: column nowrap;
height: 100vh;
scroll-snap-type: y mandatory;
}
section {
min-height: 100%;
scroll-snap-align: start;
}
section:nth-child(1) {
border: 1px solid red;
}
section:nth-child(2) {
border: 1px solid green;
}
</style>
</head>
<body>
<p hidden>v FF to jede, v Chrome ne</p>
<article>
<section>
jedna
</section>
<section>
dve
</section>
</article>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment