Revert "Revert "Students page""

src/app.css

@@ -53,6 +53,7 @@
     --color-white: hsl(0 0% 100%);
     --color-black: hsl(0 0% 0%);
     --color-transparent: rgba(0, 0, 0, 0);
+    --color-smooth: hsl(var(--color-greyscale-hue) 6%, 10%, 0.04);
     --color-greyscale-25: hsl(var(--color-greyscale-hue) 11% 98%);
     --color-greyscale-50: hsl(var(--color-greyscale-hue) 11% 94%);
     --color-greyscale-100: hsl(var(--color-greyscale-hue) 6% 90%);
@@ -68,8 +69,16 @@
     --color-greyscale-850: hsl(var(--color-greyscale-hue) 3% 14%);
     --color-greyscale-900: hsl(var(--color-greyscale-hue) 5.7% 10.4%);
 
+    /* utility colors */
+    --color-badge-bg-light: #f2c8d6;
+    --color-badge-border-light: #f69db7;
+    --color-badge-bg-dark: #2c2c2f;
+    --color-badge-border-dark: #39393c;
+
     /* Animations */
     --animate-scale-in: scale-in 200ms ease-out forwards;
+    --animate-text: fade-in 0.75s ease-in-out both, blur 0.75s ease-in-out both,
+        up 0.75s ease-in-out both;
 
     /* Pink polyfills */
     --transition: 0.2s;
@@ -84,6 +93,33 @@
         }
     }
 
+    @keyframes blur {
+        0% {
+            filter: blur(5px);
+        }
+        100% {
+            filter: blur(0);
+        }
+    }
+
+    @keyframes up {
+        0% {
+            transform: translateY(8px);
+        }
+        100% {
+            transform: translateY(0px);
+        }
+    }
+
+    @keyframes fade-in {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
     /* Fonts */
     --font-family-sans: 'Inter', arial, sans-serif;
     --font-family-mono: 'Fira Code', monospace;
@@ -152,12 +188,16 @@
     --color-primary: var(--color-greyscale-900);
     --color-secondary: var(--color-greyscale-700);
     --color-accent: var(--color-pink-600);
+    --color-badge-bg: var(--color-badge-bg-light);
+    --color-badge-border: var(--color-badge-border-light);
 }
 
 /* dark theme */
 .dark {
     --color-primary: var(--color-greyscale-100);
     --color-secondary: var(--color-greyscale-300);
+    --color-badge-bg: var(--color-badge-bg-dark);
+    --color-badge-border: var(--color-badge-border-dark);
 }
 
 /* Container */

src/lib/components/FooterNav.svelte

@@ -68,7 +68,8 @@
             ],
             Programs: [
                 { label: 'Heroes', href: '/heroes' },
-                { label: 'Startups', href: '/startups' }
+                { label: 'Startups', href: '/startups' },
+                { label: 'Students', href: '/students' }
             ],
             About: [
                 { label: 'Company', href: '/company' },
@@ -101,7 +102,7 @@
         {#each Object.entries(links) as [title, items]}
             <li class="web-footer-nav-main-item web-is-not-mobile">
                 <h2
-                    class="web-footer-nav-main-title web-is-not-mobile text-caption uppercase font-medium"
+                    class="web-footer-nav-main-title web-is-not-mobile text-caption font-medium uppercase"
                 >
                     {title}
                 </h2>

src/lib/components/animated/Text.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    export let text: string;
+
+    const words = text.split(' ');
+</script>
+
+<span class="sr-only">{text}</span>
+<span class="relative">
+    {#each words as word, i}
+        <span
+            class="animate-text mr-2 inline-block"
+            style:animation-delay="{i * 75}ms
+            ">{word}</span
+        >
+    {/each}
+</span>

src/lib/components/ui/InlineTag.svelte

@@ -1,5 +1,5 @@
 <div
-    class="tracking-none text-sub-body text-greyscale-900 dark:text-greyscale-100 py-0.25 -mr-0.5 rounded-[.25rem] bg-black/[0.08] px-1 dark:bg-white/[0.12]"
+    class="tracking-none text-sub-body text-greyscale-900 dark:text-greyscale-100 py-0.25 -mr-0.5 rounded-[.25rem] bg-black/8 px-1 dark:bg-white/[0.12]"
 >
     <slot />
 </div>

src/lib/layouts/DocsArticle.svelte

@@ -99,7 +99,7 @@
                             </li>
                         {/each}
                     </ol>
-                    <div class="border-greyscale-900/[0.04] border-t pt-5">
+                    <div class="border-greyscale-900/4 border-t pt-5">
                         <button class="web-link inline-flex items-center gap-2" use:scrollToTop>
                             <span class="web-icon-arrow-up" aria-hidden="true" />
                             <span class="text-caption">Back to top</span>

src/lib/layouts/DocsTutorial.svelte

@@ -159,7 +159,7 @@
                         </li>
                     {/each}
                 </ol>
-                <div class="border-greyscale-900/[0.04] border-t pt-5">
+                <div class="border-greyscale-900/4 border-t pt-5">
                     <button class="web-link inline-flex items-center gap-2" use:scrollToTop>
                         <span class="web-icon-arrow-up" aria-hidden="true" />
                         <span class="text-caption">Back to top</span>

src/lib/layouts/Main.svelte

@@ -274,7 +274,7 @@
     <MobileNav bind:open={$isMobileNavOpen} links={navLinks} />
 
     <main
-        class="web-main-section"
+        class="space-y-6"
         class:web-u-hide-mobile={$isMobileNavOpen}
         id={omitMainId ? undefined : 'main'}
     >

src/markdoc/tags/Tabs.svelte

@@ -26,12 +26,15 @@
 </script>
 
 <div class="web-card is-normal mt-4" {...$root} use:root>
-    <div class="tabs flex gap-4 overflow-scroll" style="scrollbar-width: none; -ms-overflow-style: none;">
+    <div
+        class="tabs flex gap-4 overflow-scroll"
+        style="scrollbar-width: none; -ms-overflow-style: none;"
+    >
         <ul class="tabs-list flex items-center gap-4" {...$list} use:list>
             {#each $ctx.triggers.entries() as [id, title]}
-                <li class="tabs-item hover:bg-white/[0.04] rounded-t-[0.625rem]">
+                <li class="tabs-item rounded-t-[0.625rem] hover:bg-white/4">
                     <button
-                        class="tabs-button px-1 py-[0.625rem] font-light outline-none bg-clip-padding cursor-pointer"
+                        class="tabs-button cursor-pointer bg-clip-padding py-[0.625rem] px-1 font-light outline-none"
                         class:is-selected={$value === id}
                         {...$trigger(id)}
                         use:trigger>{title}</button

src/routes/+page.svelte

@@ -126,11 +126,9 @@
                         class="web-hero-banner-button mb-4"
                     >
                         <span class="web-icon-star shrink-0" aria-hidden="true" />
-                        <span class="text-caption font-medium shrink-0">New</span>
+                        <span class="text-caption shrink-0 font-medium">New</span>
                         <div class="web-hero-banner-button-sep" />
-                        <span class="text-caption web-u-trim-1"
-                            >Introducing Console Roles</span
-                        >
+                        <span class="text-caption web-u-trim-1">Introducing Console Roles</span>
                         <span class="web-icon-arrow-right shrink-0" aria-hidden="true" />
                     </a>
                     <Hero>
@@ -303,10 +301,10 @@
                     </section>
                     <div class="mt-20 overflow-hidden">
                         <ul
-                            class="web-info-boxes text-sub-body divide-x divide-y divide-black/[0.04] font-medium"
+                            class="web-info-boxes text-sub-body divide-x divide-y divide-black/4 font-medium"
                         >
                             {#each infoBoxes as box}
-                                <li class="relative border-black/[0.04] p-8 last-of-type:border-r">
+                                <li class="relative border-black/4 p-8 last-of-type:border-r">
                                     <img src={box.icon} width="40" height="40" alt="" />
                                     <h3
                                         class="text-primary mt-4 flex flex-wrap items-baseline gap-3"

src/routes/docs/references/[version]/[platform]/[service]/+page.svelte

@@ -110,9 +110,9 @@
                 <div class="web-inline-code">{platformType}</div>
             </div>
             <div class="web-article-header-end">
-                <div class="gap-6 flex flex-col md:flex-row text-primary">
+                <div class="text-primary flex flex-col gap-6 md:flex-row">
                     <div class="flex items-center gap-2">
-                        <label class="text-xs web-is-not-mobile" for="platform">Platform</label>
+                        <label class="web-is-not-mobile text-xs" for="platform">Platform</label>
                         <Select
                             --min-width="10rem"
                             id="platform"
@@ -138,7 +138,7 @@
                         />
                     </div>
                     <div class="flex items-center gap-2">
-                        <label class="text-xs web-is-not-mobile" for="version">Version</label>
+                        <label class="web-is-not-mobile text-xs" for="version">Version</label>
 
                         <Select
                             nativeMobile
@@ -162,7 +162,7 @@
                     <!-- eslint-disable-next-line svelte/no-at-html-tags -->
                     {@html parse(data.service?.description)}
                 </div>
-                <div class="web-article-content-grid-6-4-column-2 flex flex-col gap-8 j-end">
+                <div class="web-article-content-grid-6-4-column-2 j-end flex flex-col gap-8">
                     <Fence
                         language="text"
                         badge="Base URL"
@@ -176,7 +176,7 @@
                     <div class="web-article-content-grid-6-4-column-2 flex flex-col gap-8">
                         <div class="web-inline-info">
                             <span class="icon-info" aria-hidden="true" />
-                            <h5 class="text-sub-body font-medium text-primary">
+                            <h5 class="text-sub-body text-primary font-medium">
                                 No endpoint found for this version and platform
                             </h5>
                             Please switch to a newer version or different platform.
@@ -211,7 +211,7 @@
                         </Accordion>
                     </div>
                     <div class="web-article-content-grid-6-4-column-2 flex flex-col gap-8">
-                        <div class="contents dark">
+                        <div class="dark contents">
                             <div
                                 class="sticky"
                                 style="--inset-block-start:var(--p-grid-huge-navs-secondary-sticky-position);"
@@ -249,7 +249,7 @@
                 </button>
                 <div class="web-references-menu-content">
                     <div
-                        class="web-references-menu-header flex justify-between items-center gap-4 mt-6"
+                        class="web-references-menu-header mt-6 flex items-center justify-between gap-4"
                     >
                         <h5 class="web-references-menu-title text-micro uppercase">On This Page</h5>
                         <button class="web-icon-button" id="refClose" on:click={toggleReferences}>
@@ -267,7 +267,7 @@
                             </li>
                         {/each}
                     </ul>
-                    <div class="border-t border-greyscale-900/[0.04] web-u-padding-block-20">
+                    <div class="border-greyscale-900/4 web-u-padding-block-20 border-t">
                         <button class="web-link inline-flex items-center gap-2" use:scrollToTop>
                             <span class="web-icon-arrow-up" aria-hidden="true" />
                             <span class="text-caption">Back to top</span>