Common.css

Note: After saving, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.

/* CSS placed here will be applied to all skins */
@import "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css";
/* --------------------------------

Variables & Mixins

-------------------------------- */
@font-face {
  font-family: Bookinsanity;
  src: url(../assets/fonts/Bookinsanity.otf); }
@font-face {
  font-family: BookinsanityBold;
  src: url(../assets/fonts/BookinsanityBold.otf); }
@font-face {
  font-family: BookinsanityItalic;
  src: url(../assets/fonts/BookinsanityItalic.otf); }
@font-face {
  font-family: BookinsanityBoldItalic;
  src: url(../assets/fonts/BookinsanityBoldItalic.otf); }
@font-face {
  font-family: MrEavesSmallCaps;
  src: url(../assets/fonts/MrEavesSmallCaps.otf); }
@font-face {
  font-family: ScalySans;
  src: url(../assets/fonts/ScalySans.otf); }
@font-face {
  font-family: ScalySansBold;
  src: url(../assets/fonts/ScalySansBold.otf); }
@font-face {
  font-family: ScalySansItalic;
  src: url(../assets/fonts/ScalySansItalic.otf); }
@font-face {
  font-family: ScalySansBoldItalic;
  src: url(../assets/fonts/ScalySansBoldItalic.otf); }
@font-face {
  font-family: Nodesto;
  src: url(../assets/fonts/NodestoCapsCondensed.otf); }
@font-face {
  font-family: ZatannaMisdirection;
  src: url(../assets/fonts/ZatannaMisdirection.otf); }
@font-face {
  font-family: ZatannaMisdirectionItalic;
  src: url(../assets/fonts/ZatannaMisdirectionItalic.otf); }
/* --------------------------------

Responsive Grid & Media Queries

-------------------------------- */
@supports (display: grid) {
  body {
    display: grid;
    grid-template-columns: [main-left] [main-right]; }
    @media (min-width: 450px) {
      body {
        grid-template-columns: 1fr [main-left] 350px [main-right] 1fr; } }
    @media (min-width: 992px) {
      body {
        gap: 2rem;
        grid-gap: 2rem;
        grid-template-columns: 1fr [main-left] 400px [middle] 400px [main-right] 1fr; } }
    body > .page-wrapper,
    body > .page-wrapper > section.intro,
    body > .page-wrapper > div {
      display: contents; }
    body section.intro header {
      grid-column: 1 / span end; }
      body section.intro header > h1 {
        text-align: center; }
        body section.intro header > h1::before {
          content: "";
          display: block;
          min-height: 150px;
          background-image: url("../assets/branding/logo-ver-1.png");
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          margin: auto;
          min-width: 250px;
          width: 50%; }
        body section.intro header > h1::after {
          content: "";
          display: block;
          min-height: 50px;
          background-color: #ef3f3f;
          clip-path: polygon(50% 25%, 100% 50%, 50% 75%, 0% 50%);
          -webkit-clip-path: polygon(50% 25%, 100% 50%, 50% 75%, 0% 50%);
          margin: auto;
          width: 35%; }
      body section.intro header > h2 {
        text-align: center;
        margin: 2rem 0 0 0; }
        body section.intro header > h2::before {
          content: "";
          display: block;
          min-height: 300px;
          background-image: url("../assets/zen-garden-map-sm.jpg");
          background-repeat: no-repeat;
          background-position: top;
          background-size: contain;
          margin: 2rem auto -8rem auto;
          width: 95%; }
          @media (min-width: 450px) {
            body section.intro header > h2::before {
              background-image: url("../assets/zen-garden-map-md.jpg");
              margin-bottom: 2rem; } }
          @media (min-width: 992px) {
            body section.intro header > h2::before {
              background-image: url("../assets/zen-garden-map-lg.jpg");
              margin-bottom: 4rem; } }
    @media (min-width: 450px) {
      body section.intro > div {
        grid-column-start: main-left; } }
    body footer {
      grid-row-start: 9;
      text-align: center;
      font-family: "ZatannaMisdirection", sans-serif;
      font-size: 16px;
      margin-top: 3rem; }
      body footer a {
        padding: .5rem .7rem;
        margin: -.25rem;
        border-top: 2px solid #d3b63b;
        border-bottom: 2px solid #d3b63b; }
      body footer::after {
        content: "DISCLAIMER: This page is a fan-made work, and is not affiliated with Wizards of the Coast. We acknowledge Wizards of the Coast and its products as the inspiration for the design of this page. Dungeons & Dragons, D&D, Wizards of the Coast, the dragon ampersand, all Wizards of the Coast product names, and their respective logos are trademarks of Wizards of the Coast in the USA and other countries.";
        display: block;
        min-height: 50px;
        margin: 3rem 0 -2rem 0; }
    body aside {
      margin-top: 2.5rem; }
      body aside:before, body aside:after {
        content: "";
        display: block;
        background-color: black;
        height: 10px; }
      body aside:before {
        clip-path: polygon(0px 10px, 100% 10px, calc(100% - 20px) 0px, calc(100% - 20px) 8px, 20px 8px, 20px 0px);
        -webkit-clip-path: polygon(0px 10px, 100% 10px, calc(100% - 20px) 0px, calc(100% - 20px) 8px, 20px 8px, 20px 0px); }
      body aside:after {
        clip-path: polygon(20px 10px, 20px 2px, calc(100% - 20px) 2px, calc(100% - 20px) 10px, 100% 0px, 0px 0px);
        -webkit-clip-path: polygon(20px 10px, 20px 2px, calc(100% - 20px) 2px, calc(100% - 20px) 10px, 100% 0px, 0px 0px); }
      body aside > div {
        display: grid;
        background-color: #dcdee0;
        grid-template-columns: [left] 1fr [middle] 1fr [right];
        padding: 2rem; }
        body aside > div h3 {
          color: black;
          border-bottom: none;
          font-family: "ScalySansBold", sans-serif;
          font-size: 20px;
          font-variant: small-caps;
          margin: 0.5rem 0; }
        body aside > div ul {
          list-style: none;
          margin: 0;
          padding: 0; }
          body aside > div ul > li {
            padding: 0.1rem 0; }
            body aside > div ul > li > a {
              color: #a1452e;
              font-family: "ScalySans", sans-serif;
              font-size: 14px;
              text-decoration: none; }
        body aside > div .design-selection {
          grid-column: left / span right; }
          body aside > div .design-selection ul > li {
            display: grid;
            grid-template-columns: [left] 1fr [middle-left] 0px [middle-right] 1fr [right];
            visibility: collapse; }
            body aside > div .design-selection ul > li:nth-of-type(2n+1) a {
              background-color: #bdd4d1; }
            body aside > div .design-selection ul > li a {
              padding: 0.3rem 1rem;
              visibility: visible; }
              body aside > div .design-selection ul > li afirst-child {
                grid-column: left / span middle-left; }
              body aside > div .design-selection ul > li alast-child {
                grid-column: middle-right / span right; }
        body aside > div .design-archives {
          grid-column: left / span middle; }
        body aside > div .zen-resources {
          grid-column: middle / span right; }
    @media (min-width: 450px) {
      body section.intro > div,
      body div.main > div,
      body aside.sidebar,
      body footer {
        grid-column-start: main-left; } }
    @media (min-width: 992px) {
      body div.summary,
      body footer {
        grid-column: main-left / span main-right; }
      body div.main > div.explanation,
      body div.main > div.benefits,
      body aside.sidebar {
        grid-column-start: middle; }
      body div.benefits::after {
        content: "";
        display: block;
        min-height: 150px;
        background-image: url("../assets/zen-garden-illustration.png");
        background-repeat: no-repeat;
        background-position: top;
        background-size: contain;
        height: 100%; }
      body footer {
        grid-row-start: 6; } } }
/* --------------------------------

xNavigation

-------------------------------- */
/* --------------------------------

xTypography

-------------------------------- */
h2, h3 {
  font-family: "MrEavesSmallCaps", serif;
  color: #8b281c; }

h1 {
  font-family: "Nodesto", serif;
  color: white;
  letter-spacing: .025em;
  text-shadow: -3px -3px 0px black, 3px 3px 0px black, -3px 3px 0px black, 3px -3px 0px black, -3px -2px 0px black, 3px 2px 0px black, -3px 2px 0px black, 3px -2px 0px black, -3px -1px 0px black, 3px 1px 0px black, -3px 1px 0px black, 3px -1px 0px black, -3px 0px 0px black, 3px 0px 0px black, -2px -3px 0px black, 2px 3px 0px black, -2px 3px 0px black, 2px -3px 0px black, -1px -3px 0px black, 1px 3px 0px black, -1px 3px 0px black, 1px -3px 0px black, 0px -3px 0px black, 0px 3px 0px black;
  text-transform: uppercase;
  font-size: 66px;
  line-height: 1.2;
  margin: 0 0 .4em; }
  @media (min-width: 992px) {
    h1 {
      font-size: 96px; } }

h2 {
  margin: 1em 0;
  font-size: 36px; }

h3 {
  margin: 1em 0;
  font-size: 24px;
  border-bottom: 2px solid #d3b63b;
  padding-bottom: .1rem; }
  h3.nav {
    font-family: "ScalySansBold", sans-serif;
    font-size: 1.7rem;
    color: black;
    border-bottom: 0;
    font-variant: small-caps; }
    h3.nav::before {
      content: none !important; }
  h3 + p {
    font-family: "ScalySans", sans-serif;
    font-size: 14px;
    line-height: 1.8;
    padding: 10px;
    background-color: #dcdee0;
    border-left: 2px solid #8b281c;
    border-right: 2px solid #8b281c;
    position: relative; }
    h3 + p::before, h3 + p::after {
      content: "";
      display: block;
      position: absolute;
      width: calc(100% - 4px);
      height: 12px;
      margin-right: 10px;
      border-left: 6px dotted #8b281c;
      border-right: 6px dotted #8b281c; }
    h3 + p::before {
      border-image: url(../assets/box-text-corner-top.svg) 4/6px/0px;
      top: -3px;
      left: -4px; }
    h3 + p::after {
      border-image: url(../assets/box-text-corner-bottom.svg) 4/6px/0px;
      bottom: -3px;
      left: -4px; }

/* Numbers before h3's */
.preamble > h3::before {
  content: '1. '; }

.explanation > h3::before {
  content: '2. '; }

.participation > h3::before {
  content: '3. '; }

.benefits > h3::before {
  content: '4. '; }

.requirements > h3::before {
  content: '5. '; }

p {
  font-size: 16px;
  line-height: 1.6;
  color: black;
  font-family: "Bookinsanity", serif; }
  p.footer {
    font-family: "ZatannaMisdirection", sans-serif; }

a {
  transition: .25s; }
  a:link {
    color: #a1452e;
    text-decoration: none; }
  a:visited {
    color: #522317; }
  a:hover {
    text-decoration: underline; }
  a:active {
    color: #d27963; }

body {
  background: url(../assets/bg-top.png) no-repeat top, url(../assets/bg-bottom.png) no-repeat bottom, url(../assets/bg-middle.jpg) repeat-y center;
  background-color: black;
  background-size: 300%;
  padding: 7rem 1rem; }
  @media (min-width: 450px) {
    body {
      background-size: 100%; } }
  @media (min-width: 992px) {
    body {
      background-size: 1040px; } }

/*# sourceMappingURL=style.css.map */