hamann-ausgabe-core/HaWeb/wwwroot/css/site.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Regular woff-files for regular font variants
   Instead we use the Graphite versions of the font currently  

@font-face {
    font-family: 'Biolinum';
    src: url('../fonts/LinBiolinum_R.woff') format('woff');
    font-display: swap;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Libertine';
    src: url('../fonts/LinLibertine_R.woff') format('woff');
    font-display: swap;
    font-weight: normal;
    font-style: normal;
}

*/

@font-face {
    font-family: 'Biolinum';
    src: url('/fonts/LinBiolinum_R_G.ttf') format('truetype');
    font-display: swap;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Libertine';
    src: url('/fonts/LinLibertine_R_G.ttf') format('truetype');
    font-display: swap;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Biolinum';
    src: url('../fonts/LinBiolinum_RI.woff') format('woff');
    font-display: swap;
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Biolinum';
    src: url('../fonts/LinBiolinum_RB.woff') format('woff');
    font-display: swap;
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Libertine';
    src: url('../fonts/LinLibertine_RI.woff') format('woff');
    font-display: swap;
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Libertine';
    src: url('../fonts/LinLibertine_RB.woff') format('woff');
    font-display: swap;
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Playfair';
    src: url('../fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
    font-display: swap;
    font-weight: normal;
    font-style: normal;
}

@layer components {
    body {
        @apply text-base desktop:text-lg w-full h-full
    }

    .ha-topnav {
        @apply flex desktop:grow-0 desktop:shrink-0 md:text-lg 2xl:text-xl desktop:place-self-end xl:mb-1
    }

    .ha-topnav a {
        @apply hidden text-gray-700 hover:text-gray-900  desktop:inline-block mr-5 2xl:mr-6
    }

    .ha-topnav-dropdown {
        @apply hidden desktop:relative desktop:inline-block
    }

    .ha-topnav-dropdown:hover .ha-topnav-dropdown-content {
        @apply desktop:block
    }

    .ha-topnav-dropdown .ha-topnav-dropdown-content {
        @apply hidden mr-6 pt-1 right-0 desktop:absolute bg-slate-50 min-w-[130px] shadow-md border-gray-400 border-b-2 z-50
    }

    .ha-topnav-dropdown .ha-topnav-dropdown-content a {
        @apply pl-2 pr-3 py-2 block mr-0
    }

    .ha-topnav-dropdown .ha-topnav-dropdown-content .active {
        @apply border-none
    }

    .ha-topnav-dropdown .ha-topnav-dropdown-content a:hover {
        @apply bg-gray-100
    } 

    /* TODO INLINE .ha-container {
        @apply max-w-[1280px]
    } 
    
    .ha-maincolumn {
        @apply bg-slate-50 mx-auto p-2 md:p-4 desktop:px-16 desktop:py-12 xl:pr-80 text-lg font-serif 
    } 
    
    p {
        @apply my-3
    }

    h1 {
        @apply font-bold text-xl 2xl:font-normal 2xl:text-4xl
    }

    h2 {
        @apply text-lg 2xl:text-2xl
    } */

    /* Classes from .NET */

    /* Classes from Javascript */
    .active {
        @apply !text-hamannHighlight pointer-events-none
    }

    .active:hover {
        @apply text-hamannHighlight
    }

    .ha-topnav a.active {
        @apply underline underline-offset-2 desktop:no-underline desktop:border-b-4
    }

    .ha-topnav.ha-topnav-collapsed {
        @apply block w-full h-full mt-4 text-base desktop:flex desktop:w-fit desktop:mt-0 md:text-lg 2xl:text-xl
    }

    .ha-topnav.ha-topnav-collapsed a {
        @apply block py-1 w-full text-left clear-both desktop:inline-block desktop:py-0 desktop:w-fit
    }

    
    .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown {
        @apply block desktop:inline-block
    }

    .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown:hover .ha-topnav-dropdown-content {
        @apply desktop:block
    }

    .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown .ha-topnav-dropdown-content {
        @apply block shadow-none border-none pt-0 desktop:hidden desktop:shadow-md desktop:border-b desktop:pt-2
    }

    .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown .ha-topnav-dropdown-content a {
        @apply py-1 desktop:py-2
    }
}

body {
    background-image:url('../img/subtlenet2.png');
    background-repeat:repeat;
}

/* ul {
    list-style-type:circle;
} */

.ha-menu-arrowsymbol::after {
    display: inline-block;
    margin-left: 0.2em;
    vertical-align: 0.2em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

.ha-menusymbol {
    background:var(--white);
    border-radius:4px;
}

.ha-menusymbol svg {
    width:24px;
    height:24px;
    stroke:#000000;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:miter;
    fill:none;
    color:#000000;
}