github.com/tiagovtristao/plz@v13.4.0+incompatible/docs/styles.css

/*
Fonts

Note that these are commercially licensed, we have bought a licence for them for use on the site
but as a result they're not checked into Git.
*/
@font-face {
    font-family: 'EssentialPragmataPro-Bold';
    src: url('/fonts/31B6AC_0_0.eot');
    src: url('/fonts/31B6AC_0_0.eot?#iefix') format('embedded-opentype'),
         url('/fonts/31B6AC_0_0.woff2') format('woff2'),
         url('/fonts/31B6AC_0_0.woff') format('woff'),
         url('/fonts/31B6AC_0_0.ttf') format('truetype');
}

@font-face {
    font-family: 'EssentialPragmataPro';
    src: url('/fonts/31B6AC_1_0.eot');
    src: url('/fonts/31B6AC_1_0.eot?#iefix') format('embedded-opentype'),
         url('/fonts/31B6AC_1_0.woff2') format('woff2'),
         url('/fonts/31B6AC_1_0.woff') format('woff'),
         url('/fonts/31B6AC_1_0.ttf') format('truetype');
}

@font-face {
    font-family: 'Calibre';
    src: url('/fonts/CalibreWeb-Regular.eot');
         url('/fonts/CalibreWeb-Regular.woff2') format('woff2'),
         url('/fonts/CalibreWeb-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Calibre-Bold';
    src: url('/fonts/CalibreWeb-Bold.eot');
         url('/fonts/CalibreWeb-Bold.woff2') format('woff2'),
         url('/fonts/CalibreWeb-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Calibre-Thin';
    src: url('/fonts/CalibreWeb-Thin.eot');
         url('/fonts/CalibreWeb-Thin.woff2') format('woff2'),
         url('/fonts/CalibreWeb-Thin.woff') format('woff');
}

/* General */
body {
    background: #202328;
    color: #999999;
    font-family: "EssentialPragmataPro", monospace;
    margin: 0px;
}
body > div {
    margin: 0.5em;
}
a {
    color: white;
    text-decoration: none;
}
.body a:link {
    color: #00ffff;
}
.body a:visited {
    color: #29abe2;
}
h1, h2, h3, h4 {
    color: white;
    font-size: medium;
    font-family: "Calibre-Thin", sans-serif;
}

.yellow   { color: #ffe752; }
.turquoise{ color: #02e68f; }
.green    { color: #96ee05; }
.blue     { color: #29abe2; }
.cyan     { color: #00ffff; }
.violet   { color: #af7dff; }
.pink     { color: #ff00ff; }
.red      { color: #fc1452; }
.black:   { color: #111111; }
.darkgrey { color: #242424; }
.white    { color: #FFFFFF; }

.experimental { color: #fc1452; }

.caps {
    text-transform: uppercase;
}
pre {
    border: 1px #02e68f solid;
    border-radius: 3px;
    margin-right: -3px;
    padding: 5px 5px 5px 2px;
    color: white;
}
:not(pre) > code {
    border: 1px #666666 solid;
    color: white;
    padding: 2px;
    border-radius: 3px;
    white-space: nowrap;
}
pre.rule {
    white-space: normal;
    word-wrap: break-word;
    word-break: normal;
}
.optional {
    font-style: italic;
}
p, li, td {
    line-height: 130%;
}
hr {
    border-color: #02e68f;
    margin-top: 10em;
}

/* Body uses flex to split left menu from rest of page */
@media (min-width: 800px) {
    .above {
        display: flex;
        flex-direction: row;
    }
    .left {
        flex: 1 4 25%;
    }
    .right {
        flex: 3 4 75%;
    }
}
/* Header row */
.header {
    display: flex;
    flex-direction: row;
    margin: 4px;
    padding: 0px;
    min-height: 7em;
}
.header > div {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    vertical-align: middle;
    padding: 15px;
}
.header > div > div {
    flex: 1 1;
}
.hdrimg1 img {
    width: 200px;
    height: auto;
    position: absolute;
    left: 40%;
    top: -50px;
    display: none;
}
.hdrimg2 img {
    width: 120px;
    height: auto;
    position: absolute;
    right: 20%;
    top: 50px;
    display: none;
}
.sideimg img {
    height: auto;
    position: absolute;
    opacity: 0.2;
    z-index: -1000;
    display: none;
}
@media only screen and (min-width: 800px) {
    .sideimg img, .hdrimg2 img {
        display: block;
    }
}
@media only screen and (min-width: 600px) {
    .hdrimg1 img {
        display: block;
    }
}
.rotate1 { transform: rotate(30deg); }
.rotate2 { transform: rotate(60deg); }
.rotate3 { transform: rotate(90deg); }
.rotate4 { transform: rotate(120deg); }
.rotate5 { transform: rotate(150deg); }
.rotate6 { transform: rotate(210deg); }
.rotate7 { transform: rotate(270deg); }
.idximg1 img {
    transform: rotate(20deg);
    position: absolute;
    left: 35%;
    width: 300px;
    top: -120px;
    height: auto;
    display: none;
}
.idximg2 img {
    transform: rotate(120deg);
    position: absolute;
    left: 45%;
    top: 250px;
    width: 120px;
    height: auto;
    display: none;
}
.idximg3 img {
    transform: rotate(140deg);
    position: absolute;
    right: 15%;
    top: 100px;
    width: 300px;
    height: auto;
    display: none;
}
.idximg4 img {
    transform: rotate(-30deg);
    position: absolute;
    right: 30%;
    top: -20px;
    width: 60px;
    height: auto;
    display: none;
}
.idximg5 img {
    transform: rotate(-80deg);
    position: absolute;
    right: 10em;
    top: -20px;
    width: 120px;
    height: auto;
    z-index: -50;
    display: none;
}
.idximg-spacer {
    display: none;
    height: 200px;
}
.header, .idximg-spacer {
    display: none;
}
@media only screen and (min-width: 1200px) {
    .idximg3 img { display: inline; }
}
@media only screen and (min-width: 1400px) {
    .idximg5 img { display: inline; }
}
@media only screen and (min-width: 1000px) {
    .idximg4 img { display: inline; }
}
@media only screen and (min-width: 800px) {
    .idximg1 img, .idximg2 img, .header, .idximg-spacer { display: inline; }
}

/* Left menu */
.left .logo {
    display: none;
}
@media (min-width: 800px) {
    .left-container {
        display: flex;
        flex-direction: column;
        position: sticky;
        top: 0em;
    }
    .left .logo {
        flex: 1 10 10%;
        display: block;
    }
}
.logo h1 {
    text-transform: none;
}
.left .menu {
    flex: 9 10 90%;
}
.left .menu-graphic {
    margin-bottom: 1em;
    margin-top: 1em;
    text-align: right;
}
.left .menu-blurb {
    margin: 2em;
    text-align: left;
    font-family: "Calibre", sans-serif;
    font-size: large;
}
.left .menu-graphic img {
    width: auto;
    height: 160px;
    transform: rotate(-90deg);
    display: none;
}
@media only screen and (min-width: 1000px) {
    .left .menu-graphic img { display: inline; }
}
.left .menu > ul, .left .menu > p {
    list-style: none;
    padding-left: 2em;
}
.left .menu > ul ul {
    list-style: none;
    padding-left: 3em;
}
.left .menu > ul > li {
    color: #af7dff;
    margin: 0.8em 0;
}
.left .menu > ul > li > a {
    color: #af7dff;
}
.left .menu > ul > li.selected > a {
    color: white;
}
.left .menu > ul > li:before {
    content: "\2192";
    padding-right: 1em;
}
.left .menu > ul > li.selected:before {
    content: "\2193";
    padding-right: 1em;
    color: white;
}
.left .menu > ul > li:hover:before {
    color: white;
}
.left .menu > ul > li > ul > li, .left .menu > ul > li > ul > li > a {
    color: #999999;
}
.left .menu li {
    text-transform: uppercase;
}
.left .menu > ul {
    transition: height 1s ease-in-out;
}
.hide {
    height: 0;
    display: none;
    overflow: hidden;
}
.menu .selected a, .left .menu > ul > li > ul > li > a.selected, .left .menu > ul > li > ul > li.selected > a {
    color: white;
}
.menu > p {
    text-align: center;
}
.menu > p a {
    width: 80%;
    border: 1px #999999 solid;
    border-radius: 0.3em;
    padding: 0.4em;
    white-space: nowrap;
    display: none;
}
@media only screen and (max-width: 800px) {
    .menu p a { display: block; }
}

/* Main body */
.body {
    padding-left: 10%;
    overflow-x: hidden;
}
.body h1 {
    font-family: "Calibre-Thin", sans-serif;
    padding: 5em 0;
    font-size: xx-large;
    font-weight: normal;
}
@media (max-width: 800px) {
    .body h1 { padding: 1em 0; }
}
.body h2, .body h3, .body h2 a, .body h3 a {
    font-family: "Calibre-Thin", sans-serif;
    color: #02e68f;
    text-indent: -5%;
    padding: 2em 0 0 0;
    font-weight: normal;
}
.body h2 {
    font-size: xx-large;
}
.body h3 {
    font-size: x-large;
}
.body ul {
    list-style: none;
    padding:0;
    margin:0;
}
.body li {
    text-indent: -2em;
}
.body li:before {
    content: "\2022 ";
    color: #02e68f;
    padding-right: 1.8em;
}
table {
    border-spacing: 0;
}
th {
    color: #02e68f;
    text-transform: uppercase;
    border-bottom: 1px white solid;
    text-align: left;
}
td {
    border-bottom: 1px #666666 solid;
    padding: 4px;
    min-width: 8em;
}

/* Footer */
footer > div {
    padding: 1em;
}
@media (min-width: 800px) {
    footer {
        display: flex;
        flex-direction: row;
        margin-top: 8em;
    }
    footer > div {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        padding-top: 1em;
    }
    footer > div > div {
        margin-top: auto;
        flex: 1 1;
    }
}
.lockup {
    margin-left: 20%;
    padding-bottom: 4em;
    display: none;
}
@media only screen and (min-width: 800px) {
    .lockup { display: block; }
}

/* Index page has a custom layout */
.index-layout {
    display: flex;
    flex-direction: column;
}
.index-layout > div {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
}
.index-layout > div > div {
    flex: 1 1 50%;
    padding: 20px 40px 20px 0;
    color: white;
}
.index-layout h2 {
    text-indent: 0;
    padding-top: 2em;
}
.index-layout a:link, .index-layout a:visited {
    text-transform: uppercase;
    color: white;
}
.index-layout p {
    margin-bottom: 5em;
}
.index-layout img {
    height: 8em;
    width: auto;
}
.index-open {
    color: white;
    margin: 8em 8em 8em 0;
}
.index-stripe {
    background-color: #111111;
    padding: 8em;
    position: relative;
    margin: 0;
}
@media (min-width: 800px) {
    .index-stripe { padding: 8em 8em 8em 40%; }
}
.index-open {
    font-family: "Calibre", sans-serif;
    font-size: large;
}
.index-stripe p {
    font-family: "Calibre", sans-serif;
    font-size: x-large;
}
.index-stripe img {
    display: none;
}
@media only screen and (min-width: 800px) {
    .index-stripe img:nth-child(1), .index-stripe img:nth-child(3) { display: inline }
}
@media only screen and (min-width: 1200px) {
    .index-stripe img:nth-child(2) { display: inline }
}
.index-stripe .button {
    border-radius: 2em;
    padding: 1em 4em;
    border: 2px #02e68f solid;
    white-space: nowrap;
}
.index-stripe img:nth-child(1) {
    position: absolute;
    left: -20px;
    width: 90px;
    height: auto;
}
.index-stripe img:nth-child(2) {
    position: absolute;
    left: 10%;
    top: -100px;
    width: 250px;
    height: auto;
    transform: rotate(160deg);
}
.index-stripe img:nth-child(3) {
    position: absolute;
    right: -30px;
    bottom: -40px;
    width: 150px;
    height: auto;
}
.index-corner {
    background-color: #111111;
    position: absolute;
    top: -60em;
    right: -40em;
    width: 80em;
    height: 80em;
    opacity: 0.7;
    transform: rotate(30deg);
    z-index: -20;
}
@media (max-width: 1000px) {
    .index-corner { display: none; }
}
.smol {
    width: 20%;
    height: auto;
}
.r90 {
    transform: rotate(90deg);
}
.r45 {
    transform: rotate(45deg);
}
.icon {
    float: right;
}
.grammar-string {
    color: #ffe752;
}
.grammar-syntax {
    color: #ff00ff;
}
.grammar-comment {
    color: #999999;
}
.grammar-token {
    color: #96ee05;
}
.build-rule {
    color: #96ee05;
}