prettified the blog css

assets/common/styles.css

@@ -16,6 +16,7 @@ main {
 
 	background-image: url("http://assets.zdenekborovec-dev.cz/common/planks_light_tile.png");
 	background-repeat: repeat;
+	background-color: white;
 	color: black;
 	border-radius: 2em;
 	border-style: outset;
@@ -55,6 +56,22 @@ td, th {
   padding: 8px;
 }
 
+img {
+	max-width: 100%;
+	max-height: 100%;
+}
+
+code {
+	border-style: solid;
+	border-width: thin;
+	border-color: black;
+	border-radius: 0.5em;
+	background-color: #282828;
+	color: #33ff00;
+	padding: 1em;
+	display: block;
+}
+
 .image-container {
 	border-style: solid;
 	border-width: thin;
@@ -63,9 +80,9 @@ td, th {
 	float: right;
 	background-image: url("http://assets.zdenekborovec-dev.cz/common/planks_dark_tile.png");
 	background-repeat: repeat;
+	background-color: black;
 	color: white;
 	padding: 1em;
-	margin-left: 1em;
 }
 
 .image-container img {
@@ -73,7 +90,6 @@ td, th {
 	border-style: solid;
 	border-width: thin;
 	border-color: black;
-	max-width: 100%;
 }
 
 .image-container p {
@@ -81,6 +97,55 @@ td, th {
 	margin-bottom: 0;
 }
 
+.image-gallery {
+	border-style: solid;
+	border-width: thin;
+	border-color: black;
+	border-radius: 0.5em;
+	background-image: url("http://assets.zdenekborovec-dev.cz/common/planks_dark_tile.png");
+	background-repeat: repeat;
+	background-color: black;
+	color: white;
+	padding: 1em;
+	margin-left: 1em;
+}
+
+.image-gallery div {
+	display: flex;
+	flex-flow: row wrap;
+	justify-content: flex-start;
+	align-items: flex-start;
+	columns: 16em;
+	gap: 1em;
+}
+
+.image-gallery div div {
+	border-style: solid;
+	border-width: thin;
+	border-color: black;
+	border-radius: 0.5em;
+	background-image: url("http://assets.zdenekborovec-dev.cz/common/planks_light_tile.png");
+	background-repeat: repeat;
+	background-color: white;
+	color: black;
+	padding: 1em;
+	max-height: 100%;
+	display: block;
+}
+
+.image-gallery div div img {
+	border-radius: 0.5em;
+	border-style: solid;
+	border-width: thin;
+	border-color: black;
+	object-fit: contain;
+}
+
+.image-gallery div div p {
+	font-style: italic;
+	margin-bottom: 0;
+}
+
 .frac {
     display: inline-block;
     position: relative;
@@ -88,7 +153,7 @@ td, th {
     letter-spacing: 0.001em;
     text-align: center;
 }
-.frac > span {
+.frac span {
     display: block;
     padding: 0.1em;
 }
@@ -98,3 +163,16 @@ td, th {
 .frac span.symbol {
     display: none;
 }
+
+.blog-metadata .blog-tag {
+	border-style: solid;
+	border-width: thin;
+	border-color: black;
+	border-radius: 0.5em;
+	padding: 0.2em;
+	margin: 0.2em;
+}
+
+.blog-metadata .blog-publish-date {
+	float: right;
+}

docs/www/blog/godot_spell_system_prototype/index.php

@@ -11,8 +11,19 @@ include_once($COMMONS."/header.php");
 	<h1>
 		Godot spell casting system prototype.
 	</h1>
-	<div style="text-align:right">
+	<div class="blog-metadata">
+		<span class="blog-tag" style="background-color: cornflowerblue">
+			godot
+		</span>
+		<span class="blog-tag" style="background-color: khaki">
+			game-dev
+		</span>
+		<span class="blog-tag" style="background-color: sienna">
+			the-labyrinth-II
+		</span>
+		<span class="blog-publish-date">
 			Published on: 2024-01-13
+		</span>
 	</div>
 	<p>
 		I wanted to implement this system in my game "The Labyrinth II" ever since I was maybe 13, but the project failed a few times and for the last few years it has been just rotting in the back of my mind. Well, I have decided to return to it again.
@@ -24,44 +35,52 @@ include_once($COMMONS."/header.php");
 		Now, I have to admit, that I am not at all sure if this system will actually work in a modern game, or, really any game that's not basically turn-based. I do have some ideas how to solve these problems (including a time slow-down mechanic), but that is too far in the future now. I am planning on taking this very easy and slow, more focused on having fun and exploring the godot engine, rather than trying to sprint to the goal of a finished game.
 	</p>
 
-	<h3> Gallery </h3>
+	<div class="image-gallery">
+		<h2> Gallery </h2>
+		<div>
 			<div>
 				<img src="http://www.zdenekborovec-dev.cz/blog/godot_spell_system_prototype/nodes.png"/>
 				<p>
-			A path drawn between some nodes, this is how the spell casting looks like.
+					A path drawn between some nodes, this is what the spell casting looks like.
 				</p>
+			</div>
+			<div>
 				<img src="http://www.zdenekborovec-dev.cz/blog/godot_spell_system_prototype/console.png"/>
 				<p>
 					A log from the spellbook, it detects all entered paths. It also has a dictionary of paths and spells, if you enter a path that corresponds to a spell, you cast it!
 				</p>
+			</div>
+			<div>
 				<img src="http://www.zdenekborovec-dev.cz/blog/godot_spell_system_prototype/spellbookexports.png"/>
 				<p>
 					This is how I can interact with the spellbook from the editor. I can add in nodes (it then works with them automagically, so I am not anyhow limited to the 3x3 grid). And I can also add in the spell paths and names (I can then use these to emit a spell_cast event with its name, or something like that).
 				</p>
 			</div>
+		</div>
+	</div>
 
 	<p>
-		I am not including any code snippets or more technical stuff as I do not have the css for any code blocks or galleries of pictures (lets be honest, the one right above this text looks absolutely disgusting, or at least it looks like that while I am writing this, I will elaborate on the meta problems of this blog in the next paragraph). But please do let me know if you want to see more or less of the more technical stuff, I am listening (or rather reading e-mails ;-)).
+		Once I tried actually using it in a control node, I found out the mapping of the mouse was completely off, I remade it into control nodes, which I am actually happy about as I feel like the nodes being buttons makes more sense than them being sprites with a collision box that only reacts to the mouse, or whatever I was using, I don't wven remember, but it was wacky :D. But I encountered a problem! I still had to use the Line2D, which is a Node2D. And it's position just did not map well. Through experimentation I found out that it was using the position as relating to its scene origin, but once the control scene was inserted into a control container, it got scaled, as controls should, but it was now offset and the line was not. The only solution I could find was putting the SpellBook scene inside of a MarginContainer, and offseting it using margins and thus preserving its 'relative origin', instead of letting it stretch. I do not like this solution as it requires manual fiddling if you want to change up the HUD, but it was the only solution I could find.
 	</p>
 	<p>
-		So, the promised meta rambling. These blogposts are, in their current form, very temporary. I am just writing it without any express purpose to see what kind of template I might want for a blogpost. The lacking css is just me not wanting to do css at the time of writing. Right now I am just collecting the need for such things as the article content, header, short summary, publish date, previous and next blogpost in related series, and so on and so forth. Ah, hell, let me just throw a code snippet in here to test the css on in the future.
+		Here is a bit of code, so that I can test my code block css:
 	</p>
-	<div>
+	<code>
-		# Called when the node enters the scene tree for the first time.
+		<pre>
-		func _ready():
+## Add a node to current spell
-			if(spell_nodes.size() == 0):
+func _on_spellnode_entered(node: SpellNode)-&gt;void:
-				print("feedbacking")
+	if is_receiving_spell &amp;&amp; not spell_builder.has(node):
-				fallback_add_nodes()
+	# Append node to the spell builder
-			for spellNode in spell_nodes:
+	spell_builder.append(node);
-				spellNode.input_event.connect(spell_node_input_event)
+
-	</div>
+		# Add new point to the spell line and set the old top to the new nodes position
+		spell_line.add_point(node.position)
+		spell_line.set_point_position(spell_line.get_point_count() - 2, node.position)
+		</pre>
+	</code>
 	<p>
-		Damn, just look how much styling that needs.
+		I would like to add some kind of syntax highlighting, but from my research I'd have to write a php function for that, as css cannot look for key words, and writing a bunch of php is not something I am currently in the mood for, so this will have to do, for now.
 	</p>
-	<p>
-		Also, have som grass texture I made, but most likely won't use. But I think it's pretty so I don't want to delete it.
-	</a>
-		<img src="http://www.zdenekborovec-dev.cz/blog/godot_spell_system_prototype/grass.png"/>
 </article>
 
 <?php