ayo/mcfly
ayo/mcfly
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(landing-page): apply reset; add spacing

Browse source
This commit is contained in:
Ayo 2023-10-15 00:38:00 +02:00
parent 9337b400df
commit deedc73c1f
2 changed files with 84 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
public/reset.css Normal file
View file

@ -0,0 +1,76 @@
/**
THANKS TO JOSH COMEAU FOR HIS CUSTOM CSS RESET
👉 https://www.joshwcomeau.com/css/custom-css-reset/
**/
/*
1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
/*
2. Remove default margin
*/
* {
margin: 0;
}
/*
3. Allow percentage-based heights in the application
*/
html,
body {
height: 100%;
}
/*
Typographic tweaks!
4. Add accessible line-height
5. Improve text rendering
*/
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/*
6. Improve media defaults
*/
img,
picture,
video,
canvas,
svg,
iframe {
display: block;
max-width: 100%;
margin: 0 auto;
}
/*
7. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
font: inherit;
}
/*
8. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
/*
9. Create a root stacking context
*/
#root,
#__next {
isolation: isolate;
}

13
src/pages/index.html
View file

@ -4,20 +4,23 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>McFly: Back to the Basics. Into the Future.</title> <title>McFly: Back to the Basics. Into the Future.</title>
<link rel="stylesheet" href="./reset.css"></style>
<style> <style>
body { body {
font-family: sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 1.5rem;
padding: 1em;
max-width: 750px; max-width: 750px;
margin: 1em auto; margin: 0 auto;
padding: 1em;
} }
h1 { h1 {
font-weight: 600;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
h2, p, ul, ol {
margin-top: 0.5em;
}
</style> </style>
</head> </head>
<body> <body>