diff --git a/src/components/home/index.tsx b/src/components/home/index.tsx index ac801711..ad96ad84 100644 --- a/src/components/home/index.tsx +++ b/src/components/home/index.tsx @@ -26,9 +26,14 @@ export default class Home extends Component { render({ files }: Props, { active }: State) { return ( -
+
{ files && files[0] && ( - + + ) || ( +
+

Squoosh

+

Test home content

+
) }
); diff --git a/src/components/home/style.scss b/src/components/home/style.scss index 09d9fa5b..2abb508c 100644 --- a/src/components/home/style.scss +++ b/src/components/home/style.scss @@ -7,14 +7,15 @@ .home { padding: 20px; - opacity: 0; } -.active { - animation: fadeIn 2s forwards ease 1; +.image { + width: 100%; } -@keyframes fadeIn { - from { opacity: 0; } - to { opacity: 1; } -} \ No newline at end of file +.content { + max-width: 600px; + margin: 50px auto 0; + font-size: 120%; + text-align: center; +} diff --git a/src/components/home/style.scss.d.ts b/src/components/home/style.scss.d.ts index c9e5bf62..406166b6 100644 --- a/src/components/home/style.scss.d.ts +++ b/src/components/home/style.scss.d.ts @@ -1,3 +1,3 @@ export const home: string; -export const active: string; -export const fadeIn: string; +export const image: string; +export const content: string; diff --git a/src/style/index.scss b/src/style/index.scss index 5d7073ee..953b2cb4 100644 --- a/src/style/index.scss +++ b/src/style/index.scss @@ -1,5 +1,5 @@ -// @import './material-icons.scss'; // @import 'material-components-web/material-components-web'; +@import './material-icons.scss'; @import './reset.scss'; // @import url('https://fonts.googleapis.com/icon?family=Material+Icons'); diff --git a/src/style/material-icons.scss b/src/style/material-icons.scss index 1ad3e638..8847a837 100644 --- a/src/style/material-icons.scss +++ b/src/style/material-icons.scss @@ -2,11 +2,9 @@ font-family: 'Material Icons'; font-style: normal; font-weight: 400; - src: local('Material Icons'), - local('MaterialIcons-Regular'), - url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'), - url(https://example.com/MaterialIcons-Regular.woff) format('woff'), - url(https://example.com/MaterialIcons-Regular.ttf) format('truetype'); + font-display: swap; + // @todo woff fallback! + src: url(https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2'); } .material-icons { @@ -14,15 +12,13 @@ font-weight: normal; font-style: normal; font-size: 24px; - display: inline-block; line-height: 1; - text-transform: none; letter-spacing: normal; - word-wrap: normal; + text-transform: none; + display: inline-block; white-space: nowrap; + word-wrap: normal; direction: ltr; + -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; - -moz-osx-font-smoothing: grayscale; - font-feature-settings: 'liga'; -} \ No newline at end of file +}