datalog-theme 0.6.0

data/_sass/_header.scss

@@ -0,0 +1,470 @@
+@use 'sass:map';
+@use 'sass:color';
+
+@use 'variables' as *;
+@use 'mixins' as *;
+
+// ---------------------------------------------------------------------------
+// Site header — two-row layout: brand row + nav row
+// ---------------------------------------------------------------------------
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: $z-header;
+  background-color: rgba($color-surface-50, 0.97);
+  border-bottom: 1px solid rgba($color-neutral-200, 0.6);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  transition: background-color $transition-base, border-color $transition-base;
+}
+
+body.dark-mode .site-header {
+  background-color: rgba($dark-surface-100, 0.95);
+  border-bottom-color: rgba($dark-ink-500, 0.15);
+  color: $dark-ink-900;
+}
+
+body.nav-open { overflow: hidden; }
+
+// Reading progress
+.header-progress {
+  position: absolute;
+  top: 0;
+  inset-inline: 0;
+  height: 2px;
+  pointer-events: none;
+}
+
+.header-progress__bar {
+  width: 100%;
+  height: 2px;
+  border: none;
+  appearance: none;
+  background: transparent;
+  &::-webkit-progress-bar { background: transparent; }
+  &::-webkit-progress-value { background: $color-accent-primary; }
+  &::-moz-progress-bar { background: $color-accent-primary; }
+}
+
+body.dark-mode .header-progress__bar {
+  &::-webkit-progress-value,
+  &::-moz-progress-bar { background: $dark-accent-primary; }
+}
+
+// ---------------------------------------------------------------------------
+// Header container — stacks brand row and nav row
+// ---------------------------------------------------------------------------
+.header-container {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0;
+  padding-block: 0;
+}
+
+// ---------------------------------------------------------------------------
+// Top row: brand + search + controls
+// ---------------------------------------------------------------------------
+.header-primary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: map.get($spacing, 3);
+  padding-block: map.get($spacing, 3);
+  border-bottom: 1px solid rgba($color-neutral-200, 0.3);
+}
+
+body.dark-mode .header-primary {
+  border-bottom-color: rgba($dark-ink-500, 0.1);
+}
+
+// Brand
+.site-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: map.get($spacing, 2);
+  color: inherit;
+  text-decoration: none;
+  line-height: 1;
+  flex-shrink: 0;
+  transition: opacity $transition-base;
+  &:hover { opacity: 0.75; }
+}
+
+.site-logo {
+  width: 2rem;
+  height: 2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba($color-accent-primary, 0.12), rgba($color-accent-secondary, 0.2));
+  border-radius: map.get($radius, md);
+}
+
+.logo-mark {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.site-title-group { display: grid; gap: 0; }
+
+.site-title {
+  font-family: $font-family-serif;
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+}
+
+.site-tagline {
+  font-size: 0.65rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: $color-ink-500;
+  line-height: 1;
+}
+
+body.dark-mode .site-tagline {
+  color: rgba($dark-ink-500, 0.8);
+}
+
+// Controls (dark mode toggle + hamburger)
+.header-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.header-control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2rem;
+  min-width: 2rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: map.get($radius, md);
+  border: 1px solid rgba($color-ink-900, 0.08);
+  background: transparent;
+  font-size: map.get($font-size-scale, xs);
+  font-weight: 600;
+  color: $color-ink-500;
+  cursor: pointer;
+  transition: background-color $transition-base, color $transition-base;
+
+  &:hover {
+    background-color: rgba($color-accent-primary, 0.06);
+    color: $color-accent-primary;
+  }
+
+  &:focus-visible { @include focus-ring($color-accent-primary); }
+}
+
+.header-control--icon {
+  padding-inline: 0.375rem;
+  font-size: 1.125rem;
+}
+
+.header-control__label { white-space: nowrap; }
+
+// Theme toggle (sun/moon icons)
+.header-control--theme {
+  padding: 0.375rem;
+}
+
+.theme-icon {
+  display: block;
+  transition: transform 0.3s ease, opacity 0.2s ease;
+}
+
+.theme-icon--dark {
+  display: none;
+}
+
+body.dark-mode .theme-icon--light {
+  display: none;
+}
+
+body.dark-mode .theme-icon--dark {
+  display: block;
+}
+
+.nav-toggle {
+  @include respond-to(md) { display: none; }
+}
+
+body.dark-mode .header-control {
+  border-color: rgba($dark-ink-500, 0.15);
+  color: $dark-ink-500;
+  &:hover {
+    background: rgba($dark-accent-primary, 0.1);
+    color: $dark-accent-primary;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Nav row — horizontal link bar
+// ---------------------------------------------------------------------------
+.site-nav {
+  overflow: hidden;
+  transition: max-height 0.25s ease, opacity 0.2s ease;
+
+  &[data-open='false'] {
+    max-height: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &[data-open='true'] {
+    max-height: 40rem;
+    opacity: 1;
+  }
+
+  @include respond-to(md) {
+    max-height: none !important;
+    opacity: 1 !important;
+    pointer-events: auto !important;
+    overflow: visible;
+  }
+}
+
+.nav-list {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: map.get($spacing, 2) 0;
+
+  @include respond-to(md) {
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 0;
+    padding: 0;
+  }
+}
+
+.nav-item {
+  position: relative;
+}
+
+.nav-link {
+  display: block;
+  padding: map.get($spacing, 2) map.get($spacing, 3);
+  color: $color-ink-700;
+  text-decoration: none;
+  font-size: map.get($font-size-scale, sm);
+  font-weight: 500;
+  white-space: nowrap;
+  border-bottom: 2px solid transparent;
+  transition: color $transition-base, border-color $transition-base;
+
+  @include respond-to(md) {
+    padding: 0.625rem 0.75rem;
+    font-size: 0.8125rem;
+  }
+
+  .nav-title { font-weight: 500; }
+  .nav-description { display: none; }
+
+  &:hover,
+  &:focus-visible {
+    color: $color-accent-primary;
+  }
+
+  @include respond-to(md) {
+    &:hover,
+    &:focus-visible {
+      border-bottom-color: $color-accent-primary;
+    }
+  }
+
+  &.is-active {
+    color: $color-accent-primary;
+    border-bottom-color: $color-accent-primary;
+    font-weight: 600;
+  }
+}
+
+body.dark-mode .nav-link {
+  color: $dark-ink-700;
+
+  &:hover,
+  &:focus-visible {
+    color: $dark-accent-primary;
+    border-bottom-color: $dark-accent-primary;
+  }
+
+  &.is-active {
+    color: $dark-accent-primary;
+    border-bottom-color: $dark-accent-primary;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Secondary area (search + utilities) — sits in the brand row
+// ---------------------------------------------------------------------------
+.header-secondary {
+  display: flex;
+  align-items: center;
+  gap: map.get($spacing, 2);
+  flex-shrink: 0;
+}
+
+.site-search {
+  display: flex;
+  align-items: center;
+  gap: map.get($spacing, 1);
+
+  input[type='search'] {
+    width: 10rem;
+    padding: 0.3rem 0.75rem;
+    border-radius: 999px;
+    border: 1px solid rgba($color-ink-900, 0.1);
+    background-color: rgba($color-ink-900, 0.02);
+    font-size: map.get($font-size-scale, xs);
+    transition: border-color $transition-base, width $transition-base;
+
+    &:focus {
+      outline: none;
+      border-color: $color-accent-primary;
+      box-shadow: 0 0 0 2px rgba($color-accent-primary, 0.1);
+      width: 14rem;
+    }
+  }
+
+  button {
+    padding: 0.3rem 0.625rem;
+    border-radius: 999px;
+    border: none;
+    background: $color-accent-primary;
+    color: white;
+    font-size: map.get($font-size-scale, xs);
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color $transition-base;
+    &:hover { background: color.adjust($color-accent-primary, $lightness: -8%); }
+    &:focus-visible { @include focus-ring($color-accent-secondary); }
+  }
+}
+
+body.dark-mode .site-search input[type='search'] {
+  border-color: rgba($dark-ink-500, 0.15);
+  background: rgba($dark-surface-300, 0.4);
+  color: $dark-ink-900;
+}
+
+// Utilities dropdown
+.header-utilities {
+  border: 1px solid rgba($color-ink-900, 0.06);
+  border-radius: map.get($radius, md);
+  padding: map.get($spacing, 1) map.get($spacing, 2);
+  background: transparent;
+  font-size: map.get($font-size-scale, xs);
+
+  summary {
+    cursor: pointer;
+    font-weight: 500;
+    list-style: none;
+    color: $color-ink-500;
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    &::-webkit-details-marker { display: none; }
+  }
+
+  &[open] summary {
+    color: $color-accent-primary;
+    margin-bottom: map.get($spacing, 3);
+  }
+}
+
+.header-utilities__content {
+  display: grid;
+  gap: map.get($spacing, 4);
+  padding-top: map.get($spacing, 2);
+
+  @include respond-to(md) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+.header-filter label {
+  font-size: map.get($font-size-scale, xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.header-filter select {
+  width: 100%;
+  padding: map.get($spacing, 2) map.get($spacing, 3);
+  border-radius: map.get($radius, md);
+  border: 1px solid rgba($color-ink-900, 0.12);
+  font-size: map.get($font-size-scale, sm);
+}
+
+.quick-links ul,
+.academic-links ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: map.get($spacing, 1);
+}
+
+.quick-links__title,
+.academic-links__title {
+  font-size: map.get($font-size-scale, xs);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: map.get($spacing, 2);
+  color: $color-ink-500;
+}
+
+.academic-affiliation {
+  font-size: map.get($font-size-scale, xs);
+  color: $color-ink-500;
+  margin-top: map.get($spacing, 2);
+}
+
+body.dark-mode .header-utilities {
+  border-color: rgba($dark-ink-500, 0.1);
+}
+
+// ---------------------------------------------------------------------------
+// Responsive
+// ---------------------------------------------------------------------------
+@media (max-width: 48rem) {
+  .header-primary {
+    flex-wrap: wrap;
+  }
+
+  .header-secondary {
+    flex: 1 1 100%;
+    min-width: 0;
+    padding-bottom: map.get($spacing, 2);
+  }
+
+  .site-search {
+    flex: 1;
+    min-width: 0;
+
+    input[type='search'] {
+      width: 100%;
+      min-width: 0;
+
+      &:focus { width: 100%; }
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .site-header,
+  .site-nav,
+  .nav-link,
+  .header-control,
+  .site-brand,
+  .site-search input[type='search'],
+  .site-search button {
+    transition-duration: 0.01ms;
+  }
+}