Style home page link buttons

helenclx · Dec 4, 2024 · 17edb5a · 17edb5a
1 parent 4bb7fcd
commit 17edb5a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/src/_includes/main/project-grid.njk b/src/_includes/main/project-grid.njk
@@ -5,5 +5,5 @@
             {% include "main/project-card.njk" %}
         {% endeach %}
     </div>
-    <a class="home__btn-link" href="/projects">More Projects</a>
+    <a class="home__btn-link el-top-margin" href="/projects">More Projects</a>
 </section>
diff --git a/src/assets/css/home.css b/src/assets/css/home.css
@@ -83,6 +83,16 @@
 .home__btn-link {
     display: block;
     margin: 0 auto;
+    border: 0.15em solid currentColor;
+    text-decoration: none;
+    padding: 0.5em 1em;
+    border-radius: 0.5em;
+    font-weight: 700;
+}
+
+.home__btn-link:focus {
+    outline: 0.2em solid var(--clr-accent-700);
+    outline-offset: 0.15em;
 }
 
 /* Webrings and Badges */

diff --git a/src/assets/css/utility.css b/src/assets/css/utility.css
@@ -8,6 +8,7 @@
 
 .text-center { text-align: center; }
 .text-bold { font-weight: 700; }
+.el-top-margin { margin-top: 1.5em; }
 
 .inline-icon {
     display: inline-block;