Initial post commit i have also added more short codes

themes/lhs/assets/sass/bulma/helpers/float.sass

@@ -7,4 +7,4 @@
   float: left !important
 
 .is-pulled-right
-  float: right !important
+  float: right !important

themes/lhs/assets/sass/leighhack.scss

@@ -384,4 +384,97 @@ background-image: linear-gradient(red, orange);
 	border-radius: 5px;;
 	padding: 2rem 0;
 	margin-bottom: 2rem;
+.center-image {
+		margin-left: 45%;
+	}
+}
+.center-block-90 {
+	width: auto;
+	margin: 0 2.5%;
+	padding: 10px;
+	word-wrap: break-word;
+}
+
+.center-block-80 {
+	margin: 0 10%;
+	padding: 0 5px;
+}
+
+.highlighted {
+	outline: 1px solid red;
+}
+
+// Custom image CSS added by john
+figure {
+    margin: 0;
+    text-align: center;
+}
+
+figcaption {
+    font-size: 0.9rem;
+    color: #666;
+    margin-top: 5px;
+}
+
+.side-by-side-2-cols {
+    display: flex;
+    gap: 15px;
+	margin-bottom: 20px;
+}
+
+.side-by-side-2-cols figure {
+    flex: 1;
+}
+
+.side-by-side-2-cols img {
+    width: 50%;
+	height: auto;
+	border-radius: 10px;
+}
+
+.side-by-side-3-cols {
+    display: flex;
+    gap: 10px;
+	padding: 10px;
+}
+
+.side-by-side-3-cols img {
+    width: 33%;
+}
+
+.padded-center-image img {
+    display: block;
+    margin: 10px auto;
+	width: 90%;
+	border-radius: 15px;
+}
+
+.image-left, .image-right {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.image-left img, .image-right img {
+    width: 40%;
+}
+
+.image-left .text, .image-right .text {
+    flex: 1;
+}
+
+.image-right {
+    flex-direction: row-reverse;
+}
+
+/* Mobile-specific styles */
+@media (max-width: 768px) {
+    .side-by-side, .image-left, .image-right {
+        flex-direction: column;
+        text-align: center;
+    }
+    .side-by-side img, .image-left img, .image-right img {
+        width: 100%;
+        padding: 10px;
+	}
 }

themes/lhs/layouts/shortcodes/block_separator.html

@@ -0,0 +1,9 @@
+{{ $blocks := split .Inner "<!-- block_separator -->" }}
+{{ range $index, $block := $blocks }}
+    <div class="block">
+        {{ $block | markdownify | safeHTML }}
+    </div>
+    {{ if ne (add $index 1) (len $blocks) }}
+        <hr class="separator" />
+    {{ end }}
+{{ end }}

themes/lhs/layouts/shortcodes/center-block-90.html

@@ -0,0 +1,3 @@
+<div class="center-block-90">
+    {{ .Inner | .Page.RenderString  }}
+</div>

themes/lhs/layouts/shortcodes/image-left.html

@@ -0,0 +1,4 @@
+<div class="image-left">
+    <img src="{{ .Get "src" }}" alt="{{ .Get "alt" }}">
+    <div>{{ .Inner }}</div>
+</div>

themes/lhs/layouts/shortcodes/image-right.html

@@ -0,0 +1,4 @@
+<div class="image-right">
+    <div>{{ .Inner }}</div>
+    <img src="{{ .Get "src" }}" alt="{{ .Get "alt" }}">
+</div>

themes/lhs/layouts/shortcodes/image2.html

@@ -0,0 +1,22 @@
+{{ $img := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }}
+{{ $width := .Get "width" }}
+{{ $img = $img.Resize (print (default "1264x" $width) " webp") }}
+{{ $title := .Get "title" }}
+{{ $class := .Get "class" }}
+{{- with .Parent -}}
+<div>
+{{ end }}
+<figure class="image{{ if $class }} {{ $class }}{{ end }}">
+  <img src="{{ $img.RelPermalink }}" width="{{ $img.Width }}" height="{{ $img.Height }}" {{ if $title }}
+    alt="{{ $title }}" {{ end }}>
+  {{ if $title }}
+  <figcaption class="is-size-6">
+    <small>
+      {{ $title }}
+    </small>
+  </figcaption>
+  {{ end }}
+</figure>
+{{- with .Parent -}}
+</div>
+{{ end }}

themes/lhs/layouts/shortcodes/padded-center-image.html

@@ -0,0 +1,3 @@
+<div class="padded-center-image">
+    <img src="{{ .Get 0 }}" alt="{{ .Get 1 }}" />
+</div>

themes/lhs/layouts/shortcodes/side-by-side-2-cols.html

@@ -0,0 +1,4 @@
+<div class="side-by-side-2-cols">
+    <img src="{{ .Get 0 }}" alt="{{ .Get 1 }}" />
+    <img src="{{ .Get 2 }}" alt="{{ .Get 3 }}" />
+</div>

themes/lhs/layouts/shortcodes/side-by-side-3-cols.html

@@ -0,0 +1,5 @@
+<div class="side-by-side-3-cols">
+    <img src="{{ .Get "src1" }}" alt="{{ .Get "alt1" }}">
+    <img src="{{ .Get "src2" }}" alt="{{ .Get "alt2" }}">
+    <img src="{{ .Get "src3" }}" alt="{{ .Get "alt3" }}">
+</div>