Merge pull request #2 from Contenda-Team/cw/design

Update styles to design system
brainstory · Apr 18, 2023 · 55627da · 55627da
2 parents c201451 + c57e0b3
commit 55627da
Show file tree

Hide file tree

Showing 6 changed files with 178 additions and 158 deletions.
diff --git a/public/logo.png b/public/logo.png
diff --git a/src/components/Card.astro b/src/components/Card.astro
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -32,79 +32,137 @@ const { title } = Astro.props;
 			property="twitter:image"
 			content=""
 		/> -->
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
+			rel="stylesheet"
+		/>
 	</head>
 	<body>
-		<slot />
+		<nav>
+			<a href="https://contenda.co"><img src="/logo.png" /></a>
+			<a href="https://app.contenda.co" class="link-button">
+				Give Contenda a Try!
+			</a>
+		</nav>
+		<main>
+			<slot />
+		</main>
 	</body>
 </html>
 <style is:global>
 	:root {
-		--accent-gradient: linear-gradient(
-			45deg,
-			#4682b4,
-			#6ce385 30%,
-			white 60%
-		);
+		--dark-bg: #171d27;
+		--light-bg: #ffffff;
+		--blue: #4682b4;
+		--green: #6ce385;
+		--buttons: #4c5d88;
+		--accent-blue: #7796cb;
+		--yellow: #ffeed6;
+	}
+
+	* {
+		box-sizing: border-box;
 	}
+
 	html {
-		font-family: system-ui, sans-serif;
-		background-color: #f6f6f6;
+		font-family: "Inter", sans-serif;
+		background-color: var(--dark-bg);
+		margin: 0;
+		padding: 0;
+		height: 100%;
+	}
+
+	body {
+		background-color: var(--light-bg);
+		max-width: 56rem;
+		margin: 0 auto;
+		padding-top: 2.25rem;
+		min-height: 100%;
 	}
+
+	a {
+		color: var(--buttons);
+	}
+
 	code {
 		font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
 			DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
+		color: var(--accent-blue);
+	}
+
+	nav {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		flex-wrap: wrap;
+		padding: 0 5.5rem;
+		margin-bottom: 2.5rem;
+	}
+
+	nav img {
+		width: 156px;
+	}
+
+	nav a {
+		text-decoration: none;
+		cursor: pointer;
+		transition: background 0.2s ease-in-out;
+	}
+
+	.link-button {
+		padding: 0.75rem 1.5rem;
+		background: var(--buttons);
+		color: white;
+		border-radius: 4px;
+		font-weight: bold;
+		text-transform: uppercase;
+	}
+
+	.link-button:hover {
+		background: #35415f;
 	}
 
 	main {
 		margin: auto;
-		padding: 1.5rem;
-		max-width: 60ch;
+		/* padding: 1.5rem; */
+		max-width: 37.5rem;
 	}
 	h1 {
-		font-size: 3rem;
-		font-weight: 800;
 		margin: 0;
+		margin-bottom: 2.5rem;
+		font-size: 1.875rem;
+		font-weight: 500;
+		line-height: 2.5rem;
+		text-align: center;
 	}
 
 	p {
-		line-height: 1.6;
-	}
-
-	.center {
-		text-align: center;
+		margin: 1.5rem 0;
 	}
 
 	.blog {
-		line-height: 1.6;
-		margin: 1rem 0;
-		border: 1px solid rgba(var(--accent), 25%);
-		background-color: white;
-		padding: 1rem;
-		border-radius: 0.4rem;
-		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-			0 2px 4px -2px rgba(0, 0, 0, 0.1);
-	}
-	.blog h1 {
-		font-size: 2rem;
+		line-height: 1.25rem;
 	}
 
 	.blog img {
 		max-width: 100%;
 	}
 
-	.text-gradient {
-		background-image: var(--accent-gradient);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-size: 400%;
-		background-position: 0%;
+	.blog-end {
+		max-width: 33.75rem;
+		margin: 0 auto;
+		padding: 0.75rem 2rem;
+		background-color: var(--yellow);
+		border-radius: 4px;
+		font-size: 0.8rem;
+		text-align: center;
 	}
 
-	.link-card-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-		gap: 1rem;
-		padding: 0;
+	.blog-end a {
+		color: black;
+		font-weight: 700;
 	}
 
 	.small {

diff --git a/src/pages/404.astro b/src/pages/404.astro
@@ -0,0 +1,30 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout title="Contenda | You're lost!">
+	<h1>Welcome to Contenda!</h1>
+	<p>
+		You seem lost, buddy, head over to the <a
+			href="https://app.contenda.co"
+		>
+			Contenda app</a
+		> to see your content.
+	</p>
+
+	<p>
+		You can also check out our:
+		<ul>
+			<li><a href="https://contenda.co">Homepage</a></li>
+			<li><a href="https://contenda.co/blog">Blog</a></li>
+			<li><a href="https://contenda.co/newsletter">Newsletter</a></li>
+			<li><a href="https://twitter.com/contendaco">Twitter</a></li>
+			<li>
+				<a href="https://www.linkedin.com/company/contendaco/"
+					>LinkedIn</a
+				>
+			</li>
+			<li><a href="https://youtu.be/dQw4w9WgXcQ">Secret Formula</a></li>
+		</ul>
+	</p>
+</Layout>
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
@@ -1,7 +1,6 @@
 ---
 import { Markdown } from "astro-remote";
 import Layout from "../../layouts/Layout.astro";
-import Card from "../../components/Card.astro";
 
 let markdown = Astro.request.headers.get("markdown");
 
@@ -18,61 +17,37 @@ if (
 	markdown === "null" ||
 	markdown === ""
 ) {
-	markdown =
-		"## No blog content found! \n Head back to [Contenda](https://app.contenda.co) to build and share your content.";
+	markdown = `## No blog content found! \n Head back to [Contenda](https://app.contenda.co) to create, edit, and share your content. We can't wait to see what you make!`;
 }
 
 let renderContent = `${markdown.replace(/\\n/g, "\n")}`;
 ---
 
 <Layout title="Contenda Blog Preview!">
-	<main>
-		<h1 class="center">
-			<span class="text-gradient">Contenda</span> Blog Preview
-		</h1>
-
-		<p>
-			This is a <strong>public URL</strong> of this content, and will expire
-			within 30 days! If you want to keep this content, export it from the
-			Contenda app platform.
-		</p>
-
-		<div class="blog">
-			<Markdown
-				content={renderContent}
-				sanitize={{
-					allowComments: true
-				}}
-			/>
-		</div>
-
-		<ul role="list" class="link-card-grid">
-			<Card
-				href="https://app.contenda.co/"
-				title="Contenda Platform"
-				body="Create your own content on the Contenda platform."
-			/>
-			<Card
-				href="https://prod.contenda.io/docs"
-				title="Documentation"
-				body="Check out the docs for more information on how to use our API."
-			/>
-			<Card
-				href="https://contenda.co/blog"
-				title="Contenda Blog"
-				body="Head over to the Contenda blog for interesting articles and to learn more."
-			/>
-			<Card
-				href="https://twitter.com/contendaco"
-				title="Contenda Twitter"
-				body="Send the Contenda team a tweet about what you think!"
-			/>
-		</ul>
-
-		<p class="small">Blog generated at: {date}</p>
-
-		<!-- If we ever need to debug this, here's the headers passed from the API -->
-		<!-- <p>
+	<div class="blog">
+		<Markdown
+			content={renderContent}
+			sanitize={{
+				allowComments: true
+			}}
+		/>
+	</div>
+
+	<div class="blog-end">
+		You've reached the end of the blog! Ready for more?
+		<a href="https://app.contenda.co">Create a new one here!</a>
+	</div>
+
+	<p class="small">
+		This is a <strong>public URL</strong> of this content, and will expire within
+		30 days! If you want to keep this content, export it from the Contenda app
+		platform.
+	</p>
+
+	<p class="small">Blog generated at: {date}</p>
+
+	<!-- If we ever need to debug this, here's the headers passed from the API -->
+	<!-- <p>
 			Received request headers:
 			<code>
 				{JSON.stringify(Object.fromEntries(Astro.request.headers))}
@@ -83,5 +58,4 @@ let renderContent = `${markdown.replace(/\\n/g, "\n")}`;
 				{JSON.stringify(Object.fromEntries(Astro.response.headers))}
 			</code>
 		</p> -->
-	</main>
 </Layout>