Merge pull request #301 from AsherGlick/webdoc_style_updates

Attempting to upgrade the doc styles
AsherGlick · May 26, 2024 · e20570d · e20570d
2 parents 21333c0 + 62b8512
commit e20570d
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 34 deletions.
diff --git a/xml_converter/generators/main.py b/xml_converter/generators/main.py
@@ -144,15 +144,13 @@ def get_fixed_option_examples(self, field_type: str, pairings: Any) -> List[str]
         return examples
 
     def build_example(self, type: str, applies_to: List[str], xml_field: str, examples: List[str]) -> str:
-        example = "<div class='codeblock'>"
+        example = "<div class='codehilite'><pre><code>"
 
         for node_type in applies_to:
             for value in examples:
-                example += "&lt;" + node_type + " ... " + xml_field + "=<b>" + value + "</b> ... &gt;<br>"
+                example += f'<span class="nt">&lt;{node_type}</span><span class="w"> </span><span class="cm">...</span><span class="w"> </span><span class="na">{xml_field}=</span><span class="s">{value}</span><span class="w"> </span><span class="cm">...</span><span class="w"> </span><span class="nt">&gt;</span>\n'
             break
-            # example += "<br>"
-
-        example += "</div>"
+        example += "</pre></code></div>"
 
         return example
 

diff --git a/xml_converter/generators/web_templates/documentation.html b/xml_converter/generators/web_templates/documentation.html
@@ -1,18 +1,52 @@
 <html>
 	<head>
 		<style>
+			:root {
+				--background-color: #222;
+				--text-color: #EEE;
+				--text-border-color: #808080;
+				--code-background-color: #222;
+			}
+
 			body {
 				font-family: sans-serif;
-				background: #EEE;
+				background: var(--background-color);
+				color: var(--text-color);
 			}
 			table.quickfinder td, th {
-				border: 1px solid black;
+				border: 1px solid #3c3c3c;
 				padding: 5px;
 			}
 			table.quickfinder {
 				border-collapse: collapse;
 			}
 
+			a {
+				color: #CCF;
+			}
+
+			.nav_bar {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, 300px);
+				justify-content: center;
+			}
+			.nav_item {
+				width: 300px;
+				float: left;
+				padding: 10px;
+				box-sizing: border-box;
+				text-align: center;
+				transition: 0.2s;
+				text-decoration: none;
+				color: var(--text-color);
+			}
+			.nav_item:hover {
+				background: #CCC;
+				border-radius: 5px;
+				color: #222;
+			}
+
+
 			.content {
 				max-width: 1200px;
 				margin: auto;
@@ -21,26 +55,27 @@
 			.codeblock {
 				white-space: pre-wrap;
 				font-family: monospace;
-				font-size: 1.2em;
-				background: #DDD;
+				background: var(--code-background-color);
 				padding: 10px;
 				padding-left: 13px;
 
-				border: 1px solid #888;
+				border: 1px solid var(--text-border-color);
 				border-radius: 3px;
 				margin: 10px 30px;
 			}
 			code {
 				display: inline-block;
-				background: #DDD;
+				background: var(--code-background-color);
 				padding: 1px 3px 0px 3px;
-				border: 1px solid #888;
+				border: 1px solid var(--text-border-color);
 				border-radius: 3px;
 			}
-
 			.codehilite code {
 				width: 100%;
 				box-sizing: border-box;
+				padding: 10px;
+				background-color: #282923;
+				font-size: 1.2em;
 			}
 
 			table.flagbox {
@@ -51,7 +86,7 @@
 
 			.flag_valuebox {
 				padding: 10px;
-				background: #CCC;
+				background: #333;
 				line-height: 1.5em;
 				border-radius: 3px;
 				text-align: center;
@@ -64,19 +99,19 @@
 			}
 			.flag_namebox {
 				padding: 10px;
-				background: #CCC;
+				background: #333;
 				border-radius: 3px;
 				text-align: center;
 			}
 
 			.infobox {
 				float: left;
 				text-align: center;
-				border: 1px solid black;
+				border: 1px solid var(--text-border-color);
 			}
 
 			.info_title {
-				background: #CCC;
+				background: #333;
 			}
 
 			.halfbox {
@@ -85,32 +120,24 @@
 				float: left;
 			}
 			.field_wrapper {
-				border:  1px solid black;
+				border:  1px solid var(--text-border-color);
 				padding: 10px;
-				background: #FFF;
+				background: var(--background-color);
 			}
 
-			.navitem {
-				width: 300px;
-				float: left;
-				padding: 10px;
-				box-sizing: border-box;
-				border: 1px solid black;
-				text-align: center;
-				margin: 10px;
-			}
+
 
 			.field_wrapper h1 {
 				border-bottom: 1px solid #777;
 			}
 		</style>
-		<link rel="stylesheet" type="text/css" href="./styles.css">
+		<link rel="stylesheet" type="text/css" href="./monokai.css">
 	</head>
 	<body>
-		<div class="header">Hello world</div>
-		<div class="content_bar">
+		<!-- <div class="header">Hello world</div> -->
+		<div class="nav_bar">
 			{% for link in content_nav %}
-				<a href="./{{link[1]}}.html"><div class="navitem">{{link[0]}}</div></a>
+				<a href="./{{link[1]}}.html"><div class="nav_item">{{link[0]}}</div></a>
 			{% endfor %}
 		</div>
 		<div class="content">{{generated_doc}}</div>

diff --git a/xml_converter/generators/web_templates/infotable.html b/xml_converter/generators/web_templates/infotable.html
@@ -17,8 +17,6 @@
     {% endfor %}
 </table>
 
-<h1>Type Info</h1>
-
 {% for field_row in field_rows %}
     <h2 id="{{field_row.binary_field}}">{{field_row.name}}</h2>
     <div class="field_wrapper">