Merge pull request #8 from jonfinger/codex/homepage-title-social-icons

Hide homepage title block and improve social icon readability

Author: jonfinger

pr-images/homepage-title-social-preview.png

@@ -282,12 +282,34 @@ blockquote {
 }
 
 #quarto-header .navbar-collapse > .navbar-nav:last-of-type .nav-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   margin-right: 0;
+  min-width: 2.16rem;
+  min-height: 2.16rem;
   border: 2px solid rgba(240, 235, 255, 0.64);
   border-radius: 4px;
-  padding: 0.34rem 0.56rem;
+  padding: 0.42rem;
+  font-size: 0.92rem;
+  line-height: 1;
   background: rgba(18, 16, 36, 0.9);
-  box-shadow: 2px 2px 0 0 rgba(13, 11, 25, 0.95);
+  box-shadow: 2px 2px 0 0 rgba(13, 11, 25, 0.95), 0 0 0 1px rgba(240, 235, 255, 0.18) inset;
+  transition:
+    transform var(--dur-fast) var(--ease-main),
+    box-shadow var(--dur-fast) var(--ease-main),
+    border-color var(--dur-fast) var(--ease-main),
+    background-color var(--dur-fast) var(--ease-main);
+}
+
+#quarto-header .navbar-collapse > .navbar-nav:last-of-type {
+  gap: 0.42rem;
+}
+
+#quarto-header .navbar-collapse > .navbar-nav:last-of-type .nav-link i {
+  font-size: 1em;
+  line-height: 1;
+  color: var(--text-strong);
 }
 
 #quarto-header .navbar-collapse > .navbar-nav:last-of-type .nav-link::before {
@@ -301,7 +323,20 @@ blockquote {
 
 #quarto-header .navbar-collapse > .navbar-nav:last-of-type .nav-link:hover {
   transform: translate(-1px, -1px);
-  box-shadow: 3px 3px 0 0 rgba(13, 11, 25, 0.95);
+  border-color: rgba(255, 255, 255, 0.95);
+  background: rgba(32, 28, 58, 0.98);
+  box-shadow: 3px 3px 0 0 rgba(13, 11, 25, 0.95), 0 0 14px -5px rgba(240, 235, 255, 0.8);
+}
+
+#quarto-header .navbar-collapse > .navbar-nav:last-of-type .nav-link:focus-visible {
+  outline: 2px solid rgba(240, 235, 255, 0.95);
+  outline-offset: 2px;
+  border-color: rgba(255, 255, 255, 0.95);
+}
+
+#quarto-header .navbar-collapse > .navbar-nav:last-of-type .nav-link:active {
+  transform: translate(0, 0);
+  box-shadow: 1px 1px 0 0 rgba(13, 11, 25, 0.95), 0 0 0 1px rgba(240, 235, 255, 0.2) inset;
 }
 
 #quarto-header .navbar-toggler {
@@ -367,6 +402,10 @@ main.content > * {
   margin-bottom: 1rem;
 }
 
+.page-projects #title-block-header.quarto-title-block {
+  display: none;
+}
+
 .quarto-title-meta {
   color: var(--text-dim);
   font-size: 0.38rem;
@@ -814,6 +853,20 @@ footer {
     font-size: 0.44rem;
   }
 
+  #quarto-header .navbar-collapse > .navbar-nav:last-of-type {
+    flex-direction: row;
+    gap: 0.34rem;
+    margin-top: 0.28rem;
+  }
+
+  #quarto-header .navbar-collapse > .navbar-nav:last-of-type .nav-link {
+    margin-bottom: 0;
+    min-width: 2.08rem;
+    min-height: 2.08rem;
+    padding: 0.38rem;
+    font-size: 0.86rem;
+  }
+
   #quarto-header .navbar-brand {
     font-size: 0.48rem;
   }