diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 5bb9f6a..1f77995 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,4 +1,4 @@ -# Contributing to Trader-Fe +# Contributing to V4-web We love your input! We want to make contributing to this project as easy and transparent as possible, whether it's: - Reporting a bug @@ -18,10 +18,10 @@ Pull requests are the best way to propose changes to the codebase (we use [Githu 4. Issue that pull request! ## Any contributions you make will be under the same License -When you submit code changes, your submissions are understood to be under the same [License](https://github.com/dydxprotocol/trader-fe/blob/master/LICENSE) that covers the project. +When you submit code changes, your submissions are understood to be under the same [License](https://github.com/dydxprotocol/v4-web/blob/master/LICENSE) that covers the project. -## Report bugs using Github's [issues](https://github.com/dydxprotocol/trader-fe/issues) -Report a bug by [opening a new issue](https://github.com/dydxprotocol/trader-fe/issues/new). +## Report bugs using Github's [issues](https://github.com/dydxprotocol/v4-web/issues) +Report a bug by [opening a new issue](https://github.com/dydxprotocol/v4-web/issues/new). **Great Bug Reports** tend to have: diff --git a/README.md b/README.md index 217af5a..483d5a5 100644 --- a/README.md +++ b/README.md @@ -22,8 +22,8 @@ Alternatively, follow the [IPFS Kubo installation guide](https://docs.ipfs.tech Clone the repository and navigate to its directory: ```bash -git clone https://github.com/dydxprotocol/trader-fe.git -cd trader-fe +git clone https://github.com/dydxprotocol/v4-web.git +cd v4-web ``` ### Step 2: Install pnpm and dependencies @@ -102,3 +102,47 @@ To access your content on IPFS: 2. **Public IPFS gateway:** Access your content via a public IPFS gateway, such as [https://dweb.link](https://dweb.link/) or [https://w3s.link/](https://w3s.link/). Use the gateway URL with your CID appended, like `https://dweb.link/ipfs/your_cid`. Replace `your_cid` with the actual CID. + + +## Part 5: Customization + +### Using CircularXX font + +1. **Procure a license for CircularXX:** Visit [Lineto](https://lineto.com/shop/select?family=circular&set=DOPhtVQR-8m) and add `Circular/Family Package` + `Circular Mono/Regular` to your cart. Check the applicable boxes in the `Configure` step to fill out licensing information. After the `Payment` step, download the `.woff2` files. + +2. **Add the fonts to `v4-web`:** Add `CircularXXWeb-Bold.woff2`, `CircularXXWeb-Book.woff2`, `CircularXXWeb-Medium.woff2`, and `CircularXXMonoWeb-Regular.woff2` to the `src/styles/fonts` directory. + +3. **Add font-family to stylesheets:** In `src/styles/fonts.css`, add the following code to import your newly purchased `Circular` font. +```css + @font-face { + src: url("fonts/CircularXXWeb-Book.woff2") format("woff2"); + font-family: "Circular"; + font-weight: 450; + } + + @font-face { + src: url("fonts/CircularXXWeb-Medium.woff2") format("woff2"); + font-family: "Circular"; + font-weight: 500; + } + + @font-face { + src: url("fonts/CircularXXWeb-Bold.woff2") format("woff2"); + font-family: "Circular"; + font-weight: 700; + } + + @font-face { + src: url("fonts/CircularXXMonoWeb-Regular.woff2") format("woff2"); + font-family: "CircularMono"; + font-weight: 400; + } +``` + +In `src/styles/text.css`, update lines `4` and `5` to +```css + --fontFamily-base: "Circular", "Satoshi", system-ui, -apple-system, Helvetica, Arial, sans-serif; + --fontFamily-monospace: "CircularMono", Courier, monospace, var(--fontFamily-base); +``` + +Enjoy the newly installed font. diff --git a/src/styles/fonts.css b/src/styles/fonts.css index 1680ed2..b525ff0 100644 --- a/src/styles/fonts.css +++ b/src/styles/fonts.css @@ -1,38 +1,42 @@ -/* - * Legal Disclaimer for Web licence +/** + * @license * - * Licence to use self-hosted webfonts for displaying dynamic text on specified website domains. Our package includes WOFF and WOFF2 font formats. + * Font Family: Satoshi + * Designed by: Deni Anggara + * URL: https://www.fontshare.com/fonts/satoshi + * © 2023 Indian Type Foundry * - * Should the license page views limit be exceeded the license holder will be required to contact Lineto.com for an upgrade. - * - * It is strictly prohibited to rename the font and to download or use these fonts in any other media. - * - * These Web fonts are licensed exclusively for the use on the following domain(s) and their subdomains: - * - * dydx.exchange (monthly pageviews: <50K) - * - */ + * Font Styles: + * Satoshi Regular + * Satoshi Medium + * Satoshi Bold + * Satoshi Black +*/ + @font-face { - src: url("fonts/CircularXXWeb-Book.woff2") format("woff2"); - font-family: "Circular"; - font-weight: 450; + src: url("fonts/Satoshi-Regular.woff2") format("woff2"); + font-family: "Satoshi"; + font-weight: 400; } + @font-face { - src: url("fonts/CircularXXWeb-Medium.woff2") format("woff2"); - font-family: "Circular"; + src: url("fonts/Satoshi-Medium.woff2") format("woff2"); + font-family: "Satoshi"; font-weight: 500; } + @font-face { - src: url("fonts/CircularXXWeb-Bold.woff2") format("woff2"); - font-family: "Circular"; + src: url("fonts/Satoshi-Bold.woff2") format("woff2"); + font-family: "Satoshi"; font-weight: 700; } @font-face { - src: url("fonts/CircularXXMonoWeb-Regular.woff2") format("woff2"); - font-family: "CircularMono"; - font-weight: 400; + src: url("fonts/Satoshi-Black.woff2") format("woff2"); + font-family: "Satoshi"; + font-weight: 900; } + diff --git a/src/styles/fonts/CircularXXMonoWeb-Regular.woff2 b/src/styles/fonts/CircularXXMonoWeb-Regular.woff2 deleted file mode 100644 index 7f9efb2..0000000 Binary files a/src/styles/fonts/CircularXXMonoWeb-Regular.woff2 and /dev/null differ diff --git a/src/styles/fonts/CircularXXWeb-Bold.woff2 b/src/styles/fonts/CircularXXWeb-Bold.woff2 deleted file mode 100644 index d7a0106..0000000 Binary files a/src/styles/fonts/CircularXXWeb-Bold.woff2 and /dev/null differ diff --git a/src/styles/fonts/CircularXXWeb-Book.woff2 b/src/styles/fonts/CircularXXWeb-Book.woff2 deleted file mode 100644 index 120aacd..0000000 Binary files a/src/styles/fonts/CircularXXWeb-Book.woff2 and /dev/null differ diff --git a/src/styles/fonts/CircularXXWeb-Medium.woff2 b/src/styles/fonts/CircularXXWeb-Medium.woff2 deleted file mode 100644 index bc6f3d4..0000000 Binary files a/src/styles/fonts/CircularXXWeb-Medium.woff2 and /dev/null differ diff --git a/src/styles/fonts/Satoshi-Black.woff2 b/src/styles/fonts/Satoshi-Black.woff2 new file mode 100644 index 0000000..64492d5 Binary files /dev/null and b/src/styles/fonts/Satoshi-Black.woff2 differ diff --git a/src/styles/fonts/Satoshi-Bold.woff2 b/src/styles/fonts/Satoshi-Bold.woff2 new file mode 100644 index 0000000..0a8db7a Binary files /dev/null and b/src/styles/fonts/Satoshi-Bold.woff2 differ diff --git a/src/styles/fonts/Satoshi-Medium.woff2 b/src/styles/fonts/Satoshi-Medium.woff2 new file mode 100644 index 0000000..ffd0ac9 Binary files /dev/null and b/src/styles/fonts/Satoshi-Medium.woff2 differ diff --git a/src/styles/fonts/Satoshi-Regular.woff2 b/src/styles/fonts/Satoshi-Regular.woff2 new file mode 100644 index 0000000..81c40ab Binary files /dev/null and b/src/styles/fonts/Satoshi-Regular.woff2 differ diff --git a/src/styles/text.css b/src/styles/text.css index 4103677..0710da2 100644 --- a/src/styles/text.css +++ b/src/styles/text.css @@ -1,22 +1,16 @@ /* Constants */ :root { - --fontFamily-base: "Circular", system-ui, -apple-system, Helvetica, Arial, sans-serif; - --fontFamily-monospace: "CircularMono", Courier, monospace, var(--fontFamily-base); + --fontFamily-base: "Satoshi", system-ui, -apple-system, Helvetica, Arial, sans-serif; + --fontFamily-monospace: Courier, monospace, var(--fontFamily-base); --fontWeight-base-0: 450; --fontWeight-base-1: 500; --fontWeight-base-2: 700; - --fontWeight-monospace: 400; --letter-spacing-base: -0.02em; /* New Typography system */ - - /** - * @size 10px/11px - * @weight 400 - */ --fontSize-tiny: 0.625rem; /* 10px/11px */ --fontSize-mini: 0.75rem; /* 12px/13px */ --fontSize-small: 0.8438rem; /* 13.5px/14.5px */