initial commit

src/resources/css/app.css

@@ -0,0 +1,108 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+@import 'typography.css';
+
+@import 'components/buttons.css';
+@import 'components/cards.css';
+@import 'components/tables.css';
+
+body {
+    overflow: auto;
+    scrollbar-gutter: stable both-edges;
+}
+
+@media (max-width: 1023px) {
+    .grid-container {
+        @apply grid-cols-1;
+        gap: 2em 0em;
+        grid-template-cols: minmax(80px, 1fr);
+        grid-template-areas:
+            "nav"
+            "main";
+    }
+
+    .nav {
+        @apply grid;
+        grid-template-rows: minmax(80px, 1fr);
+        grid-template-areas:
+            "navh"
+            "navc";
+        grid-area: nav;
+    }
+
+    .navh {
+        grid-area: navh;
+    }
+
+    .navc {
+        @apply flex flex-col;
+        grid-area: navc;
+    }
+
+    .main {
+        @apply grid pb-8;
+        grid-template-areas:
+            "mainc";
+        grid-area: main;
+    }
+
+    .mainh {
+        @apply hidden;
+        grid-area: mainh;
+    }
+
+    .mainc {
+        grid-area: mainc;
+    }
+}
+
+@media (min-width: 1024px) {
+    .grid-container {
+        @apply grid-cols-2;
+        gap: 0em 3em;
+        grid-template-columns: 300px 1fr;
+        grid-template-areas:
+            "nav main";
+    }
+
+    .nav {
+        @apply grid grid-cols-1 grid-flow-row;
+        gap: 2em 0em;
+        grid-template-rows: 80px 1fr;
+        grid-template-areas:
+            "navh"
+            "navc";
+        grid-area: nav;
+    }
+
+    .navh {
+        grid-area: navh;
+    }
+
+    .navc {
+        grid-area: navc;
+    }
+
+    .main {
+        @apply grid grid-cols-1 grid-flow-row pb-8;
+        gap: 2em 0em;
+        grid-template-rows: 80px 1fr;
+        grid-template-areas:
+            "mainh"
+            "mainc";
+        grid-area: main;
+    }
+
+    .mainh {
+        @apply flex flex-row items-stretch justify-between;
+        grid-area: mainh;
+    }
+
+    .mainc {
+        @apply grid grid-cols-6 gap-8;
+        grid-template-rows: min-content 1fr;
+        grid-area: mainc;
+    }
+}

src/resources/css/components/buttons.css

@@ -0,0 +1,23 @@
+.button {
+    @apply flex flex-row items-center;
+}
+
+.button-primary {
+    @apply border-blue-300 bg-gradient-to-br from-blue-400 to-blue-700;
+}
+
+.button-secondary {
+    @apply border-indigo-300 bg-gradient-to-br from-indigo-400 to-indigo-700;
+}
+
+.button-tertiary {
+    @apply border-blue-300 bg-gradient-to-br from-green-400 to-blue-500;
+}
+
+.button-success {
+    @apply border-green-300 bg-gradient-to-br from-green-400 to-green-700;
+}
+
+.button-danger {
+    @apply border-red-300 bg-gradient-to-br from-red-400 to-red-700;
+}

src/resources/css/components/cards.css

@@ -0,0 +1,11 @@
+.card {
+    @apply flex flex-col nm-flat-white dark:nm-flat-gray-700 border border-gray-100 dark:border-gray-800 overflow-hidden rounded-lg;
+}
+
+.card .card-header {
+    @apply px-4 py-2 rounded-t-lg border-b-2 border-blue-600 font-semibold;
+}
+
+.card .card-body {
+    @apply px-4 py-3 rounded-b-lg;
+}

src/resources/css/components/tables.css

@@ -0,0 +1,13 @@
+.table thead tr {
+    @apply border-b-2 border-gray-700 uppercase text-left;
+}
+
+.table-fuzzy-hover tbody:hover td {
+    color: transparent;
+    text-shadow: 0 0 2px #999;
+}
+
+.table-fuzzy-hover tbody:hover tr:hover td {
+    color: #444;
+    text-shadow: 0 1px 0 #fff;
+}

src/resources/css/typography.css

@@ -0,0 +1,47 @@
+@font-face {
+    font-family: "Nunito";
+    src: url('/fonts/Nunito/Nunito-Regular.woff2') format("woff2");
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Nunito";
+    src: url('/fonts/Nunito/Nunito-Italic.woff2') format("woff2");
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Nunito";
+    src: url('/fonts/Nunito/Nunito-SemiBold.woff2') format("woff2");
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Nunito";
+    src: url('/fonts/Nunito/Nunito-SemiBoldItalic.woff2') format("woff2");
+    font-weight: 600;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Nunito";
+    src: url('/fonts/Nunito/Nunito-Bold.woff2') format("woff2");
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Nunito";
+    src: url('/fonts/Nunito/Nunito-BoldItalic.woff2') format("woff2");
+    font-weight: 700;
+    font-style: italic;
+    font-display: swap;
+}