Skip to content

Commit 7527440

Browse files
svvimmingsvvimming
committed
fix: add icons and fix font size on subfooter card links
1 parent 727ef57 commit 7527440

File tree

3 files changed

+64
-8
lines changed

3 files changed

+64
-8
lines changed

‎components/site-footer.vue

+3-4
Original file line numberDiff line numberDiff line change
@@ -108,16 +108,15 @@ const scrollToTop = async () => {
108108
background-repeat: no-repeat;
109109
background-image: url('/images/ring-of-cross-sections-on-angle.png');
110110
@include gridMaxMQ {
111-
height: calc(100% + 10rem);
111+
height: calc(100% + 3rem);
112112
width: 100%;
113-
top: -10rem;
113+
top: -3rem;
114114
left: calc(100% - 52rem);
115-
background-position: -227px -33px;
115+
background-position: center -106px;
116116
}
117117
@include small {
118118
left: 0;
119119
width: 100%;
120-
background-position: center top;
121120
}
122121
}
123122
}

‎components/subfooter-card.vue

+60-3
Original file line numberDiff line numberDiff line change
@@ -253,12 +253,69 @@ const cardStyles = computed(() => {
253253
display: inline;
254254
}
255255
}
256-
:deep(a) {
257-
font-size: 1.125rem;
256+
:deep(span) {
257+
font-size: inherit;
258+
font-weight: inherit;
259+
line-height: inherit;
260+
letter-spacing: inherit;
258261
display: inline-block;
262+
cursor: pointer;
259263
@include transitionDefault;
260264
&:hover {
261-
transform: scale(1.15);
265+
transform: scale(1.08);
266+
}
267+
&.github-link,
268+
&.slack-link {
269+
display: inline-block;
270+
position: relative;
271+
padding-left: toRem(19);
272+
&:before,
273+
&:after {
274+
content: '';
275+
position: absolute;
276+
left: 0;
277+
top: 50%;
278+
width: toRem(15);
279+
height: toRem(15);
280+
transform: translateY(-50%);
281+
@include transitionDefault;
282+
}
283+
&:before {
284+
opacity: 1;
285+
}
286+
&:after {
287+
opacity: 0;
288+
}
289+
&:hover {
290+
&:before {
291+
opacity: 0;
292+
}
293+
&:after {
294+
opacity: 1;
295+
}
296+
}
297+
}
298+
&.github-link {
299+
&:before {
300+
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.5 0C3.35625 0 0 3.44114 0 7.6897C0 11.0924 2.14687 13.9664 5.12812 14.9853C5.50312 15.0526 5.64375 14.8219 5.64375 14.62C5.64375 14.4374 5.63438 13.8319 5.63438 13.1878C3.75 13.5435 3.2625 12.7168 3.1125 12.2843C3.02813 12.0632 2.6625 11.3808 2.34375 11.1981C2.08125 11.0539 1.70625 10.6983 2.33437 10.6887C2.925 10.6791 3.34687 11.2462 3.4875 11.4769C4.1625 12.6399 5.24063 12.3131 5.67188 12.1113C5.7375 11.6115 5.93437 11.275 6.15 11.0828C4.48125 10.8905 2.7375 10.2273 2.7375 7.28599C2.7375 6.44974 3.02813 5.75767 3.50625 5.21939C3.43125 5.02714 3.16875 4.23895 3.58125 3.18161C3.58125 3.18161 4.20937 2.97976 5.64375 3.96981C6.24375 3.79679 6.88125 3.71028 7.51875 3.71028C8.15625 3.71028 8.79375 3.79679 9.39375 3.96981C10.8281 2.97015 11.4563 3.18161 11.4563 3.18161C11.8688 4.23895 11.6062 5.02714 11.5312 5.21939C12.0094 5.75767 12.3 6.44013 12.3 7.28599C12.3 10.2369 10.5469 10.8905 8.87813 11.0828C9.15 11.3231 9.38438 11.7845 9.38438 12.5054C9.38438 13.5339 9.375 14.3605 9.375 14.62C9.375 14.8219 9.51562 15.0622 9.89062 14.9853C11.3796 14.4701 12.6734 13.489 13.59 12.1803C14.5066 10.8715 14.9997 9.30093 15 7.6897C15 3.44114 11.6438 0 7.5 0Z' fill='%23FFC582'/%3e%3c/svg%3e ");
301+
}
302+
&:after {
303+
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.5 0C3.35625 0 0 3.44114 0 7.6897C0 11.0924 2.14687 13.9664 5.12812 14.9853C5.50312 15.0526 5.64375 14.8219 5.64375 14.62C5.64375 14.4374 5.63438 13.8319 5.63438 13.1878C3.75 13.5435 3.2625 12.7168 3.1125 12.2843C3.02813 12.0632 2.6625 11.3808 2.34375 11.1981C2.08125 11.0539 1.70625 10.6983 2.33437 10.6887C2.925 10.6791 3.34687 11.2462 3.4875 11.4769C4.1625 12.6399 5.24063 12.3131 5.67188 12.1113C5.7375 11.6115 5.93437 11.275 6.15 11.0828C4.48125 10.8905 2.7375 10.2273 2.7375 7.28599C2.7375 6.44974 3.02813 5.75767 3.50625 5.21939C3.43125 5.02714 3.16875 4.23895 3.58125 3.18161C3.58125 3.18161 4.20937 2.97976 5.64375 3.96981C6.24375 3.79679 6.88125 3.71028 7.51875 3.71028C8.15625 3.71028 8.79375 3.79679 9.39375 3.96981C10.8281 2.97015 11.4563 3.18161 11.4563 3.18161C11.8688 4.23895 11.6062 5.02714 11.5312 5.21939C12.0094 5.75767 12.3 6.44013 12.3 7.28599C12.3 10.2369 10.5469 10.8905 8.87813 11.0828C9.15 11.3231 9.38438 11.7845 9.38438 12.5054C9.38438 13.5339 9.375 14.3605 9.375 14.62C9.375 14.8219 9.51562 15.0622 9.89062 14.9853C11.3796 14.4701 12.6734 13.489 13.59 12.1803C14.5066 10.8715 14.9997 9.30093 15 7.6897C15 3.44114 11.6438 0 7.5 0Z' fill='%23D3D3D3'/%3e%3c/svg%3e ");
304+
}
305+
}
306+
&.slack-link {
307+
&:before {
308+
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.15187 9.47812C3.15187 10.3462 2.44313 11.0541 1.57594 11.0541C0.70875 11.0541 0 10.3463 0 9.47906C0 8.61188 0.70875 7.90313 1.575 7.90313H3.15187V9.47812ZM3.945 9.47812C3.945 8.61187 4.65375 7.90313 5.52094 7.90313C6.38812 7.90313 7.09688 8.61187 7.09688 9.47812V13.425C7.09688 14.2912 6.38812 15 5.52187 15C5.10421 14.9993 4.70384 14.8331 4.40834 14.538C4.11283 14.2428 3.94624 13.8427 3.945 13.425V9.47812ZM5.52187 3.15187C4.65375 3.15187 3.945 2.44313 3.945 1.57594C3.945 0.70875 4.65375 0 5.52187 0C6.39 0 7.09688 0.70875 7.09688 1.575V3.15187H5.52187ZM5.52187 3.945C6.38812 3.945 7.09688 4.65375 7.09688 5.52094C7.09688 6.38812 6.38812 7.09688 5.52187 7.09688H1.575C0.709687 7.09688 0 6.38812 0 5.52187C0 4.65375 0.70875 3.945 1.575 3.945H5.52187ZM11.8491 5.52187C11.8491 4.65375 12.5569 3.945 13.4241 3.945C14.2913 3.945 15 4.65375 15 5.52094C15 6.38812 14.2912 7.09688 13.425 7.09688H11.8491V5.52187ZM11.0541 5.52187C11.0541 6.38812 10.3463 7.09688 9.47906 7.09688C9.06156 7.09589 8.66143 6.92966 8.36613 6.63453C8.07083 6.3394 7.90436 5.93937 7.90313 5.52187V1.575C7.90313 0.709687 8.61187 0 9.47812 0C10.3462 0 11.0541 0.70875 11.0541 1.575V5.52187ZM9.47812 11.8481C10.3462 11.8481 11.055 12.5569 11.055 13.4241C11.055 14.2913 10.3462 15 9.47812 15C8.61 15 7.90219 14.2912 7.90219 13.425V11.8481H9.47812ZM9.47812 11.0541C8.61187 11.0541 7.90313 10.3463 7.90313 9.47906C7.90313 8.61188 8.61187 7.90313 9.47812 7.90313H13.425C14.2912 7.90313 15 8.61187 15 9.47812C15 10.3462 14.2912 11.0541 13.425 11.0541H9.47812Z' fill='%23FFC582'/%3e%3c/svg%3e ");
309+
}
310+
&:after {
311+
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.15187 9.47812C3.15187 10.3462 2.44313 11.0541 1.57594 11.0541C0.70875 11.0541 0 10.3463 0 9.47906C0 8.61188 0.70875 7.90313 1.575 7.90313H3.15187V9.47812ZM3.945 9.47812C3.945 8.61187 4.65375 7.90313 5.52094 7.90313C6.38812 7.90313 7.09688 8.61187 7.09688 9.47812V13.425C7.09688 14.2912 6.38812 15 5.52187 15C5.10421 14.9993 4.70384 14.8331 4.40834 14.538C4.11283 14.2428 3.94624 13.8427 3.945 13.425V9.47812ZM5.52187 3.15187C4.65375 3.15187 3.945 2.44313 3.945 1.57594C3.945 0.70875 4.65375 0 5.52187 0C6.39 0 7.09688 0.70875 7.09688 1.575V3.15187H5.52187ZM5.52187 3.945C6.38812 3.945 7.09688 4.65375 7.09688 5.52094C7.09688 6.38812 6.38812 7.09688 5.52187 7.09688H1.575C0.709687 7.09688 0 6.38812 0 5.52187C0 4.65375 0.70875 3.945 1.575 3.945H5.52187ZM11.8491 5.52187C11.8491 4.65375 12.5569 3.945 13.4241 3.945C14.2913 3.945 15 4.65375 15 5.52094C15 6.38812 14.2912 7.09688 13.425 7.09688H11.8491V5.52187ZM11.0541 5.52187C11.0541 6.38812 10.3463 7.09688 9.47906 7.09688C9.06156 7.09589 8.66143 6.92966 8.36613 6.63453C8.07083 6.3394 7.90436 5.93937 7.90313 5.52187V1.575C7.90313 0.709687 8.61187 0 9.47812 0C10.3462 0 11.0541 0.70875 11.0541 1.575V5.52187ZM9.47812 11.8481C10.3462 11.8481 11.055 12.5569 11.055 13.4241C11.055 14.2913 10.3462 15 9.47812 15C8.61 15 7.90219 14.2912 7.90219 13.425V11.8481H9.47812ZM9.47812 11.0541C8.61187 11.0541 7.90313 10.3463 7.90313 9.47906C7.90313 8.61188 8.61187 7.90313 9.47812 7.90313H13.425C14.2912 7.90313 15 8.61187 15 9.47812C15 10.3462 14.2912 11.0541 13.425 11.0541H9.47812Z' fill='%23D3D3D3'/%3e%3c/svg%3e ");
312+
}
313+
}
314+
a {
315+
font-size: inherit;
316+
font-weight: inherit;
317+
line-height: inherit;
318+
letter-spacing: inherit;
262319
}
263320
}
264321
}

‎content/core/index.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -506,7 +506,7 @@
506506
"fullwidth": true,
507507
"borderGradientAngle": "45deg",
508508
"title": "<img src='/images/topography-graphic-with-border.svg' />Keep up<br>with Singularity",
509-
"subheading": "Your feedback can shape our next big release. <br>Join us on <a href='https://github.com/data-preservation-programs/singularity' target='_blank'>Github</a> and <a href='https://filecoinproject.slack.com/archives/C05JABREATH' target='_blank'>Slack</a>",
509+
"subheading": "Your feedback can shape our next big release. <br>Join us on <span class='github-link'><a href='https://github.com/data-preservation-programs/singularity' target='_blank'>Github</a></span> and <span class='slack-link'><a href='https://filecoinproject.slack.com/archives/C05JABREATH' target='_blank' class='slack-link'>Slack</a></span>",
510510
"description": "<span class='weight-500'>Sign up to keep up.</span> We're passionate about keeping you in the loop with our latest features and updates, but we're even more committed to respecting your inbox."
511511
}
512512
}

0 commit comments

Comments
 (0)