mirror of
https://github.com/GoogleChromeLabs/squoosh.git
synced 2025-11-16 10:39:53 +00:00
Clean up app to remove old prerendering bits
This commit is contained in:
@@ -26,9 +26,14 @@ export default class Home extends Component<Props, State> {
|
||||
|
||||
render({ files }: Props, { active }: State) {
|
||||
return (
|
||||
<div class={style.home + ' ' + (active ? style.active : '')}>
|
||||
<div class={style.home}>
|
||||
{ files && files[0] && (
|
||||
<img src={files[0].uri} style="width:100%;" />
|
||||
<img src={files[0].uri} class={style.image} />
|
||||
) || (
|
||||
<div class={style.content}>
|
||||
<h1>Squoosh</h1>
|
||||
<p>Test home content</p>
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -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; }
|
||||
.content {
|
||||
max-width: 600px;
|
||||
margin: 50px auto 0;
|
||||
font-size: 120%;
|
||||
text-align: center;
|
||||
}
|
||||
4
src/components/home/style.scss.d.ts
vendored
4
src/components/home/style.scss.d.ts
vendored
@@ -1,3 +1,3 @@
|
||||
export const home: string;
|
||||
export const active: string;
|
||||
export const fadeIn: string;
|
||||
export const image: string;
|
||||
export const content: string;
|
||||
|
||||
@@ -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');
|
||||
|
||||
|
||||
@@ -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';
|
||||
}
|
||||
Reference in New Issue
Block a user