made pages a bit more beautiful

8 files changed, 34 insertions, 26 deletions

diff --git a/clear.incl b/clear.incl
new file mode 100644
index 0000000..8df3d7d
--- /dev/null
+++ b/clear.incl
@@ -0,0 +1 @@
+<div style="clear: both;"></div>
diff --git a/headline.incl b/headline.incl
index d2e0f50..a035902 100644
--- a/headline.incl
+++ b/headline.incl
@@ -1 +1,4 @@
-      <h1>[=@project_unixname] &ndash; [=@project_name]</h1>
+      <h1>
+        <img style="float: left; margin-right: 32px;" id="logo" src="json_logo.png" alt="JSON Logo" title="JSON Logo" />
+        <span style="float: left; margin-top: 16px;">[=@project_name]</span>
+      </h1>
diff --git a/index.html b/index.html
index b6e65a8..4ba35f9 100644
--- a/index.html
+++ b/index.html
@@ -21,10 +21,13 @@
       
     </ul>
 
-    <img id="logo" src="json.png" alt="JaSON, the Argonaut" title="JaSON, the Argonaut" />
-
     <div id="content">
-      <h1>json &ndash; JSON implementation for Ruby</h1>
+      <h1>
+        <img style="float: left; margin-right: 32px;" id="logo" src="json_logo.png" alt="JSON Logo" title="JSON Logo" />
+        <span style="float: left; margin-top: 16px;">JSON implementation for Ruby</span>
+      </h1>
+
+<div style="clear: both;"></div>
 
 <h2>Description</h2>
 <p>
diff --git a/index.tmpl b/index.tmpl
index 10e3a11..b6a486f 100644
--- a/index.tmpl
+++ b/index.tmpl
@@ -1,8 +1,8 @@
 [^header.incl]
 [^linkbox.incl]
-[^logo.incl]
     <div id="content">
 [^headline.incl]
+[^clear.incl]
 [^description.incl]
 [^installation.incl]
 [^usage.incl]
diff --git a/json_logo.png b/json_logo.png
new file mode 100644
index 0000000..f98988d
--- /dev/null
+++ b/json_logo.png
diff --git a/logo.incl b/logo.incl
index 40255bf..e69de29 100644
--- a/logo.incl
+++ b/logo.incl
@@ -1 +0,0 @@
-    <img id="logo" src="json.png" alt="JaSON, the Argonaut" title="JaSON, the Argonaut" />
diff --git a/screenshots.html b/screenshots.html
index a189799..2b59fc5 100644
--- a/screenshots.html
+++ b/screenshots.html
@@ -21,10 +21,12 @@
       
     </ul>
 
-    <img id="logo" src="json.png" alt="JaSON, the Argonaut" title="JaSON, the Argonaut" />
 
     <div id="content">
-      <h1>json &ndash; JSON implementation for Ruby</h1>
+      <h1>
+        <img style="float: left; margin-right: 32px;" id="logo" src="json_logo.png" alt="JSON Logo" title="JSON Logo" />
+        <span style="float: left; margin-top: 16px;">JSON implementation for Ruby</span>
+      </h1>
 
       <h2>Screenshots</h2>
       <p>Here are some Screenshots from the graphical JSON Editor
@@ -32,65 +34,65 @@
       working installation of <a
       href="http://ruby-gnome2.sourceforge.jp/">Ruby GTK2</a> is necessary.</p>
       
-      <div style="text-align: center">
+      <div style="text-align: center; padding: 20px;">
       <a href="edit_json.png">
-        <img src="edit_json.png" width="400" height="300" alt="Screenshot #1" />
+        <img src="edit_json.png" width="80%" alt="Screenshot #1" />
       </a>
       <br />
       <span class="caption">Screenshot #1 (Click to enlarge)</span>
       </div>
       
-      <div style="text-align: center">
+      <div style="text-align: center; padding: 20px;">
       <a href="diagrams/JSON_array.png">
-        <img src="diagrams/JSON_array.png" width="400" height="300" alt="Screenshot #2" />
+        <img src="diagrams/JSON_array.png" width="80%" alt="Screenshot #2" />
       </a>
       <br />
       <span class="caption">Screenshot #2 (Click to enlarge)</span>
       </div>
       
-      <div style="text-align: center">
+      <div style="text-align: center; padding: 20px;">
       <a href="diagrams/JSON_float.png">
-        <img src="diagrams/JSON_float.png" width="400" height="300" alt="Screenshot #3" />
+        <img src="diagrams/JSON_float.png" width="80%" alt="Screenshot #3" />
       </a>
       <br />
       <span class="caption">Screenshot #3 (Click to enlarge)</span>
       </div>
       
-      <div style="text-align: center">
+      <div style="text-align: center; padding: 20px;">
       <a href="diagrams/JSON_integer.png">
-        <img src="diagrams/JSON_integer.png" width="400" height="300" alt="Screenshot #4" />
+        <img src="diagrams/JSON_integer.png" width="80%" alt="Screenshot #4" />
       </a>
       <br />
       <span class="caption">Screenshot #4 (Click to enlarge)</span>
       </div>
       
-      <div style="text-align: center">
+      <div style="text-align: center; padding: 20px;">
       <a href="diagrams/JSON_object.png">
-        <img src="diagrams/JSON_object.png" width="400" height="300" alt="Screenshot #5" />
+        <img src="diagrams/JSON_object.png" width="80%" alt="Screenshot #5" />
       </a>
       <br />
       <span class="caption">Screenshot #5 (Click to enlarge)</span>
       </div>
       
-      <div style="text-align: center">
+      <div style="text-align: center; padding: 20px;">
       <a href="diagrams/JSON.png">
-        <img src="diagrams/JSON.png" width="400" height="300" alt="Screenshot #6" />
+        <img src="diagrams/JSON.png" width="80%" alt="Screenshot #6" />
       </a>
       <br />
       <span class="caption">Screenshot #6 (Click to enlarge)</span>
       </div>
       
-      <div style="text-align: center">
+      <div style="text-align: center; padding: 20px;">
       <a href="diagrams/JSON_string.png">
-        <img src="diagrams/JSON_string.png" width="400" height="300" alt="Screenshot #7" />
+        <img src="diagrams/JSON_string.png" width="80%" alt="Screenshot #7" />
       </a>
       <br />
       <span class="caption">Screenshot #7 (Click to enlarge)</span>
       </div>
       
-      <div style="text-align: center">
+      <div style="text-align: center; padding: 20px;">
       <a href="diagrams/JSON_value.png">
-        <img src="diagrams/JSON_value.png" width="400" height="300" alt="Screenshot #8" />
+        <img src="diagrams/JSON_value.png" width="80%" alt="Screenshot #8" />
       </a>
       <br />
       <span class="caption">Screenshot #8 (Click to enlarge)</span>
diff --git a/screenshots.tmpl b/screenshots.tmpl
index d688c8b..874360c 100644
--- a/screenshots.tmpl
+++ b/screenshots.tmpl
@@ -9,9 +9,9 @@
       working installation of <a
       href="http://ruby-gnome2.sourceforge.jp/">Ruby GTK2</a> is necessary.</p>
       [@screenshots.each_with_index do |s,i|]
-      <div style="text-align: center">
+      <div style="text-align: center; padding: 20px;">
       <a href="[=s]">
-        <img src="[=s]" width="400" height="300" alt="Screenshot #[=i + 1]" />
+        <img src="[=s]" width="80%" alt="Screenshot #[=i + 1]" />
       </a>
       <br />
       <span class="caption">Screenshot #[=i + 1] (Click to enlarge)</span>