Skip to content

Commit 4fbcac5

Browse files
fern-supportKapil GowruKapil Gowru
authored
fix: footer links (#68)
Co-authored-by: Kapil Gowru <[email protected]> Co-authored-by: Kapil Gowru <[email protected]>
1 parent 6435122 commit 4fbcac5

File tree

5 files changed

+160
-164
lines changed

5 files changed

+160
-164
lines changed

‎fern/assets/styles.css‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,152 @@
212212

213213
/*** END -- PRODUCT SELECTOR STYLING ***/
214214

215+
/*** START -- DOCS HOMEPAGE STYLING ***/
216+
.docs-homepage {
217+
position: relative;
218+
.fern-card {
219+
text-decoration: none !important;
220+
}
221+
222+
223+
.dashed-pattern-left {
224+
position: absolute;
225+
left: -4rem;
226+
top: -8.5rem;
227+
height: calc(100% + 26rem);
228+
width: 1rem;
229+
opacity: 1;
230+
pointer-events: none;
231+
border-right: 1px solid var(--grayscale-5);
232+
mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0 ) 100%);
233+
-webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
234+
}
235+
236+
.dashed-pattern-right {
237+
position: absolute;
238+
right: -4rem;
239+
top: -8.5rem;
240+
height: calc(100% + 26rem);
241+
width: 1rem;
242+
opacity: 1;
243+
pointer-events: none;
244+
border-left: 1px solid var(--grayscale-5);
245+
mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
246+
-webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
247+
}
248+
249+
250+
.fern-card {
251+
border: none !important;
252+
padding: 0 !important;
253+
box-shadow: none !important;
254+
background-color: transparent !important;
255+
256+
.card-title {
257+
display: flex;
258+
gap: 0.25rem;
259+
align-items: center;
260+
}
261+
262+
img {
263+
transition: transform 0.15s ease-in-out;
264+
}
265+
266+
.arrow-right {
267+
height: 1rem;
268+
opacity: 0;
269+
transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
270+
transform: translateX(0px);
271+
}
272+
273+
&:hover {
274+
img {
275+
transform: scale(1.01);
276+
}
277+
278+
.arrow-right {
279+
opacity: 1;
280+
transform: translateX(2px);
281+
}
282+
}
283+
}
284+
}
285+
/*** END -- DOCS HOMEPAGE STYLING ***/
286+
287+
/*** START -- SDKS HOMEPAGE STYLING ***/
288+
.sdks-homepage {
289+
position: relative;
290+
291+
.fern-card {
292+
text-decoration: none !important;
293+
}
294+
295+
.dashed-pattern-left {
296+
position: absolute;
297+
left: -4rem;
298+
top: -8.5rem;
299+
height: calc(100% + 26rem);
300+
width: 1rem;
301+
opacity: 1;
302+
pointer-events: none;
303+
border-right: 1px solid var(--grayscale-5);
304+
mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0 ) 100%);
305+
-webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
306+
}
307+
308+
.dashed-pattern-right {
309+
position: absolute;
310+
right: -4rem;
311+
top: -8.5rem;
312+
height: calc(100% + 26rem);
313+
width: 1rem;
314+
opacity: 1;
315+
pointer-events: none;
316+
border-left: 1px solid var(--grayscale-5);
317+
mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
318+
-webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
319+
}
320+
321+
.fern-card {
322+
border: none !important;
323+
padding: 0 !important;
324+
box-shadow: none !important;
325+
background-color: transparent !important;
326+
327+
.external-link-icon {
328+
display: none !important;
329+
}
330+
331+
.card-title {
332+
display: flex;
333+
gap: 0.25rem;
334+
align-items: center;
335+
}
336+
337+
img {
338+
transition: transform 0.15s ease-in-out;
339+
}
340+
341+
.arrow-right {
342+
height: 1rem;
343+
opacity: 0;
344+
transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
345+
transform: translateX(0px);
346+
}
347+
348+
&:hover {
349+
img {
350+
transform: scale(1.01);
351+
}
352+
353+
.arrow-right {
354+
opacity: 1;
355+
transform: translateX(2px);
356+
}
357+
}
358+
}
359+
}
360+
/*** START -- SDKS HOMEPAGE STYLING ***/
215361

216362
/*** START -- LANDING PAGE STYLING ***/
217363
:is(.dark) {

‎fern/footer-dist/output.js‎

Lines changed: 5 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎fern/products/docs/pages/getting-started/overview.mdx‎

Lines changed: 0 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -3,80 +3,6 @@ title: Documentation
33
description: Meet documentation that is stunning by default, AI-ready, and designed to convert.
44
---
55

6-
<style>
7-
{`
8-
.fern-card {
9-
text-decoration: none !important;
10-
}
11-
12-
.docs-homepage {
13-
position: relative;
14-
15-
.dashed-pattern-left {
16-
position: absolute;
17-
left: -4rem;
18-
top: -8.5rem;
19-
height: calc(100% + 26rem);
20-
width: 1rem;
21-
opacity: 1;
22-
pointer-events: none;
23-
border-right: 1px solid var(--grayscale-5);
24-
mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0 ) 100%);
25-
-webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
26-
}
27-
28-
.dashed-pattern-right {
29-
position: absolute;
30-
right: -4rem;
31-
top: -8.5rem;
32-
height: calc(100% + 26rem);
33-
width: 1rem;
34-
opacity: 1;
35-
pointer-events: none;
36-
border-left: 1px solid var(--grayscale-5);
37-
mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
38-
-webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
39-
}
40-
41-
42-
.fern-card {
43-
border: none !important;
44-
padding: 0 !important;
45-
box-shadow: none !important;
46-
background-color: transparent !important;
47-
48-
.card-title {
49-
display: flex;
50-
gap: 0.25rem;
51-
align-items: center;
52-
}
53-
54-
img {
55-
transition: transform 0.15s ease-in-out;
56-
}
57-
58-
.arrow-right {
59-
height: 1rem;
60-
opacity: 0;
61-
transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
62-
transform: translateX(0px);
63-
}
64-
65-
&:hover {
66-
img {
67-
transform: scale(1.01);
68-
}
69-
70-
.arrow-right {
71-
opacity: 1;
72-
transform: translateX(2px);
73-
}
74-
}
75-
}
76-
}
77-
`}
78-
</style>
79-
806
<div className="docs-homepage">
817
{/* Dashed Pattern - Left Side */}
828
<div className="dashed-pattern-left"></div>

‎fern/products/sdks/introduction.mdx‎

Lines changed: 1 addition & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -3,90 +3,7 @@ title: SDKs Overview
33
description: Generate idiomatic SDKs in multiple programming languages
44
---
55

6-
<style>
7-
{`
8-
.fern-card {
9-
text-decoration: none !important;
10-
}
11-
12-
.docs-homepage {
13-
position: relative;
14-
15-
.dashed-pattern-left {
16-
position: absolute;
17-
left: -4rem;
18-
top: -8.5rem;
19-
height: calc(100% + 26rem);
20-
width: 1rem;
21-
opacity: 1;
22-
pointer-events: none;
23-
border-right: 1px solid var(--grayscale-5);
24-
mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0 ) 100%);
25-
-webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
26-
}
27-
28-
.dashed-pattern-right {
29-
position: absolute;
30-
right: -4rem;
31-
top: -8.5rem;
32-
height: calc(100% + 26rem);
33-
width: 1rem;
34-
opacity: 1;
35-
pointer-events: none;
36-
border-left: 1px solid var(--grayscale-5);
37-
mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
38-
-webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
39-
}
40-
41-
.fern-card {
42-
border: none !important;
43-
padding: 0 !important;
44-
box-shadow: none !important;
45-
background-color: transparent !important;
46-
47-
.external-link-icon {
48-
display: none !important;
49-
}
50-
51-
.card-title {
52-
display: flex;
53-
gap: 0.25rem;
54-
align-items: center;
55-
}
56-
57-
img {
58-
transition: transform 0.15s ease-in-out;
59-
}
60-
61-
.arrow-right {
62-
height: 1rem;
63-
opacity: 0;
64-
transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
65-
transform: translateX(0px);
66-
}
67-
68-
&:hover {
69-
img {
70-
transform: scale(1.01);
71-
}
72-
73-
.arrow-right {
74-
opacity: 1;
75-
transform: translateX(2px);
76-
}
77-
}
78-
}
79-
}
80-
81-
:is(.dark) {
82-
.dashed-gradient {
83-
background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_351_76922)"><rect width="100" height="100" fill="transparent"/><path d="M0 100L100 -7.07537e-07" stroke="%2362636C" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_351_76922"><rect width="100" height="100" fill="white"/></clipPath></defs></svg>');
84-
}
85-
}
86-
`}
87-
</style>
88-
89-
<div className="docs-homepage">
6+
<div className="sdks-homepage">
907
{/* Dashed Pattern - Left Side */}
918
<div className="dashed-pattern-left">
929
{/* <div className="dashed-gradient"></div> */}

‎footer/src/FernFooter.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ export const FernFooter: React.FC = () => {
1717
return (
1818
<>
1919
<style>{`
20+
#fern-footer {
21+
position: relative;
22+
}
23+
2024
#fern-footer-wrapper {
2125
border-top: 1px solid var(--border);
2226
}
@@ -280,17 +284,17 @@ export const FernFooter: React.FC = () => {
280284
<div className="footer-column">
281285
<h4 className="footer-column-title">Documentation</h4>
282286
<div className="footer-column-links">
283-
<a href="/api-definition/introduction/what-is-an-api-definition" className="footer-link">API Definition</a>
284-
<a href="/sdks/overview/introduction" className="footer-link">SDKs</a>
285-
<a href="/docs/getting-started/overview" className="footer-link">Docs</a>
287+
<a href="https://buildwithfern.com/learn/v2/api-definition/introduction/what-is-an-api-definition" className="footer-link">API Definition</a>
288+
<a href="https://buildwithfern.com/learn/v2/sdks/overview/introduction" className="footer-link">SDKs</a>
289+
<a href="https://buildwithfern.com/learn/v2/docs/getting-started/overview" className="footer-link">Docs</a>
286290
</div>
287291
</div>
288292

289293
<div className="footer-column">
290294
<h4 className="footer-column-title">Resources</h4>
291295
<div className="footer-column-links">
292296
<a href="https://buildwithfern.com/blog" className="footer-link">Blog</a>
293-
<a href="/learn/v2/home#help" className="footer-link">Support</a>
297+
<a href="https://buildwithfern.com/learn/v2/home#help" className="footer-link">Support</a>
294298
<a href="https://buildwithfern.com/pricing" className="footer-link">Pricing</a>
295299
<a href="https://buildwithfern.com/slack" className="footer-link">Slack</a>
296300
</div>
@@ -300,7 +304,6 @@ export const FernFooter: React.FC = () => {
300304
<h4 className="footer-column-title">Company</h4>
301305
<div className="footer-column-links">
302306
<a href="https://brandfetch.com/buildwithfern.com" className="footer-link">Brand Kit</a>
303-
<a href="https://github.com/fern-api/fern" className="footer-link">Github</a>
304307
<a href="https://buildwithfern.com/privacy-policy" className="footer-link">Privacy Policy</a>
305308
<a href="https://buildwithfern.com/terms-of-service" className="footer-link">Terms of Service</a>
306309
</div>

0 commit comments

Comments
 (0)