@visualizevalue/mint-app-base 0.0.1

package/.env.example

@@ -0,0 +1,26 @@
+# =========================
+#           BASE
+# =========================
+NITRO_PRESET=node_cluster
+NUXT_SSR=false
+NUXT_DEVTOOLS=true
+NUXT_PUBLIC_DOMAIN=localhost
+NUXT_PUBLIC_TITLE=Mint.VV
+NUXT_PUBLIC_DESCRIPTION=To mint is a human right.
+
+# =========================
+#       ARTIST SCOPE
+# =========================
+NUXT_PUBLIC_CREATOR_ADDRESS=0xc8f8e2F59Dd95fF67c3d39109ecA2e2A017D4c8a
+
+# =========================
+#         SERVICES
+# =========================
+NUXT_PUBLIC_BLOCK_EXPLORER=https://etherscan.io
+NUXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=
+
+# =========================
+#         ONCHAIN
+# =========================
+NUXT_PUBLIC_FACTORY_ADDRESS=0xfd0edC665A0566EF44f9BD7aB4E45DF7A7601a2b
+NUXT_PUBLIC_CHAIN_ID=11155111

package/README.md

@@ -0,0 +1,24 @@
+# Mint App
+
+This application is built with VueJS and Nuxt; two beautiful frameworks for building web based interfaces. Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+yarn install
+```
+
+## Development Server
+
+Start the development server on `http://mint.test:1618`:
+
+```bash
+yarn dev
+```
+
+## To-Do's
+
+- [ ] Refactor AppHeader titles (breadcrumb). This is quite hacky right now.
+

package/app/app.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
+</template>

package/app/assets/styles/animation.css

@@ -0,0 +1,50 @@
+.v-enter-active,
+.v-leave-active {
+  transition: opacity var(--speed) ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: all var(--speed) ease;
+  max-height: 100%;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  max-height: 0;
+}
+
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: translateY(var(--spacer));
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/app/assets/styles/base.css

@@ -0,0 +1,34 @@
+:root {
+  font-family: var(--font-family-main);
+  line-height: var(--line-height-base);
+  font-weight: var(--font-weight);
+  font-size: var(--rem);
+  font-style: normal;
+  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
+
+  @supports (font-variation-settings: normal) {
+    font-optical-sizing: auto;
+  }
+
+  background-color: var(--background);
+  color: var(--color);
+  color-scheme: dark;
+
+  text-transform: var(--text-transform);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+  letter-spacing: var(--letter-spacing);
+
+  * {
+    font-size: var(--font-base);
+  }
+}
+
+html,
+body {
+  overflow-x: hidden;
+}
+

package/app/assets/styles/cards.css

@@ -0,0 +1,20 @@
+.card {
+  display: grid;
+  gap: var(--spacer);
+  border: var(--border);
+  height: 100%;
+  padding: var(--spacer);
+
+  &.borderless {
+    padding: 0;
+    border: 0;
+  }
+
+  > * {
+    width: 100%;
+
+    place-self: center;
+    &:first-child { place-self: flex-start; }
+    &:last-child { place-self: flex-end; }
+  }
+}

package/app/assets/styles/custom-media.css

@@ -0,0 +1,4 @@
+@custom-media --xs (min-width: 24rem);
+@custom-media --sm (min-width: 27rem);
+@custom-media --md (min-width: 45rem);
+@custom-media --lg (min-width: 64rem);

package/app/assets/styles/custom-selectors.css

@@ -0,0 +1 @@
+@custom-selector :--highlight :hover, :active, :focus, .active;

package/app/assets/styles/forms.css

@@ -0,0 +1,183 @@
+.form-item,
+.button,
+button,
+input,
+textarea,
+select {
+  --padding-y: var(--size-3);
+  --padding-x: var(--size-5);
+  --background: var(--background);
+  --background-light: var(--gray-z-1);
+
+  width: 100%;
+  font-family: var(--font-family-ui);
+  font-weight: var(--font-weight);
+  transition: all var(--speed);
+  text-transform: var(--text-transform-ui);
+  user-select: none;
+  border-radius: 0;
+  background: var(--background);
+
+  &::placeholder {
+    text-transform: var(--text-transform-ui);
+  }
+
+  &:-internal-autofill-selected {
+    background: inherit;
+    background-image: none !important;
+  }
+
+  &:--highlight {
+    outline: none;
+  }
+}
+
+.button,
+.input,
+.textarea,
+.select {
+  min-height: calc(var(--size-7) + var(--size-2));
+  line-height: 1;
+}
+
+.input,
+.textarea,
+.select {
+  position: relative;
+  line-height: 0;
+  width: 100%;
+  background: var(--background);
+  padding: var(--padding-y) var(--padding-x);
+  text-transform: none;
+
+  border: var(--border);
+
+  font-weight: var(--font-weight);
+  letter-spacing: var(--letter-spacing-md);
+
+  transition: background var(--speed),
+              padding var(--speed),
+              border var(--speed),
+              color var(--speed);
+
+  &:--highlight {
+    background: var(--background-light);
+    border-color: var(--border-color-light);
+  }
+
+  &::placeholder {
+    color: var(--border-color-light);
+    opacity: 1;
+  }
+  &::-ms-input-placeholder {
+    color: var(--border-color-light);
+  }
+
+  &.small {
+    min-height: 0;
+    font-size: var(--font-sm);
+    padding: calc(var(--size-1) + var(--size-0)) var(--size-3);
+  }
+}
+
+.form-item {
+  border: var(--border);
+  display: flex;
+  align-items: center;
+  background: var(--background);
+  width: 100%;
+  max-width: -webkit-fill-available;
+
+  .input,
+  .textarea,
+  .select {
+    border: none;
+  }
+
+  &:has(.input:hover),
+  &:has(.input:focus) {
+    background: var(--background-light);
+  }
+  &:has(.input:focus) {
+    border-color: var(--border-color-light);
+  }
+
+  .prefix,
+  .suffix {
+    padding: 0 var(--padding-x);
+    color: var(--muted);
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .prefix {
+    border-right: var(--border);
+  }
+  .suffix {
+    border-left: var(--border);
+  }
+
+  /* If the prefix/suffix should look as if it's part of the content */
+  &.fluent {
+    .prefix,
+    .suffix {
+      border: none;
+    }
+    .prefix {
+      padding-right: var(--size-0);
+    }
+    .suffix {
+      padding-left: var(--size-0);
+    }
+
+    &:has(.prefix) {
+      .input,
+      .select,
+      .textarea {
+        padding-left: 0;
+      }
+    }
+  }
+}
+
+select.select,
+select.select:--highlight {
+  appearance: none;
+  line-height: 1;
+  background:
+    url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM4ODgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLWNoZXZyb24tZG93biI+PHBvbHlsaW5lIHBvaW50cz0iNiA5IDEyIDE1IDE4IDkiPjwvcG9seWxpbmU+PC9zdmc+),
+    var(--gray-z-0);
+  background-repeat: no-repeat, no-repeat;
+  background-position: calc(100% - var(--size-4)) 50%, 0% 0%;
+  background-size: var(--size-4), 100% 100%;
+  padding-right: var(--size-7) !important;
+
+  &.small {
+    background-position: calc(100% - var(--size-2)) 50%, 0% 0%;
+  }
+}
+
+form {
+  display: grid;
+  gap: var(--spacer);
+
+  label {
+    display: block;
+    font-family: var(--font-family-ui);
+    text-transform: var(--text-transform-ui);
+    margin: var(--size-2) 0;
+    color: var(--gray-z-7);
+    transition: all var(--speed);
+
+    > span:first-child {
+      display: block;
+      margin: 0 0 var(--size-2) 0
+    }
+
+    &:hover {
+      color: var(--color);
+    }
+  }
+}

package/app/assets/styles/index.css

@@ -0,0 +1,11 @@
+@import "./variables.css";
+@import "./normalize.css";
+@import "./base.css";
+@import "./text.css";
+@import "./utils.css";
+@import "./cards.css";
+@import "./forms.css";
+@import "./scroll.css";
+@import "./animation.css";
+@import "./prose.css";
+@import "./web3-modals.css";