Update abouts to be more consistent

plugins.json

@@ -318,7 +318,7 @@
 		"author": "Ewan Howell",
 		"description": "Create Minecraft-styled title models!",
 		"tags": ["Minecraft", "Title", "Logo"],
-		"version": "1.6.0",
+		"version": "1.6.1",
 		"min_version": "4.8.0",
 		"variant": "both",
 		"creation_date": "2023-06-10",

plugins/cem_template_loader/about.md

@@ -1,13 +1,13 @@
 <div id="about-content">
-  <img style="height:128px;margin:0 0 30px" src="https://ewanhowell.com/assets/images/plugins/cem-template-loader/logo.webp" />
+  <img src="https://ewanhowell.com/assets/images/plugins/cem-template-loader/logo.webp" />
   <p>CEM Template Loader can be used to load the vanilla entity models for Minecraft: Java Edition, so you can use them in OptiFine CEM, or as texturing templates.</p>
   <p>To use this plugin, head to the <strong>Tools</strong> menu and select <strong>CEM Template Loader</strong>. From here, select the model that you would like to edit and load it.</p>
   <p>After editing your model, export it as an <strong>OptiFine JEM</strong> to the folder <code>assets/minecraft/optifine/cem</code>. If a texture is used in the model, make sure it saves with a valid file path.</p>
+  <img style="height: 300px; margin: 10px 0 12px; image-rendering: auto;" src="https://ewanhowell.com/assets/images/plugins/cem-template-loader/images/dialog.webp" />
   <h2>Important</h2>
   <p>When editing an entity model, you cannot rotate root groups (top level folders), or move the pivot points of root groups, as this can break your model. If you need to rotate a root group, use a subgroup. If you need to change a root group's pivot point, use CEM animations.</p>
   <h2>Animation Editor</h2>
   <p>CEM Template Loader also includes an animation editor, so that you can create custom entity animations.</p>
-  <img style="height:300px;margin:10px 0 13px;image-rendering:auto" src="https://ewanhowell.com/assets/images/plugins/cem-template-loader/images/entities.webp" />
 </div>
 <style>
   .about {
@@ -16,18 +16,22 @@
     flex-direction: column;
     justify-content: space-between;
   }
-  #about {
-    display: none;
-  }
   #about-content {
     overflow-y: auto;
     min-height: 128px;
   }
-  #about-content img {
+  #about-content > img {
     width: 100%;
+    height: 128px;
     object-fit: contain;
+    margin: 16px 0 24px;
     filter: drop-shadow(0 3px 10px #0006);
   }
+  #about-markdown-links {
+    display: flex;
+    justify-content: space-around;
+    margin: 20px 20px 0;
+  }
   #about-markdown-links > a {
     display: flex;
     flex-direction: column;
@@ -61,17 +65,17 @@
     margin: 0;
   }
 </style>
-<div id="about-markdown-links" style="display:flex;justify-content:space-around;margin:20px 20px 0">
+<div id="about-markdown-links">
   <a href="https://ewanhowell.com/">
-    <i class="material-icons icon" style="color:#33E38E">language</i>
+    <i class="material-icons icon" style="color: #33E38E;">language</i>
     <p>By Ewan Howell</p>
   </a>
   <a href="https://discord.ewanhowell.com/">
-    <i class="fa_big icon fab fa-discord" style="color:#727FFF"></i>
+    <i class="fa_big icon fab fa-discord" style="color: #727FFF;"></i>
     <p>Discord Server</p>
   </a>
   <a href="https://youtu.be/arj2eim42KI">
-    <i class="fa_big icon fab fa-youtube" style="color:#FF4444"></i>
+    <i class="fa_big icon fab fa-youtube" style="color: #FF4444;"></i>
     <p>CEM Modelling Tutorial</p>
   </a>
 </div>

plugins/colour_gradient_generator/about.md

@@ -1,4 +1,5 @@
 <div id="about-content">
+  <img src="https://ewanhowell.com/assets/images/plugins/colour-gradient-generator/logo.webp" />
   <p>This plugin generates hue shifted colour gradient palettes from a single colour.</p>
   <h2>Example</h2>
   <h3>Input Colour</h3>
@@ -32,6 +33,13 @@
     overflow-y: auto;
     min-height: 128px;
   }
+  #about-content > img {
+    width: 100%;
+    height: 128px;
+    object-fit: contain;
+    margin: 16px 0 24px;
+    filter: drop-shadow(0 3px 10px #0006);
+  }
   .about-colour-gradient {
     display: flex;
     filter: drop-shadow(0 3px 10px #0006);
@@ -95,11 +103,11 @@
 </style>
 <div id="about-markdown-links">
   <a href="https://ewanhowell.com/">
-    <i class="material-icons icon" style="color: rgb(51, 227, 142);">language</i>
+    <i class="material-icons icon" style="color: #33E38E;">language</i>
     <p>By Ewan Howell</p>
   </a>
   <a href="https://discord.ewanhowell.com/">
-    <i class="fa_big icon fab fa-discord" style="color: rgb(114, 127, 255);"></i>
+    <i class="fa_big icon fab fa-discord" style="color: #727FFF;"></i>
     <p>Discord Server</p>
   </a>
 </div>

plugins/live_dev_reloader/about.md

@@ -1,7 +1,7 @@
 <div id="about-content">
   <p>This plugin adds a way to edit both plugin and theme files in a text editor of your choice, and have them automatically update inside Blockbench upon you saving the file.</p>
-  <p>When a plugin file is being watched for changes, it's <code>about.md</code> file will be automatically watched for changes too.</p>
-  <p>Theme files support both <code>.bbtheme</code> and <code>.css</code> files being watched.</p>
+  <p>When a plugin file is being watched for changes, it's <strong>about.md</strong> file will be automatically watched for changes too.</p>
+  <p>Theme files support both <strong>.bbtheme</strong> and <strong>.css</strong> files being watched.</p>
   <h2>How to use</h2>
   <h3>Watching files</h3>
   <p>To watch a file, have a theme or plugin file ready, then go to <strong>Help > Developer > Live Dev Reloader</strong>. From here, select <strong>Watch plugin or theme file</strong>, then select your plugin or theme file.</p>
@@ -21,6 +21,11 @@
     overflow-y: auto;
     min-height: 128px;
   }
+  #about-markdown-links {
+    display: flex;
+    justify-content: space-around;
+    margin: 20px 20px 0;
+  }
   #about-markdown-links > a {
     display: flex;
     flex-direction: column;
@@ -54,13 +59,13 @@
     margin: 0;
   }
 </style>
-<div id="about-markdown-links" style="display:flex;justify-content:space-around;margin:20px 20px 0">
+<div id="about-markdown-links">
   <a href="https://ewanhowell.com/">
-    <i class="material-icons icon" style="color:rgb(51, 227, 142)">language</i>
+    <i class="material-icons icon" style="color: #33E38E;">language</i>
     <p>By Ewan Howell</p>
   </a>
   <a href="https://discord.ewanhowell.com/">
-    <i class="fa_big icon fab fa-discord" style="color:rgb(114, 127, 255)"></i>
+    <i class="fa_big icon fab fa-discord" style="color: #727FFF;"></i>
     <p>Discord Server</p>
   </a>
-</div>
+</div>

plugins/minecraft_title_generator/about.md

@@ -1,9 +1,8 @@
 <div id="about-content">
-  <img style="width:100%;height:128px;object-fit:contain;margin:0 0 30px;filter:drop-shadow(0 3px 10px #0006)" src="https://ewanhowell.com/assets/images/plugins/minecraft-title-generator/logo.webp" />
+  <img src="https://ewanhowell.com/assets/images/plugins/minecraft-title-generator/logo.webp" />
   <p>This plugin adds a new format that allows you to create Minecraft-styled title models that you can render in high quality.</p>
   <h2>Getting started</h2>
   <p>To use this plugin, start by creating a new <strong>Minecraft Title</strong> project from the start screen, or go to <strong>File > New > Minecraft Title</strong> You can then use the pop-up dialog to add some text to the project. Don't forget to set the text type! You can add more text by using the <strong>Add Text</strong> button <i class="icon material-icons" style="translate:0 5px">text_fields</i> in the outliner.</p>
-  <br><br>
   <p>Once you are done configuring your text, you can go to the <strong>Render</strong> tab at the top right to produce a high-quality render of your title. The <strong>Position Camera</strong> button <i class="icon material-icons" style="translate:0 5px">auto_mode</i> will set the camera angle for you.</p>
 </div>
 <style>
@@ -13,13 +12,22 @@
     flex-direction: column;
     justify-content: space-between;
   }
-  #about {
-    display: none;
-  }
   #about-content {
     overflow-y: auto;
     min-height: 128px;
   }
+  #about-content > img {
+    width: 100%;
+    height: 128px;
+    object-fit: contain;
+    margin: 16px 0 24px;
+    filter: drop-shadow(0 3px 10px #0006);
+  }
+  #about-markdown-links {
+    display: flex;
+    justify-content: space-around;
+    margin: 20px 20px 0;
+  }
   #about-markdown-links > a {
     display: flex;
     flex-direction: column;
@@ -53,21 +61,21 @@
     margin: 0;
   }
 </style>
-<div id="about-markdown-links" style="display:flex;justify-content:space-around;margin:20px 20px 0">
+<div id="about-markdown-links">
   <a href="https://ewanhowell.com/">
-    <i class="material-icons icon" style="color:rgb(51, 227, 142)">language</i>
+    <i class="material-icons icon" style="color: #33E38E;">language</i>
     <p>By Ewan Howell</p>
   </a>
   <a href="https://discord.ewanhowell.com/">
-    <i class="fa_big icon fab fa-discord" style="color:rgb(114, 127, 255)"></i>
+    <i class="fa_big icon fab fa-discord" style="color: #727FFF;"></i>
     <p>Discord Server</p>
   </a>
   <a href="https://github.com/ewanhowell5195/MinecraftTitleGenerator/">
-    <i class="fa_big icon fab fa-github" style="color:rgb(110, 64, 201)"></i>
+    <i class="fa_big icon fab fa-github" style="color: #6E40C9;"></i>
     <p>Submit Textures and Fonts</p>
   </a>
   <a href="https://youtu.be/iGaufrACVj4">
-    <i class="fa_big icon fab fa-youtube" style="color:rgb(255, 68, 68)"></i>
+    <i class="fa_big icon fab fa-youtube" style="color: #FF4444;"></i>
     <p>Tutorial</p>
   </a>
 </div>

plugins/minecraft_title_generator/changelog.json

@@ -381,5 +381,18 @@
         ]
       }
     ]
+  },
+  "1.6.1": {
+    "title": "1.6.1",
+    "date": "2024-07-14",
+    "author": "Ewan Howell",
+    "categories": [
+      {
+        "title": "Bug Fixes",
+        "list": [
+          "Fixed selected items to use the select colour instead of the button colour"
+        ]
+      }
+    ]
   }
 }

plugins/minecraft_title_generator/minecraft_title_generator.js

@@ -96,7 +96,7 @@
     author: "Ewan Howell",
     description,
     tags: ["Minecraft", "Title", "Logo"],
-    version: "1.6.0",
+    version: "1.6.1",
     min_version: "4.8.0",
     variant: "both",
     creation_date: "2023-06-10",
@@ -159,7 +159,7 @@
         }
         .minecraft-title-item.selected {
           outline: 2px solid var(--color-accent);
-          background-color: var(--color-button);
+          background-color: var(--color-selected);
           outline-offset: -2px;
         }
         .minecraft-title-item-has-variants {

plugins/preview_scene_customiser/about.md

@@ -20,13 +20,15 @@
     flex-direction: column;
     justify-content: space-between;
   }
-  #about {
-    display: none;
-  }
   #about-content {
     overflow-y: auto;
     min-height: 128px;
   }
+  #about-markdown-links {
+    display: flex;
+    justify-content: space-around;
+    margin: 20px 20px 0;
+  }
   #about-markdown-links > a {
     display: flex;
     flex-direction: column;
@@ -60,17 +62,17 @@
     margin: 0;
   }
 </style>
-<div id="about-markdown-links" style="display:flex;justify-content:space-around;margin:20px 20px 0">
+<div id="about-markdown-links">
   <a href="https://ewanhowell.com/">
-    <i class="material-icons icon" style="color:rgb(51, 227, 142)">language</i>
+    <i class="material-icons icon" style="color: #33E38E;">language</i>
     <p>By Ewan Howell</p>
   </a>
   <a href="https://discord.ewanhowell.com/">
-    <i class="fa_big icon fab fa-discord" style="color:rgb(114, 127, 255)"></i>
+    <i class="fa_big icon fab fa-discord" style="color: #727FFF;"></i>
     <p>Discord Server</p>
   </a>
   <a href="https://github.com/ewanhowell5195/previewSceneCustomiser/">
-    <i class="fa_big icon fab fa-github" style="color:rgb(110, 64, 201)"></i>
+    <i class="fa_big icon fab fa-github" style="color: #6E40C9;"></i>
     <p>Submit Preview Scenes</p>
   </a>
 </div>

plugins/resource_pack_utilities/about.md

@@ -1,4 +1,5 @@
 <div id="about-content">
+  <img src="https://ewanhowell.com/assets/images/plugins/resource-pack-utilities/logo.webp" />
   <p>This plugin contains a collection of utilities to assist with resource pack creation.</p>
   <h2>How to use</h2>
   <p>To use this plugin, go <strong>Tools > Resource Pack Utilities</strong>, then select the utility you would like to use.</p>
@@ -45,6 +46,13 @@
     overflow-y: auto;
     min-height: 128px;
   }
+  #about-content > img {
+    width: 100%;
+    height: 128px;
+    object-fit: contain;
+    margin: 16px 0 24px;
+    filter: drop-shadow(0 3px 10px #0006);
+  }
   #about-content h3 {
     margin-bottom: -4px;
     font-weight: 600;
@@ -89,11 +97,11 @@
 </style>
 <div id="about-markdown-links">
   <a href="https://ewanhowell.com/">
-    <i class="material-icons icon" style="color: rgb(51, 227, 142);">language</i>
+    <i class="material-icons icon" style="color: #33E38E;">language</i>
     <p>By Ewan Howell</p>
   </a>
   <a href="https://discord.ewanhowell.com/">
-    <i class="fa_big icon fab fa-discord" style="color: rgb(114, 127, 255);"></i>
+    <i class="fa_big icon fab fa-discord" style="color: #727FFF;"></i>
     <p>Discord Server</p>
   </a>
 </div>

plugins/scene_recorder/about.md

@@ -50,13 +50,15 @@
   .about td:first-child {
     font-weight: 700;
   }
-  #about {
-    display: none;
-  }
   #about-content {
     overflow-y: auto;
     min-height: 128px;
   }
+  #about-markdown-links {
+    display: flex;
+    justify-content: space-around;
+    margin: 20px 20px 0;
+  }
   #about-markdown-links > a {
     display: flex;
     flex-direction: column;
@@ -90,21 +92,21 @@
     margin: 0;
   }
 </style>
-<div id="about-markdown-links" style="display:flex;justify-content:space-around;margin:20px 20px 0">
+<div id="about-markdown-links">
   <a href="https://ewanhowell.com/">
-    <i class="material-icons icon" style="color:rgb(51, 227, 142)">language</i>
+    <i class="material-icons icon" style="color: #33E38E;">language</i>
     <p>By Ewan Howell</p>
   </a>
   <a href="https://discord.ewanhowell.com/">
-    <i class="fa_big icon fab fa-discord" style="color:rgb(114, 127, 255)"></i>
+    <i class="fa_big icon fab fa-discord" style="color: #727FFF;"></i>
     <p>Discord Server</p>
   </a>
   <a href="https://ffmpeg.org/download.html">
     <svg height="32" viewBox="0 0 70 70"><path fill="none" stroke="#008700" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" d="M5 5h20L5 25v20L45 5h20L5 65h20l40-40v20L45 65h20"/></svg>
     <p>FFmpeg</p>
   </a>
   <a href="https://youtu.be/jZLqNocSQDM">
-    <i class="fa_big icon fab fa-youtube" style="color:rgb(255, 68, 68)"></i>
+    <i class="fa_big icon fab fa-youtube" style="color: #FF4444;"></i>
     <p>Installing FFmpeg</p>
   </a>
 </div>