Browse Source

[feat] style changes

Signed-off-by: Muthu Kumar <muthukumar@thefeathers.in>
pull/1/head
Muthu Kumar 4 years ago
parent
commit
82c0d50428
Signed by: mkrhere GPG Key ID: 3FD688398897097E
  1. 2
      public/index.html
  2. 4
      public/manifest.json
  3. 13
      src/components/Heading.js
  4. 11
      src/index.css
  5. 16
      src/pages/404.js

2
public/index.html

@ -5,7 +5,7 @@
<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" />
<!-- <!--

4
public/manifest.json

@ -20,6 +20,6 @@
], ],
"start_url": ".", "start_url": ".",
"display": "standalone", "display": "standalone",
"theme_color": "#000000", "theme_color": "#ff5555",
"background_color": "#ffffff" "background_color": "#000000"
} }

13
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;

11
src/index.css

@ -1,5 +1,5 @@
:root { :root {
--primary-color: #ff9494; --background-color: #000000;
--primary-color: #ff5555; --primary-color: #ff5555;
--text-color: #d3cfc9; --text-color: #d3cfc9;
font-weight: 500; font-weight: 500;
@ -16,7 +16,7 @@ body {
"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
color: #fff; color: var(--text-color);
} }
code { code {
@ -43,6 +43,11 @@ h6 {
color: var(--primary-color); color: var(--primary-color);
} }
h1,
h2 {
line-height: 1.2em;
}
h1 { h1 {
font-size: 6rem; font-size: 6rem;
} }
@ -52,7 +57,7 @@ h2 {
} }
a { a {
color: white; color: var(--text-color);
} }
a:hover { a:hover {

16
src/pages/404.js

@ -1,24 +1,14 @@
import { css } from "emotion"; import { Link } from "@reach/router";
import Container from "../components/Container"; 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() { function Home() {
return ( return (
<Container> <Container>
<Heading>Nothing here</Heading> <h1>Nothing here</h1>
<p> <p>
404. Back to{" "} 404. Back to{" "}
<b> <b>
<a href="/">MKRhere?</a> <Link to="/">MKRhere?</Link>
</b> </b>
</p> </p>
</Container> </Container>

Loading…
Cancel
Save