WowPress-Tailwind/tailwind/tailwind.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;
        } 
    }