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