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; const { target = '_blank', colorScheme='purple', badgeText, href, children } = props;
return ( return (
<Text mb={0}> <Text mb={'0px'}>
<Link color='blue.700' fontWeight={500} textDecoration='none' href={href} target={target} _hover={{ textDecoration: 'none', color: 'purple.400' }}> <Link fontSize='14px' 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> <Badge fontSize='11px' mr='7px' colorScheme={colorScheme}>{badgeText}</Badge>
{children} {children}
</Link> </Link>
</Text> </Text>

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

@ -8,5 +8,5 @@ type ResourceGroupTitleProps = {
export function ResourceGroupTitle(props: ResourceGroupTitleProps) { export function ResourceGroupTitle(props: ResourceGroupTitleProps) {
const { children } = props; 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 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='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 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>