[Hints] Modernise canvas hints HTML and CSS

- CSS is the same as the help hints one
archimatetool · Aug 10, 2023 · 96fc1bd · 96fc1bd
1 parent 624cb9f
commit 96fc1bd
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 38 deletions.
diff --git a/com.archimatetool.canvas/help/hints/canvas_block.html b/com.archimatetool.canvas/help/hints/canvas_block.html
@@ -1,7 +1,11 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
     <head>
-        <link rel="stylesheet" href="style.css" charset="ISO-8859-1" type="text/css"/>
-</head>
+        <meta charset="UTF-8"/>
+        <link rel="stylesheet" href="style.css" type="text/css"/>
+        <title>Canvas Block</title>
+    </head>
+
     <body>
    	    <p>A Block Object is a container area that can contain text and an icon. You can also provide your own Help Hints. You can lock the Block if you want to make it read-only.    </p>
    	    <p>A typical scenario is to create a number of container Blocks on the Canvas, arrange them into the desired framework, lock them, and then save the Canvas as a template.</p>

diff --git a/com.archimatetool.canvas/help/hints/canvas_connection.html b/com.archimatetool.canvas/help/hints/canvas_connection.html
@@ -1,9 +1,13 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
     <head>
-        <link rel="stylesheet" href="style.css" charset="ISO-8859-1" type="text/css"/>
-</head>
+        <meta charset="UTF-8"/>
+        <link rel="stylesheet" href="style.css" type="text/css"/>
+        <title>Canvas Connection</title>
+    </head>
+
     <body>
    	    <p>A connection between two objects with no explicit semantic meaning.</p>
-   	You can lock the Connection if you want to make it read-only.
+   	    <p>You can lock the Connection if you want to make it read-only.</p>
     </body>
 </html>
diff --git a/com.archimatetool.canvas/help/hints/canvas_diagram.html b/com.archimatetool.canvas/help/hints/canvas_diagram.html
@@ -1,7 +1,11 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
     <head>
-        <link rel="stylesheet" href="style.css" charset="ISO-8859-1" type="text/css"/>
-</head>
+        <meta charset="UTF-8"/>
+        <link rel="stylesheet" href="style.css" type="text/css"/>
+        <title>Canvas</title>
+    </head>
+
     <body>
    	    <p>A Canvas to hold Blocks, Images, Stickies and Connections. You can also provide your own Help Hints.</p>
    	    <p>A typical scenario is to create a number of container Blocks and Stickies on the Canvas, arrange them into the desired framework, lock them, and then save the Canvas as a template.</p>

diff --git a/com.archimatetool.canvas/help/hints/canvas_image.html b/com.archimatetool.canvas/help/hints/canvas_image.html
@@ -1,7 +1,13 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
     <head>
-        <link rel="stylesheet" href="style.css" charset="ISO-8859-1" type="text/css"/>
-</head>
+        <meta charset="UTF-8"/>
+        <link rel="stylesheet" href="style.css" type="text/css"/>
+        <title>Canvas Image</title>
+    </head>
+
     <body>
-   	<p>A Canvas Image. Choose your own image to add to the area. You can lock the Image if you want to make it read-only.    </p></body>
+   	    <p>A Canvas Image. Choose your own image to add to the area.</p>
+   	    <p>You can lock the Image if you want to make it read-only.</p>
+   	</body>
 </html>
diff --git a/com.archimatetool.canvas/help/hints/canvas_sticky.html b/com.archimatetool.canvas/help/hints/canvas_sticky.html
@@ -1,10 +1,14 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
     <head>
-        <link rel="stylesheet" href="style.css" charset="ISO-8859-1" type="text/css"/>
+        <meta charset="UTF-8"/>
+        <link rel="stylesheet" href="style.css" type="text/css"/>
+        <title>Canvas Sticky</title>
     </head>
+
     <body>
    	    <p>A Sticky element for the Canvas.</p>
-    <p>Add text and an icon to the Sticky. You can lock the Sticky if you want to make it read-only.</p>
-    <p>Any Notes will appear in the tooltip for the Sticky. </p>
+        <p>Add text and an icon to the Sticky. You can lock the Sticky if you want to make it read-only.</p>
+        <p>Any Notes will appear in the tooltip for the Sticky.</p>
     </body>
 </html>
diff --git a/com.archimatetool.canvas/help/hints/style.css b/com.archimatetool.canvas/help/hints/style.css
@@ -1,39 +1,30 @@
 body, table {
 	font-family: Arial, Helvetica, sans-serif;
-	font-size: 10pt;
+	font-size: 13px;
 }
 
-.font14 {
-	font-size: 14pt;
+h1 {
+    font-size: 16px;
 }
 
-.font12 {
-	font-size: 12pt;
+h2 {
+    font-size: 14px;
 }
 
-
-H1 {
-    font-size: 12pt;
-}
-
-H2 {
-    font-size: 10pt;
-}
-
-H3 {
-	font-size: 10pt;
+h3 {
+	font-size: 13px;
 }
 
-A {
+a {
 	text-decoration:none;
 }
-A:link {
+a:link {
 	color:#0033CC;
 }
-A:visited {
+a:visited {
 	color:#025999;
 }
-A:hover	{
+a:hover	{
 	color:#ff9900;
 }