123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107 |
- @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 py-8 mx-40;
- grid-area: main;
- }
- .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: max-content auto;
- gap: 0.5rem 0.5rem;
- }
- .artifacts-list .artifact-link {
- @apply text-white bg-blue-600 rounded-sm p-1 px-2 no-underline font-normal;
- height: min-content;
- }
- .artifacts-list .artifact-link:hover {
- @apply bg-blue-700;
- }
- .artifact-item {
- @apply bg-gray-200 my-3;
- }
- .artifact-item .artifact-contents {
- @apply p-4;
- }
- @tailwind utilities;
|