fix: update icon paths in Vitepress config and theme for consistency; adjust typography max-width for improved readability

Author: onmax

docs/.vitepress/config.ts

@@ -12,7 +12,7 @@ export default defineNimiqVitepressConfig({
     modules: [
       {
         subpath: 'nimiq-css',
-        icon: 'i-custom:nimiq-css',
+        icon: 'i-local:nimiq-css',
         defaultPageLink: '/nimiq-css/getting-started',
         text: 'Nimiq CSS',
         description: 'The CSS framework',
@@ -67,7 +67,7 @@ export default defineNimiqVitepressConfig({
       {
         subpath: 'frankenstein',
         text: 'Nimiq Frankenstein',
-        icon: 'i-custom:frankenstein',
+        icon: 'i-local:frankenstein',
         defaultPageLink: '/frankenstein/getting-started',
         description: 'The Vue 3 components',
         sidebar: [
@@ -82,7 +82,7 @@ export default defineNimiqVitepressConfig({
             items: [
               {
                 text: 'Dialog Components',
-                icon: 'i-custom:modal',
+                icon: 'i-local:modal',
                 items: [
                   { text: 'Basic Modal', link: '/frankenstein/components/basic-modal' },
                   { text: 'Nested Modal', link: '/frankenstein/components/nested-modal' },
@@ -100,7 +100,7 @@ export default defineNimiqVitepressConfig({
       {
         subpath: 'vitepress-theme',
         text: 'Vitepress Theme',
-        icon: 'i-custom:nimiq-vitepress',
+        icon: 'i-local:nimiq-vitepress',
         defaultPageLink: '/vitepress-theme',
         description: 'Your Vitepress with Nimiq',
         sidebar: [
@@ -128,7 +128,7 @@ export default defineNimiqVitepressConfig({
       {
         subpath: 'nimiq-icons',
         text: 'Nimiq Icons',
-        icon: 'i-custom:nimiq-vitepress',
+        icon: 'i-local:nimiq-vitepress',
         defaultPageLink: '/nimiq-icons/explorer',
         description: 'The Iconify Set for Nimiq',
         sidebar: [

docs/vitepress-theme/index.md

@@ -55,7 +55,7 @@ export const themeConfig = {
       subpath: '/vitepress-theme',
 
       // This will be set as a class on a div element. This works great for UnoCSS Icons preset. Let me know if you need help with other icon libraries.
-      icon: 'i-custom:nimiq-css',
+      icon: 'i-local:nimiq-css',
 
       // This will be the default page link when the user clicks on the selector
       defaultPageLink: '/your-submodule/getting-started',

packages/nimiq-css/src/css/typography.css

@@ -82,7 +82,7 @@
 
   *:not(:where(.nq-raw, .nq-raw *, .nq-not-prose, .nq-not-prose *, .shiki *)) {
     line-height: 1.5;
-    max-width: var(--nq-prose-max-width, 780px);
+    max-width: var(--nq-prose-max-width, 78ch);
     margin-left: auto;
     margin-right: auto;
     font-family: var(--nq-font-sans, 'Mulish');

packages/nimiq-vitepress-theme/src/layout/Layout.vue

@@ -40,6 +40,7 @@ const isMobileOrTablet = breakpoints.smaller('lg')
         <Sidebar v-if="showSidebar" w="$nq-sidebar-width" />
       </div>
       <main
+        of-hidden
         dark:bg-neutral-1100 min-h-screen flex-1 min-w-0 :class="{
           'md:max-w-1220 md:mx-auto': !showSidebar && !showSecondarySidebar,
         }"

packages/nimiq-vitepress-theme/src/layout/PageContent.vue

@@ -24,7 +24,7 @@ const { showSourceCode, showCopyMarkdown, editUrl, sourceCodeUrl, sourceCodeLabe
       'xl:f-px-xl': !showSecondarySidebar,
     }" f-pt-sm f="$px $px-min-48 $px-max-72" pb="f-xl xl:sm" flex="~ gap-16" relative h-full
   >
-    <div flex="~ col" h-full flex-1 max-w-full>
+    <div flex="~ col wrap gap-8" h-full flex-1 max-w-full>
       <div v-if="showBreadcrumbs || showSourceCode || showCopyMarkdown" f-pb-lg flex="~ items-center justify-between">
         <ul v-if="showBreadcrumbs" flex="~ items-center gap-12">
           <li v-for="({ text, icon }, i) in breadcrumbs" :key="text" contents w-max>
@@ -55,7 +55,7 @@ const { showSourceCode, showCopyMarkdown, editUrl, sourceCodeUrl, sourceCodeLabe
         </div>
       </div>
 
-      <article flex-1 class="nq-prose" f-pb="lg md:3xl" var:nq-prose-max-width:none>
+      <article flex-1 class="nq-prose" f-pb="lg md:3xl">
         <Content max-w-none px-0 />
         <Changelog v-if="showChangelog" />
       </article>