@xiee/utils/css/snap.css

Miscellaneous tools and utilities to manipulate HTML pages

:root { --slide-width: 100%; }
html { scroll-snap-type: y mandatory; }
th, td { padding: .2em .5em; }
.slide { padding: 0 1em; background-color: #fff; }
.slide, :is(.frontmatter, .middle) .main {
  display: flex;
  flex-direction: column;
}
.slide {
  & > .main { flex-grow: 1; }
  & > .header { margin-bottom: 1em; }
  h2, h3 { margin-top: unset; }
}
body {
  max-width: fit-content;
  padding: 0;
}
a { color: #eb4a47; }
:not(pre) > code { background: #fdfded; }
#TOC {
  columns: 2;
  &::before {
    font-size: 1.3em;
    font-weight: bold;
    display: block;
    border-bottom: 1px solid #666;
  }
}
:is(.frontmatter, .middle) .main { justify-content: center; }
.footer {
  display: flex;
  justify-content: space-between;
  opacity: .5;
  font: .7em monospace;
}
.inverse {
  background: #eee;
  filter: invert(1);
}
.center { text-align: center; }
.slide-container h2 .section-number {
  display: inline-block;
  background: #666;
  color: white;
  padding: 0 .1em;
  margin-right: .3em;
}
.overview {
  font-size: .8em;
  .slide-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    .slide {
      width: var(--slide-width);
      border: 1px dotted #ccc;
      margin-bottom: 0.5em;
    }
  }
}
.mirrored { transform: scale(-1, 1); }
.timer { opacity: 0; }
html:fullscreen::-webkit-scrollbar, .spacer { display: none; }
html:fullscreen {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
@media screen and (min-width: 992px) {
  :root {
    --slide-width: 49%;
    --slide-scale: 1;
    --slide-ratio: 0.75;
    --slide-top: auto;
  }
  .slide-mode {
    font-size: 2em;
    background: #d7d8d2;
    scale: var(--slide-scale);
    margin-top: var(--slide-top);
    .slide {
      min-height: calc(100vh / var(--slide-scale));
      width: calc(100vh / var(--slide-ratio) / var(--slide-scale));
      box-shadow: 0 0 2em #888;
      clip-path: inset(0 -2em 0 -2em);
      scroll-snap-align: start;
    }
    .spacer { display: block; }
    .timer { opacity: initial; }
  }
  li li { font-size: .9em; }
}
@media (min-width: 1400px) {
  :root { --slide-width: 33%; }
}
@media (min-width: 1800px) {
  :root { --slide-width: 24.67%; }
}