Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adds fonts to onboarding #533

Merged
merged 2 commits into from
Feb 16, 2023
Merged

Adds fonts to onboarding #533

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
496dccd
improves styles and adds fonts
lordofthecactus Feb 16, 2023
1672a5e
update changeset
lordofthecactus Feb 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/lovely-schools-taste.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/cli-hydrogen': patch
---

Onboarding fonts and styles
Binary file added packages/cli/src/virtual-routes/assets/inter-variable-font.ttf
View file
Open in desktop
Binary file not shown.
Binary file added packages/cli/src/virtual-routes/assets/jetbrainsmono-variable-font.ttf
View file
Open in desktop
Binary file not shown.
50 changes: 36 additions & 14 deletions packages/cli/src/virtual-routes/assets/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
@font-face {
font-family: 'Inter';
src: url('../assets/inter-variable-font.ttf') format("truetype-variations");
}
@font-face {
font-family: 'JetBrains Mono';
src: url('../assets/jetbrainsmono-variable-font.ttf') format("truetype-variations");
}

* {
box-sizing: border-box;
}
Expand All @@ -11,8 +20,7 @@ p {

h1 {
font-size: 3rem;
font-weight: 700;
line-height: 1.4;
line-height: 1.25;
}

h2 {
Expand All @@ -24,16 +32,17 @@ h2 {
p {
font-size: 1rem;
line-height: 1.4;
font-weight: 500;
}


body {
padding: 0;
margin: 0;
background: #FFFFFF;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

-webkit-font-smoothing: antialiased;
min-height: 100vh;
display: flex;
flex-direction: column;
Expand All @@ -57,10 +66,6 @@ header {
color: #5C5F62;
}

header p {
white-space: nowrap;
}

header nav {
display: flex;
flex-direction: row;
Expand All @@ -71,14 +76,16 @@ header nav {

header h1 {
font-size: 0.75rem;
margin-right: 20px;
}

header p {
font-family: 'JetBrains Mono';
font-weight: 700;
font-size: 0.875rem;
border: 1.5px solid #D2D5D8;
border-radius: 4px;
padding: 1px;
white-space: nowrap;
}

main {
Expand All @@ -103,16 +110,30 @@ footer a {
text-decoration: none;
}

main h1 {
main > h1 {
color: #202223;
font-weight: 900;
margin-bottom: 24px;
}


main > p {
margin-bottom: 16px;
}

main > section {
margin-bottom: 40px;
}


main a {
color: #475F91;
font-size: 16px;
font-size: 1rem;
position: relative;
font-weight: 500;
}


main a::after {
content: url("data:image/svg+xml,%3Csvg width='18' height='24' viewBox='0 0 18 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.45312 19.3828H13.9297C15.5703 19.3828 16.3828 18.5703 16.3828 16.9609V7.42188C16.3828 5.8125 15.5703 5 13.9297 5H4.45312C2.82031 5 2 5.80469 2 7.42188V16.9609C2 18.5781 2.82031 19.3828 4.45312 19.3828ZM4.46875 18.125C3.6875 18.125 3.25781 17.7109 3.25781 16.8984V7.48438C3.25781 6.67188 3.6875 6.25781 4.46875 6.25781H13.9141C14.6875 6.25781 15.125 6.67188 15.125 7.48438V16.8984C15.125 17.7109 14.6875 18.125 13.9141 18.125H4.46875ZM11.6406 14.1172C11.9844 14.1172 12.2188 13.8516 12.2188 13.4922V9.80469C12.2188 9.34375 11.9609 9.16406 11.5625 9.16406H7.85938C7.49219 9.16406 7.25781 9.39062 7.25781 9.73438C7.25781 10.0781 7.5 10.3047 7.875 10.3047H9.29688L10.4531 10.1797L9.23438 11.3125L6.35156 14.1953C6.24219 14.3047 6.17188 14.4609 6.17188 14.6172C6.17188 14.9688 6.39844 15.1953 6.74219 15.1953C6.92969 15.1953 7.07812 15.125 7.1875 15.0156L10.0625 12.1406L11.1875 10.9375L11.0703 12.1562V13.5078C11.0703 13.875 11.2969 14.1172 11.6406 14.1172Z' fill='%23475F91'/%3E%3C/svg%3E%0A");
vertical-align: middle;
Expand All @@ -121,7 +142,6 @@ main a::after {
main {
display: flex;
flex-direction: column;
gap: 1rem;
}

.Links ul {
Expand All @@ -147,6 +167,7 @@ main {
margin-bottom: .5rem;
font-size: 1.5rem;
color: #44474A;
font-weight: 700;
}


Expand All @@ -160,7 +181,7 @@ main {
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.1);
border-radius: 8px;
font-style: normal;
font-size: 16px;
font-size: 1rem;
line-height: 24px;
color: #5C5F62;
border: 1px solid #D2D5D8;
Expand All @@ -187,8 +208,9 @@ main {
padding: 2px;
}

.Banner > h2 {
.Banner h2 {
font-size: 1rem;
color: #202223;
}

.Banner.ErrorBanner {
Expand Down
16 changes: 16 additions & 0 deletions packages/cli/src/virtual-routes/routes/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import {IconTwitter} from '../components/IconTwitter.jsx';
import {IconBanner} from '../components/IconBanner.jsx';
import {IconError} from '../components/IconError.jsx';
import favicon from '../assets/favicon.svg';
import interVariableFont from '../assets/inter-variable-font.ttf';
import jetbrainsmonoVariableFont from '../assets/jetbrainsmono-variable-font.ttf';
import type {I18nBase, StorefrontClient} from '@shopify/hydrogen';

interface AppLoadContext {
Expand All @@ -30,6 +32,20 @@ export const links: LinksFunction = () => [
type: 'image/svg+xml',
href: favicon,
},
{
rel: 'preload',
href: interVariableFont,
as: 'font',
type: 'font/ttf',
crossOrigin: 'anonymous',
},
{
rel: 'preload',
href: jetbrainsmonoVariableFont,
as: 'font',
type: 'font/ttf',
crossOrigin: 'anonymous',
},
];

export async function loader({context}: {context: AppLoadContext}) {
Expand Down