Styling improvements

showcase.markdown

@@ -9,33 +9,40 @@ permalink: /showcase
 		justify-content: flex-end;
 		width: 30%;
 		aspect-ratio: 3/2;
-		background-color: #333333;
 		background-size: cover;
-		margin: 0;
+		border-radius: 3px;
+		border: 1px solid #101010;
 		flex-grow: 1;
 	}
 	.card.big {
-		min-width: 50%;
-		max-width: 70%;
-		aspect-ratio: 16/9;
+		width: 50%;
+		aspect-ratio: 3/2;
 	}
 	.card figcaption {
 		padding: 1.5em;
 		background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
-		text-shadow: 0 0 black;
+		text-shadow: 0 0 1px black;
+		row-gap: 1em;
+	}
+	.card.big figcaption {
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
 	}
 </style>
 
 {% assign projects = site.projects | sort: "priority" | reverse %}
 
-<section class="full-width">
+<section>
 	<ol class="grid" id="showcase-grid">
 		{% for project in projects %}
 		<li class="card{% if project.highlight %} big{%endif%}" style="background-image: url({{ project.image }})">
 			<figcaption>
-				<h3>{{ project.name }}</h3>
-				<span>{{ project.content | remove: "<p>" | remove: "</p>" }}</span>
-				<a href="{{ project.url }}" title="Link">→</a>
+				<span>
+					<h2>{{ project.name }}</h2>
+					<span>{{ project.content | remove: "<p>" | remove: "</p>" }}</span>
+				</span>
+				<menu><a href="{{ project.url }}" title="Link">→</a></menu>
 			</figcaption>
 		</li>
 		{% endfor %}

style.css

@@ -30,6 +30,17 @@ menu li {
 	margin: 4px 8px;
 }
 menu a { color: inherit;}
+menu a {
+	padding: 4px 8px;
+	background-color: rgba(10, 10, 10, 0.8);
+	border-radius: 3px;
+	backdrop-filter: blur(6px);
+	transition: background-color 0.25s ease;
+}
+menu a:hover, menu a.accent {
+	border-bottom: 0;
+	background-color: rgba(19, 19, 19, 0.9);
+}
 .title {
 	text-transform: uppercase;
 	letter-spacing: 1px;
@@ -41,20 +52,17 @@ header, footer, menu, .list, .grid {
 	column-gap: 2em;
 	flex-wrap: wrap;
 }
-.texture {
-	background-position: 0% 0%;
-	background-image: linear-gradient(transparent, black), url(/images/topography.svg);
-}
 .list { column-gap: 1em;}
 header, footer, .list, .card, figcaption { flex-direction: column;}
+menu { justify-content: center;}
 .flex, .card, figcaption { display: -ms-flex; display: flex;}
 .horizontal {
 	flex-direction: row;
 	flex-wrap: nowrap;
 }
 .grid {
 	flex-direction: row;
-	column-gap: 0; row-gap: 0;
+	/*column-gap: 0; row-gap: 0;*/
 }
 .chip, button {
 	display: inline-block;
@@ -78,6 +86,11 @@ figure { margin: 0;}
 	max-height: 1em;
 	vertical-align: middle;
 }
+.texture {
+	background-position: 0% 0%;
+	background-image: linear-gradient(transparent, black), url(/images/topography.svg);
+	animation: map 0.5s ease;
+}
 .cover { height: 400px;}
 .full-width { /* credit: gomakethings.com */
 	position: relative;