Initial commit

resources/sass/app.scss

@@ -0,0 +1,46 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import 'elements/transitions';
+
+
+body.dark * {
+  @apply border-gray-600
+}
+
+#app {
+  font-family: 'Inter', sans-serif;
+   @apply min-h-screen;
+}
+
+@layer base {
+
+  p, div {
+    @apply text-gray-800 dark:text-white;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    @apply text-gray-900 dark:text-white;
+  }
+
+  h1 {
+    @apply text-3xl sm:text-4xl font-extrabold;
+  }
+
+  h2 {
+    @apply text-3xl font-extrabold;
+  }
+
+  a {
+    @apply text-nt-blue hover:underline;
+  }
+}
+
+.bg-white {
+  @apply dark:bg-notion-dark;
+}
+
+.bg-gray-50 {
+  @apply dark:bg-notion-dark-light;
+}

resources/sass/elements/_buttons.scss

@@ -0,0 +1,25 @@
+.btn-loading {
+  position: relative;
+  pointer-events: none;
+  color: transparent !important;
+
+  &:after {
+    animation: spinAround 500ms infinite linear;
+    border: 2px solid #dbdbdb;
+    border-radius: 50%;
+    border-right-color: transparent;
+    border-top-color: transparent;
+    content: "";
+    display: block;
+    height: 1em;
+    width: 1em;
+    position: absolute;
+    left: calc(50% - (1em / 2));
+    top: calc(50% - (1em / 2));
+  }
+}
+
+@keyframes spinAround {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(359deg); }
+}

resources/sass/elements/_card.scss

@@ -0,0 +1,3 @@
+.card {
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+}

resources/sass/elements/_navbar.scss

@@ -0,0 +1,19 @@
+.navbar {
+  font-weight: 600;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+}
+
+.nav-item {
+  .dropdown-menu {
+    border: none;
+    margin-top: .5rem;
+    border-top: 1px solid #f2f2f2 !important;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08);
+  }
+}
+
+.nav-link {
+  .svg-inline--fa {
+    font-size: 1.4rem;
+  }
+}

resources/sass/elements/_transitions.scss

@@ -0,0 +1,17 @@
+.page-enter-active,
+.page-leave-active {
+  transition: opacity .2s;
+}
+.page-enter,
+.page-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity .15s
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0
+}