push

web/css/base.css

@@ -52,6 +52,14 @@ p {
   margin: 0;
 }
 
+code {
+  padding: 1px var(--space-1);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
+  font-size: 0.9em;
+}
+
 /* ---- page frame ---------------------------------------------------------- */
 
 .container {
@@ -66,6 +74,8 @@ p {
   padding-bottom: var(--space-8);
 }
 
+/* ---- header ---------------------------------------------------------------- */
+
 .site-header {
   position: sticky;
   top: 0;
@@ -77,7 +87,8 @@ p {
 }
 
 .site-header__inner {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: var(--space-4);
   height: var(--header-height);
@@ -94,22 +105,67 @@ p {
 }
 
 .site-header__nav {
+  display: flex;
+  gap: var(--space-1);
+}
+
+.site-header__nav a {
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-full);
   font-size: var(--text-sm);
   font-weight: var(--font-weight-medium);
   color: var(--color-text-dim);
-  padding: var(--space-2) var(--space-3);
-  border-radius: var(--radius-sm);
+  transition: background 120ms ease, color 120ms ease;
 }
 
-.site-header__nav:hover {
+.site-header__nav a:hover {
   color: var(--color-text);
   background: var(--color-surface);
 }
 
-.site-header__spacer {
-  flex: 1;
+.site-header__nav a.is-active {
+  color: var(--color-accent-text);
+  background: var(--color-accent);
 }
 
+.site-header__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-1);
+}
+
+/* ---- icon buttons ----------------------------------------------------------- */
+
+.icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  border: none;
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: var(--color-text-dim);
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease;
+}
+
+.icon-btn:hover {
+  background: var(--color-surface);
+  color: var(--color-text);
+}
+
+.icon-btn.is-active {
+  color: var(--color-accent);
+}
+
+.icon-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* ---- footer ------------------------------------------------------------------ */
+
 .site-footer {
   border-top: 1px solid var(--color-border);
   padding: var(--space-4) 0 var(--space-5);
@@ -130,3 +186,11 @@ p {
 .site-footer a:hover {
   color: var(--color-text);
 }
+
+/* ---- responsive ---------------------------------------------------------------- */
+
+@media (max-width: 720px) {
+  .site-header__nav a {
+    padding: var(--space-2) var(--space-3);
+  }
+}