docs/styles.css at main · superfly/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
/* Fonts
   - Bricolage Grotesque: request the variable axes so weight 325 / width 98.5% / opsz 24 resolve
     (fixed-weight request from docs.json cannot deliver these; browsers pick the variable face
     for any weight inside 200..800).
   - P22 Mackinac Pro: all four licensed cuts, served same-origin from the private flyio-fonts source repo, mounted at /assets. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fragment+Mono:ital@0;1&display=swap");

@font-face {
  font-family: "P22 Mackinac Pro";
  src: url("/assets/fonts/mackinac-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "P22 Mackinac Pro";
  src: url("/assets/fonts/mackinac-medium-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "P22 Mackinac Pro";
  src: url("/assets/fonts/mackinac-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "P22 Mackinac Pro";
  src: url("/assets/fonts/mackinac-bold-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --default-mono-font-family: "Fragment Mono";
}

/* Body copy: match fly.io/docs (17px / 1.6, Bricolage weight 325, width 98.5%, opsz 24).
   Bold runs at 575 / 97.5% rather than 700. */
#content {
  font-size: 17px;
  line-height: 1.6;
  font-weight: 325;
  font-variation-settings: "wdth" 98.5, "opsz" 24;
}
#content strong,
#content b {
  font-weight: 575;
  font-variation-settings: "wdth" 97.5, "opsz" 24;
}

/* Headings: medium by default, bold only for h1 */
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
  font-weight: 500;
}

/* Content column: 768px at large sizes (theme default is 672px throughout) */
@media (min-width: 1536px) {
  #content-area {
    max-width: 48rem;
  }
}

/* Existing helpers from the port */
.hide_icon_card [data-component-part="card-icon"],
.hide_icon_card h2 {
  display: none;
}

div.frame_white > div > div > div.relative.rounded-xl.overflow-hidden.flex.justify-center {
  background-color: #fff;
  padding: 8px;
}

div.frame_purple > div > div > div.relative.rounded-xl.overflow-hidden.flex.justify-center {
  background-color: #281950;
  padding: 8px;
}

.small_img img {
  max-width: 200px;
  padding: 12px;
}

.homepage_cards .columns {
  gap: calc(var(--spacing) * 4);
}

/* Account links: shown top right by auth-nav.js, so drop the maple theme's copies from the desktop sidebar footer.
   Sits over the right end of the theme's fixed tab bar (#navbar-transition-maple: h-12, px-12), which
   itself runs off-screen, so match its height and padding rather than living inside it. */
#fly-auth-nav {
  display: none;
}
@media (min-width: 1024px) {
  #fly-auth-nav {
    position: fixed;
    top: 0;
    right: 3rem;
    z-index: 30;
    height: 3rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }
  [data-banner-state="visible"] #fly-auth-nav {
    top: 2.5rem;
  }
  /* Desktop only: below lg these are the only auth links, in the mobile drawer. Prefix match so a
     query string change in docs.json doesn't leave a duplicate behind. */
  #sidebar li[id^="https://fly.io/app/sign-in/"],
  #sidebar li[id^="https://fly.io/app/sign-up/"] {
    display: none;
  }
}
#fly-auth-nav a {
  white-space: nowrap;
}
.fly-auth-nav-signup {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
}