feat: logo and favicon

brainchild-projects · Aug 27, 2021 · 3541107 · 3541107
1 parent c5e38e9
commit 3541107
Show file tree

Hide file tree

Showing 18 changed files with 161 additions and 2 deletions.
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/browserconfig.xml b/public/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -13,6 +13,13 @@
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" />
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+  <link rel="manifest" href="/site.webmanifest">
+  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+  <meta name="msapplication-TileColor" content="#da532c">
+  <meta name="theme-color" content="#ffffff">
   <title>Printables</title>
 </head>
 

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/logoV1-192.png b/public/logoV1-192.png
diff --git a/public/logoV1-512.png b/public/logoV1-512.png
diff --git a/public/logoV1.svg b/public/logoV1.svg
diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png
diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
@@ -4,11 +4,15 @@ import { Container, Typography } from '@material-ui/core';
 
 const heroStyles = makeStyles((theme) => ({
   heroContent: {
-    padding: theme.spacing(19, 0, 11),
+    padding: theme.spacing(12, 0, 11),
     margin: '-76px 0 0',
     textAlign: 'center',
   },
 
+  logo: {
+
+  },
+
   title: {
     textShadow: '0 0 10px white',
   },
@@ -27,6 +31,7 @@ const Hero = (properties: HeroProperties): JSX.Element => {
 
     <div className={classes.heroContent}>
       <Container maxWidth="sm" component="section" aria-label="Hero">
+        <img src="/logoV1-192.png" alt="Printables logo" className={classes.logo} />
         <Typography
           component="h1"
           variant="h2"

diff --git a/src/pages/main/MainPage.tsx b/src/pages/main/MainPage.tsx
@@ -33,7 +33,7 @@ const MainPage = (): JSX.Element => {
   const classes = paperStyles();
   return (
     <div className={classes.wrapper}>
-      <Hero title="Printables" subtitle="Printable materials for Education" />
+      <Hero title="Printables" subtitle="Printable Materials for Education" />
       <Container>
         <Paper className={classes.mainContent}>
           <Typography variant="h4" component="h2">Common</Typography>