@lcf.vs/css-ui/css-ui.css

A pure CSS base to make a responsive user interface

/* {"name":"css-ui","version":"3.0.7","author":"Lcf.vs <michael.rouges@gmail.com>","license":"MIT"} */
::after, ::before, a, abbr, acronym, address, article, aside, audio, b, big, blockquote, body, button, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, html, i, iframe, img, ins, kbd, label, legend, li, main, mark, menu, nav, object, ol, output, p, pre, progress, q, rt, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, u, ul, var, video {
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
  border: none;
  outline: 0;
  list-style: none;
  text-decoration: none;
  background: 0 0;
  margin: 0;
  padding: 0;
  color: inherit
}

:active,
:focus {
  outline: 0
}

html {
  background: var(--css-ui--bg);
  font-family: var(--css-ui--font);
  height: 100vh;
  font-size: 1em;
  overflow-x: hidden
}

body {
  display: table;
  width: 100%;
  padding-top: var(--css-ui--header-height);
  height: 100%
}

body > header, body > nav {
  position: fixed;
  top: 0;
  left: 0;
  user-select: none
}

body > header {
  background: var(--css-ui--header-bg);
  width: 100%;
  height: var(--css-ui--header-height);
  z-index: 1
}

body > header > h1 {
  position: fixed;
  left: var(--css-ui--menu--icon-size);
  line-height: var(--css-ui--header-height)
}

body > nav {
  bottom: 0;
  margin-top: var(--css-ui--header-height);
  z-index: 1
}

body > nav > [tabindex="1"],
body > nav > [tabindex="-1"] {
  background: var(--css-ui--header-bg);
  color: var(--css-ui--menu--color);
  position: fixed;
  top: 0;
  display: block;
  width: var(--css-ui--menu--icon-size);
  text-align: center;
  line-height: var(--css-ui--menu--icon-size);
  z-index: 1
}

body > nav > [tabindex="1"] {
  z-index: 2
}

body > nav > [tabindex="1"]:focus {
  opacity: 0;
  pointer-events: none
}

body > nav > [tabindex="1"] + a + ol {
  background: var(--css-ui--menu--bg);
  height: var(--css-ui--menu--height);
  width: 0;
  transition: width .2s .2s
}

body > nav > [tabindex="1"]:focus + a + ol,
body > nav > [tabindex="1"]:focus + a + ol > li > a {
  width: var(--css-ui--menu--width)
}

body > nav > [tabindex="-1"] + ol > li {
  height: var(--css-ui--menu--icon-size);
  border-bottom: var(--css-ui--menu--border)
}

body > nav > [tabindex="-1"] + ol > li > a {
  transition: width .2s .2s;
  overflow-x: hidden;
  line-height: var(--css-ui--menu--icon-size);
  display: inline-block;
  min-width: 100%;
  white-space: nowrap;
  width: 0
}

body > nav > [tabindex="-1"] + ol > li > a::before {
  width: var(--css-ui--menu--icon-size);
  display: inline-block;
  text-align: center
}

body > nav > [tabindex="-1"] + ol > li > a:focus,
body > nav > [tabindex="-1"] + ol > li > a:hover {
  background: rgba(255, 255, 255, .3)
}

body > nav > [tabindex="1"]:focus + a + ol::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: var(--css-ui--header-height);
  left: 0;
  z-index: -1;
  background-color: var(--css-ui--menu--overlay-bg)
}

main {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 1em;
  height: calc(100vh - var(--css-ui--header-height))
}

main > h1 {
  font-weight: 700;
  margin: auto;
  display: block
}

main > * {
  display: inline-block;
  margin: var(--css-ui--padding);
  padding: var(--css-ui--padding);
  width: 95%;
  text-align: left
}

@media screen
and (min-width: 50em) {
  main > * {
    width: var(--css-ui--contents-width)
  }
}

@media (prefers-reduced-motion: reduce) {
  body > nav > [tabindex="1"] + a + ol,
  body > nav > [tabindex="-1"] + ol > li > a {
    transition: none
  }
}