165 lines
3.7 KiB
CSS
165 lines
3.7 KiB
CSS
html {
|
|
font-size: 16px;
|
|
}
|
|
|
|
body {
|
|
@apply m-0 p-0 w-dvw h-dvh min-w-dvw min-h-dvh bg-gray-100 font-sans antialiased;
|
|
|
|
&#app {
|
|
@apply grid;
|
|
grid-template-columns: 5rem auto;
|
|
grid-template-rows: 1fr 0;
|
|
}
|
|
|
|
&#auth {
|
|
@apply flex items-center justify-center;
|
|
|
|
header {
|
|
@apply flex flex-row items-center justify-between px-6 fixed top-0 left-0 h-20;
|
|
|
|
a {
|
|
@apply inline-flex items-center gap-2;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* primary app navigation on the left */
|
|
> nav {
|
|
@apply w-20 flex flex-col items-center justify-between;
|
|
|
|
/* top items */
|
|
.top {
|
|
@apply flex flex-col items-center pt-6 2xl:pt-8 mt-2px;
|
|
}
|
|
|
|
/* bottom items */
|
|
|
|
.bottom {
|
|
@apply pb-6 2xl:pb-8;
|
|
}
|
|
|
|
/* app buttons */
|
|
menu {
|
|
@apply flex flex-col gap-1 items-center mt-6;
|
|
|
|
li.app-button {
|
|
|
|
a {
|
|
@apply flex items-center justify-center p-3 bg-transparent text-black;
|
|
transition: background-color 100ms ease-in-out;
|
|
border-radius: 70% 50% 70% 30% / 60% 60% 60% 40%; /* blob 1 */
|
|
|
|
&:hover {
|
|
@apply bg-gray-200;
|
|
}
|
|
|
|
&.is-active {
|
|
@apply bg-cyan-400;
|
|
|
|
&:hover {
|
|
@apply bg-cyan-500;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(2) a {
|
|
border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%; /* blob 2 */
|
|
}
|
|
|
|
&:nth-child(3) a {
|
|
border-radius: 80% 65% 90% 50% / 90% 80% 75% 75%; /* blob 3 */
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
* primary content window defaults
|
|
*
|
|
* main
|
|
* aside (optional left bar, must include h1 page title)
|
|
* article (content pane; if no aside, header includes h1)
|
|
* header
|
|
* section
|
|
*/
|
|
main {
|
|
@apply rounded-lg bg-white;
|
|
|
|
/* app */
|
|
body#app & {
|
|
@apply grid grid-cols-1 m-2 ml-0;
|
|
|
|
/* if there's an aside, set the cols */
|
|
&:has(aside) {
|
|
grid-template-columns: minmax(20rem, 20dvw) auto;
|
|
}
|
|
}
|
|
|
|
/* auth screens */
|
|
body#auth & {
|
|
@apply w-1/2 mx-auto p-8;
|
|
min-width: 16rem;
|
|
max-width: 40rem;
|
|
}
|
|
|
|
/* left column */
|
|
aside {
|
|
@apply flex flex-col col-span-1 px-6 2xl:px-8 pb-8 h-full;
|
|
|
|
> h1 {
|
|
@apply flex items-center h-20;
|
|
}
|
|
}
|
|
|
|
/* main content wrapper */
|
|
article {
|
|
@apply grid grid-cols-1 w-full;
|
|
grid-template-rows: 5rem auto;
|
|
|
|
/* main content title and actions */
|
|
> header {
|
|
@apply flex flex-row items-center justify-between w-full;
|
|
|
|
/* if h1 exists it means there's no aside, so force the width from that */
|
|
h1 {
|
|
@apply flex items-center pl-6 2xl:pl-8;
|
|
width: minmax(20rem, 20dvw);
|
|
}
|
|
|
|
h2 {
|
|
@apply flex flex-row gap-1 items-center justify-start relative top-px;
|
|
|
|
> span {
|
|
@apply text-gray-700;
|
|
}
|
|
}
|
|
|
|
menu {
|
|
@apply flex flex-row items-center justify-end gap-2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media (width >= 96rem) { /* 2xl */
|
|
main {
|
|
aside {
|
|
> h1 {
|
|
@apply h-22;
|
|
}
|
|
}
|
|
article {
|
|
grid-template-rows: 5.5rem auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* app logo */
|
|
.logo {
|
|
@apply w-10 h-10 flex;
|
|
|
|
.overlay {
|
|
fill: var(--color-cyan-500);
|
|
}
|
|
}
|