Wanderers' Library Front Page Box

Link to article: Wanderers' Library Front Page Box.

Module Styles

• /* WANDERERS" LIBRARY CSS */
  @import url("https://wanderers-library.wikidot.com/component:dustjacket-theme-typefaces/code/1");
  @import url("https://use.typekit.net/tqr1skr.css");
  
  .library-container {
      --library-gold: 255, 219, 90;
      --library-dkgreen: 45, 70, 45;
      position: relative;
      overflow: hidden;
      -webkit-border-radius: 2rem;
         -moz-border-radius: 2rem;
              border-radius: 2rem;
  }
  
  .library-container::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
      pointer-events: none;
      -webkit-border-radius: 3rem;
         -moz-border-radius: 3rem;
              border-radius: 3rem;
      background-image: -webkit-linear-gradient(285deg,
      		rgba(var(--library-gold), 1),
      		rgba(var(--library-gold), 0.3) 40%,
      		transparent 40%,
      		transparent 50%,
      		rgba(var(--library-gold), 0.8) 52%,
      		rgba(var(--library-gold), 0.4) 70%,
      		transparent 70%);
      background-image: -moz-linear-gradient(285deg,
      		rgba(var(--library-gold), 1),
      		rgba(var(--library-gold), 0.3) 40%,
      		transparent 40%,
      		transparent 50%,
      		rgba(var(--library-gold), 0.8) 52%,
      		rgba(var(--library-gold), 0.4) 70%,
      		transparent 70%);
      background-image: -o-linear-gradient(285deg,
      		rgba(var(--library-gold), 1),
      		rgba(var(--library-gold), 0.3) 40%,
      		transparent 40%,
      		transparent 50%,
      		rgba(var(--library-gold), 0.8) 52%,
      		rgba(var(--library-gold), 0.4) 70%,
      		transparent 70%);
      background-image: linear-gradient(165deg,
      		rgba(var(--library-gold), 1),
      		rgba(var(--library-gold), 0.3) 40%,
      		transparent 40%,
      		transparent 50%,
      		rgba(var(--library-gold), 0.8) 52%,
      		rgba(var(--library-gold), 0.4) 70%,
      		transparent 70%);
      opacity: 0;
      background-position: -10rem -5rem;
      background-repeat: no-repeat;
      -webkit-filter: blur(0.25rem);
              filter: blur(0.25rem);
      -webkit-transition:
      	opacity 600ms cubic-bezier(.45, .05, .55, .95),
      	background-position 600ms cubic-bezier(.79, .14, .15, .86) 300ms;
      -o-transition:
      	opacity 600ms cubic-bezier(.45, .05, .55, .95),
      	background-position 600ms cubic-bezier(.79, .14, .15, .86) 300ms;
      -moz-transition:
      	opacity 600ms cubic-bezier(.45, .05, .55, .95),
      	background-position 600ms cubic-bezier(.79, .14, .15, .86) 300ms;
      transition:
      	opacity 600ms cubic-bezier(.45, .05, .55, .95),
      	background-position 600ms cubic-bezier(.79, .14, .15, .86) 300ms;
  }
  
  .library-container:hover::before {
      opacity: 0.15;
      background-position: 0 0;
      -webkit-transition:
      	opacity 300ms cubic-bezier(.45, .05, .55, .95) 300ms,
      	background-position 600ms cubic-bezier(.79, .14, .15, .86);
      -o-transition:
      	opacity 300ms cubic-bezier(.45, .05, .55, .95) 300ms,
      	background-position 600ms cubic-bezier(.79, .14, .15, .86);
      -moz-transition:
      	opacity 300ms cubic-bezier(.45, .05, .55, .95) 300ms,
      	background-position 600ms cubic-bezier(.79, .14, .15, .86);
      transition:
      	opacity 300ms cubic-bezier(.45, .05, .55, .95) 300ms,
      	background-position 600ms cubic-bezier(.79, .14, .15, .86);
  }
  
  .library {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: 1fr 0.5rem 2fr;
      grid-template-columns: 1fr 2fr;
      -ms-grid-rows: auto 0.5rem auto;
          grid-template-areas:
      	"wl-image wl-header"
      	"wl-image wl-text";
      grid-gap: 0.5rem;
      gap: 0.5rem;
      position: relative;
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
      border: 1.25rem solid rgba(0, 0, 0, 0.5);
      -webkit-border-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/wl_border.png") 600 round;
         -moz-border-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/wl_border.png") 600 round;
           -o-border-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/wl_border.png") 600 round;
              border-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/wl_border.png") 600 round;
      border-image-width: 6;
      background: url("https://wanderers-library.wdfiles.com/local--files/component%3Atheme/wlheader_bg.png");
      -webkit-border-radius: 2rem;
         -moz-border-radius: 2rem;
              border-radius: 2rem;
      padding: 0.5rem;
      color: rgb(var(--library-gold));
      text-align: center;
      font-family: adelle-sans, sans-serif;
      font-size: 1.15em;
      overflow: hidden;
  }
  
  .library.contest {
      -ms-grid-columns: 2fr 0.5rem 1.5fr;
      grid-template-columns: 2fr 1.5fr;
      -ms-grid-rows: auto 0.5rem auto;
          grid-template-areas:
      	"wl-header wl-image"
      	"wl-text wl-image";
  }
  
  .library>a:first-of-type {
      color: transparent;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
      z-index: 1;
  }
  
  .library>div.wl-headers,
  .library>div.wl-text,
  .library>div.wl-image {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
         -moz-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
         -moz-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
  }
  
  .library>div.wl-headers {
      -ms-grid-row: 1;
      -ms-grid-column: 3;
      grid-area: wl-header;
  }
  
  .library.contest > .library>div.wl-headers {
      -ms-grid-row: 1;
      -ms-grid-column: 1;
  }
  
  .library>div.wl-headers>div {
      width: 100%;
      padding: 0;
      margin: 0;
  }
  
  .library>div.wl-text {
      -ms-grid-row: 3;
      -ms-grid-column: 3;
      grid-area: wl-text;
      padding: 0 0.5em;
      -webkit-text-decoration: underline double;
         -moz-text-decoration: underline double;
              text-decoration: underline double;
      text-decoration-thickness: 0rem;
      -webkit-text-decoration-color: rgba(228, 180, 28, 0);
         -moz-text-decoration-color: rgba(228, 180, 28, 0);
              text-decoration-color: rgba(228, 180, 28, 0);
      -webkit-transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	-webkit-text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1);
      transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	-webkit-text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1);
      -o-transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1);
      -moz-transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1),
      	-moz-text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1);
      transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1);
      transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1),
      	-webkit-text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1),
      	-moz-text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .library.contest > .library>div.wl-text {
      -ms-grid-row: 3;
      -ms-grid-column: 1;
  }
  
  .library:hover>div.wl-text,
  .library:active>div.wl-text {
      -webkit-text-decoration: underline double rgba(228, 180, 28);
         -moz-text-decoration: underline double rgba(228, 180, 28);
              text-decoration: underline double rgba(228, 180, 28);
      text-decoration-thickness: 0.0625rem;
      -webkit-transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	-webkit-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
      transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	-webkit-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
      -o-transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
      -moz-transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1),
      	-moz-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
      transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
      transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1),
      	-webkit-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1),
      	-moz-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .library:focus-within>div.wl-text {
      -webkit-text-decoration: underline double rgba(228, 180, 28);
         -moz-text-decoration: underline double rgba(228, 180, 28);
              text-decoration: underline double rgba(228, 180, 28);
      text-decoration-thickness: 0.0625rem;
      -webkit-transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	-webkit-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
      transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	-webkit-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
      -o-transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
      -moz-transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1),
      	-moz-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
      transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
      transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1),
      	-webkit-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1),
      	-moz-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .library>div.wl-image {
      -ms-grid-row: 1;
      -ms-grid-row-span: 3;
      -ms-grid-column: 1;
      grid-area: wl-image;
      background-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Atheme/wlheader_bg.png");
      -webkit-border-radius: 50%;
         -moz-border-radius: 50%;
              border-radius: 50%;
      margin: 0 0 1vw 1vw;
      height: -webkit-min-content;
      height: -moz-min-content;
      height: min-content;
      overflow: hidden;
      -ms-grid-row-align: center;
          align-self: center
  }
  
  .library.contest > .library>div.wl-image {
      -ms-grid-row: 1;
      -ms-grid-row-span: 3;
      -ms-grid-column: 3
  }
  
  .library.contest>div.wl-image {
      background-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Atheme/goldfoil.png");
      -webkit-background-size: cover;
         -moz-background-size: cover;
           -o-background-size: cover;
              background-size: cover;
      -webkit-border-radius: 0.75rem;
         -moz-border-radius: 0.75rem;
              border-radius: 0.75rem;
      margin: 0;
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
  }
  
  
  .library>div.wl-image img {
      -webkit-border-radius: 0.5rem;
         -moz-border-radius: 0.5rem;
              border-radius: 0.5rem;
      width: 100%;
      margin: 0.25rem;
      -o-object-fit: contain;
         object-fit: contain;
      max-width: 15.625rem;
  }
  
  .library.contest>div.wl-image img {
      max-height: 12.25rem;
  }
  
  .library .fake-h2,
  .library .fake-h4 {
      font-family: "zuijinregular", sans-serif;
      letter-spacing: 0.0625rem;
      display: inline-block;
  }
  
  .library .fake-h4 {
      margin-bottom: 0.7em;
      margin-top: -0.5em;
      font-size: 1.3em;
  }
  
  .library .fake-h2 {
      font-family: "zuijinregular", sans-serif;
      margin-bottom: 0.4em;
      font-size: 1.5em;
  }
  
  @media (max-width: 48rem) {
      .library {
      	    grid-template-areas:
      		"wl-header wl-header"
      		"wl-image wl-text";
      }
  
      .library.contest {
      	    grid-template-areas:
      		"wl-header wl-header"
      		"wl-text wl-image";
      }
      .library>div.wl-headers {
      	-ms-grid-row: 1;
      	-ms-grid-column: 1;
      	-ms-grid-column-span: 3;
      }
  
      .library.contest > .library>div.wl-headers {
      	-ms-grid-row: 1;
      	-ms-grid-column: 1;
      	-ms-grid-column-span: 3;
      }
      .library>div.wl-text {
      	-ms-grid-row: 3;
      	-ms-grid-column: 3;
      }
  
      .library.contest > .library>div.wl-text {
      	-ms-grid-row: 3;
      	-ms-grid-column: 1;
      }
      .library>div.wl-image {
      	-ms-grid-row: 3;
      	-ms-grid-row-span: 1;
      	-ms-grid-column: 1;
      }
  
      .library.contest > .library>div.wl-image {
      	-ms-grid-row: 3;
      	-ms-grid-row-span: 1;
      	-ms-grid-column: 3;
      }
  }
  
  @media (max-width: 25.875rem) {
  
      .library,
      .library.contest {
      	    grid-template-areas:
      		"wl-header wl-header"
      		"wl-image wl-image"
      		"wl-text wl-text";
      }
  
      .library>div.wl-image {
      	-ms-grid-column-align: center;
      	    justify-self: center;
      	height: auto;
      }
  
      .library>div.wl-image img {
      	max-height: 20vh;
      }
  
      .library>div.wl-headers {
      	-ms-grid-row: 1;
      	-ms-grid-column: 1;
      	-ms-grid-column-span: 3;
      }
  
      .library>div.wl-text {
      	-ms-grid-row: 5;
      	-ms-grid-column: 1;
      	-ms-grid-column-span: 3;
      }
  
      .library>div.wl-image {
      	-ms-grid-row: 3;
      	-ms-grid-row-span: 1;
      	-ms-grid-column: 1;
      	-ms-grid-column-span: 3;
      }
  }
  
  .blockquote.code {
      font-family: 'Andale Mono', 'Courier New', Courier, monospace;
  }

• /* WANDERERS" LIBRARY CSS */
  @import url("https://wanderers-library.wikidot.com/component:dustjacket-theme-typefaces/code/1");
  @import url("https://use.typekit.net/tqr1skr.css");
  
  .library-container {
      --library-gold: 255, 219, 90;
      --library-dkgreen: 45, 70, 45;
      position: relative;
      overflow: hidden;
      -webkit-border-radius: 2rem;
         -moz-border-radius: 2rem;
              border-radius: 2rem;
  }
  
  .library-container::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
      pointer-events: none;
      -webkit-border-radius: 3rem;
         -moz-border-radius: 3rem;
              border-radius: 3rem;
      background-image: -webkit-linear-gradient(285deg,
      		rgba(var(--library-gold), 1),
      		rgba(var(--library-gold), 0.3) 40%,
      		transparent 40%,
      		transparent 50%,
      		rgba(var(--library-gold), 0.8) 52%,
      		rgba(var(--library-gold), 0.4) 70%,
      		transparent 70%);
      background-image: -moz-linear-gradient(285deg,
      		rgba(var(--library-gold), 1),
      		rgba(var(--library-gold), 0.3) 40%,
      		transparent 40%,
      		transparent 50%,
      		rgba(var(--library-gold), 0.8) 52%,
      		rgba(var(--library-gold), 0.4) 70%,
      		transparent 70%);
      background-image: -o-linear-gradient(285deg,
      		rgba(var(--library-gold), 1),
      		rgba(var(--library-gold), 0.3) 40%,
      		transparent 40%,
      		transparent 50%,
      		rgba(var(--library-gold), 0.8) 52%,
      		rgba(var(--library-gold), 0.4) 70%,
      		transparent 70%);
      background-image: linear-gradient(165deg,
      		rgba(var(--library-gold), 1),
      		rgba(var(--library-gold), 0.3) 40%,
      		transparent 40%,
      		transparent 50%,
      		rgba(var(--library-gold), 0.8) 52%,
      		rgba(var(--library-gold), 0.4) 70%,
      		transparent 70%);
      opacity: 0;
      background-position: -10rem -5rem;
      background-repeat: no-repeat;
      -webkit-filter: blur(0.25rem);
              filter: blur(0.25rem);
      -webkit-transition:
      	opacity 600ms cubic-bezier(.45, .05, .55, .95),
      	background-position 600ms cubic-bezier(.79, .14, .15, .86) 300ms;
      -o-transition:
      	opacity 600ms cubic-bezier(.45, .05, .55, .95),
      	background-position 600ms cubic-bezier(.79, .14, .15, .86) 300ms;
      -moz-transition:
      	opacity 600ms cubic-bezier(.45, .05, .55, .95),
      	background-position 600ms cubic-bezier(.79, .14, .15, .86) 300ms;
      transition:
      	opacity 600ms cubic-bezier(.45, .05, .55, .95),
      	background-position 600ms cubic-bezier(.79, .14, .15, .86) 300ms;
  }
  
  .library-container:hover::before {
      opacity: 0.15;
      background-position: 0 0;
      -webkit-transition:
      	opacity 300ms cubic-bezier(.45, .05, .55, .95) 300ms,
      	background-position 600ms cubic-bezier(.79, .14, .15, .86);
      -o-transition:
      	opacity 300ms cubic-bezier(.45, .05, .55, .95) 300ms,
      	background-position 600ms cubic-bezier(.79, .14, .15, .86);
      -moz-transition:
      	opacity 300ms cubic-bezier(.45, .05, .55, .95) 300ms,
      	background-position 600ms cubic-bezier(.79, .14, .15, .86);
      transition:
      	opacity 300ms cubic-bezier(.45, .05, .55, .95) 300ms,
      	background-position 600ms cubic-bezier(.79, .14, .15, .86);
  }
  
  .library {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: 1fr 0.5rem 2fr;
      grid-template-columns: 1fr 2fr;
      -ms-grid-rows: auto 0.5rem auto;
          grid-template-areas:
      	"wl-image wl-header"
      	"wl-image wl-text";
      grid-gap: 0.5rem;
      gap: 0.5rem;
      position: relative;
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
      border: 1.25rem solid rgba(0, 0, 0, 0.5);
      -webkit-border-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/wl_border.png") 600 round;
         -moz-border-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/wl_border.png") 600 round;
           -o-border-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/wl_border.png") 600 round;
              border-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/wl_border.png") 600 round;
      border-image-width: 6;
      background: url("https://wanderers-library.wdfiles.com/local--files/component%3Atheme/wlheader_bg.png");
      -webkit-border-radius: 2rem;
         -moz-border-radius: 2rem;
              border-radius: 2rem;
      padding: 0.5rem;
      color: rgb(var(--library-gold));
      text-align: center;
      font-family: adelle-sans, sans-serif;
      font-size: 1.15em;
      overflow: hidden;
  }
  
  .library.contest {
      -ms-grid-columns: 2fr 0.5rem 1.5fr;
      grid-template-columns: 2fr 1.5fr;
      -ms-grid-rows: auto 0.5rem auto;
          grid-template-areas:
      	"wl-header wl-image"
      	"wl-text wl-image";
  }
  
  .library>a:first-of-type {
      color: transparent;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
      z-index: 1;
  }
  
  .library>div.wl-headers,
  .library>div.wl-text,
  .library>div.wl-image {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
         -moz-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
         -moz-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
  }
  
  .library>div.wl-headers {
      -ms-grid-row: 1;
      -ms-grid-column: 3;
      grid-area: wl-header;
  }
  
  .library.contest > .library>div.wl-headers {
      -ms-grid-row: 1;
      -ms-grid-column: 1;
  }
  
  .library>div.wl-headers>div {
      width: 100%;
      padding: 0;
      margin: 0;
  }
  
  .library>div.wl-text {
      -ms-grid-row: 3;
      -ms-grid-column: 3;
      grid-area: wl-text;
      padding: 0 0.5em;
      -webkit-text-decoration: underline double;
         -moz-text-decoration: underline double;
              text-decoration: underline double;
      text-decoration-thickness: 0rem;
      -webkit-text-decoration-color: rgba(228, 180, 28, 0);
         -moz-text-decoration-color: rgba(228, 180, 28, 0);
              text-decoration-color: rgba(228, 180, 28, 0);
      -webkit-transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	-webkit-text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1);
      transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	-webkit-text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1);
      -o-transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1);
      -moz-transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1),
      	-moz-text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1);
      transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1);
      transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1),
      	-webkit-text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1),
      	-moz-text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .library.contest > .library>div.wl-text {
      -ms-grid-row: 3;
      -ms-grid-column: 1;
  }
  
  .library:hover>div.wl-text,
  .library:active>div.wl-text {
      -webkit-text-decoration: underline double rgba(228, 180, 28);
         -moz-text-decoration: underline double rgba(228, 180, 28);
              text-decoration: underline double rgba(228, 180, 28);
      text-decoration-thickness: 0.0625rem;
      -webkit-transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	-webkit-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
      transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	-webkit-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
      -o-transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
      -moz-transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1),
      	-moz-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
      transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
      transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1),
      	-webkit-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1),
      	-moz-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .library:focus-within>div.wl-text {
      -webkit-text-decoration: underline double rgba(228, 180, 28);
         -moz-text-decoration: underline double rgba(228, 180, 28);
              text-decoration: underline double rgba(228, 180, 28);
      text-decoration-thickness: 0.0625rem;
      -webkit-transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	-webkit-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
      transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	-webkit-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
      -o-transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
      -moz-transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1),
      	-moz-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
      transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
      transition:
      	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
      	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1),
      	-webkit-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1),
      	-moz-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .library>div.wl-image {
      -ms-grid-row: 1;
      -ms-grid-row-span: 3;
      -ms-grid-column: 1;
      grid-area: wl-image;
      background-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Atheme/wlheader_bg.png");
      -webkit-border-radius: 50%;
         -moz-border-radius: 50%;
              border-radius: 50%;
      margin: 0 0 1vw 1vw;
      height: -webkit-min-content;
      height: -moz-min-content;
      height: min-content;
      overflow: hidden;
      -ms-grid-row-align: center;
          align-self: center
  }
  
  .library.contest > .library>div.wl-image {
      -ms-grid-row: 1;
      -ms-grid-row-span: 3;
      -ms-grid-column: 3
  }
  
  .library.contest>div.wl-image {
      background-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Atheme/goldfoil.png");
      -webkit-background-size: cover;
         -moz-background-size: cover;
           -o-background-size: cover;
              background-size: cover;
      -webkit-border-radius: 0.75rem;
         -moz-border-radius: 0.75rem;
              border-radius: 0.75rem;
      margin: 0;
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
  }
  
  
  .library>div.wl-image img {
      -webkit-border-radius: 0.5rem;
         -moz-border-radius: 0.5rem;
              border-radius: 0.5rem;
      width: 100%;
      margin: 0.25rem;
      -o-object-fit: contain;
         object-fit: contain;
      max-width: 15.625rem;
  }
  
  .library.contest>div.wl-image img {
      max-height: 12.25rem;
  }
  
  .library .fake-h2,
  .library .fake-h4 {
      font-family: "zuijinregular", sans-serif;
      letter-spacing: 0.0625rem;
      display: inline-block;
  }
  
  .library .fake-h4 {
      margin-bottom: 0.7em;
      margin-top: -0.5em;
      font-size: 1.3em;
  }
  
  .library .fake-h2 {
      font-family: "zuijinregular", sans-serif;
      margin-bottom: 0.4em;
      font-size: 1.5em;
  }
  
  @media (max-width: 48rem) {
      .library {
      	    grid-template-areas:
      		"wl-header wl-header"
      		"wl-image wl-text";
      }
  
      .library.contest {
      	    grid-template-areas:
      		"wl-header wl-header"
      		"wl-text wl-image";
      }
      .library>div.wl-headers {
      	-ms-grid-row: 1;
      	-ms-grid-column: 1;
      	-ms-grid-column-span: 3;
      }
  
      .library.contest > .library>div.wl-headers {
      	-ms-grid-row: 1;
      	-ms-grid-column: 1;
      	-ms-grid-column-span: 3;
      }
      .library>div.wl-text {
      	-ms-grid-row: 3;
      	-ms-grid-column: 3;
      }
  
      .library.contest > .library>div.wl-text {
      	-ms-grid-row: 3;
      	-ms-grid-column: 1;
      }
      .library>div.wl-image {
      	-ms-grid-row: 3;
      	-ms-grid-row-span: 1;
      	-ms-grid-column: 1;
      }
  
      .library.contest > .library>div.wl-image {
      	-ms-grid-row: 3;
      	-ms-grid-row-span: 1;
      	-ms-grid-column: 3;
      }
  }
  
  @media (max-width: 25.875rem) {
  
      .library,
      .library.contest {
      	    grid-template-areas:
      		"wl-header wl-header"
      		"wl-image wl-image"
      		"wl-text wl-text";
      }
  
      .library>div.wl-image {
      	-ms-grid-column-align: center;
      	    justify-self: center;
      	height: auto;
      }
  
      .library>div.wl-image img {
      	max-height: 20vh;
      }
  
      .library>div.wl-headers {
      	-ms-grid-row: 1;
      	-ms-grid-column: 1;
      	-ms-grid-column-span: 3;
      }
  
      .library>div.wl-text {
      	-ms-grid-row: 5;
      	-ms-grid-column: 1;
      	-ms-grid-column-span: 3;
      }
  
      .library>div.wl-image {
      	-ms-grid-row: 3;
      	-ms-grid-row-span: 1;
      	-ms-grid-column: 1;
      	-ms-grid-column-span: 3;
      }
  }

Inline Styles

• (none)

Includes

• :scp-wiki:fragment:wl-front-page-box [info]
• :scp-wiki:fragment:wl-front-page-box [info]
• :scp-wiki:fragment:wl-front-page-box [info]
• :scp-wiki:fragment:wl-front-page-box [info]

CSS Classes

• blockquote

• code

• library-container

• library

• contest

• wl-image

• wl-headers

• fake-h4

• fake-h2

• wl-text

• library-container

• library

• wl-image

• wl-headers

• fake-h4

• fake-h2

• wl-text

• blockquote

• code

• blockquote

• code

• library-container

• library

• {$extra-class}

• wl-image

• wl-headers

• fake-h4

• fake-h2

• wl-text

Page Source

[[iftags +fragment]]
[[module CSS]]
/* WANDERERS" LIBRARY CSS */
@import url("https://wanderers-library.wikidot.com/component:dustjacket-theme-typefaces/code/1");
@import url("https://use.typekit.net/tqr1skr.css");

.library-container {
    --library-gold: 255, 219, 90;
    --library-dkgreen: 45, 70, 45;
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 2rem;
       -moz-border-radius: 2rem;
            border-radius: 2rem;
}

.library-container::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    pointer-events: none;
    -webkit-border-radius: 3rem;
       -moz-border-radius: 3rem;
            border-radius: 3rem;
    background-image: -webkit-linear-gradient(285deg,
    		rgba(var(--library-gold), 1),
    		rgba(var(--library-gold), 0.3) 40%,
    		transparent 40%,
    		transparent 50%,
    		rgba(var(--library-gold), 0.8) 52%,
    		rgba(var(--library-gold), 0.4) 70%,
    		transparent 70%);
    background-image: -moz-linear-gradient(285deg,
    		rgba(var(--library-gold), 1),
    		rgba(var(--library-gold), 0.3) 40%,
    		transparent 40%,
    		transparent 50%,
    		rgba(var(--library-gold), 0.8) 52%,
    		rgba(var(--library-gold), 0.4) 70%,
    		transparent 70%);
    background-image: -o-linear-gradient(285deg,
    		rgba(var(--library-gold), 1),
    		rgba(var(--library-gold), 0.3) 40%,
    		transparent 40%,
    		transparent 50%,
    		rgba(var(--library-gold), 0.8) 52%,
    		rgba(var(--library-gold), 0.4) 70%,
    		transparent 70%);
    background-image: linear-gradient(165deg,
    		rgba(var(--library-gold), 1),
    		rgba(var(--library-gold), 0.3) 40%,
    		transparent 40%,
    		transparent 50%,
    		rgba(var(--library-gold), 0.8) 52%,
    		rgba(var(--library-gold), 0.4) 70%,
    		transparent 70%);
    opacity: 0;
    background-position: -10rem -5rem;
    background-repeat: no-repeat;
    -webkit-filter: blur(0.25rem);
            filter: blur(0.25rem);
    -webkit-transition:
    	opacity 600ms cubic-bezier(.45, .05, .55, .95),
    	background-position 600ms cubic-bezier(.79, .14, .15, .86) 300ms;
    -o-transition:
    	opacity 600ms cubic-bezier(.45, .05, .55, .95),
    	background-position 600ms cubic-bezier(.79, .14, .15, .86) 300ms;
    -moz-transition:
    	opacity 600ms cubic-bezier(.45, .05, .55, .95),
    	background-position 600ms cubic-bezier(.79, .14, .15, .86) 300ms;
    transition:
    	opacity 600ms cubic-bezier(.45, .05, .55, .95),
    	background-position 600ms cubic-bezier(.79, .14, .15, .86) 300ms;
}

.library-container:hover::before {
    opacity: 0.15;
    background-position: 0 0;
    -webkit-transition:
    	opacity 300ms cubic-bezier(.45, .05, .55, .95) 300ms,
    	background-position 600ms cubic-bezier(.79, .14, .15, .86);
    -o-transition:
    	opacity 300ms cubic-bezier(.45, .05, .55, .95) 300ms,
    	background-position 600ms cubic-bezier(.79, .14, .15, .86);
    -moz-transition:
    	opacity 300ms cubic-bezier(.45, .05, .55, .95) 300ms,
    	background-position 600ms cubic-bezier(.79, .14, .15, .86);
    transition:
    	opacity 300ms cubic-bezier(.45, .05, .55, .95) 300ms,
    	background-position 600ms cubic-bezier(.79, .14, .15, .86);
}

.library {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 0.5rem 2fr;
    grid-template-columns: 1fr 2fr;
    -ms-grid-rows: auto 0.5rem auto;
        grid-template-areas:
    	"wl-image wl-header"
    	"wl-image wl-text";
    grid-gap: 0.5rem;
    gap: 0.5rem;
    position: relative;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    border: 1.25rem solid rgba(0, 0, 0, 0.5);
    -webkit-border-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/wl_border.png") 600 round;
       -moz-border-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/wl_border.png") 600 round;
         -o-border-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/wl_border.png") 600 round;
            border-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/wl_border.png") 600 round;
    border-image-width: 6;
    background: url("https://wanderers-library.wdfiles.com/local--files/component%3Atheme/wlheader_bg.png");
    -webkit-border-radius: 2rem;
       -moz-border-radius: 2rem;
            border-radius: 2rem;
    padding: 0.5rem;
    color: rgb(var(--library-gold));
    text-align: center;
    font-family: adelle-sans, sans-serif;
    font-size: 1.15em;
    overflow: hidden;
}

.library.contest {
    -ms-grid-columns: 2fr 0.5rem 1.5fr;
    grid-template-columns: 2fr 1.5fr;
    -ms-grid-rows: auto 0.5rem auto;
        grid-template-areas:
    	"wl-header wl-image"
    	"wl-text wl-image";
}

.library>a:first-of-type {
    color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    z-index: 1;
}

.library>div.wl-headers,
.library>div.wl-text,
.library>div.wl-image {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}

.library>div.wl-headers {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    grid-area: wl-header;
}

.library.contest > .library>div.wl-headers {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.library>div.wl-headers>div {
    width: 100%;
    padding: 0;
    margin: 0;
}

.library>div.wl-text {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
    grid-area: wl-text;
    padding: 0 0.5em;
    -webkit-text-decoration: underline double;
       -moz-text-decoration: underline double;
            text-decoration: underline double;
    text-decoration-thickness: 0rem;
    -webkit-text-decoration-color: rgba(228, 180, 28, 0);
       -moz-text-decoration-color: rgba(228, 180, 28, 0);
            text-decoration-color: rgba(228, 180, 28, 0);
    -webkit-transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	-webkit-text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	-webkit-text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1),
    	-moz-text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1),
    	-webkit-text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1),
    	-moz-text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1);
}

.library.contest > .library>div.wl-text {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
}

.library:hover>div.wl-text,
.library:active>div.wl-text {
    -webkit-text-decoration: underline double rgba(228, 180, 28);
       -moz-text-decoration: underline double rgba(228, 180, 28);
            text-decoration: underline double rgba(228, 180, 28);
    text-decoration-thickness: 0.0625rem;
    -webkit-transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	-webkit-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	-webkit-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1),
    	-moz-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1),
    	-webkit-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1),
    	-moz-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
}

.library:focus-within>div.wl-text {
    -webkit-text-decoration: underline double rgba(228, 180, 28);
       -moz-text-decoration: underline double rgba(228, 180, 28);
            text-decoration: underline double rgba(228, 180, 28);
    text-decoration-thickness: 0.0625rem;
    -webkit-transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	-webkit-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	-webkit-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1),
    	-moz-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1),
    	-webkit-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1),
    	-moz-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
}

.library>div.wl-image {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    -ms-grid-column: 1;
    grid-area: wl-image;
    background-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Atheme/wlheader_bg.png");
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
    margin: 0 0 1vw 1vw;
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
    overflow: hidden;
    -ms-grid-row-align: center;
        align-self: center
}

.library.contest > .library>div.wl-image {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    -ms-grid-column: 3
}

.library.contest>div.wl-image {
    background-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Atheme/goldfoil.png");
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
    -webkit-border-radius: 0.75rem;
       -moz-border-radius: 0.75rem;
            border-radius: 0.75rem;
    margin: 0;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}


.library>div.wl-image img {
    -webkit-border-radius: 0.5rem;
       -moz-border-radius: 0.5rem;
            border-radius: 0.5rem;
    width: 100%;
    margin: 0.25rem;
    -o-object-fit: contain;
       object-fit: contain;
    max-width: 15.625rem;
}

.library.contest>div.wl-image img {
    max-height: 12.25rem;
}

.library .fake-h2,
.library .fake-h4 {
    font-family: "zuijinregular", sans-serif;
    letter-spacing: 0.0625rem;
    display: inline-block;
}

.library .fake-h4 {
    margin-bottom: 0.7em;
    margin-top: -0.5em;
    font-size: 1.3em;
}

.library .fake-h2 {
    font-family: "zuijinregular", sans-serif;
    margin-bottom: 0.4em;
    font-size: 1.5em;
}

@media (max-width: 48rem) {
    .library {
    	    grid-template-areas:
    		"wl-header wl-header"
    		"wl-image wl-text";
    }

    .library.contest {
    	    grid-template-areas:
    		"wl-header wl-header"
    		"wl-text wl-image";
    }
    .library>div.wl-headers {
    	-ms-grid-row: 1;
    	-ms-grid-column: 1;
    	-ms-grid-column-span: 3;
    }

    .library.contest > .library>div.wl-headers {
    	-ms-grid-row: 1;
    	-ms-grid-column: 1;
    	-ms-grid-column-span: 3;
    }
    .library>div.wl-text {
    	-ms-grid-row: 3;
    	-ms-grid-column: 3;
    }

    .library.contest > .library>div.wl-text {
    	-ms-grid-row: 3;
    	-ms-grid-column: 1;
    }
    .library>div.wl-image {
    	-ms-grid-row: 3;
    	-ms-grid-row-span: 1;
    	-ms-grid-column: 1;
    }

    .library.contest > .library>div.wl-image {
    	-ms-grid-row: 3;
    	-ms-grid-row-span: 1;
    	-ms-grid-column: 3;
    }
}

@media (max-width: 25.875rem) {

    .library,
    .library.contest {
    	    grid-template-areas:
    		"wl-header wl-header"
    		"wl-image wl-image"
    		"wl-text wl-text";
    }

    .library>div.wl-image {
    	-ms-grid-column-align: center;
    	    justify-self: center;
    	height: auto;
    }

    .library>div.wl-image img {
    	max-height: 20vh;
    }

    .library>div.wl-headers {
    	-ms-grid-row: 1;
    	-ms-grid-column: 1;
    	-ms-grid-column-span: 3;
    }

    .library>div.wl-text {
    	-ms-grid-row: 5;
    	-ms-grid-column: 1;
    	-ms-grid-column-span: 3;
    }

    .library>div.wl-image {
    	-ms-grid-row: 3;
    	-ms-grid-row-span: 1;
    	-ms-grid-column: 1;
    	-ms-grid-column-span: 3;
    }
}

.blockquote.code {
    font-family: 'Andale Mono', 'Courier New', Courier, monospace;
}
[[/module]]

+ CSS Include for Wanderers' Library box on Front Page
[[div_ class="blockquote code"]]
@@[[include :scp-wiki:fragment:wl-front-page-box |css=--]]]@@
@@[[include :scp-wiki:fragment:wl-front-page-box |div=--]@@
|extra-class=
|URL=
|URL-Title=
|img-URL=
|top-h4=
|top-h2=
|text=
]]
[[/div]]
++ Classes Included:
* {{.library-container}} - Container box
* {{.library}} - Internal box
* {{.library .wl-image}} - Image Block
* {{.library .wl-headers}} - Headers Block
* {{.library .wl-text}} - Text Block
* {{.library .fake-h2}} - Mimics H4 Styling from WL
* {{.library .fake-h4}} - Mimics H2 Styling from WL
--------
++++ Special Classes Included:
* {{.library.contest}} - Contest Block / Places Image on right for Desktop Sizes

++ EXAMPLES
[[div_ class="library-container"]]
[[div_ class="library contest"]]
[https://wanderers-library.wikidot.com/wandercon-2021 Wanderers' Library Wandercon 2021]\
[[div_ class="wl-image"]]
    [[image https://wanderers-library.wdfiles.com/local--resized-images/wandercon-2021/lofilibrary/medium.jpg]]
[[/div]]
[[div_ class="wl-headers"]]
    [[div_ class="fake-h4"]]
    WANDERCON 2021
    [[/div]]
    [[div_ class="fake-h2"]]
    ↬ The Wanderer's Library ↫
    [[/div]]
[[/div]]
[[div_ class="wl-text"]]
The Wanderer's Library is having its first ever team contest with a simple task: Describe an author who resides in the Library, and show us what works they've created! Sign ups end August 13th! Click for more information.
[[/div]]
[[/div]]
[[/div]]

------

[[div_ class="library-container"]]
[[div_ class="library"]]
    [https://wanderers-library.wikidot.com/ Wanderers' Library]\
    [[div_ class="wl-image"]]
    	[[image https://wanderers-library.wdfiles.com/local--files/component%3Atheme/wl_logo.png]]
    [[/div]]
    [[div_ class="wl-headers"]]
    	[[div_ class="fake-h4"]]
    	Official Sister Site
    	[[/div]]
    	[[div_ class="fake-h2"]]
    	↬ The Wanderer's Library ↫
    	[[/div]]
    [[/div]]
    [[div_ class="wl-text"]]
The Wanderer's Library is the Foundation's sister site and features the endless fantastical stories contained within the Library, home to the Serpents Hand and readers of all shapes and sizes. Stories should inspire Wonder - a sense that there is a larger world beyond the one we know.
    [[/div]]
[[/div]]
[[/div]]

------

[[collapsible show="+ Show Block 1 Code" hide="- Hide Block 1 Code"]]
[[div_ class="blockquote code"]]
@@[[include :scp-wiki:fragment:wl-front-page-box |div=--]@@
|extra-class=**contest**
|URL=**@@https://wanderers-library.wikidot.com/wandercon-2021@@**
|URL-Title=**Wanderers' Library Wandercon 2021**
|img-URL=**@@https://wanderers-library.wdfiles.com/local--resized-images/wandercon-2021/lofilibrary/medium.jpg@@**
|top-h4=**WANDERCON 2021**
|top-h2=**The Wanderer's Library**
|text=**The Wanderer's Library is having its first ever team contest with a simple task: Describe an author who resides in the Library, and show us what works they've created! Sign ups end August 13th! Click for more information.**
]]
[[/div]]
[[/collapsible]]

------

[[collapsible show="+ Show Block 2 Code" hide="- Hide Block 2 Code"]]
[[div_ class="blockquote code"]]
@@[[include :scp-wiki:fragment:wl-front-page-box |div=--]@@
|URL=**@@https://wanderers-library.wikidot.com/@@**
|URL-Title=**Wanderers' Library**
|img-URL=**@@https://wanderers-library.wdfiles.com/local--files/component%3Atheme/wl_logo.png@@**
|top-h4=**Official Sister Site**
|top-h2=**The Wanderer's Library**
|text=**The Wanderer's Library is the Foundation's sister site and features the endless fantastical stories contained within the Library, home to the Serpents Hand and readers of all shapes and sizes. Stories should inspire Wonder - a sense that there is a larger world beyond the one we know.**
]]
[[/div]]
[[/collapsible]]

------

[[/iftags]]
[!-- {$css}
[[module CSS]]
/* WANDERERS" LIBRARY CSS */
@import url("https://wanderers-library.wikidot.com/component:dustjacket-theme-typefaces/code/1");
@import url("https://use.typekit.net/tqr1skr.css");

.library-container {
    --library-gold: 255, 219, 90;
    --library-dkgreen: 45, 70, 45;
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 2rem;
       -moz-border-radius: 2rem;
            border-radius: 2rem;
}

.library-container::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    pointer-events: none;
    -webkit-border-radius: 3rem;
       -moz-border-radius: 3rem;
            border-radius: 3rem;
    background-image: -webkit-linear-gradient(285deg,
    		rgba(var(--library-gold), 1),
    		rgba(var(--library-gold), 0.3) 40%,
    		transparent 40%,
    		transparent 50%,
    		rgba(var(--library-gold), 0.8) 52%,
    		rgba(var(--library-gold), 0.4) 70%,
    		transparent 70%);
    background-image: -moz-linear-gradient(285deg,
    		rgba(var(--library-gold), 1),
    		rgba(var(--library-gold), 0.3) 40%,
    		transparent 40%,
    		transparent 50%,
    		rgba(var(--library-gold), 0.8) 52%,
    		rgba(var(--library-gold), 0.4) 70%,
    		transparent 70%);
    background-image: -o-linear-gradient(285deg,
    		rgba(var(--library-gold), 1),
    		rgba(var(--library-gold), 0.3) 40%,
    		transparent 40%,
    		transparent 50%,
    		rgba(var(--library-gold), 0.8) 52%,
    		rgba(var(--library-gold), 0.4) 70%,
    		transparent 70%);
    background-image: linear-gradient(165deg,
    		rgba(var(--library-gold), 1),
    		rgba(var(--library-gold), 0.3) 40%,
    		transparent 40%,
    		transparent 50%,
    		rgba(var(--library-gold), 0.8) 52%,
    		rgba(var(--library-gold), 0.4) 70%,
    		transparent 70%);
    opacity: 0;
    background-position: -10rem -5rem;
    background-repeat: no-repeat;
    -webkit-filter: blur(0.25rem);
            filter: blur(0.25rem);
    -webkit-transition:
    	opacity 600ms cubic-bezier(.45, .05, .55, .95),
    	background-position 600ms cubic-bezier(.79, .14, .15, .86) 300ms;
    -o-transition:
    	opacity 600ms cubic-bezier(.45, .05, .55, .95),
    	background-position 600ms cubic-bezier(.79, .14, .15, .86) 300ms;
    -moz-transition:
    	opacity 600ms cubic-bezier(.45, .05, .55, .95),
    	background-position 600ms cubic-bezier(.79, .14, .15, .86) 300ms;
    transition:
    	opacity 600ms cubic-bezier(.45, .05, .55, .95),
    	background-position 600ms cubic-bezier(.79, .14, .15, .86) 300ms;
}

.library-container:hover::before {
    opacity: 0.15;
    background-position: 0 0;
    -webkit-transition:
    	opacity 300ms cubic-bezier(.45, .05, .55, .95) 300ms,
    	background-position 600ms cubic-bezier(.79, .14, .15, .86);
    -o-transition:
    	opacity 300ms cubic-bezier(.45, .05, .55, .95) 300ms,
    	background-position 600ms cubic-bezier(.79, .14, .15, .86);
    -moz-transition:
    	opacity 300ms cubic-bezier(.45, .05, .55, .95) 300ms,
    	background-position 600ms cubic-bezier(.79, .14, .15, .86);
    transition:
    	opacity 300ms cubic-bezier(.45, .05, .55, .95) 300ms,
    	background-position 600ms cubic-bezier(.79, .14, .15, .86);
}

.library {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 0.5rem 2fr;
    grid-template-columns: 1fr 2fr;
    -ms-grid-rows: auto 0.5rem auto;
        grid-template-areas:
    	"wl-image wl-header"
    	"wl-image wl-text";
    grid-gap: 0.5rem;
    gap: 0.5rem;
    position: relative;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    border: 1.25rem solid rgba(0, 0, 0, 0.5);
    -webkit-border-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/wl_border.png") 600 round;
       -moz-border-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/wl_border.png") 600 round;
         -o-border-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/wl_border.png") 600 round;
            border-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Adustjacket-theme/wl_border.png") 600 round;
    border-image-width: 6;
    background: url("https://wanderers-library.wdfiles.com/local--files/component%3Atheme/wlheader_bg.png");
    -webkit-border-radius: 2rem;
       -moz-border-radius: 2rem;
            border-radius: 2rem;
    padding: 0.5rem;
    color: rgb(var(--library-gold));
    text-align: center;
    font-family: adelle-sans, sans-serif;
    font-size: 1.15em;
    overflow: hidden;
}

.library.contest {
    -ms-grid-columns: 2fr 0.5rem 1.5fr;
    grid-template-columns: 2fr 1.5fr;
    -ms-grid-rows: auto 0.5rem auto;
        grid-template-areas:
    	"wl-header wl-image"
    	"wl-text wl-image";
}

.library>a:first-of-type {
    color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    z-index: 1;
}

.library>div.wl-headers,
.library>div.wl-text,
.library>div.wl-image {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}

.library>div.wl-headers {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    grid-area: wl-header;
}

.library.contest > .library>div.wl-headers {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.library>div.wl-headers>div {
    width: 100%;
    padding: 0;
    margin: 0;
}

.library>div.wl-text {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
    grid-area: wl-text;
    padding: 0 0.5em;
    -webkit-text-decoration: underline double;
       -moz-text-decoration: underline double;
            text-decoration: underline double;
    text-decoration-thickness: 0rem;
    -webkit-text-decoration-color: rgba(228, 180, 28, 0);
       -moz-text-decoration-color: rgba(228, 180, 28, 0);
            text-decoration-color: rgba(228, 180, 28, 0);
    -webkit-transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	-webkit-text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	-webkit-text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1),
    	-moz-text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1),
    	-webkit-text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1),
    	-moz-text-decoration-color 125ms cubic-bezier(0.4, 0, 0.2, 1);
}

.library.contest > .library>div.wl-text {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
}

.library:hover>div.wl-text,
.library:active>div.wl-text {
    -webkit-text-decoration: underline double rgba(228, 180, 28);
       -moz-text-decoration: underline double rgba(228, 180, 28);
            text-decoration: underline double rgba(228, 180, 28);
    text-decoration-thickness: 0.0625rem;
    -webkit-transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	-webkit-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	-webkit-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1),
    	-moz-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1),
    	-webkit-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1),
    	-moz-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
}

.library:focus-within>div.wl-text {
    -webkit-text-decoration: underline double rgba(228, 180, 28);
       -moz-text-decoration: underline double rgba(228, 180, 28);
            text-decoration: underline double rgba(228, 180, 28);
    text-decoration-thickness: 0.0625rem;
    -webkit-transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	-webkit-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	-webkit-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1),
    	-moz-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
    transition:
    	text-decoration-thickness 150ms cubic-bezier(0.4, 0, 0.2, 1),
    	text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1),
    	-webkit-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1),
    	-moz-text-decoration-color 50ms cubic-bezier(0.4, 0, 0.2, 1);
}

.library>div.wl-image {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    -ms-grid-column: 1;
    grid-area: wl-image;
    background-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Atheme/wlheader_bg.png");
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
    margin: 0 0 1vw 1vw;
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
    overflow: hidden;
    -ms-grid-row-align: center;
        align-self: center
}

.library.contest > .library>div.wl-image {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    -ms-grid-column: 3
}

.library.contest>div.wl-image {
    background-image: url("https://wanderers-library.wdfiles.com/local--files/component%3Atheme/goldfoil.png");
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
    -webkit-border-radius: 0.75rem;
       -moz-border-radius: 0.75rem;
            border-radius: 0.75rem;
    margin: 0;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}


.library>div.wl-image img {
    -webkit-border-radius: 0.5rem;
       -moz-border-radius: 0.5rem;
            border-radius: 0.5rem;
    width: 100%;
    margin: 0.25rem;
    -o-object-fit: contain;
       object-fit: contain;
    max-width: 15.625rem;
}

.library.contest>div.wl-image img {
    max-height: 12.25rem;
}

.library .fake-h2,
.library .fake-h4 {
    font-family: "zuijinregular", sans-serif;
    letter-spacing: 0.0625rem;
    display: inline-block;
}

.library .fake-h4 {
    margin-bottom: 0.7em;
    margin-top: -0.5em;
    font-size: 1.3em;
}

.library .fake-h2 {
    font-family: "zuijinregular", sans-serif;
    margin-bottom: 0.4em;
    font-size: 1.5em;
}

@media (max-width: 48rem) {
    .library {
    	    grid-template-areas:
    		"wl-header wl-header"
    		"wl-image wl-text";
    }

    .library.contest {
    	    grid-template-areas:
    		"wl-header wl-header"
    		"wl-text wl-image";
    }
    .library>div.wl-headers {
    	-ms-grid-row: 1;
    	-ms-grid-column: 1;
    	-ms-grid-column-span: 3;
    }

    .library.contest > .library>div.wl-headers {
    	-ms-grid-row: 1;
    	-ms-grid-column: 1;
    	-ms-grid-column-span: 3;
    }
    .library>div.wl-text {
    	-ms-grid-row: 3;
    	-ms-grid-column: 3;
    }

    .library.contest > .library>div.wl-text {
    	-ms-grid-row: 3;
    	-ms-grid-column: 1;
    }
    .library>div.wl-image {
    	-ms-grid-row: 3;
    	-ms-grid-row-span: 1;
    	-ms-grid-column: 1;
    }

    .library.contest > .library>div.wl-image {
    	-ms-grid-row: 3;
    	-ms-grid-row-span: 1;
    	-ms-grid-column: 3;
    }
}

@media (max-width: 25.875rem) {

    .library,
    .library.contest {
    	    grid-template-areas:
    		"wl-header wl-header"
    		"wl-image wl-image"
    		"wl-text wl-text";
    }

    .library>div.wl-image {
    	-ms-grid-column-align: center;
    	    justify-self: center;
    	height: auto;
    }

    .library>div.wl-image img {
    	max-height: 20vh;
    }

    .library>div.wl-headers {
    	-ms-grid-row: 1;
    	-ms-grid-column: 1;
    	-ms-grid-column-span: 3;
    }

    .library>div.wl-text {
    	-ms-grid-row: 5;
    	-ms-grid-column: 1;
    	-ms-grid-column-span: 3;
    }

    .library>div.wl-image {
    	-ms-grid-row: 3;
    	-ms-grid-row-span: 1;
    	-ms-grid-column: 1;
    	-ms-grid-column-span: 3;
    }
}
[[/module]]
[!----]
[!-- {$div}
[[div_ class="library-container"]]
[[div_ class="library {$extra-class}"]]
[[a href="{$URL}" title="{$URL-Title}"]]{$URL-Title}[[/a]]\
[[div_ class="wl-image"]]
    [[image {$img-URL}]]
[[/div]]
[[div_ class="wl-headers"]]
    [[div_ class="fake-h4"]]
    {$top-h4}
    [[/div]]
    [[div_ class="fake-h2"]]
    ↬ {$top-h2} ↫
    [[/div]]
[[/div]]
[[div_ class="wl-text"]]
{$text}
[[/div]]
[[/div]]
[[/div]]
[!----]