Skip to content
This repository has been archived by the owner on Jan 27, 2023. It is now read-only.

Template setup #2

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Template setup #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b096e0f
Getting started
auggod Jun 20, 2022
066ff61
add eslintignore
auggod Jun 20, 2022
96cea0b
fix padding height
auggod Jun 20, 2022
cfa1dc3
Update dep typescript-plugin-css-modules'
auggod Jun 20, 2022
f136d41
add editor config
auggod Jun 20, 2022
684e232
No semi for consistency
auggod Jun 20, 2022
78fdf4d
Add postcss plugins to rollup config
auggod Jun 21, 2022
8d958d4
Remove duplicate plugin conf
auggod Jun 21, 2022
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
9 changes: 9 additions & 0 deletions .editorconfig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
5 changes: 5 additions & 0 deletions .eslintignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
node_modules/*
@types/*
rollup.config.js
web-dev-server.config.mjs
server/dist/
6 changes: 6 additions & 0 deletions @types/declarations.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
declare module '*.module.css';
// https://github.com/mrmckeb/typescript-plugin-css-modules
// declare module '*.module.css' {
// const classes: { [key: string]: string };
// export default classes;
// }
88 changes: 88 additions & 0 deletions icons.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
229 changes: 211 additions & 18 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,50 +8,234 @@
<!DOCTYPE html>
<html lang="en">
<head>
<style>
:root {
--sans-serif: -apple-system, blinkmacsystemfont, 'avenir next', avenir,
helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial,
sans-serif;
--serif: georgia, serif;
--code: consolas, monaco, monospace;
--font-size-headline: 6rem;
--font-size-subheadline: 5rem;
--font-size-1: 6.375rem;
--font-size-1-l: 6.375rem;
--font-size-1-s: 5.5625rem;
--font-size-2: 3.9375rem;
--font-size-2-l: 3.9375rem;
--font-size-2-s: 3.4375rem;
--font-size-3: 2.4375rem;
--font-size-3-l: 2.4375rem;
--font-size-3-s: 2.125rem;
--font-size-4: 1.5rem;
--font-size-4-l: 1.5rem;
--font-size-4-s: 1.3125rem;
--font-size-5: 0.9375rem;
--font-size-5-l: 0.9375rem;
--font-size-5-s: 0.8125rem;
--font-size-6: 0.8125rem;
--font-size-6-l: 0.8125rem;
--font-size-6-s: 0.6875rem;
--font-size-7: 0.75rem;
--font-size-7-l: 0.75rem;
--font-size-7-s: 0.625rem;
--font-size-vw-1: 7vw;
--font-size-vw-2: 6vw;
--font-size-vw-3: 5vw;
--font-size-vw-4: 4vw;
--font-size-vw-5: 3vw;
--font-size-vw-6: 2vw;
--font-size-vw-7: 1.3vw;
--letter-spacing-tight: -0.05em;
--letter-spacing-1: 0.1em;
--letter-spacing-2: 0.25em;
--line-height-solid: 1;
--line-height-title: 1.25;
--line-height-copy: 1.5;
--measure: 30em;
--measure-narrow: 20em;
--measure-wide: 34em;
--spacing-none: 0;
--spacing-extra-small: 0.25rem;
--spacing-small: 0.5rem;
--spacing-medium: 1rem;
--spacing-large: 2rem;
--spacing-extra-large: 4rem;
--spacing-extra-extra-large: 8rem;
--spacing-extra-extra-extra-large: 16rem;
--spacing-copy-separator: 1.5em;
--height-1: 1rem;
--height-2: 2rem;
--height-3: 4rem;
--height-4: 8rem;
--height-5: 16rem;
--width-1: 1rem;
--width-2: 2rem;
--width-3: 4rem;
--width-4: 8rem;
--width-5: 16rem;
--max-width-1: 1rem;
--max-width-2: 2rem;
--max-width-3: 4rem;
--max-width-4: 8rem;
--max-width-5: 16rem;
--max-width-6: 32rem;
--max-width-7: 48rem;
--max-width-8: 64rem;
--max-width-9: 96rem;
--border-radius-none: 0;
--border-radius-1: 0.125rem;
--border-radius-2: 0.25rem;
--border-radius-3: 0.5rem;
--border-radius-4: 1rem;
--border-radius-circle: 100%;
--border-radius-pill: 9999px;
--border-width-none: 0;
--border-width-1: 0.125rem;
--border-width-2: 0.25rem;
--border-width-3: 0.5rem;
--border-width-4: 1rem;
--border-width-5: 2rem;
--box-shadow-1: 0 0 4px 2px rgb(0 0 0 / 20%);
--box-shadow-2: 0 0 8px 2px rgb(0 0 0 / 20%);
--box-shadow-3: 2px 2px 4px 2px rgb(0 0 0 / 20%);
--box-shadow-4: 2px 2px 8px 0 rgb(0 0 0 / 20%);
--box-shadow-5: 4px 4px 8px 0 rgb(0 0 0 / 20%);
--black: hsl(210deg 4% 10%);
--near-black: hsl(195deg 2% 32%);
--dark-gray: hsl(200deg 2% 49%);
--mid-gray: hsl(197deg 5% 72%);
--gray: hsl(197deg 10% 86%);
--silver: #999;
--light-silver: #aaa;
--moon-gray: #ccc;
--light-gray: hsl(195deg 25% 94%);
--near-white: hsl(200deg 13% 95%);
--white: #fff;
--transparent: transparent;
--black-90: rgb(0 0 0 / 90%);
--black-80: rgb(0 0 0 / 80%);
--black-70: rgb(0 0 0 / 70%);
--black-60: rgb(0 0 0 / 60%);
--black-50: rgb(0 0 0 / 50%);
--black-40: rgb(0 0 0 / 40%);
--black-30: rgb(0 0 0 / 30%);
--black-20: rgb(0 0 0 / 20%);
--black-10: rgb(0 0 0 / 10%);
--black-05: rgb(0 0 0 / 5%);
--black-025: rgb(0 0 0 / 2.5%);
--black-0125: rgb(0 0 0 / 1.25%);
--white-90: rgb(255 255 255 / 90%);
--white-80: rgb(255 255 255 / 80%);
--white-70: rgb(255 255 255 / 70%);
--white-60: rgb(255 255 255 / 60%);
--white-50: rgb(255 255 255 / 50%);
--white-40: rgb(255 255 255 / 40%);
--white-30: rgb(255 255 255 / 30%);
--white-20: rgb(255 255 255 / 20%);
--white-10: rgb(255 255 255 / 10%);
--white-05: rgb(255 255 255 / 5%);
--white-025: rgb(255 255 255 / 2.5%);
--white-0125: rgb(255 255 255 / 1.25%);
--dark-red: #e7040f;
--red: #ff4136;
--light-red: #ff725c;
--orange: #ff6300;
--gold: #ffb700;
--yellow: #ffd700;
--light-yellow: #fbf1a9;
--purple: #5e2ca5;
--light-purple: #a463f2;
--dark-pink: #d5008f;
--hot-pink: #ff41b4;
--pink: #ff80cc;
--light-pink: #ffa3d7;
--dark-green: #137752;
--green: #a6ff7c;
--light-green: #9eebcf;
--navy: #001b44;
--dark-blue: #00449e;
--blue: #357edd;
--light-blue: #96ccff;
--lightest-blue: #cdecff;
--washed-blue: #f6fffe;
--washed-green: #e8fdf5;
--washed-yellow: #fffceb;
--washed-red: #ffdfdf;
}
</style>

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />

<title>MyApplication</title>
<meta name="description" content="MyApplication description" />
<title>Resonate</title>
<meta name="description" content="Resonate Player" />

<base href="/" />

<link rel="icon" href="images/favicon.ico" />
<link rel="preconnect" href="https://static.resonate.is" crossorigin />

<link
rel="icon"
type="image/png"
sizes="32x32"
href="https://static.resonate.is/pwa_assets/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="https://static.resonate.is/pwa_assets/favicon-16x16.png"
/>

<link rel="manifest" href="manifest.webmanifest" />

<meta name="theme-color" content="#000000" />

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="MyApplication" />
<meta name="apple-mobile-web-app-title" content="Resonate" />

<link rel="apple-touch-icon" href="images/manifest/icon-192x192.png" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="https://static.resonate.is/pwa_assets/apple-touch-icon.png"
/>

<link rel="canonical" href="/" />
<meta name="fragment" content="!" />

<meta property="og:title" content="MyApplication" />
<meta property="og:description" content="MyApplication description" />
<meta property="og:title" content="Resonate" />
<meta property="og:description" content="Resonate Player" />
<meta property="og:image" content="/images/open-graph/cover.png" />
<meta property="og:image:alt" content="MyApplication logo" />
<meta property="og:image:alt" content="Resonate logo" />
<meta property="og:image:width" content="512" />
<meta property="og:image:height" content="512" />
<meta property="og:url" content="/" />

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<link
rel="preload"
as="style"
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&display=swap"
as="font"
crossorigin=""
href="https://static.resonate.is/fonts/Graphik-Semibold.woff1"
/>
<link
rel="preload"
as="font"
crossorigin=""
href="https://static.resonate.is/fonts/Graphik-Semibold.woff"
/>

<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&display=swap"
media="print"
onload="this.media='all'"
rel="preload"
as="font"
crossorigin=""
href="https://static.resonate.is/fonts/Graphik-Regular.woff1"
/>
<link
rel="preload"
as="font"
crossorigin=""
href="https://static.resonate.is/fonts/Graphik-Regular.woff"
/>

<style>
Expand All @@ -63,7 +247,15 @@

body {
margin: 0;
font-family: "IBM Plex Sans", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 15px;
font-family: Graphik, sans-serif;
line-height: 1.467rem;

/* 22px */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

noscript {
Expand All @@ -72,6 +264,7 @@
}
</style>
</head>

<body>
<app-index></app-index>

Expand Down
Loading