remove button component; fix padding

examples/portfolio/src/components/Button.astro

@@ -1,13 +0,0 @@
-<span>
-	<slot />
-</span>
-
-<style>
-	span {
-		display: inline-block;
-		border: 3px solid currentColor;
-		padding: 0.5em 1em;
-		font-weight: 700;
-		text-transform: uppercase;
-	}
-</style>

examples/portfolio/src/layouts/project.astro

@@ -1,6 +1,5 @@
 ---
 import MainHead from '../components/MainHead.astro';
-import Button from '../components/Button.astro';
 import Footer from '../components/Footer.astro';
 import Nav from '../components/Nav.astro';
 
@@ -51,8 +50,10 @@ const { content } = Astro.props;
 			}
 
 			.leadIn {
+				padding-top: 4em;
 				color: var(--t-bg);
 				background-color: var(--t-fg);
+				text-align: center;
 			}
 
 			.tagline {
@@ -64,13 +65,13 @@ const { content } = Astro.props;
 			.content {
 				font-size: var(--f-u1);
 				line-height: 2.2;
+				max-width: 50em;
+				margin: auto;
 			}
 
 			.wrapper {
-				padding-top: 4em;
 				padding-bottom: 4em;
 				margin-bottom: 4em;
-				text-align: center;
 			}
 
 			footer {
@@ -90,13 +91,11 @@ const { content } = Astro.props;
 				<h3 class="tagline">{content.description}</h3>
 			</div>
 		</div>
-		<div class="wrapper wrapper__readable">
+		<div class="wrapper">
 			<div class="content"><slot /></div>
 		</div>
 		<footer>
-			<a href="/projects">
-				<Button>View More</Button>
-			</a>
+			<a href="/projects" class="button">View More</a>
 		</footer>
 		<Footer />
 	</body>

examples/portfolio/src/pages/index.astro

@@ -1,7 +1,6 @@
 ---
 // Component Imports
 import MainHead from '../components/MainHead.astro';
-import Button from '../components/Button.astro';
 import Nav from '../components/Nav.astro';
 import Footer from '../components/Footer.astro';
 import PortfolioPreview from '../components/PortfolioPreview.astro';
@@ -227,9 +226,7 @@ const featuredProject = projects[0];
 					<h3 class="sectionTitle">Selected Work</h3>
 					<PortfolioPreview project={featuredProject} />
 					<div class="buttonContainer">
-						<a href="/projects">
-							<Button>View All</Button>
-						</a>
+						<a href="/products" class="button">View All</a>
 					</div>
 				</div>
 				<div class="section">

examples/portfolio/src/pages/projects.astro

@@ -24,8 +24,8 @@ const projects = (await Astro.glob('./project/**/*.md'))
 				grid-gap: 3rem;
 			}
 			.title {
-				margin-top: 2em;
-				margin-bottom: 2em;
+				margin-top: 2rem;
+				margin-bottom: 2rem;
 			}
 		</style>
 	</head>

examples/portfolio/src/styles/global.css

@@ -77,6 +77,14 @@ h1 {
 	font-size: var(--f-u8);
 }
 
+.button {
+	display: inline-block;
+	border: 3px solid currentColor;
+	padding: 0.5em 1em;
+	font-weight: 700;
+	text-transform: uppercase;
+}
+
 .wrapper {
 	max-width: 80em;
 	margin-left: auto;