314 lines
6.4 KiB
CSS
314 lines
6.4 KiB
CSS
@import "./custom/file-header.css";
|
|
/**
|
|
* The line above injects the WordPress file header. It needs to be first,
|
|
* before this comment.
|
|
*/
|
|
|
|
/**
|
|
* This injects custom `@font-face` rules.
|
|
*/
|
|
@import "./custom/fonts.css";
|
|
|
|
/**
|
|
* This injects Tailwind's base styles and any base styles registered by
|
|
* plugins, then adds custom base styles.
|
|
*/
|
|
@import "tailwindcss/base";
|
|
@import "./custom/base.css";
|
|
|
|
/**
|
|
* This injects Tailwind's component classes and any component classes
|
|
* registered by plugins, then adds custom component classes.
|
|
*
|
|
* The `@import-glob` line imports all CSS files from the `components`
|
|
* directory (except for `components.css`, which is imported on the following
|
|
* line). This is meant to simplify the process of integrating styles from
|
|
* JavaScript components or WordPress plugins.
|
|
*/
|
|
@import "tailwindcss/components";
|
|
@import-glob "./custom/components/**/!(components).css";
|
|
@import "./custom/components/components.css";
|
|
|
|
/**
|
|
* This injects Tailwind's utility classes and any utility classes registered
|
|
* by plugins, then adds custom utility classes.
|
|
*/
|
|
@import "tailwindcss/utilities";
|
|
@import "./custom/utilities.css";
|
|
|
|
|
|
@import "./custom/asgaros.css";
|
|
|
|
:root {
|
|
--wowp-gap: 1em;
|
|
--color-deathknight: #C41E3A;
|
|
--color-demonhunter: #A330C9;
|
|
--color-druid: #DD7C0A;
|
|
--color-evoker: #33937F;
|
|
--color-hunter: #AAD372;
|
|
--color-mage: #3FC7EB;
|
|
--color-monk: #00FF98;
|
|
--color-paladin: #F48CBA;
|
|
--color-priest: #FFFFFF;
|
|
--color-rogue: #FFF468;
|
|
--color-shaman: #0070DD;
|
|
--color-warlock: #8788EE;
|
|
--color-warrior: #C69B6D;
|
|
--color-deepblue: #000032;
|
|
--color-alliance: #f7941e;
|
|
--color-background: var(--color-deepblue);
|
|
--color-glass: color-mix(in lch, transparent 42%, var(--color-background));
|
|
}
|
|
|
|
.p-auto {
|
|
padding: var(--wowp-gap);
|
|
}
|
|
|
|
.gap-auto {
|
|
gap: var(--wowp-gap);
|
|
}
|
|
|
|
body {
|
|
background-color: unset;
|
|
position: relative;
|
|
z-index: -10;
|
|
@apply min-h-screen;
|
|
}
|
|
|
|
.bg-glass {
|
|
@apply backdrop-blur-md;
|
|
background-color: var(--color-glass);
|
|
|
|
}
|
|
|
|
.shadow {
|
|
-webkit-box-shadow: 5px 5px 9px 0px rgba(0, 0, 0, 0.5);
|
|
box-shadow: 5px 5px 9px 0px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
body:before {
|
|
content: "";
|
|
display: block;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1000;
|
|
background: var(--body-bg) no-repeat center center;
|
|
-webkit-background-size: cover;
|
|
-moz-background-size: cover;
|
|
-o-background-size: cover;
|
|
background-size: cover;
|
|
pointer-events: none;
|
|
}
|
|
|
|
|
|
|
|
.content-wrapper {
|
|
position: relative;
|
|
z-index: -1;
|
|
margin-block: var(--wowp-gap);
|
|
|
|
}
|
|
|
|
.content-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--wowp-gap);
|
|
|
|
@media screen(xl) {
|
|
display: grid;
|
|
grid-column-gap: var(--wowp-gap);
|
|
grid-row-gap: var(--wowp-gap);
|
|
grid-template-columns: auto 1fr auto;
|
|
grid-template-rows: auto 1fr auto;
|
|
}
|
|
}
|
|
|
|
article {
|
|
margin-inline: var(--wowp-gap);
|
|
|
|
@media screen(xl) {
|
|
margin-inline: unset;
|
|
}
|
|
}
|
|
|
|
.post-wrapper {
|
|
display: grid;
|
|
grid-template-columns: auto auto 1fr;
|
|
grid-template-rows: auto auto 1fr auto;
|
|
grid-column-gap: var(--wowp-gap);
|
|
grid-row-gap: var(--wowp-gap);
|
|
|
|
}
|
|
|
|
.post-title {
|
|
grid-area: 1 / 1 / 2 / 4;
|
|
@apply text-center text-2xl py-2;
|
|
}
|
|
|
|
.post-content {
|
|
grid-area: 3 / 1 / 4 / 4;
|
|
|
|
padding-inline: var(--wowp-gap);
|
|
}
|
|
|
|
.post-category {
|
|
grid-area: 2 / 1 / 3 / 4;
|
|
|
|
span {
|
|
@apply p-0;
|
|
|
|
&:before {
|
|
height: 1.5em;
|
|
}
|
|
|
|
&:after {
|
|
height: 1.5em;
|
|
}
|
|
|
|
@media screen(xl) {
|
|
padding: .75em 1.25em .75em .75em;
|
|
|
|
&:before {
|
|
height: 3em;
|
|
}
|
|
|
|
&:after {
|
|
height: 3em;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.post-author {
|
|
grid-area: 4 / 3 / 5 / 4;
|
|
@apply text-end;
|
|
color: var(--author-class);
|
|
padding-right: var(--wowp-gap);
|
|
padding-bottom: var(--wowp-gap);
|
|
|
|
}
|
|
|
|
.post-day {
|
|
grid-area: 4 / 1 / 5 / 2;
|
|
|
|
padding-left: var(--wowp-gap);
|
|
padding-bottom: var(--wowp-gap);
|
|
}
|
|
|
|
.post-month {
|
|
grid-area: 4 / 2 / 5 / 3;
|
|
padding-bottom: var(--wowp-gap);
|
|
|
|
}
|
|
|
|
.post-avatar {
|
|
display: none;
|
|
}
|
|
|
|
@media screen(xl) {
|
|
.post-wrapper {
|
|
display: grid;
|
|
grid-template-columns: 1fr 7fr;
|
|
grid-template-rows: auto auto 1fr auto auto 1fr auto;
|
|
grid-column-gap: var(--wowp-gap);
|
|
grid-row-gap: 0px;
|
|
}
|
|
|
|
.post-title {
|
|
grid-area: 1 / 2 / 2 / 5;
|
|
@apply text-4xl text-left;
|
|
}
|
|
|
|
.post-content {
|
|
grid-area: 2 / 2 / 8 / 5;
|
|
@apply prose prose-wowpress;
|
|
padding: unset;
|
|
padding-right: var(--wowp-gap);
|
|
}
|
|
|
|
.post-day {
|
|
grid-area: 1 / 1 / 2 / 2;
|
|
@apply bg-shaman flex flex-row items-center justify-center text-4xl;
|
|
padding: unset;
|
|
|
|
}
|
|
|
|
.post-month {
|
|
@apply bg-slate-400 flex flex-row items-center justify-center text-xl;
|
|
padding: unset;
|
|
grid-area: 2 / 1 / 3 / 2;
|
|
}
|
|
|
|
.post-category {
|
|
grid-area: 3 / 1 / 4 / 2;
|
|
@apply bg-glass;
|
|
margin-top: var(--wowp-gap);
|
|
}
|
|
|
|
.post-avatar {
|
|
@apply flex flex-col justify-end items-center bg-glass;
|
|
grid-area: 4 / 1 / 7 / 2;
|
|
|
|
img {
|
|
@apply rounded-md mb-4 outline shadow w-20;
|
|
outline-color: var(--author-class);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.post-author {
|
|
grid-area: 7 / 1 / 8 / 2;
|
|
@apply flex flex-row items-center justify-center;
|
|
|
|
padding: unset;
|
|
|
|
background-color: var(--author-class);
|
|
color: black;
|
|
}
|
|
}
|
|
|
|
.page-numbers {
|
|
@apply btn btn-alliance;
|
|
|
|
&.current {
|
|
@apply btn-outline;
|
|
}
|
|
}
|
|
|
|
|
|
.is-type-video {
|
|
@apply w-full;
|
|
|
|
@media screen(lg) {
|
|
@apply w-1/2;
|
|
}
|
|
}
|
|
|
|
.logo {
|
|
mask-image: url(icons/logo_nk.png);
|
|
mask-repeat: no-repeat;
|
|
mask-position: center;
|
|
mask-mode: auto;
|
|
background-color: var(--color-alliance);
|
|
mask-size: contain;
|
|
-webkit-mask-image: url(icons/logo_nk.png);
|
|
-webkit-mask-repeat: no-repeat;
|
|
-webkit-mask-position: center;
|
|
-webkit-mask-mode: auto;
|
|
-webkit-mask-size: contain;
|
|
}
|
|
|
|
.prose{
|
|
--tw-prose-bold: var(--color-alliance);
|
|
--tw-prose-links: var(--color-alliance);
|
|
--tw-prose-headings: var(--color-alliance);
|
|
--tw-prose-quotes:var(--color-alliance);
|
|
--tw-prose-kbd:var(--color-alliance);
|
|
--tw-prose-code:var(--color-alliance);
|
|
} |