Fix focus styles

src/css/components/button.css

@@ -8,6 +8,9 @@
   --button-border-color: var(--button-bg);
   --button-radius: 0.5em;
 
+  --button-outline-color: #0a76f6;
+  --button-outline-offset: -3px;
+
   display: inline-flex;
   align-items: center;
   gap: var(--button-gap, 0.5em);

src/css/components/projects.css

@@ -1,6 +1,6 @@
 .project-grid {
   grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
-  gap: 1rem;
+  gap: 1.5rem 1rem;
   display: grid;
 }
 .project-grid > li {
@@ -18,7 +18,7 @@
   background-size: cover;
   flex-direction: column;
   justify-content: space-between;
-  gap: 2.5rem;
+  gap: .5rem;
   height: 100%;
   padding: 0.4rem;
   display: flex;
@@ -47,7 +47,7 @@
   width: auto;
 }
 .card .content {
-  padding: 1rem 0.4rem 0;
+  padding-inline: .4rem;
 }
 .card .list-inline {
   gap: 0.5ch;

src/css/main.css

@@ -86,7 +86,7 @@ main {
 }
 main h2 {
   font-size: calc(var(--font-size) * 1.6);
-  margin-block: 2rem 1rem;
+  margin-block: 1.5em 1em;
 }
 main .list-inline {
   --item-gap: 0;

src/css/utilities.css

@@ -76,6 +76,7 @@
   color: var(--item-color, var(--text));
   text-decoration: none;
   transition: all 0.2s;
+  outline-offset: -1px;
 }
 .list-inline a:hover {
   text-decoration: underline;