design system in place, touched up last pr styling

src/lib/components/ComponentIndex/ArrowButton.svelte

@@ -7,10 +7,10 @@
 <style>
   div {
     font-size: 1rem;
-    border: 2px solid #7e7e93;
+    border: 2px solid var(--dark-gray);
     border-radius: 5px;
     background-color: white;
-    color: #7e7e93;
+    color: var(--dark-gray);
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -18,13 +18,13 @@
     position: relative;
   }
   div.small {
-    font-size: 0.8em;
+    font-size: var(--font-100);
     padding: 3px 10px;
   }
   div:hover {
     cursor: pointer;
-    border-color: var(--color) !important;
+    border-color: var(--primary);
-    color: var(--color) !important;
+    color: var(--primary);
   }
 
   .arrow {
@@ -32,25 +32,27 @@
     height: 16px;
     -webkit-mask: url(/images/right-arrow.svg) no-repeat center;
     mask: url(/images/right-arrow.svg) no-repeat center;
-    background-color: #7e7e93;
+    background-color: var(--dark-gray);
   }
   div:hover .arrow {
-    background-color: #7e7e93;
+    background-color: var(--dark-gray);
   }
   .arrow.active {
-    background-color: #7e7e93;
+    background-color: var(--dark-gray);
   }
 
   .popin {
-    font-size: 1rem;
+    min-width: 250px;
+    width: 100%;
+    font-size: var(--font-100);
     display: none;
     position: absolute;
-    left: calc(100% - 1em);
+      left: var(--s-4);
-    top: 1em;
+      top: 100%;
     z-index: 100;
     margin: 0;
     padding: 0;
-    border: 2px solid var(--color);
+    border: 2px solid var(--primary);
     border-radius: 5px;
     background: white;
   }
@@ -58,11 +60,11 @@
     display: block;
   }
   
-  @media screen and (max-width: 700px) {
+
+  @media screen and (min-width: 700px) {
     .popin {
-      left: 1rem;
+      left: 95%;
-      right: 1rem;
+      top: var(--s-4);
-      top: 100%
     }
   }
 </style>
@@ -72,5 +74,5 @@
     <slot />
   </span>
   <div class="arrow" class:active />
-  <span class="popin"><slot name="menu"></slot></span>
+  <section class="popin"><slot name="menu"></slot></section>
 </div>

src/lib/components/ComponentIndex/Card.svelte

@@ -46,12 +46,6 @@
     word-break: none;
     font-size: var(--font-300);
   }
-  h3 a {
-    text-decoration: none;
-  }
-  h3 a:hover {
-    text-decoration: underline;
-  }
   .active,
   .card:hover {
     background: #e8f3fe;

src/lib/components/layout/Header.svelte

@@ -24,7 +24,7 @@
 					</Link>
 				{/each}
 				<li>
-					<a href="/">
+					<a href="/" class="logo">
 						<img alt="Svelte Society Logo" src="/images/logo.svg" />
 					</a>
 				</li>
@@ -63,6 +63,9 @@
 		width: var(--s-12);
 		height: var(--s-12);
 	}
+  .logo {
+    border-bottom: none;
+  }
 	@media (min-width: 1280px) {
 		ul {
 			display: flex;

src/lib/components/layout/Link.svelte

@@ -14,8 +14,9 @@
   }
   a {
     text-decoration: none;
+    border-bottom: transparent;
     color: var(--inherit);
-    transition: border-bottom .2s;
+    transition: var(--link-transition);
     font-size: var(--font-200);
   }
 

src/lib/styles/globals.css

@@ -6,6 +6,18 @@ body {
 
 a {
 	color: var(--link-color);
+	text-decoration: none;
+	border-bottom: 1px solid var(--link-color);
+	transition: var(--link-transition);
+}
+
+h3 > a {
+	border-bottom: none;
+}
+
+h3 > a:hover {
+	border-bottom: none;
+	text-decoration: none;
 }
 
 blockquote {

src/lib/styles/root.css

@@ -23,6 +23,7 @@
 	--accent: #011627;
 	--orange: #f97316;
 	--gray: #c1cfda;
+	--dark-gray: #7e7e93;
 	--black: #12130f;
 	--white: #f3f6f9;
 	--success: #29bf12;
@@ -46,7 +47,7 @@
 	--font-code: 'Fira Mono', monospace;
 
 	/************FONT SIZES***************/
-	--font-100: 0.75rem;
+	--font-100: 0.85rem;
 	--font-200: clamp(1rem, 1.0655rem + 0.6098vw, 1.25rem);
 	--font-300: clamp(1.25rem, 1.2494rem + 0.878vw, 1.333rem);
 	--font-400: clamp(1.5rem, 1.4627rem + 1.2366vw, 1.777rem);
@@ -108,4 +109,8 @@
 		0 4px 4px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.05);
 	--shadow-diffuse: 0 1px 1px rgba(0, 0, 0, 0.08), 0 2px 2px rgba(0, 0, 0, 0.12),
 		0 4px 4px rgba(0, 0, 0, 0.16), 0 8px 8px rgba(0, 0, 0, 0.2);
+
+	/* ***********TRANSITIONS************* */
+	--link-transition: border-bottom 0.15s ease-out;
+	--menu-transition: scale 0.2s ease-out;
 }

src/routes/components/index.svelte

@@ -54,9 +54,10 @@
   }
 
   .inputs {
-    display: grid;
+    display: flex;
-    grid-template-columns: repeat(4, auto);
+    flex-wrap: wrap;
-    grid-gap: 0.5rem;
+    align-items: stretch;
+    gap: var(--s-2);
     margin-right: 2rem;
   }
 
@@ -77,11 +78,14 @@
   }
 
   ul.popin {
-    padding: 0.5ex;
+    display: grid;
+    gap: var(--s-2);
+    padding: var(--s-2);
     margin: 0;
-    font-size: 0.7em;
+    font-size: var(--font-100);
     max-height: 50vh;
     overflow-y: auto;
+    overflow-x: hidden;
   }
 
   ul.popin li {
@@ -127,6 +131,10 @@
     margin: 0 1ex 0 0;
   }
 
+  .submit {
+    align-self: flex-end;
+  }
+
   @media screen and (max-width: 1024px) {
     .controls {
       flex-flow: column-reverse;
@@ -139,8 +147,9 @@
     }
 
     .searchbar {
-      align-self: flex-end;
+      align-self: stretch;
       margin-bottom: 1ex;
+      width: auto;
     }
   }
 
@@ -152,11 +161,6 @@
     .inputs {
       grid-template-columns: auto;
     }
-
-    .searchbar {
-      width: auto;
-      align-self: stretch;
-    }
   }
 </style>
 <svelte:head>
@@ -185,7 +189,7 @@
           {/each}
         </ul>
       </Button>
-      <Button on:click={() => location.href = "/help/components"}>Submit a component</Button>
+      
       <Button active={sorting !== ''}>
         Sort
         <ul slot="menu" role="menu" class="popin no-wrap">
@@ -205,6 +209,7 @@
           <li><label><input type="radio" bind:group={packageManager} value="yarn"> Yarn</label></li>
         </ul>
       </Button>
+      <a href = "/help/components" class="submit">Submit a component</a>
     </div>
 
     <input