move textarea styles to style.css

Cosmatevs · Cosmatevs · commit 180d26bcb5bb · 2025-06-24T16:52:05.000+02:00
diff --git a/assets/style.css b/assets/style.css
@@ -72,10 +72,22 @@ textarea, iframe, button, select {
 	font-family: inherit;
 }
 
+textarea {
+	min-height: 1rem;
+	min-width: 3rem;
+	resize: none;
+}
+
 textarea[readonly] {
 	opacity: 0.8;
 }
 
+textarea.code {
+	font-family: "Consolas", monospace;
+	font-size: .8rem;
+	font-weight: 500;
+}
+
 /* custom elements */
 #site-icons {
 	display: flex;
diff --git a/bhav-to-diagram.html b/bhav-to-diagram.html
@@ -6,7 +6,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>The Sims 2 BHAV to Mermaid diagram</title>
 	<link rel="icon" type="image/x-icon" href="assets/favicon.svg">
-	<link rel="stylesheet" href="assets/style.css?v=5" />
+	<link rel="stylesheet" href="assets/style.css?v=6" />
 	<script src="assets/common.js?v=3"></script>
 	<script src="assets/svg-pan-zoom-container.js?v=0.6.1"></script> <!-- https://github.com/luncheon/svg-pan-zoom-container -->
 	<style>
@@ -39,15 +39,6 @@
 			flex-grow: 1;
 		}
 	
-		textarea {
-			min-height: 1rem;
-			min-width: 3rem;
-			resize: none;
-			font-family: "Consolas", monospace;
-			font-size: .8rem;
-			font-weight: 500;
-		}
-	
 		textarea.error {
 			background: var(--error-color);
 			color: var(--on-error-color);
@@ -128,7 +119,7 @@
 
 <body>
 	<section id="textareas">
-		<textarea id="input-code" spellcheck="false" placeholder="Here goes your BHAV code"></textarea>
+		<textarea id="input-code" class="code" spellcheck="false" placeholder="Here goes your BHAV code"></textarea>
 		<section id="settings">
 			<button id="tutorial-button" title="Replace the code in the BHAV textbox with a tutorial code">
 				Show tutorial
@@ -165,7 +156,7 @@
 				</a>
 			</div>
 		</section>
-		<textarea id="output-code" readonly placeholder="The BHAV code translated into Mermaid diagram code"></textarea>
+		<textarea id="output-code" class="code" readonly placeholder="The BHAV code translated into Mermaid diagram code"></textarea>
 	</section>
 	<section id="visual-output">
 		<div id="diagram-wrapper" data-zoom-on-wheel="zoom-amount: 0.001; min-scale: 0.9; max-scale: 20;" data-pan-on-drag>
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Nopke's web tools</title>
     <link rel="icon" type="image/x-icon" href="assets/favicon.svg">
-    <link rel="stylesheet" href="assets/style.css?v=5" />
+    <link rel="stylesheet" href="assets/style.css?v=6" />
     <style>
         body {
             --body-padding: 1.5rem;
@@ -50,6 +50,28 @@ <h1>The Sims 2 tools</h1>
                 to see explanations of what they do.
             </p>
         </dd>
+
+        <dt><a href="resource-list-to-table.html">Resource list to table</a></dt>
+        <dd>
+            <p>
+                A web tool for modders that converts
+                <a href="https://modthesims.info/showthread.php?t=630456" target="_blank">SimPe</a>
+                resource lists to HTML
+                and <a href="https://modthesims.info/" target="_blank">Mod The Sims</a> BBCode tables.
+                The tool includes group and type names,
+                and allows to sort the rows of the generated code.
+            </p>
+            <p>
+                It's intended to make preparing technical descriptions for mods easier.
+                <a href="https://modthesims.info/d/688444#overridden%20resources" target="_blank">
+                    See an example of how it can be used.
+                </a>
+            </p>
+            <p>
+                Hover over interface elements (e.g. buttons, icons, text areas)
+                to see explanations of what they do.
+            </p>
+        </dd>
     </dl>
     <section id="site-icons">
         <a href="https://github.com/Cosmatevs/cosmatevs.github.io" target="_blank" title="Go to the GitHub repository">
