lab-website/styles.css at main · RobertsLab/lab-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
/* css styles */

/* ------------------------------------------------------------------ */
/* Prominent category filter bar (Publications page)                   */
/* The category block is moved out of the right margin into this bar    */
/* (see the relocation script at the bottom of publications.qmd) and    */
/* its categories are rendered as large, clickable pill buttons.        */
/* ------------------------------------------------------------------ */

.category-filter-bar {
  margin: 1rem 0 1.75rem;
  padding: 1rem 1.25rem 1.1rem;
  background: #f5f7f9;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.6rem;
}

.category-filter-bar .quarto-listing-category-title {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #2c3e50;
}

.category-filter-bar .quarto-listing-category {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.category-filter-bar .quarto-listing-category .category {
  display: inline-block;
  padding: 0.38rem 0.85rem;
  border: 1px solid #2c3e50;
  border-radius: 999px;
  background: #fff;
  color: #2c3e50;
  font-size: 0.92rem;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.category-filter-bar .quarto-listing-category .category:hover {
  background: #2c3e50;
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.category-filter-bar .quarto-listing-category .category.active {
  background: #18bc9c; /* flatly accent */
  border-color: #18bc9c;
  color: #fff;
  font-weight: 600;
}

.category-filter-bar .quarto-category-count {
  opacity: 0.65;
  font-size: 0.8em;
}

/* Dark mode (darkly theme) */
.quarto-dark .category-filter-bar {
  background: #2b2b2b;
  border-color: #444;
}
.quarto-dark .category-filter-bar .quarto-listing-category-title {
  color: #e8e8e8;
}
.quarto-dark .category-filter-bar .quarto-listing-category .category {
  background: #303030;
  color: #e0e0e0;
  border-color: #6c757d;
}
.quarto-dark .category-filter-bar .quarto-listing-category .category:hover {
  background: #e0e0e0;
  color: #222;
}
.quarto-dark .category-filter-bar .quarto-listing-category .category.active {
  background: #18bc9c;
  border-color: #18bc9c;
  color: #fff;
}