Skip to content

Commit 2733430

Browse files
dblythydblythy
authored
feat: make doc links dynamic (#933)
1 parent 7608870 commit 2733430

File tree

3 files changed

+182
-206
lines changed

3 files changed

+182
-206
lines changed

‎_includes/head.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,11 @@
2424

2525
<meta name="theme-color" content="#5298fc">
2626
<script>if(Function('/*@cc_on return document.documentMode===10@*/')()){document.documentElement.className+=' ie10';}</script>
27+
<script>
28+
if (window.location.protocol !== "https:" && window.location.hostname !== "127.0.0.1") window.location.protocol = "https:"; // force https
29+
var gitJson = {{ site.github.public_repositories | jsonify }};
30+
</script>
31+
<script src="https://parseplatform.org/js/links.js"></script>
2732

2833
<meta name="csrf-param" content="authenticity_token">
2934
<meta name="csrf-token" content="KxDoKysxiXDIRV8VXwDYlQStDGzjbGZ24y6ZgQLYAsE=">
@@ -43,7 +48,7 @@
4348
<!-- CSS -->
4449
<!-- build:css -->
4550
<link rel="preconnect" href="{{ site.baseUrl }}">
46-
51+
4752
{% if page.layout == "guide" %}
4853
<link href="{{ site.baseUrl }}/css/guide.css" rel="stylesheet" type="text/css"/>
4954
{% else %}

‎css/docs.scss‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,3 +68,178 @@ $svg-plus: "{{ '/assets/svgs/plus.svg' | prepend: site.baseurl }}";
6868
@import "lib/marketing/components/heros";
6969

7070
@import "lib/docs/components/docs-platform";
71+
72+
.repoRow {
73+
width: 100%;
74+
display: flex;
75+
gap: 40px;
76+
justify-content: center;
77+
flex-wrap: wrap;
78+
align-items: start;
79+
}
80+
81+
.repo, .repoList {
82+
border: 1px solid #E0E0EA;
83+
background: rgba(14, 105, 161, 0.03);
84+
overflow: hidden; }
85+
.repo .repoDescription p, .repoList .repoDescription p {
86+
font-size: 14px;
87+
overflow: hidden;
88+
color: rgba(102, 99, 122, 0.5);
89+
margin: 0px; }
90+
.repo img.icon, .repoList img.icon {
91+
height: 14px;
92+
margin-right: 4px;
93+
position: relative;
94+
top: 1px; }
95+
96+
.repo {
97+
text-overflow: ellipsis;
98+
min-width: 180px;
99+
max-width: 320px;
100+
border-radius: 4px;
101+
width: 33.333333%;
102+
margin-right: 0px;
103+
width: calc(33.333333% - 32px);
104+
}
105+
.repo:nth-of-type(3n) {
106+
margin-right: 0px; }
107+
.repo h4 {
108+
margin: 10px 0px;
109+
color: #66637A;
110+
text-overflow: ellipsis;
111+
overflow: hidden;
112+
font-size: 20px;;
113+
}
114+
.repo .SDKLogo {
115+
height: 30px;
116+
position: absolute;
117+
top: 0px;
118+
bottom: 0px;
119+
margin: auto 0;
120+
right: 16px; }
121+
.repo .repoTitle {
122+
padding: 10px 16px;
123+
position: relative; }
124+
.repo .repoTitle h4 {
125+
transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
126+
white-space: normal; }
127+
.repo .repoTitle p {
128+
margin: 0px;
129+
opacity: 0.45;
130+
font-size: 14px;
131+
font-family: "webfont_alright";
132+
line-height: 16px; }
133+
.repo .repoTitle p span {
134+
margin-right: 24px; }
135+
.repo .repoLink {
136+
height: 40px;
137+
border-top: 1px solid #E0E0EA;
138+
position: relative;
139+
cursor: pointer;
140+
background: #ffffff; }
141+
.repo .repoLink a {
142+
border-bottom: 1px solid #E0E0EA; }
143+
.repo .repoLink:first-of-type {
144+
margin-top: 0px; }
145+
.repo .repoLink p {
146+
line-height: 40px;
147+
padding: 0px 16px;
148+
color: #66637A;
149+
margin: 0px; }
150+
.repo .repoLink:not(.blankRepoLink):hover:after {
151+
opacity: 1; }
152+
.repo .repoLink:not(.blankRepoLink):after {
153+
transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
154+
content: "";
155+
position: absolute;
156+
right: 12px;
157+
top: 8px;
158+
width: 24px;
159+
height: 24px;
160+
background: url("../img/arrowRight.svg") no-repeat center;
161+
background-size: 100% auto;
162+
opacity: 0.18; }
163+
.repo .repoLink.expandableRepoLink {
164+
min-height: 40px;
165+
height: auto;
166+
max-height: 40px;
167+
overflow: hidden;
168+
transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
169+
.repo .repoLink.expandableRepoLink p {
170+
border-bottom: 1px solid #E0E0EA; }
171+
.repo .repoLink.expandableRepoLink ul {
172+
padding: 12px 0px;
173+
margin: 0px;
174+
background: rgba(224, 224, 234, 0.2); }
175+
.repo .repoLink.expandableRepoLink ul li {
176+
margin-left: 16px;
177+
padding-left: 12px;
178+
font-size: 14px;
179+
color: rgba(85, 85, 114, 0.6);
180+
line-height: 24px;
181+
list-style: none;
182+
border-left: 1px solid #E0E0EA;
183+
transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
184+
.repo .repoLink.expandableRepoLink ul li:hover {
185+
color: #555572;
186+
border-left: 1px solid #555572; }
187+
.repo .repoLink.expandableRepoLink.expanded {
188+
max-height: 240px; }
189+
.repo .repoLink.expandableRepoLink.expanded:not(.blankRepoLink):after {
190+
transform: rotate(90deg);
191+
opacity: 1; }
192+
.repo .repoDescription {
193+
background: #ffffff;
194+
border-top: 1px solid #E0E0EA;
195+
height: auto;
196+
text-overflow: ellipsis;
197+
line-height: 24px;
198+
padding: 12px 16px; }
199+
.repo .repoButton {
200+
padding: 14px 16px;
201+
border-top: 1px solid #E0E0EA;
202+
min-height: 61px; }
203+
.repo .repoButton button, .repo .repoButton .button {
204+
width: 100%; }
205+
@media screen and (max-width: 960px) {
206+
.repo {
207+
width: calc(33.333333333% - 24px);
208+
margin-right: calc(32px); } }
209+
@media screen and (max-width: 600px) {
210+
.repo {
211+
float: none;
212+
width: 100%;
213+
margin: 0 auto 32px auto; }
214+
.repo:nth-of-type(3n) {
215+
margin: 0 auto 32px auto; }
216+
.repo .blankRepoLink {
217+
display: none; } }
218+
219+
button, .button {
220+
font-family: "webfont_alright";
221+
border-radius: 4px;
222+
outline: none;
223+
background: #169CEE;
224+
color: #ffffff;
225+
border: none;
226+
margin-right: 32px;
227+
font-size: 14px;
228+
padding: 0px 16px;
229+
height: 32px;
230+
line-height: 32px;
231+
transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
232+
font-weight: 100; }
233+
button.outline, .button.outline {
234+
background: transparent;
235+
border: 1px solid #169CEE;
236+
color: #169CEE; }
237+
button.outline:hover, .button.outline:hover {
238+
background: #169CEE;
239+
color: #ffffff; }
240+
button.large, .button.large {
241+
font-family: 'alrightRegular';
242+
text-transform: uppercase;
243+
font-size: 18px;
244+
margin-right: 16px;
245+
margin-top: 16px; }

0 commit comments

Comments
 (0)