Update footer to properly align items

louisescher · Apr 22, 2024 · 26d6aed · 26d6aed
1 parent 0900e92
commit 26d6aed
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/src/components/Pagination.astro b/src/components/Pagination.astro
@@ -35,12 +35,12 @@ const isRtl = dir === 'rtl';
 </div>
 
 <div class="page-footer">
-	<div>
+	<div class="footer-links">
 		<span>©️ Louis Escher</span>
 		<span>—</span>
 		<a href="https://louisescher.dev/">Homepage</a>
 	</div>
-	<div class="social-footer-links">
+	<div class="social-footer-icons">
 		<a href="https://github.com/comet-analytics/ion-theme" aria-label="GitHub Icon"><Icon name="github" size='1.25rem' /></a>
 	</div>
 </div>
@@ -79,6 +79,18 @@ const isRtl = dir === 'rtl';
 		text-decoration: none;
 	}
 
+	.footer-links {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+
+	.social-footer-icons a {
+		display: inline-block !important;
+		height: var(--sl-icon-size);
+	}
+
 	[rel='next'] {
 		justify-content: end;
 		text-align: end;

diff --git a/src/content/docs/features.mdx b/src/content/docs/features.mdx
@@ -106,12 +106,12 @@ To edit the footer, simply put your own text, icons and code into the footer:
 <!-- ... -->
 
 <div class="page-footer">
-	<div>
+	<div class="footer-links">
 		<span>©️ John Doe</span>
 		<span>—</span>
 		<a href="https://example.com/">Homepage</a>
 	</div>
-	<div class="social-footer-links">
+	<div class="social-footer-icons">
 		<a href="https://github.com/octocat" aria-label="GitHub Icon"><Icon name="github" size='1.25rem' /></a>
 		<a href="https://twitter.com/astrodotbuild" aria-label="Twitter Icon"><Icon name="twitter" size='1.25rem' /></a>
 	</div>

diff --git a/src/styles/theme.css b/src/styles/theme.css
@@ -28,6 +28,8 @@
   --sl-border: #262626;
   --pagefind-ui-border: #262626;
   --pagefind-ui-primary: var(--sl-color-accent);
+
+  --sl-icon-size: 1.25rem;
 }
 
 /* Change background color of sidebar & add border */