@iqual/nuxt-icms 1.4.10 → 1.5.0

package/app.config.ts

@@ -1 +1,2 @@
-export default defineAppConfig({})
+export default defineAppConfig({
+})

package/app.vue

@@ -1,22 +1,24 @@
 <template>
-  <div class="bk-main-canvas relative">
-    <ClientOnly>
-      <div
-        v-if="drupalUser.accessToolbar && !isEditing"
-        class="hidden border-b border-b-gray-100 bg-white 2xl:block"
-      >
-        <VuepalAdminToolbar :key="language" />
-        <div class="flex">
-          <div class="mx-auto w-auto bg-white py-8 xl:min-w-[1174px]">
-            <VuepalLocalTasks />
+  <UApp>
+    <div class="bk-main-canvas relative">
+      <ClientOnly>
+        <div
+          v-if="drupalUser.accessToolbar && !isEditing"
+          class="hidden border-b border-b-gray-100 bg-white 2xl:block"
+        >
+          <VuepalAdminToolbar :key="language" />
+          <div class="flex">
+            <div class="mx-auto w-auto bg-white py-8 xl:min-w-[1174px]">
+              <VuepalLocalTasks />
+            </div>
           </div>
         </div>
-      </div>
-    </ClientOnly>
-    <NuxtLayout>
-      <NuxtPage />
-    </NuxtLayout>
-  </div>
+      </ClientOnly>
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+    </div>
+  </UApp>
 </template>
 
 <script setup lang="ts">

package/assets/css/base/base.css

@@ -0,0 +1,3 @@
+html {
+  @apply scroll-smooth hyphens-auto bg-white font-sans text-black;
+}

package/assets/css/base/typography.css

@@ -0,0 +1,44 @@
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  @apply hyphens-auto font-bold;
+}
+
+h1,
+.h1 {
+  @apply mb-4 text-5xl lg:text-7xl;
+}
+
+h2,
+.h2 {
+  @apply mb-4 text-3xl leading-tight lg:text-5xl;
+}
+
+h3,
+.h3 {
+  @apply mb-4 text-2xl leading-tight lg:text-4xl;
+}
+
+h4,
+.h4 {
+  @apply mb-4 text-xl leading-tight lg:text-3xl;
+}
+
+h5,
+.h5 {
+  @apply mb-2 text-lg lg:text-2xl;
+}
+
+h6,
+.h6 {
+  @apply mb-2 text-base lg:text-lg;
+}

package/assets/css/ckeditor.css

@@ -1,19 +1,14 @@
-@import './components/ck-content.css';
+/* Vendor stuff */
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@import './theme/theme.css';
+@import "./base/typography.css";
+@import "./components/ck-content.css";
 
-.ck-content {
-  @apply font-sans;
-  & > ul {
-    @apply m-0;
-    & > li {
-      @apply list-disc;
-    }
-  }
-
-  strong {
-    @apply font-bold;
+.ck.ck-editor {
+  a {
+    text-decoration-style: inherit;
   }
 }
+

package/assets/css/components/ck-content.css

@@ -1,65 +1,39 @@
-@import './link.css';
-@tailwind components;
+.ck-content {
+  @apply break-words;
 
-@layer components {
-  .ck-content {
-    @apply break-words;
-
-    /* &:not(.is-small) {
-      @apply font-regular md:text-lg xl:text-xl;
-    }
-
-    h2 {
-      @apply text-3xl text-primary-500 lg:text-4xl;
-    }
-
-    h3 {
-      @apply text-2xl lg:text-3xl;
-    }
-
-    h4 {
-      @apply text-xl lg:text-2xl;
-    }
-
-    h5 {
-      @apply text-lg font-bold lg:text-xl;
+  ol,
+  ul {
+    @apply mb-6;
+    li {
+      @apply ml-6;
     }
+  }
 
-    p {
-      @apply not-last:mb-5 not-first:mt-5 xl:not-last:mb-6 xl:not-first:mt-6;
-    }
+  ol {
+    @apply list-decimal;
+  }
+  ul {
+    @apply list-disc;
+  }
 
-    a {
-      @apply text-primary-300 underline;
-    }
+  strong {
+    @apply font-bold;
+  }
 
-    strong {
-      @apply text-primary-300;
-    } */
+  a {
+    @apply underline hover:no-underline;
+  }
 
-    ol,
-    ul {
-      @apply my-4;
-      li {
-        @apply ml-6;
-      }
-    }
+  p {
+    @apply mb-2;
+  }
 
-    ol {
-      @apply list-decimal;
-    }
-    ul {
-      @apply list-disc;
-    }
+  .text-lead {
+    @apply text-lg font-medium;
   }
 
-  /* List margin fix for Box paragraph */
-  .box-paragraph .ck-content {
-    ol,
-    ul {
-      li {
-        @apply ml-0 pb-0 pl-0;
-      }
-    }
+  .text-small {
+    @apply text-sm;
   }
 }
+

package/assets/css/components/container.css

@@ -1,17 +1,19 @@
-@layer components {
-  .container {
-    @apply px-4;
+.container {
+  @apply px-4;
+
+  @variant md {
+    @apply px-8;
+  }
 
-    @screen md {
-      @apply px-8;
-    }
+  @variant lg {
+    @apply px-12;
+  }
 
-    @screen lg {
-      @apply px-12;
-    }
+  @variant xl {
+    @apply mx-auto max-w-345;
+  }
 
-    @screen xl {
-      @apply mx-auto max-w-[1380px];
-    }
+  .container {
+    @apply px-0;
   }
 }

package/assets/css/components/decorations.css

@@ -0,0 +1,11 @@
+.gradient-overlay {
+  &:before {
+    content: '';
+    @apply absolute inset-0;
+    background: linear-gradient(
+      0deg,
+      rgba(0, 0, 0, 0.5) 12.45%,
+      rgba(0, 0, 0, 0) 40.3%
+    );
+  }
+}

package/assets/css/components/editor.css

@@ -0,0 +1,17 @@
+.droptarget {
+  --grey-light: var(--blokkli-editor-grey-light, #cacaca40);
+  --grey: var(--blokkli-editor-grey, lightgrey);
+
+  @apply p-4;
+
+  outline: 2px dashed var(--grey);
+  border-radius: 4px;
+  position: relative;
+  background: repeating-linear-gradient(
+    45deg,
+    var(--grey-light) 0,
+    var(--grey-light) 3px,
+    transparent 3px,
+    transparent 9px
+  );
+}