bepinbuilds/src/static/style/style.css

@tailwind base;
@tailwind components;

body {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: 
        "header header"
        "nav main";
    min-height: 100vh;
}

header {
    @apply bg-gray-800 text-gray-50 flex justify-between items-center select-none;
    grid-area: header;
    box-shadow: 0 -3px 10px 3px black;
    z-index: 1;
}

header > * {
    @apply p-3;
}

a.brand {
    @apply flex items-center;
}

a.brand:hover {
    @apply bg-gray-900;
}

a.brand span {
    @apply mx-2 font-sans text-sm text-gray-100;
}

a.brand img {
    @apply h-7 w-auto;
}

aside.menu {
    @apply bg-gray-700 text-white p-2 w-72 select-none;
    grid-area: nav;
    box-shadow: -3px 0 10px 2px black;
}

.menu .menu-view {
    @apply sticky top-0;
}

.menu .menu-title {
    @apply text-gray-200 uppercase text-xs font-sans py-2;
}

.menu .menu-list a {
    @apply py-1 px-2 rounded-sm text-white block;
}

.menu .menu-list a:hover {
    @apply text-gray-700 bg-white;
}

.menu .menu-list a.is-active {
    @apply bg-blue-500 text-white;
}

main {
    @apply p-8;
    grid-area: main;
}


@tailwind utilities;