styling tweaks after updating branch with main
MODIFY
src/assets/docs.scss
src/assets/docs.scss
.content-docs {
- line-height: 1.8;
+ line-height: 190%;
// Typography
h1,
h1,
.h1 {
- font-size: 3rem;
- line-height: 3.5rem;
+ font-size: var(--h3);
}
h2,
.h2 {
font-size: var(--h4);
- line-height: 2.5rem;
}
h3,
.h3 {
font-size: var(--p-large);
- line-height: 2rem;
}
a {
}
li {
+ // overide _forms.scss
+ margin-bottom: 0;
+
+ li {
margin-top: var(--macro);
}

MODIFY
src/components/docs/menu-section.svelte
src/components/docs/menu-section.svelte
: /\/docs\/$/.test(menuItem.path);
</script>
-<style>
+<style lang="scss">
+ // override _forms.scss
.menu-item {
- display: inline-block;
- @apply px-6;
- font-size: var(--p-large);
+ margin-bottom: 0;
}
- .submenu {
- @apply ml-4 mt-4;
- font-size: var(--p-medium);
+ .menu-container {
+ @apply px-6;
+ display: inline-block;
+ font-size: var(--p-large);
line-height: var(--x-small);
- }
- .isActiveSection {
+ &.isActiveSection {
@apply bg-white;
@apply py-6;
border-radius: 1rem;
box-shadow: var(--shadow);
}
+ }
+
+ .submenu {
+ @apply ml-4 mt-4;
+ font-size: var(--p-medium);
+ line-height: var(--x-small);
+ }
</style>
-<li>
- <div class:isActiveSection class="menu-item">
- <MenuLink href={menuItem.path} class="text-h6">{menuItem.title}</MenuLink>
+<li class="menu-item">
+ <div class:isActiveSection class="menu-container">
+ <MenuLink href={menuItem.path} class="text-large">{menuItem.title}</MenuLink
+ >
{#if menuItem.subMenu && isActiveSection}
<ul class="submenu">
{#each menuItem.subMenu as sub}
- <li>
+ <li class="menu-item">
<MenuLink href={sub.path}>{sub.title}</MenuLink>
</li>
{/each}

MODIFY
src/components/docs/menu.svelte
src/components/docs/menu.svelte
];
</script>
-<ul class="space-y-6">
+<ul class="space-y-8">
{#each MENU as menuItem}
<MenuSection {menuItem} />
{/each}

MODIFY
src/components/docs/search.svelte
src/components/docs/search.svelte
type="search"
placeholder="Search"
id={docSearchInputSelector}
- class="block w-full pl-11 pr-3 py-2 border border-transparent rounded-xl leading-5 bg-white text-gray-600 placeholder-gray-500 focus:outline-none focus:bg-white focus:border-white focus:ring-white focus:text-gray-900"
+ class="box-border block w-full pl-11 pr-3 py-2 border border-transparent rounded-xl leading-5 bg-white text-gray-600 placeholder-gray-500 focus:outline-none focus:bg-white focus:border-white focus:ring-white focus:text-gray-900"
/>
</div>
</div>

styling tweaks after updating branch with main