239 lines
5.9 KiB
CSS
239 lines
5.9 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";
|
|
|
|
: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;
|
|
}
|
|
|
|
.p-auto{
|
|
padding: var(--wowp-gap);
|
|
}
|
|
|
|
body {
|
|
background-color: unset;
|
|
--body-bg: url('https://nebelkrieger.de/wp-content/uploads/2023/05/F8lCEpyWoAAFCFS-scaled.jpg');
|
|
position: relative;
|
|
z-index: -10;
|
|
}
|
|
|
|
.bg-glass {
|
|
background-color: rgba(0, 0, 50, 0.4);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
|
|
header#masthead {
|
|
@apply bg-glass;
|
|
}
|
|
|
|
|
|
|
|
.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;
|
|
}
|
|
}
|