hypermedia blog

src/ui/css/pixelgraff.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: Hack;
  font-weight: normal;
  font-style: normal;
  src: url(../gfont/hack.eot);
  src:
    url(../gfont/hack.eot?#iefix) format("embedded-opentype"),
    url(../gfont/hack.woff2) format("woff2"),
    url(../gfont/hack.woff) format("woff");
}

* {
  font-family: Hack, "Menlo", "Monaco", "Consolas", "Liberation Mono",
    "Courier New", monospace;
}

body {
  @apply bg-grey;
  display: block;
  display: linline;
}

.pixelated {
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;
}

.shown {
  @apply !visible !block;
  margin-top: 72px;
  transition: all ease-in 1s;
}

.text-xxs {
  font-size: 0.5rem;
}

.revealed {
  @apply !visible;
}

.floatLeft,
p.floatLeft {
  @apply !float-left inline-flex px-1;
}

.floatRight,
p.floatRight {
  @apply !float-right inline-flex px-1;
}

center {
  @apply block text-center mx-auto;
}

.art.title,
.code.title,
.entertainment.title,
.lab.title,
.notes.title,
.random.title,
.uncategorized.title {
  @apply text-snow;
}

.code a,
.code h2,
.code h3,
.code h2 a,
.code h3 a,
.code.nf-md-folder_multiple,
.code.title:hover {
  @apply text-lime;
}

.code a:hover,
.code h2 a:hover,
.code h3 a:hover,
.code.nf-md-folder_multiple:hover,
.code.title:hover:hover {
  @apply text-green;
}

.lab a,
.lab h2,
.lab h3,
.lab h2 a,
.lab h3 a,
.lab.nf-md-folder_multiple,
.lab.title:hover {
  @apply text-purp;
}

.lab a:hover,
.lab h2 a:hover,
.lab h3 a:hover,
.lab.nf-md-folder_multiple:hover,
.lab.title:hover:hover {
  @apply text-lavender;
}

.art a,
.art h2,
.art h3,
.art h2 a,
.art h3 a,
.art.nf-md-folder_multiple,
.art.title:hover {
  @apply text-mainlyblue;
}

.art a:hover,
.art h2 a:hover,
.art h3 a:hover,
.art.nf-md-folder_multiple:hover,
.art.title:hover:hover {
  @apply text-blue;
}

.entertainment a,
.entertainment h2,
.entertainment h3,
.entertainment h2 a,
.entertainment h3 a,
.entertainment.nf-md-folder_multiple,
.entertainment.title:hover {
  @apply text-crimson;
}

.entertainment a:hover,
.entertainment h2 a:hover,
.entertainment h3 a:hover,
.entertainment.nf-md-folder_multiple:hover,
.entertainment.title:hover:hover {
  @apply text-red;
}

.random a,
.random h2,
.random h3,
.random h2 a,
.random h3 a,
.random.nf-md-folder_multiple,
.random.title:hover {
  @apply text-pumpkin;
}

.random a:hover,
.random h2 a:hover,
.random h3 a:hover,
.random.nf-md-folder_multiple:hover,
.random.title:hover:hover {
  @apply text-orange;
}

.notes a,
.notes h2,
.notes h3,
.notes h2 a,
.notes h3 a,
.notes.nf-md-folder_multiple,
.notes.title:hover {
  @apply text-skyblue;
}

.notes a:hover,
.notes h2 a:hover,
.notes h3 a:hover,
.notes.nf-md-folder_multiple:hover,
.notes.title:hover:hover {
  @apply text-slate;
}

.uncategorized a,
.uncategorized a:hover,
.uncategorized h2,
.uncategorized h3,
.uncategorized h2 a,
.uncategorized h2 a:hover,
.uncategorized h3 a,
.uncategorized h3 a:hover,
.uncategorized.title:hover .uncategorized.nf-md-folder_multiple,
.uncategorized.title:hover .uncategorized.nf-md-folder_multiple:hover {
  @apply text-fog;
}

.uncategorized p a {
  border-bottom: 1px solid #000;
}

.admin {
  width: 100% !important;
}

header {
  nav {
    background: #111 url(../gimg/nav-bg-lil.png);
    background-position: center center;
    background-size: 120% auto;
    min-height: 74px;
    overflow: auto;
    @apply pixelated border-b-2 border-b-white border-solid;

    #menu {
      @apply block float-right mr-8 text-5xl pt-3 text-white clear-both;
    }

    #linx {
      @apply h-fit list-none z-50 hidden border-t-2 border-solid border-t-white;

      li {
        @apply p-2 block text-left bg-grey;

        a {
          @apply text-white p-2 text-xl;
          width: 100%;
          display: block;

          i,
          b {
            @apply mr-4 inline-block clear-none;
          }

          i {
            @apply text-xl;
          }

          b {
            @apply font-normal text-base;
          }
        }
      }

      li.selected {
        @apply bg-blue;

        a {
          @apply text-midnight;
        }
      }
    }

    #logo a {
      @apply pixelated;
      display: block;
      position: absolute;
      top: 0;
      background: url(../gimg/xero-graff-alt-lil.png) top center
        no-repeat;
      width: 197px;
      height: 86px;
      z-index: 99;
      font-size: 0;
      text-indent: 100%;
      white-space: nowrap;
      overflow: visible;
    }
  }
}

#loading {
  @apply fixed block p-3 ml-8;
  background: #222 url(../gimg/hash.png);
  pointer-events: none;
  z-index: 999;
  top: 10px;

  h1,
  img {
    @apply float-left;
  }

  h1 {
    @apply pt-6 pl-2 text-lime text-xl font-bold;
  }
}

#main {
  @apply m-1 px-2 py-10 bg-grey text-white flex flex-wrap z-20;

  #content {
    @apply flex flex-col basis-full;

    article {
      max-width: 750px;
      margin: 0 auto;

      header {
        @apply mb-2 pb-3;
        background: url(../gimg/hash.png);

        h2 {
          @apply text-xl w-full bg-grey;
        }

        h3 {
          @apply text-lg w-full bg-grey pb-1;
        }
      }

      p {
        @apply text-sm my-4;
      }

      img {
        width: 0;
        min-width: 100%;
      }

      video,
      iframe,
      pre,
      code {
        @apply my-2;
        max-width: 380px !important;
        max-height: auto !important;
      }

      h3.read {
        @apply text-lg p-4;
      }

      h1,
      h2 {
        @apply text-xl;
      }

      h3 {
        @apply text-lg;
      }

      pre,
      code {
        @apply bg-black p-3 my-4 overflow-auto text-sm;
        page-break-inside: avoid;
        max-width: 380px !important;
        line-height: 1.4;
      }

      pre > code,
      code > pre {
        @apply !p-0;
      }

      kbd {
        @apply bg-black py-1 px-2 overflow-auto;
      }

      ul {
        list-style-type: square;
        margin: 15px 0 15px 20px;
      }

      blockquote {
        @apply m-0 p-1.5;
      }

      blockquote p {
        @apply bg-black text-white inline-block p-2.5 m-0 text-base;
      }

      blockquote cite {
        @apply block text-base text-fog;
        padding: 5px 0 0px 40px;
        background-image: url(../gimg/arrow-dark-half.png);
        background-repeat: no-repeat;
        background-position: 20px 0;
        min-height: 20px;
      }

      blockquote cite:before {
        content: "";
      }

      form section {
        @apply mb-6;
      }

      select,
      textarea,
      input[type="text"],
      input[type="date"] {
        @apply bg-black text-snow border-midnight border-2 rounded-none p-4 w-full my-2;
      }

      select {
        @apply p-5 text-lg;
      }

      #excerpt {
        height: 300px;
      }

      #content {
        height: 400px;
      }

      label {
        @apply text-mainlyblue font-bold text-lg my-4 w-full;
      }

      button {
        @apply bg-black text-snow border-midnight border-2 rounded-none p-4 mb-6 ml-4 float-right;
      }

      button.tag,
      button.cat {
        @apply bg-black text-snow border-midnight border-2 rounded-none p-2 my-2 mr-2 float-left;
      }

      button.tag::after {
        content: "\f0910";
        @apply text-red px-2;
      }

      button.cat::after {
        @apply text-red px-2;
        content: "\f0258";
      }

      nav {
        button {
          @apply float-left;
        }

        button.cat::before {
          @apply text-blue px-2;
          content: "\f0770";
        }

        button.tag::before {
          content: "\f1224";
          @apply text-blue px-2;
        }

        button.cat::after,
        button.tag::after {
          content: "" !important;
        }
      }

      input[type="checkbox"] {
        @apply inline-block p-2 m-1 bg-black border-midnight float-left;
      }

      input:is(:focus:invalid),
      textarea:is(:focus:invalid) {
        @apply border-crimson;
      }

      input:read-only {
        @apply bg-charcoal text-fog border-black;
      }

      legend {
        @apply inline-block p-1 italic text-fog float-left;
      }

      form:is(:invalid):focus-within callout {
        @apply font-bold text-crimson italic text-base py-3 px-4 mx-1 !visible;
        text-shadow: 2px 3px #111;
      }

      form:is(:valid):focus-within callout,
      form:not(:focus-within) callout {
        @apply !invisible !hidden;
      }

      footer.meta {
        @apply text-xs text-white mt-0 mb-6 mr-0 ml-0 inline-block w-full bg-transparent bg-no-repeat overflow-hidden;
        background-image: url(../gimg/arrow-dark.png);
        background-position: 19px 9px;

        .date,
        .info {
          @apply inline float-left bg-black px-2 py-3 border-b-2 border-grey border-solid;
        }

        .date a,
        .date a:visited,
        .info a,
        .info a:visited {
          @apply text-snow decoration-0 border-b-0;
        }

        .date a:hover,
        .info a:hover {
          @apply border-b-2 border-blue border-solid;
        }

        .date {
          @apply text-center pb-2 border-r-grey border-r-2 border-solid;

          .day {
            @apply block text-xxs leading-3 font-medium;
          }

          .month {
            @apply block text-xxs leading-3 font-normal uppercase text-snow;
          }

          .year {
            @apply block text-xxs leading-3 font-normal uppercase text-snow;
          }
        }

        .info {
          @apply leading-4 text-fog text-xxs;
        }

        .info .nf {
          @apply text-white mr-2 text-xs align-bottom;
        }
      }
    }

    .pagination {
      @apply w-full bg-repeat mb-20;
      background: url(../gimg/hash.png);

      ul {
        @apply list-none w-full text-center p-2;

        li {
          @apply inline-block bg-transparent my-1;

          a {
            @apply text-snow bg-grey px-2 py-1 text-sm;
          }
        }

        li.selected {
          @apply bg-blue;

          a {
            @apply bg-blue text-midnight font-bold;
          }
        }
      }
    }
  }

  aside {
    @apply flex flex-col basis-full;

    h3 {
      background: url(../gimg/hash.png);
      @apply mt-5 text-snow;

      em {
        @apply font-extrabold text-xl bg-grey not-italic py-5 pl-0 pr-3 text-white;
      }
    }

    ul.admin {
      li {
        @apply my-2 py-2;

        a {
          @apply text-xl text-snow;

          i {
            @apply text-mainlyblue;
          }
        }
      }
    }

    .tags,
    .feeds {
      @apply px-1;
    }

    ul.tags {
      @apply list-none text-justify align-middle m-0 p-0 text-base leading-relaxed;

      li {
        @apply inline;
      }

      li a:hover,
      li.highlight {
        @apply border-b-mainlyblue border-b;
      }

      li a {
        @apply whitespace-nowrap no-underline text-white;
      }
    }

    .cats {
      @apply pt-2 text-xs;

      i {
        @apply inline-block mr-1;
      }

      .title {
        @apply inline-block font-bold;
      }

      ul {
        @apply mb-1;

        li {
          @apply pl-2;
        }
      }
    }

    .feeds {
      article {
        @apply float-left text-left p-2;
      }

      .ico {
        @apply pr-0;

        i {
          @apply mr-2 text-3xl text-fog align-bottom;
        }

        a {
          @apply text-xl text-snow;
        }
      }

      .list {
        @apply pl-0;
      }
    }
  }
}

footer {
  @apply flex flex-row m-0 px-2 py-4 bg-black;

  #cc {
    @apply float-left basis-3/4 text-white ml-8 text-sm;

    i {
      @apply text-xl text-mainlyblue align-middle;
    }

    em {
      @apply italic text-xs text-fog pb-0.5;
    }

    a {
      @apply ml-0;
    }

    #metroid {
      @apply hidden;
    }

    #metroid-larva {
      @apply inline-block;
    }
  }

  nav {
    @apply basis-1/4 !bg-transparent;

    ul {
      @apply !float-right !list-none mr-4;

      li {
        @apply !float-left;

        a {
          @apply transition-colors text-white inline-block text-xl !mx-2;

          &:hover,
          &:selected {
            @apply text-blue;
          }
        }
      }
    }
  }
}

@media (min-width: 500px) {
  #main {
    #content {
      article {
        img,
        video,
        iframe,
        code,
        pre {
          min-width: 550px !important;
          max-width: 550px !important;
        }
      }
    }
  }
}

@media (min-width: 600px) {
  #main {
    #content {
      article {
        img,
        video,
        iframe,
        code,
        pre {
          @apply text-sm;
          min-width: 600px !important;
          max-width: 740px !important;
        }
      }
    }
  }
}

@media (min-width: 768px) {
  header {
    nav {
      background: #111 url(../gimg/nav-bg.png) center -20px !important;
      height: 132px;
      @apply !bg-cover;
    }

    #menu {
      @apply !invisible !hidden;
    }

    #linx {
      @apply !float-right !visible !block mr-2;
      border-top: none !important;

      li {
        @apply !float-left !bg-transparent !text-left !p-1;
        height: 130px;

        a {
          @apply !h-full !pt-6 !block;

          i,
          b {
            @apply !mx-1 !clear-both !block;
          }

          i {
            @apply !text-xl;
          }

          b {
            @apply !text-base;
          }

          .nf-fa-user {
            @apply pl-4;
          }

          .nf-fa-book {
            @apply pl-3;
          }

          .nf-fa-code {
            @apply pl-3;
          }

          .nf-fa-camera {
            @apply pl-3;
          }

          .nf-fa-flask {
            @apply pl-2;
          }

          .nf-seti-font {
            @apply pl-4;
          }

          .nf-fa-bolt {
            @apply pl-2;
          }
        }
      }

      li.selected {
        @apply !bg-blue;

        a {
          @apply !text-midnight;
        }
      }
    }

    #logo a {
      background: url(../gimg/xero-graff-alt.png) top center
        no-repeat !important;
      width: 394px !important;
      height: 172px !important;
      margin-left: 30px !important;
    }
  }

  #main {
    @apply !m-6 !px-2 !py-10;

    #content {
      @apply !flex-col !basis-2/3;
      margin: 0 auto;

      article {
        img,
        video,
        iframem code,
        pre {
          min-width: 590px !important;
          max-width: 590px !important;
        }

        h2 {
          @apply !text-2xl;
        }

        h3 {
          @apply !text-xl;
        }

        p {
          @apply !text-base my-5;
        }

        h3.read {
          @apply !text-xl;
        }

        footer.meta {
          background-position: 19px 9px;

          .info {
            @apply text-xs;
          }

          .info .nf {
            @apply text-sm;
          }
        }
      }

      .pagination {
        @apply mb-0;

        a {
          @apply !text-base;
        }
      }
    }

    aside {
      margin: 0 auto;
      max-width: 400px;
      @apply !flex-col !basis-1/3 !px-6 !my-0;
      @apply !float-right;
    }
  }

  footer {
    #cc,
    nav {
      @apply basis-1/2;
    }

    #cc {
      @apply !text-base;

      #metroid {
        @apply !inline-block;
      }

      #metroid-larva {
        @apply !hidden;
      }
    }

    nav {
      a,
      #git,
      #rss {
        @apply !text-2xl !mx-4;
      }
    }
  }
}

@media (min-width: 1024px) {
  header {
    #linx {
      margin-right: 3%;

      li {
        a {
          i {
            @apply !text-3xl;
          }

          b {
            @apply !text-xl;
          }

          .nf-fa-user {
            @apply pl-5;
          }

          .nf-fa-book {
            @apply pl-3;
          }

          .nf-fa-code {
            @apply pl-4;
          }

          .nf-fa-camera {
            @apply pl-3;
          }

          .nf-fa-flask {
            @apply pl-2;
          }

          .nf-seti-font {
            @apply pl-5;
          }

          .nf-fa-bolt {
            @apply pl-2;
          }
        }
      }
    }

    #logo a {
      background: url(../gimg/xero-graff-alt.png) top center
        no-repeat !important;
      width: 394px !important;
      height: 172px !important;
      margin-left: 5% !important;
    }
  }

  #main {
    @apply !m-6 !px-2 !py-10;

    #content {
      @apply !flex-col !basis-2/3;

      article {
        img,
        video,
        iframe,
        code,
        pre {
          @apply text-base;
          width: 100% !important;
          min-width: 100% !important;
          max-width: 100% !important;
        }

        h2 {
          @apply !text-3xl;
        }

        h3 {
          @apply !text-2xl;
        }

        p {
          @apply !text-base my-5;
        }

        h3.read {
          @apply !text-xl;
        }

        footer.meta {
          @apply !text-xs;
          background-position: 24px 9px;

          .date {
            @apply !text-center !pb-2;

            .day,
            .month,
            .year {
              @apply !block !text-xs leading-3;
            }
          }

          .info {
            @apply leading-5 py-2;
          }
        }
      }
    }
  }

  footer {
    #cc,
    nav {
      @apply basis-1/2;
    }

    #cc {
      @apply !text-lg;

      #metroid {
        @apply !inline-block;
      }

      #metroid-larva {
        @apply !hidden;
      }
    }

    nav {
      a,
      #git,
      #rss {
        @apply !text-2xl;
      }
    }
  }
}

/* section layout overrides */

#blog {
  header {
    nav {
      background-image: url(../gimg/nav-bg-lil.png) !important;
      overflow: auto;

      #logo a {
        background-image: url(../gimg/xero-graff-alt-lil.png) !important;
      }

      #linx {
        li.selected {
          @apply bg-blue;
        }
      }
    }
  }
}

#code {
  background: #bcbcbc;

  #main,
  #content {
    background: #bcbcbc;
  }

  header {
    nav {
      background-image: url(../gimg/nav-bg-lil4.png) !important;
      overflow: auto;
      border-bottom: 2px solid #fff;

      #logo a {
        background-image: url(../gimg/xero-graff-alt-lil4.png) !important;
      }

      #linx {
        li.selected {
          @apply bg-skyblue;
        }
      }
    }
  }
}

#lab {
  @apply bg-midnight;

  h1,
  h2,
  h3,
  h4,
  h5 {
    @apply text-red mt-6;

    i {
      @apply text-lavender ml-2.5 align-bottom;
    }

    i:hover {
      @apply text-purp;
    }
  }

  #main,
  #content {
    @apply bg-midnight;
  }

  #glitch {
    img {
      display: inline-block;
    }

    #burger {
      width: 229px !important;
      max-width: 229px !important;
      min-width: 229px !important;
      height: 320px !important;
      max-height: 320px !important;
      min-height: 320px !important;
    }

    #codez {
      width: 440px !important;
      max-width: 440px !important;
      min-width: 440px !important;
      height: 320px !important;
      max-height: 320px !important;
      min-height: 320px !important;
      float: left !important;
    }
  }

  header {
    nav {
      background-image: url(../gimg/nav-bg-lil3.png) !important;
      overflow: auto;

      #logo a {
        background-image: url(../gimg/xero-graff-alt-lil3.png) !important;
      }

      #linx {
        li.selected {
          @apply !bg-red;
        }
      }
    }
  }

  footer #cc i {
    @apply text-lime;
  }
}

#whois {
  header {
    nav {
      background-image: url(../gimg/nav-bg-lil6.png) !important;
      overflow: auto;

      #logo a {
        background-image: url(../gimg/xero-graff-alt-lil6.png) !important;
      }

      #linx {
        li {
          &.selected {
            @apply !bg-lime;

            i,
            b {
              @apply drop-shadow-none;
            }
          }

          i,
          b {
            @apply drop-shadow-sm;
            filter: drop-shadow(1px 2px 0px #111);
          }
        }
      }
    }
  }

  main {
    aside {
      @apply float-right overflow-hidden clear-none;
      margin: 0px 0px 5px 10px;
      width: 150px !important;
      height: 229px !important;
      background: url(https://whois.x-e.ro/ui/img/whois/x0-sm.png);
      background-size: contain;
      background-repeat: no-repeat;
    }

    #age {
      @apply !not-italic;
    }

    h1,
    h2,
    h3,
    h6 {
      @apply !text-lime;
    }

    h5 {
      @apply !text-crimson my-5;
    }

    a {
      @apply !text-green;
    }

    a:hover {
      @apply !text-lime;
    }

    a.strikeout {
      text-decoration: line-through;
      color: #bcbcbc;
    }

    a.strikeout:hover {
      color: #d0d0d0;
    }

    a.vim {
      @apply !text-crimson;
    }

    a.vim:hover {
      color: #ff6a6a;
    }

    ul {
      list-style-type: none;
    }

    kbd {
      background: #121212 !important;

      a {
        color: #42692c !important;
      }
    }

    .nf {
      @apply mr-3;
      color: #fff;
    }

    #contact {
      .nf-md-at {
        @apply text-white ml-0.5 mr-1;
      }

      em {
        @apply not-italic;
        color: #fff;
      }

      .key {
        font-size: 75%;
      }
    }

    #social {
      ul {
        @apply !float-right !list-none m-0 p-0 mb-4;

        li {
          @apply !float-left m-0 p-0;

          a {
            @apply inline-block mr-2 mb-2 p-0;
            background-repeat: no-repeat;
            background-position: center center;
            height: 64px !important;
            width: 64px !important;
            min-height: 64px !important;
            min-width: 64px !important;
            max-height: 64px !important;
            max-width: 64px !important;
          }

          #github {
            background-image: url(https://whois.x-e.ro/ui/img/whois/github.png);
          }

          #youtube {
            background-image: url(https://whois.x-e.ro/ui/img/whois/youtube.png);
          }

          #instagram {
            background-image: url(https://whois.x-e.ro/ui/img/whois/insta.png);
          }

          #twitter {
            background-image: url(https://whois.x-e.ro/ui/img/whois/twitter.png);
          }

          #discord {
            background-image: url(https://whois.x-e.ro/ui/img/whois/discord.png);
          }

          #telegram {
            background-image: url(https://whois.x-e.ro/ui/img/whois/telegram.png);
          }

          #facebook {
            background-image: url(https://whois.x-e.ro/ui/img/whois/facebook.png);
          }

          #tumblr {
            background-image: url(https://whois.x-e.ro/ui/img/whois/tumblr.png);
          }

          #stackoverflow {
            background-image: url(https://whois.x-e.ro/ui/img/whois/stackoverflow.png);
          }

          #reddit {
            background-image: url(https://whois.x-e.ro/ui/img/whois/reddit.png);
          }

          #mastodon {
            background-image: url(https://whois.x-e.ro/ui/img/whois/mastodon.png);
          }

          #bluesky {
            background-image: url(https://whois.x-e.ro/ui/img/whois/bsky.png);
          }

          #gitlab {
            background-image: url(https://whois.x-e.ro/ui/img/whois/gitlab.png);
          }

          #sourcehut {
            background-image: url(https://whois.x-e.ro/ui/img/whois/srht.png);
          }

          #bandcamp {
            background-image: url(https://whois.x-e.ro/ui/img/whois/bandcamp.png);
          }
        }
      }
    }

    #rawk {
      ul {
        @apply !float-left !list-none m-0 p-0 my-4;

        li {
          @apply !float-left m-0 mr-1.5 mb-1.5 p-0;

          a {
            @apply inline-block m-0 px-2 py-1;
            background: #121212;
            color: #42692c !important;
          }
        }
      }
    }
  }

  footer #cc i {
    @apply text-green;
  }
}

#feeds {
  @apply bg-midnight;

  #main,
  #content {
    @apply bg-midnight;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    color: #813db6;
  }

  header {
    nav {
      background-image: url(../gimg/nav-bg-lil2.png) !important;
      overflow: auto;

      #logo a {
        background-image: url(../gimg/xero-graff-alt-lil2.png) !important;
      }

      #linx {
        li.selected {
          background-color: #813db6 !important;
        }
      }
    }
  }
}

#error {
  header {
    nav {
      background-image: url(../gimg/nav-bg-lil5.png) !important;
      overflow: auto;

      #logo a {
        background-image: url(../gimg/xero-graff-alt-lil5.png) !important;
      }

      #linx {
        li.selected {
          @apply bg-crimson;
        }
      }
    }
  }
}

@media (min-width: 600px) {
  #lab {
    #burger {
      width: 186px !important;
      max-width: 186px !important;
      min-width: 186px !important;
      height: 255px !important;
      max-height: 255px !important;
      min-height: 255px !important;
    }

    #codez {
      width: 480px !important;
      max-width: 480px !important;
      min-width: 480px !important;
      height: 255px !important;
      max-height: 255px !important;
      min-height: 255px !important;
    }
  }
}

@media (min-width: 768px) {
  #blog {
    header {
      nav {
        background-image: url(../gimg/nav-bg.png) !important;

        #logo a {
          background-image: url(../gimg/xero-graff-alt.png) !important;
        }
      }
    }
  }

  #code {
    header {
      nav {
        background-image: url(../gimg/nav-bg4.png) !important;

        #logo a {
          background-image: url(../gimg/xero-graff-alt4.png) !important;
        }
      }
    }
  }

  #lab {
    #burger {
      width: 190px !important;
      max-width: 190px !important;
      min-width: 190px !important;
      height: 266px !important;
      max-height: 266px !important;
      min-height: 266px !important;
    }

    #codez {
      width: 366px !important;
      min-width: 366px !important;
      max-width: 366px !important;
      height: 266px !important;
      min-height: 266px !important;
      max-height: 266px !important;
    }

    header {
      nav {
        background-image: url(../gimg/nav-bg3.png) !important;

        #logo a {
          background-image: url(../gimg/xero-graff-alt3.png) !important;
        }
      }
    }
  }

  #whois {
    header {
      nav {
        background-image: url(../gimg/nav-bg6.png) !important;

        #logo a {
          background-image: url(../gimg/xero-graff-alt6.png) !important;
        }
      }
    }
  }

  #feeds {
    header {
      nav {
        background-image: url(../gimg/nav-bg2.png) !important;

        #logo a {
          background-image: url(../gimg/xero-graff-alt2.png) !important;
        }
      }
    }
  }

  #error {
    header {
      nav {
        background-image: url(../gimg/nav-bg5.png) !important;

        #logo a {
          background-image: url(../gimg/xero-graff-alt5.png) !important;
        }
      }
    }
  }
}

@media (min-width: 1024px) {
  #lab {
    #burger {
      width: 229px !important;
      max-width: 229px !important;
      min-width: 229px !important;
      height: 320px !important;
      max-height: 320px !important;
      min-height: 320px !important;
    }

    #codez {
      width: 440px !important;
      max-width: 440px !important;
      min-width: 440px !important;
      height: 320px !important;
      max-height: 320px !important;
      min-height: 320px !important;
      float: left !important;
    }
  }

  #whois {
    aside {
      min-width: 300px !important;
      min-height: 460px !important;
    }
  }
}

#splash {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #222 url(../gimg/xero-graff-splash.png) no-repeat;
  background-position: center center;

  .centerLogo {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;

		img {
			margin: 0 auto;
		}

    ul {
      list-style-type: none;
      min-width: 400px;
      text-align: center;

      li {
        display: inline-block;
        margin: 0 auto;

        a {
          padding: 5px;
          background: #222;
          color: #c6c6c6;
          transition: background-color 300ms ease-out;

          &:hover {
            background: #272822;
            color: #d0d0d0;
          }
        }
      }
    }
  }
}

@media only screen and (max-width: 40em) {
  #splash {
    img {
      width: 85%;
      height: 85%;
    }

    ul {
      min-width: 300px;

      li {
        font-size: 65%;

        a {
          padding: 2px;
        }
      }
    }
  }
}

/* limited nerd font icons */

.nf,
.nerd-font,
.nerd-fonts {
  padding: 0;
  border: 0;
  vertical-align: text-bottom;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  font-size: 1.25em;
  transform: scale(1.25);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.nf-cod-mail:before {
  content: "\eb1c";
}

.nf-fa-bolt:before {
  content: "\f0e7";
}

.nf-fa-book:before {
  content: "\f02d";
}

.nf-fa-camera:before {
  content: "\f030";
}

.nf-fa-code:before {
  content: "\f121";
}

.nf-fa-flask:before {
  content: "\f0c3";
}

.nf-fa-git:before {
  content: "\f1d3";
}

.nf-fa-key:before {
  content: "\f084";
}

.nf-fa-rss:before {
  content: "\f09e";
}

.nf-fa-user:before {
  content: "\f007";
}

.nf-fa-warning:before {
  content: "\f071";
}

.nf-fae-cc_cc:before {
  content: "\e291";
}

.nf-md-at:before {
  content: "\f0065";
}

.nf-md-coffin:before {
  content: "\f0b7f";
}

.nf-md-content_save_edit_outline:before {
  content: "\f0cfc";
}

.nf-md-data_matrix_scan:before {
  content: "\f1541";
}

.nf-md-delete_forever_outline:before {
  content: "\f0b89";
}

.nf-md-flask_plus:before {
  content: "\f1242";
}

.nf-md-folder_multiple:before {
  content: "\f0253";
}

.nf-md-git:before {
  content: "\f02a2";
}

.nf-md-menu_open:before {
  content: "\f0bab";
}

.nf-md-radioactive:before {
  content: "\f043c";
}

.nf-md-rss:before {
  content: "\f046b";
}

.nf-md-tag_multiple:before {
  content: "\f04fb";
}

.nf-md-tag_text:before {
  content: "\f1224";
}

.nf-seti-font:before {
  content: "\e659";
}

.nf-seti-git:before {
  content: "\e65d";
}