lerobot/robot-learning-tutorial

1---2interface Props {3    source?: string;4}5 6const { source } = Astro.props;7---8 9<blockquote class="quote">10    <div class="quote__text">11        <slot />12    </div>13    {14        source && (15            <footer class="quote__footer">16                <span class="quote__source" set:html={source} />17            </footer>18        )19    }20</blockquote>21 22<style>23    .quote {24        font-family: var(--default-font-family);25        margin: 32px 0;26        max-width: 600px;27        text-align: left;28        position: relative;29        padding: 0;30        border: none;31        background: none;32        box-shadow: none;33        white-space: normal;34    }35 36    .quote::before {37        content: '"';38        position: absolute;39        top: -24px;40        left: -30px;41        font-size: 8rem;42        font-family: var(--default-font-family);43        font-weight: 400;44        color: var(--text-color);45        opacity: 0.05;46        z-index: -1;47        line-height: 1;48        pointer-events: none;49    }50 51    .quote__text {52        font-size: 1.5rem;53        line-height: 1.4;54        font-style: normal;55        font-weight: 400;56        font-family:57            "SF Pro Text",58            -apple-system,59            BlinkMacSystemFont,60            "Segoe UI",61            sans-serif;62        color: var(--text-color);63        margin-bottom: 12px;64        padding: 0;65        letter-spacing: -0.01em;66    }67 68    .quote__text p {69        margin: 0;70    }71 72    .quote__footer {73        font-size: 0.875rem;74        color: var(--muted-color);75        display: flex;76        justify-content: flex-start;77        align-items: center;78        gap: 6px;79        margin-top: 0;80        font-family:81            "SF Pro Text",82            -apple-system,83            BlinkMacSystemFont,84            "Segoe UI",85            sans-serif;86    }87 88    .quote__source {89        font-weight: 500;90        opacity: 0.85;91        font-style: italic;92        color: var(--text-color);93    }94 95    .quote__source::before {96        content: "— ";97        font-style: normal;98    }99 100    @media (max-width: 640px) {101        .quote {102            margin: 24px 0;103            max-width: 100%;104        }105 106        .quote::before {107            font-size: 6rem;108            top: -18px;109            left: -16px;110        }111 112        .quote__text {113            font-size: 1.25rem;114            line-height: 1.45;115            padding: 0;116        }117 118        .quote__footer {119            flex-direction: row;120            gap: 6px;121            font-size: 0.8rem;122        }123    }124</style>125