Copy over all css from nfl-playoff-challenge react app

src/css/App.css

@@ -0,0 +1,7 @@
+.loading {
+	display: flex;
+	justify-content: center;
+	padding-top: 2em;
+	font-size: 1.5rem;
+	font-family: var(--font-2);
+}

src/css/Button.css

@@ -0,0 +1,53 @@
+.button {
+	position: relative;
+	font-size: 1rem;
+	padding: 0.5em;
+	border: none;
+	background: none;
+	border-radius: 3em;
+	margin: 0.1em;
+	background-color: var(--lighter-grey);
+	cursor: pointer;
+	font-family: var(--font-1);
+	flex: 1 1 18%;
+	min-width: 7em;
+	box-shadow: -0.1em 0.1em 0.1em var(--lightest-grey);
+	transition: color 0.2s ease, background-color 0.2s ease;
+}
+
+.button[disabled] {
+	background-color: var(--lightest-grey);
+	color: var(--lighter-grey);
+}
+
+.button--selected-true {
+	background-color: var(--light-grey);
+	color: white;
+	box-shadow: -0.1em 0.1em 0.1em var(--blue);
+}
+
+.button:not([disabled]):hover,
+.button:focus {
+	outline: none;
+	background-color: var(--light-grey);
+	color: white;
+}
+
+.button::after,
+.button::after {
+	content: '';
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	top: 0;
+	left: 0;
+	border-radius: 3em;
+	box-shadow: -var(--small) var(--small) var(--medium) var(--blue);
+	opacity: 0;
+	transition: opacity 0.2s ease;
+}
+
+.button:hover::after,
+.button:focus::after {
+	opacity: 1;
+}

src/css/Header.css

@@ -0,0 +1,160 @@
+.header {
+	font-family: var(--font-2);
+	position: sticky;
+	top: 0;
+	background-color: var(--medium-grey);
+	box-shadow: 0 var(--small) var(--small) var(--light-grey);
+	padding: var(--medium);
+	z-index: 2;
+}
+
+.header__wrapper {
+	max-width: 40em;
+	width: 100%;
+	padding: var(--medium) var(--medium) 0 var(--medium);
+	margin: 0 auto;
+}
+
+.header__title {
+	background-color: var(--dark-grey);
+	text-align: center;
+	font-size: 2.5rem;
+	padding: 1rem;
+	border-radius: var(--large);
+	margin-bottom: 0.3em;
+	box-shadow: 0 0 var(--small) var(--lighter-grey);
+	line-height: 0.9;
+}
+
+.header__buttons {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: var(--medium);
+}
+
+.header__info {
+	display: flex;
+	font-size: 0.9rem;
+	margin-top: 1em;
+	align-items: center;
+	justify-content: space-between;
+	min-height: 32px;
+}
+
+.header__switch-container {
+	display: flex;
+	align-items: center;
+}
+
+.header__switch-label {
+	margin: 0;
+	color: var(--lighter-grey);
+}
+
+.header__switch-label--selected {
+	color: white;
+}
+
+.header__checkbox {
+	height: 0;
+	width: 0;
+	visibility: hidden;
+}
+
+.header__switch {
+	cursor: pointer;
+	width: 36px;
+	height: 20px;
+	margin-right: 6px;
+	background: var(--light-grey);
+	border-radius: 100px;
+	position: relative;
+}
+
+.header__switch:after {
+	content: '';
+	position: absolute;
+	top: 2px;
+	left: 2px;
+	width: 16px;
+	height: 16px;
+	background: white;
+	border-radius: 90px;
+	transition: background-color 0.2s;
+}
+
+.header__checkbox:checked + .header__switch {
+	background: var(--lighter-grey);
+}
+
+.header__checkbox:checked + .header__switch:after {
+	left: calc(100% - 2px);
+	transform: translateX(-100%);
+}
+
+.header__switch:active:after {
+	width: 18px;
+	height: 18px;
+	top: 1px;
+}
+
+.header__time {
+	visibility: hidden;
+}
+
+.header__time--visible {
+	visibility: visible;
+}
+
+@media (min-width: 640px) {
+	.header__title {
+		font-size: 3rem;
+	}
+
+	.header__dropdown--mobile-only {
+		display: none;
+	}
+}
+
+
+@media (max-width: 640px) {
+	.header {
+		padding: var(--small);
+	}
+
+	.header__wrapper {
+		padding: var(--small) var(--small) 0 var(--small);
+	}
+
+	.header__title {
+		font-size: 1.75rem;
+		padding: 0.6rem;
+	}
+
+	.header__info {
+		margin-top: 0.3em;
+	}
+
+	.header__buttons {
+		display: none;
+	}
+}
+
+.header__dropdown {
+	background-color: var(--lighter-grey);
+	padding: 0.3em;
+	border-radius: 16px;
+	font-family: var(--font-1);
+	outline: none;
+}
+
+.header__dropdown-container {
+	display: flex;
+	align-items: center;
+	font-family: var(--font-2);
+}
+
+.header__dropdown-label {
+	margin: 0 0.3em 0 0;
+}

src/css/Player.css

@@ -0,0 +1,300 @@
+.player {
+	border-radius: var(--large);
+	margin: var(--medium) 0;
+	background-color: var(--light-grey);
+	text-shadow: 0 1px 6px black;
+	padding: var(--medium);
+	display: grid;
+	align-items: center;
+	grid-template-columns: 2em 2em 2.5em 5.5em auto 2em 2.5em;
+	grid-template-rows: auto;
+	grid-template-areas:
+		'position image player player player multiplier score'
+		'position image team game-status game-score multiplier score'
+		'position image stats stats stats multiplier score';
+}
+
+.player__position {
+	font-family: var(--font-2);
+	font-size: 1.2rem;
+	grid-area: position;
+	padding-left: var(--small);
+}
+
+.player__image {
+	grid-area: image;
+	background-color: white;
+	border-radius: 2em;
+	overflow: hidden;
+}
+
+.player__img {
+	transform: translateY(5px);
+	filter: drop-shadow(0px 0px 1px var(--lighter-grey));
+}
+
+.player__name {
+	grid-area: player;
+	margin: 0 0.5em;
+}
+
+.player__team {
+	grid-area: team;
+	font-weight: 100;
+	font-size: 0.8rem;
+	margin: 0 0.7em;
+}
+
+.player__multiplier {
+	font-family: var(--font-3);
+	color: black;
+	grid-area: multiplier;
+	justify-self: end;
+	font-size: 0.8rem;
+	font-weight: 700;
+	border-radius: 100%;
+	padding: 0.4em;
+	box-shadow: 0 0 1px 1px white;
+	visibility: hidden;
+	text-shadow: none;
+}
+
+.player__multiplier--2 {
+	background-color: var(--bright-yellow);
+	visibility: visible;
+}
+
+.player__multiplier--3 {
+	background-color: var(--bright-blue);
+	visibility: visible;
+}
+
+.player__multiplier--4 {
+	background-color: var(--bright-green);
+	visibility: visible;
+}
+
+.player__score {
+	font-family: var(--font-3);
+	font-size: 1.2rem;
+	grid-area: score;
+	justify-self: end;
+}
+
+.player__game-status,
+.player__game-score {
+	font-size: 0.8rem;
+}
+
+.player__game-status {
+	grid-area: game-status;
+	padding-left: var(--large);
+}
+
+.player__game-score {
+	grid-area: game-score;
+}
+
+@media (min-width: 640px) {
+	.player {
+		max-width: 8em;
+		grid-template-columns: 60% 40%;
+		grid-template-rows: auto 4em 3em 1.2em 2em;
+		grid-template-areas:
+			'position multiplier'
+			'image image'
+			'player player'
+			'game-status game-score'
+			'stats stats';
+		align-items: end;
+		box-shadow: 0 0 2px 1px white;
+	}
+
+	.player--total-week {
+		grid-template-rows: auto 4em 3em 0 0;
+	}
+
+	.player__position {
+		padding: 0;
+	}
+
+	.player__image {
+		background: none;
+	}
+
+	.player__img {
+		transform: unset;
+		filter: drop-shadow(0 0 1px rgba(221, 221, 221, 0.9));
+	}
+
+	.player__name {
+		background-color: rgba(221, 221, 221, 0.9);
+		color: black;
+		border-radius: 0.3rem;
+		padding: var(--small);
+		overflow-wrap: break-word;
+		margin: 0.3em 0;
+		box-shadow: 0 0 2px 1px white;
+		min-height: 4em;
+		z-index: 1;
+		text-shadow: none;
+	}
+
+	.player__score,
+	.player__team {
+		grid-area: player;
+		color: black;
+		z-index: 1;
+		text-shadow: none;
+	}
+
+	.player__score {
+		font-weight: 700;
+		margin: 0.1em var(--small);
+	}
+
+	.player__team {
+		margin: var(--medium) var(--small);
+	}
+
+	.player__multiplier {
+		transform: translate(0.3em, -0.3em);
+		padding: 0.2em;
+	}
+
+	.player__game-status {
+		padding-left: 0;
+	}
+
+	.player__game-score {
+		text-align: right;
+	}
+}
+
+.player--ARI {
+	background-color: #97233f;
+}
+
+.player--ATL {
+	background-color: #a71930;
+}
+
+.player--BAL {
+	background-color: #241773;
+}
+
+.player--BUF {
+	background-color: #00338d;
+}
+
+.player--CAR {
+	background-color: #0085ca;
+}
+
+.player--CHI {
+	background-color: #0b162a;
+}
+
+.player--CIN {
+	background-color: #fb4f14;
+}
+
+.player--CLE {
+	background-color: #ff3c00;
+}
+
+.player--DAL {
+	background-color: #7f9695;
+}
+
+.player--DEN {
+	background-color: #002244;
+}
+
+.player--DET {
+	background-color: #0076b6;
+}
+
+.player--GB {
+	background-color: #203731;
+}
+
+.player--HOU {
+	background-color: #03202f;
+}
+
+.player--IND {
+	background-color: #002c5f;
+}
+
+.player--JAX {
+	background-color: #006778;
+}
+
+.player--KC {
+	background-color: #e31837;
+}
+
+.player--LAC {
+	background-color: #ffc20e;
+}
+
+.player--LAR {
+	background-color: #ffd100;
+}
+
+.player--LV {
+	background-color: #a5acaf;
+}
+
+.player--MIA {
+	background-color: #008e97;
+}
+
+.player--MIN {
+	background-color: #4f2683;
+}
+
+.player--NE {
+	background-color: #c60c30;
+}
+
+.player--NO {
+	background-color: #d3bc8d;
+}
+
+.player--NYG {
+	background-color: #0b2265;
+}
+
+.player--NYJ {
+	background-color: #125740;
+}
+
+.player--PHI {
+	background-color: #004c54;
+}
+
+.player--PIT {
+	background-color: #ffb612;
+}
+
+.player--SEA {
+	background-color: #69be28;
+}
+
+.player--SF {
+	background-color: #aa0000;
+}
+
+.player--TB {
+	background-color: #d50a0a;
+}
+
+.player--TEN {
+	background-color: #4b92db;
+}
+
+.player--WAS {
+	background-color: #773141;
+}

src/css/PlayerStats.css

@@ -0,0 +1,38 @@
+.player-stats {
+	grid-area: stats;
+	align-self: start;
+	margin-top: var(--small);
+	margin-left: var(--medium);
+	display: flex;
+	justify-content: space-between;
+}
+
+.stat {
+	font-size: 0.6rem;
+	width: 2.5rem;
+}
+
+.stat__key,
+.stat__value {
+	display: inline;
+}
+
+.stat__value {
+	margin-left: var(--small);
+}
+
+@media (min-width: 640px) {
+	.player-stats {
+		justify-content: unset;
+	}
+
+	.player-stats,
+	.stat__value {
+		margin-left: 0;
+	}
+
+	.stat__key {
+		display: block;
+		margin-left: 0;
+	}
+}

src/css/Scoreboard.css

@@ -0,0 +1,4 @@
+.scoreboard {
+	margin: auto;
+	max-width: 70em;
+}

src/css/SelectionBoard.css

@@ -0,0 +1,4 @@
+.scoreboard {
+	margin: auto;
+	max-width: 70em;
+}

src/css/SelectionRow.css

@@ -0,0 +1,147 @@
+.user {
+	border-radius: var(--large);
+	margin: var(--medium) var(--small);
+	background-color: var(--dark-grey);
+	box-shadow: 0 0 0.1em 0.1em white;
+	padding: 1em;
+	display: grid;
+	align-items: center;
+	grid-template-columns: 3.3em auto 4em;
+	grid-template-rows: auto;
+	grid-template-areas:
+		'place username score'
+		'roster roster roster';
+}
+
+.user__place {
+	font-size: 1.5rem;
+	font-family: var(--font-3);
+	font-weight: 700;
+	grid-area: place;
+	justify-self: left;
+}
+
+.user__username {
+	grid-area: username;
+	font-weight: 100;
+	font-size: 1.2rem;
+}
+
+.user__score-type {
+	display: none;
+	font-size: 1.2rem;
+	font-weight: 100;
+	justify-self: end;
+	margin-right: 4em;
+}
+
+.user__score-number {
+	font-family: var(--font-3);
+	font-size: 1.25rem;
+	font-weight: 700;
+	padding: 0.1em 0.25em;
+	grid-area: score;
+	justify-self: end;
+	width: 2.3em;
+	text-align: right;
+	box-shadow: 0 0 0.1em 0.05em var(--yellow);
+	border-radius: var(--small);
+	line-height: 1;
+}
+
+.user__roster {
+	margin-top: var(--small);
+	grid-area: roster;
+}
+
+
+@media (max-width: 640px) {
+	.user {
+		padding: 0.6em;
+	}
+
+	.user__arrow {
+		grid-area: place;
+		width: 0; 
+		height: 0;
+		margin-top: -2px;
+		margin-left: 2px;
+		border-top: 6px solid transparent;
+		border-bottom: 6px solid transparent;
+		border-left: 6px solid white;
+	}
+
+	.user__arrow--down {
+		border-left: 6px solid transparent;
+		border-right: 6px solid transparent;
+		border-top: 6px solid white;
+		margin-top: 6px;
+		margin-left: 0;
+	}
+
+	.user__place {
+		margin-left: 16px;
+	}
+	.user__roster--collapsed {
+		display: flex;
+		gap: 4px;
+	}
+	.user__roster--collapsed .player__name,
+	.user__roster--collapsed .player__team,
+	.user__roster--collapsed .player__multiplier,
+	.user__roster--collapsed .player__game-status,
+	.user__roster--collapsed .player__game-score,
+	.user__roster--collapsed .player-stats {
+		display: none;
+	}
+	.user__roster--collapsed .player {
+		display: flex;
+		flex-direction: column;
+		border-radius: 10px;
+		padding: var(--small);
+		max-width: 48px;
+	}
+
+	.user__roster--collapsed .player__position,
+	.user__roster--collapsed .player__score {
+		font-size: 0.8rem;
+	}
+}
+
+
+@media (min-width: 640px) {
+	.user {
+		grid-template-columns: 2.5em auto 12em;
+		max-width: 41em;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.user__place,
+	.user__score-number {
+		font-size: 1.8rem;
+	}
+
+	.user__username {
+		font-size: 1.7rem;
+	}
+
+	.user__score-type {
+		display: block;
+		grid-area: score;
+	}
+
+	.user__roster {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		gap: var(--medium);
+		margin-top: 1em;
+	}
+}
+
+@media (min-width: 1130px) {
+	.user {
+		max-width: 100%;
+	}
+}

src/css/User.css

@@ -0,0 +1,162 @@
+.user {
+	border-radius: var(--large);
+	margin: var(--medium) var(--small);
+	background-color: var(--dark-grey);
+	box-shadow: 0 0 0.1em 0.1em white;
+	padding: 1em;
+	display: grid;
+	align-items: center;
+	grid-template-columns: 3.3em auto 4em;
+	grid-template-rows: auto;
+	grid-template-areas:
+		'place username score'
+		'roster roster roster';
+}
+
+.user__place {
+	font-size: 1.5rem;
+	font-family: var(--font-3);
+	font-weight: 700;
+	grid-area: place;
+	justify-self: left;
+}
+
+.user__username {
+	grid-area: username;
+	font-weight: 100;
+	font-size: 1.2rem;
+}
+
+.user__score-type {
+	display: none;
+	font-size: 1.2rem;
+	font-weight: 100;
+	justify-self: end;
+	margin-right: 4em;
+}
+
+.user__score-number {
+	font-family: var(--font-3);
+	font-size: 1.25rem;
+	font-weight: 700;
+	padding: 0.1em 0.25em;
+	grid-area: score;
+	justify-self: end;
+	width: 2.3em;
+	text-align: right;
+	box-shadow: 0 0 0.1em 0.05em var(--yellow);
+	border-radius: var(--small);
+	line-height: 1;
+}
+
+.user__roster {
+	margin-top: var(--small);
+	grid-area: roster;
+}
+
+
+@media (max-width: 640px) {
+	.user {
+		padding: 0.6em;
+	}
+
+	.user__arrow {
+		grid-area: place;
+		width: 0; 
+		height: 0;
+		margin-top: -2px;
+		margin-left: 2px;
+		border-top: 6px solid transparent;
+		border-bottom: 6px solid transparent;
+		border-left: 6px solid white;
+	}
+
+	.user__arrow--down {
+		border-left: 6px solid transparent;
+		border-right: 6px solid transparent;
+		border-top: 6px solid white;
+		margin-top: 6px;
+		margin-left: 0;
+	}
+
+	.user__place {
+		margin-left: 16px;
+	}
+	.user__roster--collapsed {
+		display: flex;
+		gap: 4px;
+	}
+	.user__roster--collapsed .player__name,
+	.user__roster--collapsed .player__team,
+	.user__roster--collapsed .player__multiplier,
+	.user__roster--collapsed .player__game-status,
+	.user__roster--collapsed .player__game-score,
+	.user__roster--collapsed .player-stats {
+		display: none;
+	}
+	.user__roster--collapsed .player {
+		display: flex;
+		flex-direction: column;
+		border-radius: 10px;
+		padding: var(--small);
+	}
+
+	.user__roster--collapsed .player__position,
+	.user__roster--collapsed .player__score {
+		font-size: 0.8rem;
+	}
+
+	.user__roster--collapsed .player__image {
+		border: 3px solid transparent;
+		box-shadow: 0 0 7px black;
+	}
+
+	.user__roster--collapsed .player__image--2 {
+		border-color: var(--bright-yellow);
+	}
+
+	.user__roster--collapsed .player__image--3 {
+		border-color: var(--bright-blue);
+	}
+
+	.user__roster--collapsed .player__image--4 {
+		border-color: var(--bright-green);
+	}
+}
+
+@media (min-width: 640px) {
+	.user {
+		grid-template-columns: 2.5em auto 12em;
+		max-width: 41em;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.user__place,
+	.user__score-number {
+		font-size: 1.8rem;
+	}
+
+	.user__username {
+		font-size: 1.7rem;
+	}
+
+	.user__score-type {
+		display: block;
+		grid-area: score;
+	}
+
+	.user__roster {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		gap: var(--medium);
+		margin-top: 1em;
+	}
+}
+
+@media (min-width: 1130px) {
+	.user {
+		max-width: 100%;
+	}
+}

src/css/index.css

@@ -0,0 +1,42 @@
+:root {
+	--lightest-grey: #dddddd;
+	--lighter-grey: #909090;
+	--light-grey: #505050;
+	--medium-grey: #282828;
+	--dark-grey: #101010;
+	--blue: #0965bb;
+	--yellow: #f4d03f;
+	--bright-yellow: #f8fc22;
+	--bright-green: #82fb18;
+	--bright-blue: #22fcf4;
+
+	--small: 0.2em;
+	--medium: 0.5em;
+	--large: 1em;
+	--font-1: 'Poppins', sans-serif;
+	--font-2: 'Staatliches', cursive;
+	--font-3: 'Kameron', serif;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+body {
+	margin: 0;
+	font-family: var(--font-1);
+	font-size: 1rem;
+	line-height: 1.2;
+	background-color: var(--medium-grey);
+	color: #fff;
+}
+
+img {
+	max-width: 100%;
+}
+
+ul,
+ol {
+	list-style-type: none;
+	padding-left: 0;
+}