FumeNodes/link-free
1
0
Fork 0
mirror of https://github.com/dsoaress/link-free.git synced 2026-08-19 07:56:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: add fonts options

Browse Source
This commit is contained in:
Daniel Soares
2021-12-11 14:22:00 -03:00
parent cd8259a0a5
commit 47bd52ffd7
9 changed files with 38 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Button/styles.ts
View File

@@ -46,7 +46,6 @@ export const Wrapper = styled('button', {
borderWidth: '2.5px', borderWidth: '2.5px',
borderStyle: 'solid', borderStyle: 'solid',
fontSize: '1rem', fontSize: '1rem',
fontWeight: 'bold',
cursor: 'pointer', cursor: 'pointer',
transition: 'all 0.25s ease-in-out', transition: 'all 0.25s ease-in-out',

8
src/components/Link/index.tsx
View File

@@ -3,10 +3,10 @@ import { AnchorHTMLAttributes } from 'react'
import { LinkVariantProps, Wrapper } from './styles' import { LinkVariantProps, Wrapper } from './styles'
export type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & { export type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> &
href: string LinkVariantProps & {
color?: LinkVariantProps['color'] href: string
} }
export function Link({ href, ...rest }: LinkProps) { export function Link({ href, ...rest }: LinkProps) {
return ( return (

1
src/components/Link/styles.ts
View File

@@ -17,7 +17,6 @@ const colorVariantFn = (
}) })
export const Wrapper = styled('a', { export const Wrapper = styled('a', {
fontWeight: 'medium',
textDecoration: 'none', textDecoration: 'none',
transition: 'color 0.25s ease', transition: 'color 0.25s ease',
cursor: 'pointer', cursor: 'pointer',

4
src/components/SocialLinks/styles.ts
View File

@@ -2,9 +2,7 @@ import { styled } from '../../styles/stitches.config'
export const Wrapper = styled('ul', { export const Wrapper = styled('ul', {
display: 'inline-flex', display: 'inline-flex',
listStyle: 'none', listStyle: 'none'
margin: 0,
padding: 0
}) })
export const SocialItem = styled('li', { export const SocialItem = styled('li', {

3
src/pages/_app.tsx
View File

@@ -1,5 +1,8 @@
import type { AppProps } from 'next/app' import type { AppProps } from 'next/app'
import { globalStyles } from '../styles/globals'
export default function App({ Component, pageProps }: AppProps) { export default function App({ Component, pageProps }: AppProps) {
globalStyles()
return <Component {...pageProps} /> return <Component {...pageProps} />
} }

5
src/pages/_document.tsx
View File

@@ -1,12 +1,15 @@
import NextDocument, { Head, Html, Main, NextScript } from 'next/document' import NextDocument, { Head, Html, Main, NextScript } from 'next/document'
import { getCssText } from '../styles/stitches.config' import { fonts, getCssText } from '../styles/stitches.config'
export default class Document extends NextDocument { export default class Document extends NextDocument {
render() { render() {
return ( return (
<Html> <Html>
<Head> <Head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href={fonts['baloo'].href} rel="stylesheet" />
<style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} /> <style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />
</Head> </Head>
<body> <body>

18
src/styles/fonts.ts Normal file
View File

@@ -0,0 +1,18 @@
export const fonts = {
roboto: {
href: 'https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap',
name: "'Roboto', sans-serif"
},
openSans: {
href: 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap',
name: "'Open Sans', sans-serif"
},
poppins: {
href: 'https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap',
name: "'Poppins', sans-serif"
},
baloo: {
href: 'https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@500&display=swap',
name: "'Baloo Bhaijaan 2', cursive"
}
}

6
src/styles/globals.ts
View File

@@ -1,9 +1,13 @@
import { globalCss } from './stitches.config' import { fonts, globalCss } from './stitches.config'
export const globalStyles = globalCss({ export const globalStyles = globalCss({
'*': { '*': {
margin: 0, margin: 0,
padding: 0, padding: 0,
boxSizing: 'border-box' boxSizing: 'border-box'
},
'body, button, a': {
fontFamily: fonts['baloo'].name,
fontWeight: 500
} }
}) })

3
src/styles/stitches.config.ts
View File

@@ -1,5 +1,7 @@
import { createStitches, VariantProps } from '@stitches/react' import { createStitches, VariantProps } from '@stitches/react'
import { fonts } from './fonts'
export const { css, styled, globalCss, theme, keyframes, getCssText } = createStitches({ export const { css, styled, globalCss, theme, keyframes, getCssText } = createStitches({
theme: { theme: {
colors: { colors: {
@@ -251,3 +253,4 @@ export const { css, styled, globalCss, theme, keyframes, getCssText } = createSt
type ColorsType = keyof typeof theme.colors type ColorsType = keyof typeof theme.colors
export type { ColorsType, VariantProps } export type { ColorsType, VariantProps }
export { fonts }