fix design and add recipes page

README.md

@@ -1,6 +1,6 @@
-# create-svelte
+# Svelte Society 2021 Website
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
+Using SvelteKit!
 
 ## Creating a project
 

src/app.postcss

@@ -161,11 +161,11 @@ h1 {
 }
 
 h2 {
-	font-size: var(--font-600);
+	font-size: var(--font-500);
 }
 
 h3 {
-	font-size: var(--font-500);
+	font-size: var(--font-400);
 }
 
 /**
@@ -211,13 +211,6 @@ blockquote {
 	background: rgba(0, 0, 0, 0.99);
 }
 
-main {
-	display: grid;
-	place-items: center;
-	padding: var(--space-200) 0;
-	margin: 0 auto;
-}
-
 .heading {
 	text-align: center;
 	margin: var(--space-600);

src/lib/components/ComponentIndex/Card.svelte

@@ -11,12 +11,17 @@
   export let npm = "";
   export let repo = "";
 
+  let clipboardCopy = false
   const copyToClipboard = (text) => {
     navigator.permissions.query({name: "clipboard-write"}).then(result => {
       if (result.state == "granted" || result.state == "prompt") {
         navigator.clipboard.writeText(text)
+        clipboardCopy = true
+        setTimeout(() => {
+          clipboardCopy = false
+        }, 1000)
       }
-    });
+    }).catch(() => alert("Clipboard copy Permission denied"));
   }
 </script>
 
@@ -29,9 +34,15 @@
     background: #f3f6f9;
     border-radius: 5px;
   }
-  .card h1 {
+  .card h3 {
     word-break: break-word;
   }
+  h3 a {
+    text-decoration: none;
+  }
+  h3 a:hover {
+    text-decoration: underline;
+  }
   .active,
   .card:hover {
     background: #e8f3fe;
@@ -59,21 +70,18 @@
       font-size: 0.9rem;
     }
 
-    .card h1 {
+    .card h3 {
       font-size: 24px;
     }
   }
 </style>
 
 <div class="card" class:active id="component-{escape(title)}">
-  {#if image}
+  <h3>
-    <img src={image} alt={title} />
+    <a href={url}>{title}</a>
-  {/if}
+    {#if npm}<Tag click={() => copyToClipboard(`npm install ${npm}`)} variant="copy" title={clipboardCopy ? 'copied!' : `npm install ${npm}`}/>{/if}
-  <h1>
+  </h3>
-    <a href={url}>{title}</a> <a href="#component-{escape(title)}">#</a>
+  <p class="flex-grow"><a href="#component-{escape(title)}">#</a> {description}</p>
-    {#if npm}<Tag click={() => copyToClipboard(`npm install ${npm}`)} variant="copy" title="npm install {npm}"/>{/if}
-  </h1>
-  <p class="flex-grow">{description}</p>
   <div class="card__tags">
     {#each tags as tag}
       <Tag title={tag} variant='blue' />
@@ -83,15 +91,21 @@
     <div>
       {#if stars > 0}
         {#if (repo || url).includes('github')}
-          <img src="/images/github_logo.svg" alt="github logo" />
+          <img style="display:inline" src="/images/github_logo.svg" alt="github logo" />
         {:else if (repo || url).includes('gitlab')}
-          <img src="/images/gitlab_logo.svg" alt="gitlab logo" />
+          <img style="display:inline" src="/images/gitlab_logo.svg" alt="gitlab logo" />
-        {:else}
+        <!-- {:else} -->
+        {/if}
+      {/if}
+    </div>
+    <div>
       &#9733;
-        {/if}
+      <code>{stars}</code>
-        {stars}
+    </div>
+    <!-- commenting out dates just cause it is not very updated yet - all the cards show same date. put back in when we have better scraping -->
+    <!-- <datetime value={addedOn}>{new Intl.DateTimeFormat('en-Us').format(Date.parse(addedOn))}</datetime> -->
+  </div>
+  {#if image}
+    <img src={image} alt={title} />
   {/if}
 </div>
-    <div>{new Intl.DateTimeFormat('en-Us').format(Date.parse(addedOn))}</div>
-  </div>
-</div>

src/lib/components/ComponentIndex/CardList.svelte

@@ -7,7 +7,6 @@
     font-family: Overpass;
     font-style: normal;
     font-weight: 600;
-    font-size: 27px;
     line-height: 150%;
     margin-bottom: 1rem;
   }
@@ -38,7 +37,7 @@
 </style>
 
 <div class="list">
-  <h1 id="category-{escape(title)}">{title} <a href="#{escape(title)}">#</a></h1>
+  <h1 id="category-{escape(title)}">{title} <a href="#category-{escape(title)}">#</a></h1>
   <div class="grid">
     <slot />
   </div>

src/lib/components/Societies/index.svelte

@@ -6,7 +6,7 @@
 
 <!--society section-->
 <div class="society-wrapper">
-	<h5 class="title">Societys arround the world</h5>
+	<h3 class="title">Societies around the world</h3>
 	{#each societies as society}
 		{#if society.continent}
 			<h6 class="continent">{society.continent}</h6>

src/routes/_Footer.svelte

@@ -12,7 +12,7 @@
 			Want to contribute? Pick up an issue on
 			<a
 				class="ghlink"
-				href="https://github.com/svelte-society/sveltesociety.dev"
+				href="https://github.com/svelte-society/sveltesociety-2021/"
 				target="_blank"
 				rel="noopener">GitHub</a
 			>!

src/routes/__layout.svelte

@@ -31,9 +31,9 @@
 		display: grid;
 		grid-template-rows: 0fr 1fr 0fr;
 	}
-
+	.container main {
-	main {
+		padding-left: 1rem;
-		min-height: 100vh;
+		padding-bottom: 1rem;
 	}
 
 </style>

src/routes/about/__layout.svelte

@@ -1,6 +1,22 @@
 <svelte:head>
   <title>About Svelte Society</title>
 </svelte:head>
-<main>
+<div class="wrapper">
   <slot />
-</main>
+</div>
+
+<style>
+  .wrapper {
+    max-width: 65ch;
+  }
+  .wrapper :global(h2), .wrapper :global(h3) {
+    margin-top: 2rem;
+    margin-bottom: 1.25rem;
+  }
+  .wrapper :global(p) {
+    margin-bottom: 1.25rem;
+  }
+  .wrapper :global(li) {
+    margin-bottom: 1.1rem;
+  }
+</style>

src/routes/components/index.svelte

@@ -158,7 +158,7 @@
   }
 </style>
 
-<main>
+<main class="wrapper">
   <h1>Components</h1>
   <div class="controls">
     <div class="inputs">

src/routes/index.svelte

@@ -44,6 +44,7 @@
 		margin: 0 auto;
 		line-height: 1.6;
 		max-width: 60ch;
+		margin-bottom: var(--space-300);
 	}
 	ul {
 		display: grid;

src/routes/recipes/__layout.svelte

@@ -0,0 +1,22 @@
+<svelte:head>
+  <title>About Svelte Society</title>
+</svelte:head>
+<div class="wrapper">
+  <slot />
+</div>
+
+<style>
+  .wrapper {
+    max-width: 65ch;
+  }
+  .wrapper :global(h2), .wrapper :global(h3) {
+    margin-top: 2rem;
+    margin-bottom: 1.25rem;
+  }
+  .wrapper :global(p) {
+    margin-bottom: 1.25rem;
+  }
+  .wrapper :global(li) {
+    margin-bottom: 1.1rem;
+  }
+</style>

src/routes/recipes/index.svx

@@ -0,0 +1,3 @@
+# Recipes
+
+This part of the site is still under construction. Help us out! https://github.com/svelte-society/sveltesociety-2021/