docs/styles.css at main · stackryze/docs · 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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
#content-area {
  max-width: 60rem;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: 0.05em !important;
}

/* Stackryze sidebar-header logo — Mintlify applies `h-6` (24px) + `max-w-48`
   via Tailwind utility classes on the <img class="nav-logo …"> element.
   The logo sits in the same flex row as the dark-mode toggle pill.
   Toggle uses responsive sizing: mobile `h-[2.375rem]` (38px) and
   desktop `lg:h-7` (28px). To keep both elements on a clean shared
   baseline, the logo MUST match the toggle's height at each breakpoint.
   Touching only the <img> + its <a> wrapper — nothing else in the row. */
a:has(.nav-logo),
.sidebar-content a:has(.nav-logo),
nav a:has(.nav-logo) {
  display: inline-flex !important;
  align-items: center !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  flex-shrink: 0 !important;
  align-self: center !important;
}
.nav-logo,
img.nav-logo,
a:has(.nav-logo) img.nav-logo {
  height: 30px !important;
  max-height: 30px !important;
  width: auto !important;
  max-width: 220px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  /* Keep proportions of the 300×44 viewBox */
  aspect-ratio: 300 / 44 !important;
}
@media (min-width: 1024px) {
  a:has(.nav-logo),
  .sidebar-content a:has(.nav-logo),
  nav a:has(.nav-logo) {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
  }
  .nav-logo,
  img.nav-logo {
    height: 22px !important;
    max-height: 22px !important;
    max-width: 180px !important;
  }
}

/* Changelog table — version-number links keep the default text color and
   only color the underline in the active green brand color. */
table a[href*="/changelog/"] {
  text-decoration-color: #4FBE7A !important;
  text-underline-offset: 2px !important;
}
table a[href*="/changelog/"]:hover {
  text-decoration-color: #2E7D4F !important;
}
.dark table a[href*="/changelog/"] {
  text-decoration-color: #7DD9A1 !important;
}
.dark table a[href*="/changelog/"]:hover {
  text-decoration-color: #4FBE7A !important;
}

/* Theme toggle — give the sun and moon icons a visible gap between them.
   The pill uses `justify-between` to push the two icons to opposite ends,
   so adding margin to the sun pushes it leftward (away from the moon).
   No Tailwind utility classes are overridden — only icon-side spacing. */
button[aria-label="Toggle dark mode"] svg:first-of-type {
  margin-right: 10px !important;
}

/* Sidebar nested-group chevrons — Mintlify ships its own rotating chevron
   on every nested sidebar group (Guides > DNS providers, Changelog > per-month
   sub-groups, etc). It rotates 90deg when aria-expanded flips true → false.
   Leave the framework default in place; don't override it. */

/* Changelog per-month blocks — give each "<Month YYYY>" heading breathing
   room against the previous month block. Mintlify tags every nested-group
   sidebar <li> with `data-group-tag`, so we target that. The very first
   month under each product (Domains / Hosting / StackNS) is the very first
   child of its sidebar <ul>; suppress its top margin so it sits flush under
   the product header. */
#sidebar li[data-group-tag] {
  margin-top: 1rem !important;
}
#sidebar li[data-group-tag]:first-of-type {
  margin-top: 0 !important;
}

.welcome-page .card-group {
  margin: 3rem auto 8rem;
  max-width: 70rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.welcome-page .card-group .card {
  padding: 1rem;
}

.welcome-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 20vh;
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 2.5rem;
}

.welcome-hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
  color: #fff;
}

.welcome-hero p {
  font-size: 1.25rem;
  max-width: 600px;
  margin: 0 auto;
}

.welcome-hero h1 {
  color: rgb(41 42 37 / 1);
}
.dark .welcome-hero h1 {
  color: rgb(255 255 255 / 1);
}
.welcome-hero p {
  color: rgb(83 85 79 / 1);
}
.dark .welcome-hero p {
  color: rgb(162 164 158 / 1);
}