tightened design

Author: argyleink

docs/src/components/easings.svelte

@@ -30,7 +30,7 @@
 		<select bind:value={strength}>
 			{#each strengths as str}
 				<option value={str}>
-					--{ease}-{str}
+					{ease} {str}
 				</option>
 			{/each}
 		</select>
@@ -70,25 +70,32 @@
     --sl-card-bg: var(--sl-color-purple-low);
     border: 1px solid var(--sl-color-gray-5);
     background-color: var(--sl-color-black);
-    padding: clamp(1rem,calc(0.125rem + 3vw),2.5rem);
-    gap: clamp(0.5rem,calc(0.125rem + 1vw),1rem);
+    padding: var(--ec-codePadInl);
+    gap: var(--ec-codePadInl);
 	}
 
 	.controls {
+		max-inline-size: max-content;
 		display: flex;
 		gap: var(--size-2);
+		padding-inline-end: var(--size-3);
+		border: 1px solid var(--sl-color-gray-5);
+		border-radius: var(--radius-2);
 		align-items: stretch;
 
 		& > select {
 			background: inherit;
 			border: none;
 			margin: 0;
+			text-transform: capitalize;
+			padding-inline: var(--size-3) var(--size-1);
 		}
 
 		& > .play {
 			background: var(--sl-color-bg-nav);
-			border: 1px solid var(--sl-color-gray-5);
-			border-radius: var(--radius-2);
+			border: none;
+			border-radius: 0;
+			border-inline-end: 1px solid var(--sl-color-gray-5);
 			padding-block: var(--size-2);
 			padding-inline: var(--size-4);
 			text-transform: capitalize;

docs/src/content/docs/props/easings.mdx

@@ -3,7 +3,7 @@ title: Easings
 description: A reference page in my new Starlight docs site.
 ---
 
-import { Tabs, TabItem, Icon } from '@astrojs/starlight/components';
+import { Tabs, TabItem, Icon, LinkCard } from '@astrojs/starlight/components';
 import Easings from '@components/easings.svelte'
 
 ### Intro
@@ -414,3 +414,11 @@ The lower the number, the weaker the effect.
 </Tabs>
 
 <Easings ease="ease-bounce" rotation="0" duration="3s" client:visible />
+
+----
+
+<LinkCard
+  title="Need help?"
+  description="Join us in Discord and ask a question, help could be a few minutes away."
+  href="https://discord.gg/AqA4fU886r"
+/>