[feat] style changes

Signed-off-by: Muthu Kumar <muthukumar@thefeathers.in>
4 years ago · 82c0d50428
5 changed files with 65 additions and 83 deletions
--- a/public/index.html
+++ b/public/index.html
@ -2,43 +2,43 @@
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
+	<meta charset="utf-8" />
-  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+	<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
+	<meta name="theme-color" content="#ff5555" />
-  <meta name="description" content="Personal website of MKRhere" />
+	<meta name="description" content="Personal website of MKRhere" />
-  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+	<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-  <!--
+	<!--
-      manifest.json provides metadata used when your web app is installed on a
+			manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+			user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
+		-->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <!--
+	<!--
-      Notice the use of %PUBLIC_URL% in the tags above.
+			Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
+			It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
+			Only files inside the `public` folder can be referenced from the HTML.
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+			Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
+			work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
+			Learn how to configure a non-root public URL by running `npm run build`.
-    -->
+		-->
-  <link rel="stylesheet" href="/fonts.css" />
+	<link rel="stylesheet" href="/fonts.css" />
-  <title>MKRhere</title>
+	<title>MKRhere</title>
 </head>
 <body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
+	<noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"></div>
+	<div id="root"></div>
-  <!--
+	<!--
-      This HTML file is a template.
+			This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
+			If you open it directly in the browser, you will see an empty page.
-      You can add webfonts, meta tags, or analytics to this file.
+			You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
+			The build step will place the bundled scripts into the <body> tag.
-      To begin the development, run `npm start` or `yarn start`.
+			To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
+			To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+		-->
 </body>
 </html>
--- a/public/manifest.json
+++ b/public/manifest.json
@ -1,25 +1,25 @@
 {
-  "short_name": "React App",
+	"short_name": "React App",
-  "name": "Create React App Sample",
+	"name": "Create React App Sample",
-  "icons": [
+	"icons": [
-    {
+		{
-      "src": "favicon.ico",
+			"src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
+			"sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+			"type": "image/x-icon"
-    },
+		},
-    {
+		{
-      "src": "logo192.png",
+			"src": "logo192.png",
-      "type": "image/png",
+			"type": "image/png",
-      "sizes": "192x192"
+			"sizes": "192x192"
-    },
+		},
-    {
+		{
-      "src": "logo512.png",
+			"src": "logo512.png",
-      "type": "image/png",
+			"type": "image/png",
-      "sizes": "512x512"
+			"sizes": "512x512"
-    }
+		}
-  ],
+	],
-  "start_url": ".",
+	"start_url": ".",
-  "display": "standalone",
+	"display": "standalone",
-  "theme_color": "#000000",
+	"theme_color": "#ff5555",
-  "background_color": "#ffffff"
+	"background_color": "#000000"
 }
--- a/src/components/Heading.js
+++ b/src/components/Heading.js
@ -1,13 +0,0 @@
 import { css } from "emotion";
 const Heading = ({ children, ...props }) => (
 	<h1
 		className={css`
 			line-height: 1em;
 		`}
 		{...props}>
 		{children}
 	</h1>
 );
 export default Heading;
--- a/src/index.css
+++ b/src/index.css
@ -1,5 +1,5 @@
 :root {
-	--primary-color: #ff9494;
+	--background-color: #000000;
 	--primary-color: #ff5555;
 	--text-color: #d3cfc9;
 	font-weight: 500;
@ -16,7 +16,7 @@ body {
 		"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
-	color: #fff;
+	color: var(--text-color);
 }
 code {
@ -43,6 +43,11 @@ h6 {
 	color: var(--primary-color);
 }
 h1,
 h2 {
 	line-height: 1.2em;
 }
 h1 {
 	font-size: 6rem;
 }
@ -52,7 +57,7 @@ h2 {
 }
 a {
-	color: white;
+	color: var(--text-color);
 }
 a:hover {
--- a/src/pages/404.js
+++ b/src/pages/404.js
@ -1,24 +1,14 @@
-import { css } from "emotion";
+import { Link } from "@reach/router";
 import Container from "../components/Container";
 import Heading from "../components/Heading";
 const Dashed = props => (
 	<span
 		className={css`
 			border-bottom: 1px dashed #fff;
 		`}>
 		{props.children}
 	</span>
 );
 function Home() {
 	return (
 		<Container>
-			<Heading>Nothing here</Heading>
+			<h1>Nothing here</h1>
 			<p>
 				404. Back to{" "}
 				<b>
-					<a href="/">MKRhere?</a>
+					<Link to="/">MKRhere?</Link>
 				</b>
 			</p>
 		</Container>