Skip to content

Commit 5ec9716

Browse files
KTibowKTibow
committed
oh right, it doesn't regen automatically
1 parent 4282ab1 commit 5ec9716

File tree

1 file changed

+165
-165
lines changed

1 file changed

+165
-165
lines changed

‎static/llms.txt

+165-165
Original file line numberDiff line numberDiff line change
@@ -349,207 +349,207 @@ Here's an even more complicated example - a partial clone of the M3 documentatio
349349
/* snip: theme snippet */
350350

351351
body {
352-
display: flex;
353-
height: 100dvh;
354-
margin: 0;
355-
box-sizing: border-box;
356-
background: rgb(var(--m3-scheme-background));
357-
color: rgb(var(--m3-scheme-on-background));
352+
display: flex;
353+
height: 100dvh;
354+
margin: 0;
355+
box-sizing: border-box;
356+
background: rgb(var(--m3-scheme-background));
357+
color: rgb(var(--m3-scheme-on-background));
358358
}
359359
@media (width < 37.5rem) {
360-
body {
361-
flex-direction: column-reverse;
362-
--m3-util-bottom-offset: 5rem;
363-
}
360+
body {
361+
flex-direction: column-reverse;
362+
--m3-util-bottom-offset: 5rem;
363+
}
364364
}
365365
img {
366-
max-width: 100%;
366+
max-width: 100%;
367367
}
368368
/* not implemented: a comprehensive css reset */
369369
```
370370

371371
```svelte +layout.svelte
372372
<script lang="ts">
373-
import { NavList, NavListButton, FAB } from 'm3-svelte';
374-
import iconSearch from '@ktibow/iconset-material-symbols/search';
375-
import iconHome from '@ktibow/iconset-material-symbols/home';
376-
import iconApps from '@ktibow/iconset-material-symbols/apps';
377-
import iconCode from '@ktibow/iconset-material-symbols/code';
378-
import iconBook from '@ktibow/iconset-material-symbols/book';
379-
import iconPalette from '@ktibow/iconset-material-symbols/palette';
380-
import iconExtension from '@ktibow/iconset-material-symbols/extension';
381-
import iconPages from '@ktibow/iconset-material-symbols/pages';
382-
import './layout.css';
383-
384-
// not implemented: using an outlined icon if not selected
385-
const navItems = [
386-
{ icon: iconHome, label: 'Home', id: 'home' },
387-
{ icon: iconApps, label: 'Get started', id: 'get-started' },
388-
{ icon: iconCode, label: 'Develop', id: 'develop' },
389-
{ icon: iconBook, label: 'Foundations', id: 'foundations' },
390-
{ icon: iconPalette, label: 'Styles', id: 'styles' },
391-
{ icon: iconExtension, label: 'Components', id: 'components' },
392-
{ icon: iconPages, label: 'Blog', id: 'blog' }
393-
];
373+
import { NavList, NavListButton, FAB } from 'm3-svelte';
374+
import iconSearch from '@ktibow/iconset-material-symbols/search';
375+
import iconHome from '@ktibow/iconset-material-symbols/home';
376+
import iconApps from '@ktibow/iconset-material-symbols/apps';
377+
import iconCode from '@ktibow/iconset-material-symbols/code';
378+
import iconBook from '@ktibow/iconset-material-symbols/book';
379+
import iconPalette from '@ktibow/iconset-material-symbols/palette';
380+
import iconExtension from '@ktibow/iconset-material-symbols/extension';
381+
import iconPages from '@ktibow/iconset-material-symbols/pages';
382+
import './layout.css';
383+
384+
// not implemented: using an outlined icon if not selected
385+
const navItems = [
386+
{ icon: iconHome, label: 'Home', id: 'home' },
387+
{ icon: iconApps, label: 'Get started', id: 'get-started' },
388+
{ icon: iconCode, label: 'Develop', id: 'develop' },
389+
{ icon: iconBook, label: 'Foundations', id: 'foundations' },
390+
{ icon: iconPalette, label: 'Styles', id: 'styles' },
391+
{ icon: iconExtension, label: 'Components', id: 'components' },
392+
{ icon: iconPages, label: 'Blog', id: 'blog' }
393+
];
394394
</script>
395395

396396
<div class="nav">
397-
<NavList type="auto">
398-
<div class="search">
399-
<FAB icon={iconSearch} />
400-
</div>
401-
{#each navItems as item}
402-
<!-- not implemented: the ability to click on a destination -->
397+
<NavList type="auto">
398+
<div class="search">
399+
<FAB icon={iconSearch} />
400+
</div>
401+
{#each navItems as item}
402+
<!-- not implemented: the ability to click on a destination -->
403403
<!-- (in that case NavListLink would be better) -->
404-
<NavListButton type="auto" icon={item.icon} selected={item.id == 'components'}>
405-
{item.label}
406-
</NavListButton>
407-
{/each}
408-
</NavList>
404+
<NavListButton type="auto" icon={item.icon} selected={item.id == 'components'}>
405+
{item.label}
406+
</NavListButton>
407+
{/each}
408+
</NavList>
409409
</div>
410410
<div class="main">
411-
<slot />
411+
<slot />
412412
</div>
413413

414414
<style>
415-
.main {
416-
padding: 0.5rem;
417-
overflow-y: auto;
418-
flex: 1;
419-
}
420-
421-
@media (width < 37.5rem) {
422-
.nav {
423-
background: rgb(var(--m3-scheme-surface-container));
424-
}
425-
.search {
426-
position: fixed;
427-
right: 1.5rem;
428-
bottom: calc(var(--m3-util-bottom-offset) + 1.5rem);
429-
}
430-
}
431-
432-
@media (width >= 37.5rem) {
433-
.nav {
434-
width: 5rem;
435-
height: 100dvh;
436-
}
437-
.search {
438-
align-self: center;
439-
}
440-
}
415+
.main {
416+
padding: 0.5rem;
417+
overflow-y: auto;
418+
flex: 1;
419+
}
420+
421+
@media (width < 37.5rem) {
422+
.nav {
423+
background: rgb(var(--m3-scheme-surface-container));
424+
}
425+
.search {
426+
position: fixed;
427+
right: 1.5rem;
428+
bottom: calc(var(--m3-util-bottom-offset) + 1.5rem);
429+
}
430+
}
431+
432+
@media (width >= 37.5rem) {
433+
.nav {
434+
width: 5rem;
435+
height: 100dvh;
436+
}
437+
.search {
438+
align-self: center;
439+
}
440+
}
441441
</style>
442442
```
443443

444444
```svelte +page.svelte
445445
<script lang="ts">
446-
import { Button, Icon } from 'm3-svelte';
447-
import iconInfo from '@ktibow/iconset-material-symbols/info';
448-
import iconSpecs from '@ktibow/iconset-material-symbols/rule';
449-
import iconGuidelines from '@ktibow/iconset-material-symbols/lightbulb';
450-
import iconAccessibility from '@ktibow/iconset-material-symbols/accessibility';
451-
452-
let currentTab = 'overview';
453-
const tabs = [
454-
{ icon: iconInfo, label: 'Overview', id: 'overview' },
455-
{ icon: iconSpecs, label: 'Specs', id: 'specs' },
456-
{ icon: iconGuidelines, label: 'Guidelines', id: 'guidelines' },
457-
{ icon: iconAccessibility, label: 'Accessibility', id: 'accessibility' }
458-
];
446+
import { Button, Icon } from 'm3-svelte';
447+
import iconInfo from '@ktibow/iconset-material-symbols/info';
448+
import iconSpecs from '@ktibow/iconset-material-symbols/rule';
449+
import iconGuidelines from '@ktibow/iconset-material-symbols/lightbulb';
450+
import iconAccessibility from '@ktibow/iconset-material-symbols/accessibility';
451+
452+
let currentTab = 'overview';
453+
const tabs = [
454+
{ icon: iconInfo, label: 'Overview', id: 'overview' },
455+
{ icon: iconSpecs, label: 'Specs', id: 'specs' },
456+
{ icon: iconGuidelines, label: 'Guidelines', id: 'guidelines' },
457+
{ icon: iconAccessibility, label: 'Accessibility', id: 'accessibility' }
458+
];
459459
</script>
460460

461461
<div class="header">
462-
<div class="info">
463-
<h1 class="m3-font-display-large">Lists</h1>
464-
<p class="m3-font-title-large">Lists are continuous, vertical indexes of text and images</p>
465-
</div>
466-
<img
467-
src="https://picsum.photos/id/12/1000/562"
468-
alt="A list in a recipe app"
469-
class="preview-image"
470-
/>
462+
<div class="info">
463+
<h1 class="m3-font-display-large">Lists</h1>
464+
<p class="m3-font-title-large">Lists are continuous, vertical indexes of text and images</p>
465+
</div>
466+
<img
467+
src="https://picsum.photos/id/12/1000/562"
468+
alt="A list in a recipe app"
469+
class="preview-image"
470+
/>
471471
</div>
472472

473473
<div class="tabs">
474-
{#each tabs as tab}
475-
<button
476-
class="m3-font-title-medium"
477-
disabled={currentTab == tab.id}
478-
on:click={() => (currentTab = tab.id)}
479-
>
480-
<Icon icon={tab.icon} width="1.5rem" height="1.5rem" />
481-
{tab.label}
482-
</button>
483-
{/each}
474+
{#each tabs as tab}
475+
<button
476+
class="m3-font-title-medium"
477+
disabled={currentTab == tab.id}
478+
on:click={() => (currentTab = tab.id)}
479+
>
480+
<Icon icon={tab.icon} width="1.5rem" height="1.5rem" />
481+
{tab.label}
482+
</button>
483+
{/each}
484484
</div>
485485

486486
<article>
487-
{Array.from({ length: 200 }, () => 'Lorem ipsum.').join(' ')}
487+
{Array.from({ length: 200 }, () => 'Lorem ipsum.').join(' ')}
488488
</article>
489489

490490
<style>
491-
.header {
492-
display: flex;
493-
gap: 0.5rem;
494-
495-
> * {
496-
border-radius: var(--m3-util-rounding-large);
497-
min-width: 0;
498-
flex: 1;
499-
}
500-
> .info {
501-
display: flex;
502-
flex-direction: column;
503-
justify-content: center;
504-
505-
background-color: rgb(var(--m3-scheme-surface-container));
506-
padding: 2rem;
507-
508-
> * {
509-
margin: 0;
510-
}
511-
}
512-
}
513-
514-
.tabs {
515-
display: flex;
516-
flex-direction: column;
517-
background-color: rgb(var(--m3-scheme-surface-container));
518-
border-radius: 3rem;
519-
margin-top: 0.5rem;
520-
flex-shrink: 0;
521-
522-
@media (width >= 37.5rem) {
523-
flex-direction: row;
524-
525-
> * {
526-
flex: 1;
527-
}
528-
}
529-
530-
> * {
531-
display: flex;
532-
gap: 1rem;
533-
align-items: center;
534-
justify-content: center;
535-
536-
padding: 0;
537-
border: none;
538-
height: 6rem;
539-
border-radius: inherit;
540-
background-color: inherit;
541-
color: inherit;
542-
flex-shrink: 0;
543-
544-
transition: all 200ms;
545-
cursor: pointer;
546-
547-
&:disabled {
548-
background-color: rgb(var(--m3-scheme-secondary-container));
549-
color: rgb(var(--m3-scheme-on-surface-container));
550-
}
551-
}
552-
}
491+
.header {
492+
display: flex;
493+
gap: 0.5rem;
494+
495+
> * {
496+
border-radius: var(--m3-util-rounding-large);
497+
min-width: 0;
498+
flex: 1;
499+
}
500+
> .info {
501+
display: flex;
502+
flex-direction: column;
503+
justify-content: center;
504+
505+
background-color: rgb(var(--m3-scheme-surface-container));
506+
padding: 2rem;
507+
508+
> * {
509+
margin: 0;
510+
}
511+
}
512+
}
513+
514+
.tabs {
515+
display: flex;
516+
flex-direction: column;
517+
background-color: rgb(var(--m3-scheme-surface-container));
518+
border-radius: 3rem;
519+
margin-top: 0.5rem;
520+
flex-shrink: 0;
521+
522+
@media (width >= 37.5rem) {
523+
flex-direction: row;
524+
525+
> * {
526+
flex: 1;
527+
}
528+
}
529+
530+
> * {
531+
display: flex;
532+
gap: 1rem;
533+
align-items: center;
534+
justify-content: center;
535+
536+
padding: 0;
537+
border: none;
538+
height: 6rem;
539+
border-radius: inherit;
540+
background-color: inherit;
541+
color: inherit;
542+
flex-shrink: 0;
543+
544+
transition: all 200ms;
545+
cursor: pointer;
546+
547+
&:disabled {
548+
background-color: rgb(var(--m3-scheme-secondary-container));
549+
color: rgb(var(--m3-scheme-on-surface-container));
550+
}
551+
}
552+
}
553553
</style>
554554
```
555555

0 commit comments

Comments
 (0)