Configured eslint and prettier to work on package.json
parent
59ce0e2051
commit
5ccfe5a986
|
|
@ -0,0 +1,6 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="EslintConfiguration">
|
||||||
|
<option name="fix-on-save" value="true" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
|
|
@ -15,7 +15,10 @@
|
||||||
"start": "react-scripts start",
|
"start": "react-scripts start",
|
||||||
"build": "react-scripts build",
|
"build": "react-scripts build",
|
||||||
"test": "react-scripts test",
|
"test": "react-scripts test",
|
||||||
"eject": "react-scripts eject"
|
"eject": "react-scripts eject",
|
||||||
|
"prettier": "prettier \"src/**/*.{js,jsx,ts,tsx,css,scss,md}\" --write",
|
||||||
|
"format:check": "npm run prettier -- --check",
|
||||||
|
"format:write": "npm run prettier -- --write"
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"extends": [
|
"extends": [
|
||||||
|
|
|
||||||
36
src/App.css
36
src/App.css
|
|
@ -1,32 +1,32 @@
|
||||||
.App {
|
.App {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.App-logo {
|
.App-logo {
|
||||||
height: 40vmin;
|
height: 40vmin;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.App-header {
|
.App-header {
|
||||||
background-color: #282c34;
|
background-color: #282c34;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: calc(10px + 2vmin);
|
font-size: calc(10px + 2vmin);
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.App-link {
|
.App-link {
|
||||||
color: #61dafb;
|
color: #61dafb;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes App-logo-spin {
|
@keyframes App-logo-spin {
|
||||||
from {
|
from {
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
transform: rotate(360deg);
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
129
src/Pokemon.css
129
src/Pokemon.css
|
|
@ -1,108 +1,103 @@
|
||||||
:root {
|
:root {
|
||||||
--grass: #5FBD58;
|
--grass: #5fbd58;
|
||||||
--bug: #92BC2C;
|
--bug: #92bc2c;
|
||||||
--dark: #595761;
|
--dark: #595761;
|
||||||
--dragon: #0C69C8;
|
--dragon: #0c69c8;
|
||||||
--electric: #F2D94E;
|
--electric: #f2d94e;
|
||||||
--fairy: #EE90E6;
|
--fairy: #ee90e6;
|
||||||
--fighting: #D3425F;
|
--fighting: #d3425f;
|
||||||
--fire: #dc872f;
|
--fire: #dc872f;
|
||||||
--flying: #A1BBEC;
|
--flying: #a1bbec;
|
||||||
--ghost: #5F6DBC;
|
--ghost: #5f6dbc;
|
||||||
--ground: #DA7C4D;
|
--ground: #da7c4d;
|
||||||
--ice: #75D0C1;
|
--ice: #75d0c1;
|
||||||
--normal: #A0A29F;
|
--normal: #a0a29f;
|
||||||
--poison: #B763CF;
|
--poison: #b763cf;
|
||||||
--psychic: #ff2ca8;
|
--psychic: #ff2ca8;
|
||||||
--rock: #a38c21;
|
--rock: #a38c21;
|
||||||
--steel: #5695A3;
|
--steel: #5695a3;
|
||||||
--water: #539DDF;
|
--water: #539ddf;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
--pokename: #000;
|
--pokename: #000;
|
||||||
--cardborder: #fff;
|
--cardborder: #fff;
|
||||||
--pokenumber: hsl(228, 28%, 20%);
|
--pokenumber: hsl(228, 28%, 20%);
|
||||||
--info: #fff
|
--info: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Press Start 2P';
|
font-family: 'Press Start 2P';
|
||||||
src: url("assets/PressStart2P-Regular.ttf") format("truetype");
|
src: url('assets/PressStart2P-Regular.ttf') format('truetype');
|
||||||
}
|
}
|
||||||
|
|
||||||
.thumbnail__container {
|
.thumbnail__container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 1.5rem 0;
|
padding: 1.5rem 0;
|
||||||
margin: 2rem;
|
margin: 2rem;
|
||||||
/* border: 15px solid var(--cardborder); */
|
/* border: 15px solid var(--cardborder); */
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
min-width: 220px;
|
min-width: 220px;
|
||||||
height: 285px;
|
height: 285px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
/* box-shadow: 0 5px 25px 1px rgb(0 0 0 / 50%); */
|
/* box-shadow: 0 5px 25px 1px rgb(0 0 0 / 50%); */
|
||||||
box-shadow:
|
box-shadow: 0 1.6px 1.6px rgba(0, 0, 0, 0.023),
|
||||||
0 1.6px 1.6px rgba(0, 0, 0, 0.023),
|
0 3.8px 3.8px rgba(0, 0, 0, 0.034), 0 6.9px 6.9px rgba(0, 0, 0, 0.041),
|
||||||
0 3.8px 3.8px rgba(0, 0, 0, 0.034),
|
0 11.4px 11.4px rgba(0, 0, 0, 0.049), 0 18.8px 18.8px rgba(0, 0, 0, 0.056),
|
||||||
0 6.9px 6.9px rgba(0, 0, 0, 0.041),
|
0 32.8px 32.8px rgba(0, 0, 0, 0.067), 0 71px 71px rgba(0, 0, 0, 0.09);
|
||||||
0 11.4px 11.4px rgba(0, 0, 0, 0.049),
|
transition: all 0.2s ease-in-out;
|
||||||
0 18.8px 18.8px rgba(0, 0, 0, 0.056),
|
|
||||||
0 32.8px 32.8px rgba(0, 0, 0, 0.067),
|
|
||||||
0 71px 71px rgba(0, 0, 0, 0.09)
|
|
||||||
;
|
|
||||||
transition: all 0.2s ease-in-out;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.thumbnail__container:hover {
|
.thumbnail__container:hover {
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.thumbnail__container .poke__number {
|
.thumbnail__container .poke__number {
|
||||||
font-size: 1.75em;
|
font-size: 1.75em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info__icon:hover {
|
.info__icon:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info__icon {
|
.info__icon {
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
margin-top: -4px;
|
margin-top: -4px;
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-family: 'Press Start 2P', cursive;
|
font-family: 'Press Start 2P', cursive;
|
||||||
margin-bottom: 0.2rem;
|
margin-bottom: 0.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.thumbnail__container .poke__number {
|
.thumbnail__container .poke__number {
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
padding: 0.2rem 0.4rem;
|
padding: 0.2rem 0.4rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 35px;
|
font-size: 35px;
|
||||||
font-family: 'Teko', sans-serif;
|
font-family: 'Teko', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.thumbnail__container img {
|
.thumbnail__container img {
|
||||||
width: 120px;
|
width: 120px;
|
||||||
height: 120px;
|
height: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.thumbnail__container small {
|
.thumbnail__container small {
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card__header {
|
.card__header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.poke__name h3 {
|
.poke__name h3 {
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,39 +1,39 @@
|
||||||
.app_container {
|
.app_container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-items: center;
|
justify-items: center;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||||
sans-serif;
|
sans-serif;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
background-image: url("./assets/bg.png");
|
background-image: url('./assets/bg.png');
|
||||||
background-size: initial;
|
background-size: initial;
|
||||||
background-repeat: repeat;
|
background-repeat: repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||||
monospace;
|
monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter__container {
|
.filter__container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
margin: 7vh 0 5vh 0;
|
margin: 7vh 0 5vh 0;
|
||||||
gap: 0 2vw;
|
gap: 0 2vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter__items {
|
.filter__items {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-family: 'barcadebrawl';
|
font-family: 'barcadebrawl';
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,12 +5,12 @@ import App from './App';
|
||||||
import reportWebVitals from './reportWebVitals';
|
import reportWebVitals from './reportWebVitals';
|
||||||
|
|
||||||
const root = ReactDOM.createRoot(
|
const root = ReactDOM.createRoot(
|
||||||
document.getElementById('root') as HTMLElement
|
document.getElementById('root') as HTMLElement,
|
||||||
);
|
);
|
||||||
root.render(
|
root.render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
<App />
|
<App />
|
||||||
</React.StrictMode>
|
</React.StrictMode>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// If you want to start measuring performance in your app, pass a function
|
// If you want to start measuring performance in your app, pass a function
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue