Skip to content

Commit 49e86cb

Browse files
3vorp3vorp
committed
feat!: massively improve api docs styles
re-added missing theme switcher and completely redid the hero section to look better
1 parent 9cf3eb8 commit 49e86cb

File tree

3 files changed

+141
-12
lines changed

3 files changed

+141
-12
lines changed

‎public/custom.css‎

Lines changed: 137 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,3 @@
1-
/*
2-
* hide hideous swagger topbar menu
3-
* todo: find a better way to do this (this deletes the theme selector lol)
4-
*/
5-
.swagger-ui .topbar {
6-
padding: 0px !important;
7-
height: 0px;
8-
visibility: hidden;
9-
background-color: transparent !important;
10-
}
11-
121
/* hide really ugly schemas section */
132
html > body > div#swagger-ui > section.swagger-ui.swagger-container > div.swagger-ui > div > div.wrapper:last-child {
143
display: none;
@@ -29,3 +18,140 @@ a {
2918
a:hover {
3019
color: #76C945;
3120
}
21+
22+
/**
23+
* Note: Many of these styles are based on the vitepress/faithful docs styling
24+
*/
25+
26+
/* sticky header */
27+
.topbar {
28+
top: 0;
29+
position: sticky;
30+
z-index: 999;
31+
}
32+
33+
/* put the theme switch on the right instead of weirdly in the middle */
34+
.topbar-wrapper {
35+
flex-flow: row nowrap !important;
36+
align-items: center !important;
37+
justify-content: space-between !important;
38+
}
39+
40+
/* remove hideous swagger logo */
41+
.topbar-wrapper > :first-child,
42+
.topbar-wrapper > :first-child * {
43+
width: 0px;
44+
height: 0px;
45+
}
46+
47+
/* and replace it with faithful */
48+
.topbar-wrapper > :first-child::after {
49+
content: "Faithful API";
50+
font-size: 16px;
51+
}
52+
53+
54+
/* add faithful logo to navbar */
55+
.topbar-wrapper > :first-child::before {
56+
display: block;
57+
content: "";
58+
background: center no-repeat url("https://database.faithfulpack.net/images/branding/logos/transparent/original/main_logo.png");
59+
width: 32px;
60+
height: 32px;
61+
background-size: 32px 32px;
62+
margin-right: 8px;
63+
}
64+
65+
/* move margin from info to information-container (works better when image is added) */
66+
.info {
67+
margin-top: 0 !important;
68+
margin-bottom: 0 !important;
69+
}
70+
.information-container {
71+
margin-top: 50px !important;
72+
margin-bottom: 50px !important;
73+
overflow: hidden !important;
74+
}
75+
76+
/* bigger title/description */
77+
.info .title {
78+
font-size: 56px !important;
79+
}
80+
.info .description p {
81+
font-size: 24px !important;
82+
opacity: 0.6;
83+
}
84+
85+
/* set up container to put text on left and image on right */
86+
.information-container > section > div {
87+
display: flex;
88+
flex-flow: row nowrap;
89+
align-items: center;
90+
justify-content: space-between;
91+
overflow: visible;
92+
}
93+
94+
/* create image */
95+
.information-container > section > div::after {
96+
display: block;
97+
content: "";
98+
background: center no-repeat url("https://database.faithfulpack.net/images/branding/logos/transparent/hd/main_logo.png");
99+
width: 320px;
100+
height: 320px;
101+
background-size: 320px 320px;
102+
padding-left: 300px !important;
103+
padding-right: 300px !important;
104+
}
105+
106+
@media screen and (max-width: 960px) {
107+
/* text overflow looks nicer this way */
108+
.information-container {
109+
max-width: 80vw !important;
110+
}
111+
112+
/* reverse so image ends up on top */
113+
.information-container > section > div {
114+
flex-flow: column-reverse nowrap;
115+
justify-content: center;
116+
text-align: center !important;
117+
}
118+
119+
/* smaller image/text and remove padding */
120+
.information-container > section > div::after {
121+
width: 240px;
122+
height: 240px;
123+
background-size: 240px 240px;
124+
padding-left: 0 !important;
125+
padding-right: 0 !important;
126+
}
127+
128+
.info .title {
129+
font-size: 48px !important;
130+
}
131+
132+
.info .description p {
133+
font-size: 20px !important;
134+
}
135+
136+
/* remove tags (wrapping starts getting weird) */
137+
.info .title > span {
138+
display: none !important;
139+
}
140+
}
141+
142+
/* make everything smaller again */
143+
@media screen and (max-width: 640px) {
144+
.info .title {
145+
font-size: 32px !important;
146+
}
147+
148+
.info .description p {
149+
font-size: 18px !important;
150+
}
151+
152+
.information-container > section > div::after {
153+
width: 160px;
154+
height: 160px;
155+
background-size: 160px 160px;
156+
}
157+
}

‎public/customDOM.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,7 @@ document.addEventListener("DOMContentLoaded", () => {
1717
</p>
1818
<p style="margin-top: 4px; margin-bottom: 24px">© ${new Date().getFullYear()} Faithful Resource Pack</p>
1919
</div>`;
20+
21+
// less terrible responsiveness
22+
document.head.innerHTML += `<meta name="viewport" content="width=device-width, initial-scale=1.0" />`;
2023
});

‎tsoa.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"src/**/*controller.ts"
77
],
88
"spec": {
9-
"name": "Faithful API",
9+
"name": "Welcome to the Faithful API Docs",
1010
"basePath": "v2",
1111
"outputDirectory": "public",
1212
"specVersion": 3,

0 commit comments

Comments
 (0)