gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Styling for badge links

Browse Source
This commit is contained in:
Kamran Ahmed
2021-12-05 02:38:42 +01:00
parent 8255f69257
commit a42e92781a
3 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/md-renderer/mdx-components/badge-link.tsx
View File

@ -13,9 +13,9 @@ export function BadgeLink(props: BadgeLinkType) {
const { target = '_blank', colorScheme='purple', badgeText, href, children } = props;
return (
<Text mb={0}>
<Link color='blue.700' fontWeight={500} textDecoration='none' href={href} target={target} _hover={{ textDecoration: 'none', color: 'purple.400' }}>
<Badge mr='10px' colorScheme={colorScheme} pos='relative' top='-2px'>{badgeText}</Badge>
<Text mb={'0px'}>
<Link fontSize='14px' color='blue.700' fontWeight={500} textDecoration='none' href={href} target={target} _hover={{ textDecoration: 'none', color: 'purple.400' }}>
<Badge fontSize='11px' mr='7px' colorScheme={colorScheme}>{badgeText}</Badge>
{children}
</Link>
</Text>

2
components/md-renderer/mdx-components/resource-group-title.tsx
View File

@ -8,5 +8,5 @@ type ResourceGroupTitleProps = {
export function ResourceGroupTitle(props: ResourceGroupTitleProps) {
const { children } = props;
return <Heading fontSize='22px' as="h2" mb={'10px'}>{children}</Heading>;
return <Heading mt='20px' color='gray.800' fontSize='14px' pb='5px' borderBottomWidth={1} textTransform='uppercase' as="h2" mb={'10px'}>{children}</Heading>;
}

1
content/roadmaps/100-frontend/content/100-internet/readme.md
View File

@ -7,3 +7,4 @@ The Internet is a global network of computers connected to each other which comm
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=x3c1ih2NJEg'>How does the Internet work?</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.vox.com/2014/6/16/18076282/the-internet'>The Internet Explained</BadgeLink>
<BadgeLink colorScheme='yellow' badgeText='Read' href='http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm'>How Does the Internet Work?</BadgeLink>
<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7_LPdttKXPc'>How the Internet Works in 5 Minutes</BadgeLink>