docs/style.css at main · runpod/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
/* Custom styles for Runpod documentation */

/* Add your custom CSS rules here */

/* Page-specific styles for overview page only */
/* This uses a descendant selector to only target elements when .overview-page-wrapper exists */
body:has(.overview-page-wrapper) #content-container {
  max-width: 1080px !important;
  /* Use min() to ensure width never exceeds available space */
  width: min(1080px, calc(100vw - 304px - 128px)) !important;
  /* Center with equal margins, but use max() to prevent negative margins */
  margin-left: calc(304px + max(0px, (100vw - 304px - min(1080px, calc(100vw - 304px - 128px)) - 128px) / 2)) !important;
  margin-right: auto !important;
  margin-top: 48px !important;
  padding-left: 64px !important;
  padding-right: 64px !important;
}

body:has(.overview-page-wrapper) #content-area {
  max-width: none !important;
  width: 100% !important;
}

/* Responsive adjustments for overview page */
@media (max-width: 1400px) {
  body:has(.overview-page-wrapper) #content-container {
    max-width: 900px !important;
    width: min(900px, calc(100vw - 304px - 128px)) !important;
    margin-left: calc(304px + max(0px, (100vw - 304px - min(900px, calc(100vw - 304px - 128px)) - 128px) / 2)) !important;
  }
}

@media (max-width: 1100px) {
  body:has(.overview-page-wrapper) #content-container {
    max-width: 800px !important;
    width: min(800px, calc(100vw - 304px - 128px)) !important;
    margin-left: calc(304px + max(0px, (100vw - 304px - min(800px, calc(100vw - 304px - 128px)) - 128px) / 2)) !important;
  }
}

/* Below 1024px: sidebar disappears, center normally with respect to full viewport */
@media (max-width: 1024px) {
  body:has(.overview-page-wrapper) #content-container {
    max-width: 800px !important;
    width: calc(100% - 64px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* Extra small screens - stack everything */
@media (max-width: 600px) {
  body:has(.overview-page-wrapper) #content-container {
    width: 100vw !important;
    margin-left: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Responsive card stacking for overview page */
/* Try multiple selectors to target card groups */
@media (max-width: 1200px) {
  body:has(.overview-page-wrapper) [data-component="card-group"],
  body:has(.overview-page-wrapper) div[style*="grid-template-columns"],
  body:has(.overview-page-wrapper) .card-group {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* 1 column on small screens */
@media (max-width: 768px) {
  body:has(.overview-page-wrapper) [data-component="card-group"],
  body:has(.overview-page-wrapper) div[style*="grid-template-columns"],
  body:has(.overview-page-wrapper) .card-group {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}

/* Global card icon styles - align to top-left */
a.card div.h-6.w-6 {
  align-self: flex-start !important;
  margin-top: 0.25rem !important;
}

/* Fix paragraph spacing inside overview wrapper */
.overview-page-wrapper p {
  margin-bottom: 1rem;
}

.overview-page-wrapper p + p {
  margin-top: 1rem;
}