@tailwind base;
@tailwind components;

body {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: 
        "header header"
        "nav nav"
        "main 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-full select-none;
    grid-area: nav;
    box-shadow: -3px 0 10px 2px black;
}

main {
    @apply py-8 mx-5;
    grid-area: main;
}

.center {
    @apply mx-auto;
}

.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;
}

.content {
    @apply prose max-w-full;
}

.content.big {
    @apply prose-xl;
}

.artifacts-header {
    @apply text-4xl font-bold mt-20;
}

.artifacts-list {
    display: grid;
    grid-template-columns: auto;
    gap: 0.2rem 0.5rem;
    align-items: center;
}

.artifacts-list .artifact-link {
    @apply text-white bg-blue-600 rounded-sm p-1 px-2 no-underline font-normal mt-2;
    height: min-content;
}

.artifacts-list .artifact-link:hover {
    @apply bg-blue-700;
}

.artifacts-list .artifact-desc {
    @apply italic text-sm;
}

.artifact-item {
    @apply bg-gray-200 my-3;
}

.artifact-item .artifact-contents {
    @apply p-4 hidden;
}

.artifact-item .artifact-contents.contents-visible {
    @apply block;
}

.artifact-contents .changelog {
    @apply text-sm;
}

.artifact-contents .changelog li {
    @apply my-0;
}

.artifact-contents .changelog li::before {
    font-family: "fontello";
    content: '\f105';
    top: calc(0.875em - 0.73em);
    background-color: transparent;
    left: 0.5em;
}

.artifact-details {
    @apply flex items-center bg-gray-300 select-none;
}

.artifact-details .icon-downup {
    @apply ml-auto mr-2 text-gray-500;
}

.artifact-details:hover {
    @apply cursor-pointer bg-gray-200;
}

.artifact-details .artifact-id {
    @apply p-4 bg-blue-500 font-bold text-white text-lg;
}

.artifact-details:hover .artifact-id {
    @apply bg-blue-400;
}

.artifact-details .hash-button {
    @apply mx-4 py-1 px-3 border-blue-600 rounded border font-mono text-blue-600;
}

.artifact-details .hash-button:hover {
    @apply bg-blue-600 text-white;
}

.artifact-details .build-date-text {
    @apply text-gray-600 text-lg;
}

@screen md {

    body {
        grid-template-areas: 
            "header header"
            "header header"
            "nav main";
    }

    aside.menu {
        @apply w-56;
    }

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

@screen xl {
    .artifacts-list {
        grid-template-columns: max-content auto;
        gap: 0.5rem 0.5rem;
    }

    .artifacts-list .artifact-link {
        @apply mt-0;
    }

    main {
        @apply mx-40;
    }

    aside.menu {
        @apply w-72;
    }
}

@tailwind utilities;