more layout adjustments to match updated figma designs
MODIFY
src/assets/docs.scss
src/assets/docs.scss
tr + tr {
@apply border-t border-solid border-gray-400;
}
+
+ iframe {
+ width: 100%;
+ }
}

MODIFY
src/assets/scss/_variables.scss
src/assets/scss/_variables.scss
--micro: 1rem; /* should we invert micro and macro? */
--macro: 0.5rem;
- --shadow: 0rem 1rem 2.4rem 0rem rgba(0, 0, 0, 0.08);
+ --shadow: 0rem 0.625rem 1.5rem 0rem rgba(0, 0, 0, 0.08);
--border-light: 1px solid var(--sand-dark);

MODIFY
src/components/docs/menu-section.svelte
src/components/docs/menu-section.svelte
.isActiveSection {
@apply bg-white;
@apply py-6;
- border-radius: 1.6rem;
+ border-radius: 1rem;
box-shadow: var(--shadow);
}
</style>

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-3xl 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="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>

MODIFY
src/routes/docs/_layout.svelte
src/routes/docs/_layout.svelte
import Search from "../../components/docs/search.svelte";
</script>
-<div class="flex mx-auto max-w-row px-8 w-full">
- <div class="w-2/5">
+<div class="flex mx-auto max-w-row px-8 py-10 w-full">
+ <div class="w-2/5 pt-20">
<Menu />
</div>
<div class="w-3/5">

more layout adjustments to match updated figma designs