onibrowser/public/old/styles/main.css

A browser in the browser

/** Comments **/
  /**
   *
   * (c) 2019 The Dosyago Corporation and BrowserGap
   *
   * Unless otherwise noted all styles are placed in document order
   * In sections arranged by different aspects, like layout, behaviour, 
   * components and elements.
  **/

/** imports **/
  @import url(/styles/theme.css);
  @import url(/styles/typesetting.css);
  @import url(/styles/header.css);
  @import url(/styles/register-form.css);
  @import url(/styles/content.css);
  @import url(/styles/points.css);
  @import url(/styles/graphic.css);
  @import url(/styles/story.css);
  @import url(/styles/auth-form.css);
  @import url(/styles/footer.css);
  @import url(/styles/elements.css);
  @import url(/styles/backgrounds.css);
  @import url(/styles/colors.css);
  @import url(/styles/document.css);
  @import url(/styles/z-stack.css);

/** styles **/
  /** main layout **/
    main section.content {
      /*
      position: relative;
      */
      grid-area: section;
    }

    body {
      display: grid;
      grid-template-areas:
        "header"
        "header2"
        "section"
        "footer";
      grid-template-rows: auto auto 1fr auto;
      grid-template-columns: 100%;
      min-height: 100%;
    }

    body header, body footer {
      padding: 0.5em 1em;
    }

    header {
      grid-area: header;
      display: flex;
      align-items: center;
      justify-content: stretch;
    }

    header nav {
      flex: 1;
    }

    main footer {
      grid-area: footer;
    }

  /** behaviour **/
    /** stateful behavior **/
      /* focus */
        :focus {
          outline: medium auto var(--black);
        }

        main section:focus {
          outline: none;
        }

    /** non-stateful behaviour **/
      body {
        overflow-x: hidden;
      }

      header nav ul li, label, fieldset {
        user-select: none;
      }

  /** device overrides **/
    @media screen and (max-width: 666px) {
      header nav a.drawer {
        display: inline-block;
      }

      header nav a.drawer ~ ul {
        display: none;
        position: absolute;
        flex-direction: column;
        top: 0;
        left: 1em;
        margin: 0;
        padding: 4em 0 0.5em;
        overflow-y: auto;
        background: transparent;
      }

      header nav a.drawer ~ ul::before {
        display: block;
        position: absolute;
        z-index: -1;
        top: 4em;
        width: 100%;
        height: calc(100% - 4em);
        background: linear-gradient(to bottom right, var(--c1), var(--c2));
        content: "";
      }

      header nav a.drawer ~ ul li {
        display: block;
        margin: 0;
        padding: 0.25em 0.35em;
      }

      header nav a.drawer ~ ul li:not(.for-button):hover,
      header nav a.drawer ~ ul li:not(.for-button):active {
        background: var(--c2);
      }

      header nav a.drawer ~ ul:target {
        display: block; 
        width: calc(100% - 2em);
        height: calc(100% - 6em);
      }

      main .points ul {
        padding: 0;
      }

      nav li.for-button a.register {
        background: var(--c2);
      }

      header, .header-background {
        height: auto;
        min-height: 3em;
      }

      .header-background {
        padding: 0;
      }

      aside.logo {
        font-size: 80%;
      }
    }

    @media screen and (max-width: 950px) {
      a.register .verbose-name {
        display: none;
      }

      a.register::before {
        content: "Join";
      }
    }

    @media screen and (max-width: 960px) {
      footer, footer nav {
        flex-direction: column-reverse;
        align-items: center;
      }

      footer > * {
        margin: 1em 0;
      }


      footer nav {
        align-items: start;
      }

      main footer::after {
        display: block;
        position: absolute;
        left: -70vw;
        bottom: 50vh;
        width: 200vw;
        height: 110vh;
        transform: rotateZ(-15deg);
        content: " "; 
      }
    }

  /** print **/
    /** this is the same as screen and max-width: 666px with some page break additons */

    @media print {
      header nav a.drawer {
        display: inline-block;
      }

      header nav a.drawer ~ ul {
        display: none;
        position: absolute;
        flex-direction: column;
        top: 4em;
        left: 1em;
        margin: 0;
        padding: 0;
      }

      header nav a.drawer ~ ul li {
        display: block;
        margin: 0.5em;
      }

      header nav a.drawer ~ ul:target {
        display: block; 
      }

      main .points ul {
        padding: 0;
      }

      header, .header-background {
        height: auto;
        min-height: 3em;
      }

      aside.logo {
        font-size: 80%;
      }

      main footer, header, div.graphic, div.points, div.story {
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid;
      }
    }

  /** enhancements **/
    :root {
      -webkit-overflow-scrolling: touch;
      scroll-behaviour: smooth;
    }

    @media (prefers-reduced-motion: reduce) {
      :root {
        -webkit-overflow-scrolling: auto;
        scroll-behavior: auto;
      }
    }