diff --git a/CONTRIBUTE.md b/CONTRIBUTE.md index 29a2000..6209b3e 100644 --- a/CONTRIBUTE.md +++ b/CONTRIBUTE.md @@ -9,6 +9,7 @@ Thank you for collaborating to our coders playlist. - Don't `push` to master only `pull` from git - Branch names: `name-of-your-feature` - Commit messages: Short description describing your action. Ex: `Adds new song to playlist` +- Don't commit the `yarn.lock` file, unless you are installing dependencies to the project **IMPORTANT:** Please pull before you push diff --git a/README.md b/README.md index 689e13c..eda510e 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ # 🎵 React Playlist 👩🏻💻👨🏻💻 -[![Netlify Status](https://api.netlify.com/api/v1/badges/0028ccc2-0db4-4c6a-bda2-1284d20add2d/deploy-status)](https://app.netlify.com/sites/determined-mcclintock-d5c5f5/deploys) +[![Netlify Status](https://api.netlify.com/api/v1/badges/0f963293-9a8f-4143-9fda-df218c4bf78c/deploy-status)](https://app.netlify.com/sites/swfl-coders-playlist/deploys) Helps us build our future events playlist. You can either modify this app to give it a better look or simply add a new song. We all have a song that keeps up going. If you have to choose one, which one will be your favorite coding song? ## 🚀 Getting started -1. **Pull down this repository.** +1. **Pull down this repository** On terminal: For SSH @@ -16,7 +16,7 @@ We all have a song that keeps up going. If you have to choose one, which one wil For HTTP `git clone https://github.com/swfl-coders/react-playlist.git` -2. **Start developing.** +2. **Start developing** Navigate into project and start up. @@ -27,8 +27,14 @@ We all have a song that keeps up going. If you have to choose one, which one wil yarn start ``` + **NOTE:** Please don't commit the `yarn.lock` file unless you are installing dependencies. Use `git status` to check if any changes have been made after you `yarn install`. Ff you see `yarn.lock` has changes, please checkout the file with `git checkout yarn.lock`. + Open [http://localhost:3000](http://localhost:3000) to view it in the browser or might even open automatically. +3. **Deployment** + +We are using **Netlify** for deployments. You can see the latest deploy version here: [SWFL Coders Playlist](https://swfl-coders-playlist.netlify.com/) + This project created with: - [Create React App](https://github.com/facebook/create-react-app). diff --git a/src/App.css b/src/App.css index 6e7460a..71ed410 100644 --- a/src/App.css +++ b/src/App.css @@ -2,15 +2,16 @@ text-align: center; background-color: #282c34; min-height: 100vh; + width: 100%; } .App-header { - background-color: #282c34; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); + color: #34d3ac; color: white; } @@ -19,12 +20,21 @@ } .card { - padding: 2em; + padding: 1em; + border: solid 2px #34d3ac; + margin: 1em; + width: auto !important; } .cards-container { display: flex; - flex-direction: row; align-items: center; justify-content: center; + flex-wrap: wrap; + flex-direction: row; + color: white; } + +h3 { + color: #fff; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index a6967e1..c95d589 100644 --- a/src/App.js +++ b/src/App.js @@ -10,14 +10,14 @@ const App = () => { const opts = { width: '500', playerVars: { // https://developers.google.com/youtube/player_parameters - autoplay: 0 + autoplay: 0, } } return (
SWFL Coders Playlist
+