datalog-theme 0.6.0

data/_sass/_search.scss

@@ -0,0 +1,654 @@
+@use 'sass:map';
+@use 'sass:color';
+@use "variables" as *;
+@use "mixins" as *;
+
+// ---------------------------------------------------------------------------
+// Search app layout
+// ---------------------------------------------------------------------------
+.search-app {
+  display: grid;
+  gap: map.get($spacing, 6);
+
+  &__panel {
+    display: grid;
+    gap: map.get($spacing, 5);
+  }
+
+  &__form {
+    display: grid;
+    gap: map.get($spacing, 4);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Search input
+// ---------------------------------------------------------------------------
+.search-app__query {
+  position: relative;
+}
+
+.search-app__label {
+  display: block;
+  font-size: map.get($font-size-scale, sm);
+  font-weight: 600;
+  margin-bottom: map.get($spacing, 2);
+  color: $color-ink-700;
+}
+
+body.dark-mode .search-app__label {
+  color: $dark-ink-700;
+}
+
+.search-app__input-group {
+  display: flex;
+  gap: map.get($spacing, 2);
+}
+
+.search-app__input {
+  flex: 1;
+  padding: 0.625rem 1rem;
+  border: 2px solid rgba($color-neutral-200, 0.8);
+  border-radius: map.get($radius, lg);
+  font-size: map.get($font-size-scale, base);
+  font-family: $font-family-sans;
+  background: white;
+  transition: border-color $transition-base, box-shadow $transition-base;
+
+  &:focus {
+    outline: none;
+    border-color: $color-accent-primary;
+    box-shadow: 0 0 0 3px rgba($color-accent-primary, 0.12);
+  }
+
+  &::placeholder {
+    color: $color-ink-300;
+  }
+}
+
+body.dark-mode .search-app__input {
+  background: $dark-surface-300;
+  border-color: rgba($dark-ink-500, 0.2);
+  color: $dark-ink-900;
+
+  &:focus {
+    border-color: $dark-accent-primary;
+    box-shadow: 0 0 0 3px rgba($dark-accent-primary, 0.15);
+  }
+
+  &::placeholder {
+    color: $dark-ink-300;
+  }
+}
+
+.search-app__submit {
+  padding: 0.625rem 1.25rem;
+  border: none;
+  border-radius: map.get($radius, lg);
+  background: $color-accent-primary;
+  color: white;
+  font-weight: 600;
+  font-size: map.get($font-size-scale, sm);
+  cursor: pointer;
+  transition: background $transition-base;
+  white-space: nowrap;
+
+  &:hover {
+    background: color.adjust($color-accent-primary, $lightness: -6%);
+  }
+
+  &:focus-visible {
+    @include focus-ring($color-accent-primary);
+  }
+}
+
+body.dark-mode .search-app__submit {
+  background: $dark-accent-primary;
+  color: $color-ink-900;
+}
+
+.search-app__shortcuts {
+  font-size: map.get($font-size-scale, xs);
+  color: $color-ink-500;
+  margin: map.get($spacing, 2) 0 0;
+
+  kbd {
+    display: inline-block;
+    padding: 0.1rem 0.375rem;
+    border: 1px solid rgba($color-neutral-200, 0.8);
+    border-radius: map.get($radius, sm);
+    background: rgba($color-neutral-100, 0.6);
+    font-family: $font-family-mono;
+    font-size: 0.75rem;
+    line-height: 1.4;
+  }
+}
+
+body.dark-mode .search-app__shortcuts {
+  color: $dark-ink-500;
+
+  kbd {
+    border-color: rgba($dark-ink-500, 0.2);
+    background: rgba($dark-surface-300, 0.6);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Autocomplete dropdown
+// ---------------------------------------------------------------------------
+.search-app__autocomplete {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  background: white;
+  border: 1px solid rgba($color-neutral-200, 0.6);
+  border-radius: map.get($radius, lg);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+  max-height: 16rem;
+  overflow-y: auto;
+
+  &:empty {
+    display: none;
+  }
+}
+
+body.dark-mode .search-app__autocomplete {
+  background: $dark-surface-300;
+  border-color: rgba($dark-ink-500, 0.2);
+}
+
+// ---------------------------------------------------------------------------
+// Filters
+// ---------------------------------------------------------------------------
+.search-app__filters {
+  border: 1px solid rgba($color-neutral-200, 0.5);
+  border-radius: map.get($radius, lg);
+  padding: map.get($spacing, 4);
+  margin: 0;
+
+  legend {
+    font-weight: 600;
+    font-size: map.get($font-size-scale, sm);
+    padding: 0 map.get($spacing, 2);
+    color: $color-ink-700;
+  }
+}
+
+body.dark-mode .search-app__filters {
+  border-color: rgba($dark-ink-500, 0.15);
+
+  legend { color: $dark-ink-700; }
+}
+
+.search-app__filters-grid {
+  display: grid;
+  gap: map.get($spacing, 3);
+
+  @include respond-to(md) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.search-filter {
+  display: grid;
+  gap: map.get($spacing, 1);
+
+  &__label {
+    font-size: map.get($font-size-scale, xs);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: $color-ink-500;
+  }
+
+  select {
+    width: 100%;
+    padding: map.get($spacing, 2) map.get($spacing, 3);
+    border: 1px solid rgba($color-neutral-200, 0.6);
+    border-radius: map.get($radius, md);
+    font-size: map.get($font-size-scale, sm);
+    font-family: $font-family-sans;
+    background: white;
+
+    &:focus-visible {
+      outline: 2px solid $color-accent-primary;
+      outline-offset: 1px;
+    }
+  }
+}
+
+body.dark-mode .search-filter {
+  &__label { color: $dark-ink-500; }
+
+  select {
+    background: $dark-surface-300;
+    border-color: rgba($dark-ink-500, 0.2);
+    color: $dark-ink-900;
+  }
+}
+
+.search-filter__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: map.get($spacing, 1);
+}
+
+.search-filter__tag {
+  display: inline-block;
+  padding: 0.125rem 0.5rem;
+  border: 1px solid rgba($color-accent-tertiary, 0.3);
+  border-radius: 999px;
+  font-size: map.get($font-size-scale, xs);
+  color: $color-accent-tertiary;
+  background: transparent;
+  cursor: pointer;
+  transition: background $transition-base, color $transition-base;
+
+  &:hover, &.is-active {
+    background: rgba($color-accent-tertiary, 0.1);
+    border-color: $color-accent-tertiary;
+  }
+
+  &:focus-visible {
+    outline: 2px solid $color-accent-primary;
+    outline-offset: 1px;
+  }
+}
+
+body.dark-mode .search-filter__tag {
+  border-color: rgba($dark-accent-tertiary, 0.3);
+  color: $dark-accent-tertiary;
+
+  &:hover, &.is-active {
+    background: rgba($dark-accent-tertiary, 0.15);
+    border-color: $dark-accent-tertiary;
+  }
+}
+
+.search-filter__empty {
+  font-size: map.get($font-size-scale, xs);
+  color: $color-ink-500;
+}
+
+// ---------------------------------------------------------------------------
+// Analytics sidebar
+// ---------------------------------------------------------------------------
+.search-app__analytics {
+  border: 1px solid rgba($color-neutral-200, 0.5);
+  border-radius: map.get($radius, lg);
+  padding: map.get($spacing, 4);
+
+  &-title {
+    font-size: map.get($font-size-scale, sm);
+    font-weight: 600;
+    margin: 0 0 map.get($spacing, 2);
+  }
+
+  &-empty {
+    font-size: map.get($font-size-scale, sm);
+    color: $color-ink-500;
+    margin: 0;
+  }
+
+  &-list {
+    margin: 0;
+    padding: 0 0 0 map.get($spacing, 4);
+    font-size: map.get($font-size-scale, sm);
+
+    li { padding: map.get($spacing, 1) 0; }
+  }
+}
+
+body.dark-mode .search-app__analytics {
+  border-color: rgba($dark-ink-500, 0.15);
+  &-empty { color: $dark-ink-500; }
+}
+
+// ---------------------------------------------------------------------------
+// Results
+// ---------------------------------------------------------------------------
+.search-app__results {
+  position: relative;
+}
+
+.search-app__results-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: map.get($spacing, 3);
+  margin-bottom: map.get($spacing, 4);
+
+  h2 {
+    font-size: map.get($font-size-scale, lg);
+    margin: 0;
+  }
+}
+
+.search-app__results-meta {
+  font-size: map.get($font-size-scale, sm);
+  color: $color-ink-500;
+  margin: 0;
+}
+
+body.dark-mode .search-app__results-meta {
+  color: $dark-ink-500;
+}
+
+.search-app__results-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: map.get($spacing, 4);
+}
+
+// ---------------------------------------------------------------------------
+// Loading
+// ---------------------------------------------------------------------------
+.search-app__loading {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: $color-ink-500;
+  font-size: map.get($font-size-scale, sm);
+
+  &[hidden] { display: none !important; }
+}
+
+.search-app__spinner {
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 50%;
+  border: 2px solid rgba($color-neutral-200, 0.6);
+  border-top-color: $color-accent-primary;
+  animation: search-spinner 0.8s linear infinite;
+}
+
+body.dark-mode .search-app__spinner {
+  border-color: rgba($dark-ink-500, 0.2);
+  border-top-color: $dark-accent-primary;
+}
+
+// ---------------------------------------------------------------------------
+// No results
+// ---------------------------------------------------------------------------
+.search-app__no-results {
+  margin-top: map.get($spacing, 6);
+  text-align: center;
+  color: $color-ink-500;
+
+  p { margin: map.get($spacing, 3) 0 0; }
+}
+
+.search-app__no-results-illustration {
+  max-width: 120px;
+  margin: 0 auto;
+  color: $color-ink-300;
+
+  svg { width: 100%; height: auto; display: block; }
+}
+
+body.dark-mode .search-app__no-results {
+  color: $dark-ink-500;
+  .search-app__no-results-illustration { color: $dark-ink-300; }
+}
+
+.search-app__noscript {
+  text-align: center;
+  padding: map.get($spacing, 6);
+  color: $color-ink-500;
+}
+
+// ---------------------------------------------------------------------------
+// Individual result card
+// ---------------------------------------------------------------------------
+.search-result {
+  list-style: none;
+}
+
+.search-result__card {
+  background: white;
+  border: 1px solid rgba($color-neutral-200, 0.5);
+  border-radius: map.get($radius, lg);
+  padding: map.get($spacing, 5);
+  display: grid;
+  gap: map.get($spacing, 3);
+  transition: border-color $transition-base, box-shadow $transition-base, transform $transition-base;
+
+  &:hover {
+    border-color: rgba($color-accent-primary, 0.2);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+    transform: translateY(-1px);
+  }
+}
+
+body.dark-mode .search-result__card {
+  background: $dark-surface-300;
+  border-color: rgba($dark-ink-500, 0.15);
+
+  &:hover {
+    border-color: rgba($dark-accent-primary, 0.25);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+  }
+}
+
+.search-result.is-active .search-result__card,
+.search-result:focus-within .search-result__card {
+  border-color: $color-accent-primary;
+  box-shadow: 0 0 0 3px rgba($color-accent-primary, 0.1);
+  transform: translateY(-2px);
+}
+
+body.dark-mode .search-result.is-active .search-result__card,
+body.dark-mode .search-result:focus-within .search-result__card {
+  border-color: $dark-accent-primary;
+  box-shadow: 0 0 0 3px rgba($dark-accent-primary, 0.15);
+}
+
+.search-result__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: map.get($spacing, 2);
+  font-size: map.get($font-size-scale, xs);
+  margin: 0;
+}
+
+.search-result__type {
+  padding: 0.1rem 0.5rem;
+  border-radius: map.get($radius, sm);
+  background: rgba($color-accent-secondary, 0.1);
+  color: $color-accent-secondary;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+body.dark-mode .search-result__type {
+  background: rgba($dark-accent-secondary, 0.15);
+  color: $dark-accent-secondary;
+}
+
+.search-result__difficulty {
+  padding: 0.1rem 0.5rem;
+  border-radius: map.get($radius, sm);
+  background: rgba($color-accent-tertiary, 0.08);
+  color: $color-accent-tertiary;
+  font-weight: 500;
+  text-transform: capitalize;
+}
+
+body.dark-mode .search-result__difficulty {
+  background: rgba($dark-accent-tertiary, 0.12);
+  color: $dark-accent-tertiary;
+}
+
+.search-result__language {
+  color: $color-ink-500;
+}
+
+body.dark-mode .search-result__language {
+  color: $dark-ink-500;
+}
+
+.search-result__title {
+  font-size: map.get($font-size-scale, md);
+  margin: 0;
+
+  a {
+    color: $color-ink-900;
+    text-decoration: none;
+    &:hover { color: $color-accent-primary; }
+  }
+}
+
+body.dark-mode .search-result__title a {
+  color: $dark-ink-900;
+  &:hover { color: $dark-accent-primary; }
+}
+
+.search-result__summary {
+  color: $color-ink-500;
+  font-size: map.get($font-size-scale, sm);
+  margin: 0;
+  line-height: $line-height-base;
+
+  mark {
+    background: rgba($color-warning, 0.25);
+    color: inherit;
+    border-radius: 2px;
+    padding: 0 0.125rem;
+  }
+}
+
+body.dark-mode .search-result__summary {
+  color: $dark-ink-500;
+
+  mark {
+    background: rgba($color-warning, 0.3);
+  }
+}
+
+// Code and math previews
+.search-result__body {
+  display: grid;
+  gap: map.get($spacing, 2);
+}
+
+.search-result__code {
+  font-size: map.get($font-size-scale, xs) !important;
+  border-radius: map.get($radius, md);
+  max-height: 8rem;
+  overflow: auto;
+  margin: 0;
+
+  &[hidden] { display: none; }
+}
+
+.search-result__math {
+  padding: map.get($spacing, 3);
+  background: rgba($color-neutral-100, 0.5);
+  border-radius: map.get($radius, md);
+  position: relative;
+
+  &[hidden] { display: none; }
+}
+
+body.dark-mode .search-result__math {
+  background: rgba($dark-surface-200, 0.5);
+}
+
+.search-result__math-copy {
+  position: absolute;
+  top: map.get($spacing, 2);
+  right: map.get($spacing, 2);
+  background: transparent;
+  border: 1px solid rgba($color-neutral-200, 0.5);
+  border-radius: map.get($radius, sm);
+  padding: 0.25rem 0.375rem;
+  cursor: pointer;
+  font-size: map.get($font-size-scale, sm);
+  color: $color-ink-500;
+
+  &:hover { background: rgba($color-accent-primary, 0.06); }
+}
+
+.search-result__excerpt {
+  color: $color-ink-500;
+  font-size: map.get($font-size-scale, sm);
+  margin: 0;
+
+  &[hidden] { display: none; }
+
+  mark {
+    background: rgba($color-warning, 0.25);
+    color: inherit;
+    border-radius: 2px;
+    padding: 0 0.125rem;
+  }
+}
+
+body.dark-mode .search-result__excerpt {
+  color: $dark-ink-500;
+}
+
+// Footer: tags + date
+.search-result__footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: map.get($spacing, 2);
+}
+
+.search-result__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: map.get($spacing, 1);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    font-size: map.get($font-size-scale, xs);
+    padding: 0.1rem 0.4rem;
+    border-radius: 999px;
+    background: rgba($color-accent-tertiary, 0.08);
+    color: $color-accent-tertiary;
+    font-weight: 500;
+  }
+}
+
+body.dark-mode .search-result__tags li {
+  background: rgba($dark-accent-tertiary, 0.12);
+  color: $dark-accent-tertiary;
+}
+
+.search-result__date {
+  font-size: map.get($font-size-scale, xs);
+  color: $color-ink-500;
+
+  &[hidden] { display: none; }
+}
+
+body.dark-mode .search-result__date {
+  color: $dark-ink-500;
+}
+
+.search-result.is-active .search-result__title a,
+.search-result:focus-within .search-result__title a {
+  color: $color-accent-primary;
+}
+
+body.dark-mode .search-result.is-active .search-result__title a,
+body.dark-mode .search-result:focus-within .search-result__title a {
+  color: $dark-accent-primary;
+}
+
+// ---------------------------------------------------------------------------
+// Animation
+// ---------------------------------------------------------------------------
+@keyframes search-spinner {
+  to { transform: rotate(360deg); }
+}