An experimental TypeSpec syntax for Lexicon

tweaks

+10 -13
-2
README.md
··· 4 4 5 5 See https://typelex.org/ 6 6 7 - **This is an early-stage experiment. It’s probably buggy as hell.** 8 - 9 7 Design is not final and might change. Ideas welcome. 10 8 11 9 ## Playground
+10 -11
packages/website/src/pages/index.astro
··· 1 1 --- 2 - import Playground from '../components/Playground'; 3 2 import { highlightCode } from '../utils/shiki'; 4 3 import { compileToJson } from '../utils/compile'; 5 4 import { createPlaygroundUrl } from '../utils/playground-url'; ··· 236 235 <nav class="hero-actions"> 237 236 <a href="#install" class="install-cta">Try It</a> 238 237 <a href="https://tangled.org/@danabra.mov/typelex/blob/main/DOCS.md" target="_blank" rel="noopener noreferrer" class="star-btn"> 239 - Read Documentation 238 + Read Docs 240 239 </a> 241 240 </nav> 242 241 </header> ··· 277 276 <h2>Install</h2> 278 277 <div class="install-grid"> 279 278 <div class="install-notice"> 280 - <p class="notice-text">This is an early-stage experiment. It's probably buggy as hell.</p> 279 + <p class="notice-text">This is an early-stage experiment. Design and syntax may change.</p> 281 280 </div> 282 281 <div class="install-step playground-step"> 283 282 <div class="step-number">0</div> ··· 498 497 499 498 header { 500 499 text-align: center; 501 - padding: 3rem 1rem 2rem; 500 + padding: 3rem 1rem 0.5rem; 502 501 margin: 0 auto; 503 502 } 504 503 ··· 649 648 650 649 .hero-actions { 651 650 display: flex; 652 - flex-direction: column; 653 - gap: 1rem; 651 + flex-direction: row; 652 + flex-wrap: wrap; 653 + gap: 0.75rem; 654 654 margin-top: 2.5rem; 655 655 align-items: center; 656 + justify-content: center; 656 657 } 657 658 658 659 @media (min-width: 640px) { 659 660 .hero-actions { 660 - flex-direction: row; 661 - justify-content: center; 662 661 gap: 1rem; 663 662 } 664 663 } ··· 797 796 798 797 .install-notice { 799 798 padding: 1rem 1.5rem; 800 - background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); 801 - border: 2px solid #ef4444; 799 + background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%); 800 + border: 2px solid #f59e0b; 802 801 border-radius: 10px; 803 802 text-align: left; 804 803 } ··· 808 807 font-size: 1.0625rem; 809 808 line-height: 1.5; 810 809 font-weight: 700; 811 - color: #991b1b; 810 + color: #92400e; 812 811 } 813 812 814 813 .install-grid {