GF cloud: more readable formatting of the GF version page

Factor out common CSS from gfse/editor.css into clouds.css.

3 files changed, 23 insertions, 18 deletions

diff --git a/src/www/cloud.css b/src/www/cloud.css
new file mode 100644
index 000000000..30c239f43
--- /dev/null
+++ b/src/www/cloud.css
@@ -0,0 +1,20 @@
+body { color: black; background: #eee; }
+h1 { font-size: 175%; }
+h1,h2,h3,h4,small { font-family: sans-serif;}
+h1,h2,h3,h4 { color: #303030; text-shadow: rgba(0,0,0,0.25) 3px 3px 5px; }
+
+h1:first-child, h2:first-child { margin-top: 0; margin-bottom: 1ex; }
+h1 img { float: right; border: 0; max-width: 50%; }
+h1 img.nofloat { float: none; }
+
+img.cloud, img.right, div.right, div.modtime, div.version { float: right; }
+
+li { margin-top: 0.5ex; margin-bottom: 0.5ex; }
+
+div.modtime >small { visibility: hidden; }
+div.modtime:hover >small { visibility: visible; }
+.modtime,.version { color: #999; white-space: nowrap; }
+
+table.loaded_grammars th { text-align: left; font-family: sans-serif; }
+table.loaded_grammars td { padding-right: 1em; font-family: monospace; }
+table.loaded_grammars tr td:nth-child(2) { color: #555; }
diff --git a/src/www/gfse/editor.css b/src/www/gfse/editor.css
index 22805b990..509fc0e6a 100644
--- a/src/www/gfse/editor.css
+++ b/src/www/gfse/editor.css
@@ -1,11 +1,4 @@
-body { color: black; background: #eee; }
-h1 { font-size: 175%; }
-h1,h2,h3,h4,small { font-family: sans-serif;}
-h1,h2,h3,h4 { color: #303030; text-shadow: rgba(0,0,0,0.25) 3px 3px 5px; }
-
-h1:first-child, h2:first-child { margin-top: 0; margin-bottom: 1ex; }
-h1 img { float: right; border: 0; max-width: 50%; }
-h1 img.nofloat { float: none; }
+@import url(../cloud.css);
 
 #editor {
     /* This allows the div to grow wider than the window if necessary to
@@ -33,12 +26,6 @@ table.extension td { border-left-width: 0; min-width: 30em; }
 
 .slideshow .hidden { display: none; }
 
-img.cloud, img.right, div.right, div.modtime, div.version { float: right; }
-
-div.modtime >small { visibility: hidden; }
-div.modtime:hover >small { visibility: visible; }
-.modtime,.version { color: #999; white-space: nowrap; }
-
 table.grammar_list { border-collapse: collapse; margin-left: 1.0em; }
 table.grammar_list td { padding: 0.4ex 0.25em; }
 
@@ -120,8 +107,6 @@ textarea.string_edit { vertical-align: top; }
 
 ul.languages { -moz-column-width: 10em; }
 
-li { margin-top: 0.5ex; margin-bottom: 0.5ex; }
-
 #sharing h1, #sharing .footer { display: none; }
 
 div.compiler_output .back_to_editor { display: none; }
@@ -164,4 +149,4 @@ div.sheet {
     -o-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
     -webkit-transition: all 0.5s ease-in-out;
-}
\ No newline at end of file
+}
diff --git a/src/www/index.html b/src/www/index.html
index 175e76c1d..3e3ad586a 100644
--- a/src/www/index.html
+++ b/src/www/index.html
@@ -4,7 +4,7 @@
 
 <title>GF Cloud Service</title>
 <meta charset="UTF-8">
-<link rel="stylesheet" type="text/css" href="gfse/editor.css" title="Cloud">
+<link rel="stylesheet" type="text/css" href="cloud.css" title="Cloud">
 <meta name = "viewport" content = "width = device-width">
 
 <h1><a href="http://www.grammaticalframework.org/"><img src="Logos/gf0.png" alt=""></a><img class=nofloat src="P/gf-cloud.png" alt=""> GF Cloud Service</h1>