Make cards look a bit nicer

oskarrough · Mar 28, 2020 · 2019f06 · 2019f06
1 parent 4b7d7d8
commit 2019f06
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 19 deletions.
diff --git a/public/components/cards.js b/public/components/cards.js
@@ -30,10 +30,12 @@ export function Card(card, currentEnergy) {
 	const isDisabled = currentEnergy < card.energy
 	return html`
 		<article class="Card" key=${card.id} data-id=${card.id} disabled=${isDisabled}>
-			<h3 class="Card-title">${card.name}</h3>
-			<p class="Card-energy Energybadge">${card.energy}</p>
-			<p class="Card-type">${card.type}</p>
-			<p class="Card-description">${card.description}</p>
+			<div class="Card-inner">
+				<h3 class="Card-title">${card.name}</h3>
+				<p class="Card-energy Energybadge">${card.energy}</p>
+				<p class="Card-type">${card.type}</p>
+				<p class="Card-description">${card.description}</p>
+			</div>
 		</article>
 	`
 }
diff --git a/public/index.css b/public/index.css
@@ -132,6 +132,7 @@ summary {
 	background: var(--teal);
 	/* background: radial-gradient(var(--teal), var(--yellow)); */
 	text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
+	/* text-shadow: 1px 1px 1px hsla(0, 0%, 0%, 0.8); */
 }
 
 .Cards {
@@ -155,16 +156,11 @@ summary .Cards {
 }
 
 .Card {
-	display: flex;
-	display: flex;
-	flex-flow: column;
 	position: relative;
-	border: 0.5em ridge #53b5a8;
-	border-radius: 0.5em;
-	background: #065046;
-	background: #0a3540;
-	text-align: center;
-	box-shadow: 1px 2px 3px #00000080;
+	display: flex;
+	/* border: 0.5em ridge #53b5a8;
+	border-radius: 0.5em; */
+	/* box-shadow: 1px 2px 3px #00000080; */
 
 	image-rendering: -webkit-optimize-contrast;
 	image-rendering: -webkit-crisp-edges;
@@ -175,8 +171,18 @@ summary .Cards {
 	border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAA7ElEQVRYhe2YMQ6DMAxFcwBGRtaeoFUv0K2qOAa36NYDVmLjMmHB0VfqEJbG3xKRvkTiAE+OnYBD2FrfDdFSAVvfDfH7vpsqQQnMMk9xmad0jWOacJ4o79fGVSgEEsPnda1qbx7a8mdifxcIJ7aKm6qHBOZxuTURQsm7i0Djc/y7fAHhYEsgTCYqD6lZRrVk1h6iAZIYoglqOg/RAflZMtwLKDZGOg+dQe0OiO60t8oyutP+/B5yF9R0QH6yTEiplgxJW+jQv30urHagJ0v22n2lSkjyEF196EjRqlRK0cowaNfmaLYfGOuyHjKsYnCffLyABLkAAAAASUVORK5CYII=);
 	border-image-repeat: repeat;
 	border-image-slice: 6 6 6 6;
-	border-image-width: 18px;
-	border-width: 15px;
+	border-image-width: 16px;
+	border-width: 16px;
+}
+
+.Card-inner {
+	flex: 1;
+	background: #0a3540;
+	text-align: center;
+}
+
+.Card[disabled] {
+	/* background: red; */
 }
 
 .Card[disabled] .EnergyBadge {
@@ -186,8 +192,7 @@ summary .Cards {
 .Card-title {
 	margin: 0;
 	padding: 0.6em 1em 0.8em;
-	background: #96969617;
-	color: whitesmoke;
+	background: linear-gradient(to bottom, #065046, transparent);
 	text-shadow: 1px 1px 1px hsla(0, 0%, 0%, 0.8);
 	user-select: none;
 }
@@ -207,7 +212,8 @@ summary .Cards {
 	position: absolute;
 	top: -1.5em;
 	left: -0.5em;
-	font-size: 0.75rem;
+	width: 1.7rem;
+	height: 1.9rem;
 }
 
 .Target {
@@ -266,7 +272,6 @@ summary .Cards {
 	position: relative;
 	z-index: 1;
 	margin: 0.2em 0;
-	font-size: large;
 	text-shadow: 0px 0px 2px hsla(0, 0%, 75%, 0.8);
 }