moved css into own folder and updated html to refer to it. Also put in a css reset

This commit is contained in:
Robert McGovern 2022-01-03 01:19:33 +00:00
parent 5b8a3bbad1
commit a8f5f6c2a0
5 changed files with 80 additions and 2 deletions

76
css/reset.css Normal file
View File

@ -0,0 +1,76 @@
/* Andy Bell CSS Modern Reset https://piccalil.li/blog/a-modern-css-reset/ */
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
list-style: none;
}
/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}
/* Set core body defaults */
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}

View File

@ -4,7 +4,8 @@
<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>Practice Projects</title> <title>Practice Projects</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/style.css">
</head> </head>
<body> <body>
<header> <header>

View File

@ -5,7 +5,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Playground</title> <title>Playground</title>
<link rel="stylesheet" href="./playground.css"> <link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/playground.css">
</head> </head>
<body> <body>
<h1>Tricks</h1> <h1>Tricks</h1>