Better alerts and floating blocks

_posts/2024/2024-08-09-review-relic-odyssey.html

@@ -12,19 +12,19 @@ tags: ["Review", "Exploration", "Action", "Shooter", "First-Person" ]
 
 <p class="block">For unclear reasons, the developers chose to frontload the game with an unnecessary amount of information, instead of teaching through gameplay itself. I thought we had solved this problem with the release of Half Life 2 in 2004, but it appears that isn't the case. This section of the game is too long, with even my fastest attempts on average spending 10 minutes in this section. Some of the NPCs walk slow enough that I can make an instant coffee and be back before the NPC has reached its destination.</p>
 
-<figure class="block" style="float: right; clear: both; width: 33%; max-width: 256px;">
+<figure class="block float-end float-right clear size-preview">
 	<img src="https://share.xaymar.com/view/b4ff5573-3847-4e32-a2c5-fcd2816052df">
 	<figcaption>Help, I broke the sky.</figcaption>
 </figure><p class="block">This was one of my gripes with the first playtest, but at least they're now a bit faster than back then. Progress is progress. Once you're through the tutorial section, you can either explore the area around your base, or go digging into the main part of the game. You explore for resources that can only be found in the "overworld", and go digging for common resources and story progress. I had already done enough exploration by speedrunning the tutorial section, so I went with the latter.</p>
 
 <p class="block">Both sections of the game are mostly the same. You find something interesting, explore it, kill any hostiles (and anything non-hostile, no witnesses), loot resources and items, and then return. For the digging & delving part, you'll sometimes stumble upon a dungeon, which you can delve into, shifting focus to killing hostiles before looting. These dungeons tend to be relevant to story progression mainly, but occasionally hold important material for improving yourself.</p>
 
-<figure class="block" style="float: right; clear: both; width: 33%; max-width: 256px;">
+<figure class="block float-end float-right clear size-preview">
 	<img class="block" src="https://share.xaymar.com/view/34dad308-97ac-4bd7-91fd-3b861a3b0005">
 	<figcaption>What can be looted here?</figcaption>
 </figure><p class="block">Exploring itself is mostly walking around and occasionally using the scanner you're given to check if there is a resource. It helps with figuring out what is interactive and what isn't too, but unfortunately it isn't all that helpful. I've encountered several resources that were interactive but weren't highlighted by the scanner, and the other way around too.</p>
 
-<figure class="block" style="float: right; clear: both; width: 33%; max-width: 256px;">
+<figure class="block float-end float-right clear size-preview">
 	<img class="block" src="https://share.xaymar.com/view/6b6886e0-bee5-47f0-b12b-b170921446bb">
 	<figcaption>Oh, I see.</figcaption>
 </figure>
@@ -34,7 +34,7 @@ tags: ["Review", "Exploration", "Action", "Shooter", "First-Person" ]
 
 <p class="block">Anyway, overall the game is currently fun, but over extended periods tends to get boring quickly. It lacks the "punch" or "catchiness" of similar titles, and is very clearly still unfinished. The developers behind it also appear to have big plans, but if they can make those plans reality is a different story entirely.</p>
 
-<h1 class="block" style="clear:both;">The Good, Bad and Ugly</h1>
+<h1 class="block clear">The Good, Bad and Ugly</h1>
 
 <h2 class="block">The Good</h2>
 <ul class="block">

_sass/_block-alert.scss

@@ -1,34 +1,28 @@
 alert.block {
 	position: relative;
 	display: block;
-	margin: .5em;
+	margin: .5em -.5em;
-	margin-left: 1.5em;
-	margin-right: 1.5em;
 	padding: .5em;
-	padding-left: 4em;
 	min-height: 4em;
 
-	border: 2px solid hsl($theme-hue, 30%, 40%);
+	border-left: 1em solid hsl($theme-hue, 30%, 40%);
-	border-radius: 0.2rem;
 	background: hsl($theme-hue, 20%, 30%);
-	box-shadow: 0px 0px 2px 2px rgb(0, 0, 0);
+	box-shadow: 0px 0px 8px 2px rgb(0, 0, 0);
 	overflow: hidden;
 }
 
 alert::before {
 	content: "📌";
 
-	position: absolute;
-	top: 0px;
-	bottom: 0px;
-	left: 0px;
-
 	display: block;
 	min-width: 4rem;
 	min-height: 4rem;
 
+	float: left;
+	shape-outside: polygon(0em 0em, 3em 0em, 3em 3em, 0em 3em);
+
 	font-size: 3rem;
-	white-space: no-wrap;
+	white-space: nowrap;
 	text-align: center;
 
 	display: flex;

_sass/_blocks.scss

@@ -14,9 +14,21 @@
 	margin-top: 1.25em;
 }
 
+// --------------------------------------------------------------------------------
+// Size
+// --------------------------------------------------------------------------------
+
+@media (min-width: 600px) {
+	.size-preview {
+		width: 33%;
+		max-width: 380px;
+	}
+}
+
 // --------------------------------------------------------------------------------
 // Float
 // --------------------------------------------------------------------------------
+@media (min-width: 600px) {
 	.float {
 		margin: .75rem;
 	}
@@ -45,6 +57,7 @@
 	.float + .block {
 		margin-top: 0em;
 	}
+}
 
 // --------------------------------------------------------------------------------
 // Align