Add support for optimizing CSS with SASS

13 files changed, 386 insertions, 353 deletions

diff --git a/www/buildfile b/www/buildfile
index f600b5d..bd4d8a1 100644
--- a/www/buildfile
+++ b/www/buildfile
@@ -6,5 +6,14 @@ define css: file
 css{*}: extension = css
 css{*}: install = data/www
 
-./: css{common brep-common package-details package-search \
-package-version-details repository-details}
+define scss: file
+scss{*}: extension = scss
+scss{*}: install = data/www
+
+./: css{common brep-common					\
+        package-details package-details-body 			\
+        package-search package-search-body 			\
+        package-version-details package-version-details-body 	\
+        repository-details repository-details-body}       	\
+    scss{package-details package-search package-version-details \
+         repository-details}
diff --git a/www/package-details-body.css b/www/package-details-body.css
new file mode 100644
index 0000000..dc09a10
--- /dev/null
+++ b/www/package-details-body.css
@@ -0,0 +1,114 @@
+#heading
+{ 
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+  border: none;
+}
+
+/* Since it is a link to itself, it will always be visited. */
+#heading a:visited {color: #006fbf;}
+#heading a:hover, h1 a:active {color: #0087e7; text-decoration: none;}
+
+h1
+{
+  font-family: monospace;  
+  font-weight: normal;
+  font-size: 2.074em;
+  line-height: 1.4em;
+
+  margin: .6em 0 .6em 0;
+
+  display: table-cell;
+  text-align: left; 
+}
+
+#heading > a 
+{
+  font-size: 1.32em;
+  line-height: 1.4em;
+
+  display: table-cell;   
+  text-align: right;
+  width: 3.2em;
+  vertical-align: middle;
+}
+
+h2
+{
+  font-style: italic;
+  font-weight: normal;
+  font-size: 1.32em;
+  line-height: 1.4em;
+
+  margin: .4em 0 .4em 0;
+}
+
+h1, h2
+{
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Re-styling for full page variant. */
+
+.full h2
+{
+  white-space: normal;
+}
+
+/* 
+ * Package details table.
+ */
+#package 
+{
+  margin-top: 1.5em;
+  margin-bottom: 1.5em;
+}
+#package th {width: 6.4em;}
+
+/*
+ * Search form (based on form-table)
+ */
+#search-txt, #search-txt input {width: 100%;}
+#search-btn {padding-left: .4em;}
+
+/*
+ * Version count.
+ */
+#count
+{
+  font-size: 1.32em;
+  line-height: 1.4em;
+  color: #555;
+
+  margin: 1.2em 0 0 0;
+}
+
+/* 
+ * Version table. 
+ */
+table.version
+{
+  margin-top: .8em;
+  margin-bottom: .8em;
+
+  padding-top: .4em;
+  padding-bottom: .4em;
+
+}
+table.version:nth-child(even) {background-color: rgba(0, 0, 0, 0.07);}
+
+table.version th {width: 6.4em;}
+
+table.version tr.version td .value,
+table.version tr.priority td .value,
+table.version tr.location td .value,
+table.version tr.depends td .value,
+table.version tr.requires td .value
+{
+  /* <code> style. */
+  font-family: monospace;
+  font-size: 0.94em;
+}
diff --git a/www/package-details.css b/www/package-details.css
index dc09a10..2ef19e0 100644
--- a/www/package-details.css
+++ b/www/package-details.css
@@ -1,114 +1,3 @@
-#heading
-{ 
-  display: table;
-  table-layout: fixed;
-  width: 100%;
-  border: none;
-}
-
-/* Since it is a link to itself, it will always be visited. */
-#heading a:visited {color: #006fbf;}
-#heading a:hover, h1 a:active {color: #0087e7; text-decoration: none;}
-
-h1
-{
-  font-family: monospace;  
-  font-weight: normal;
-  font-size: 2.074em;
-  line-height: 1.4em;
-
-  margin: .6em 0 .6em 0;
-
-  display: table-cell;
-  text-align: left; 
-}
-
-#heading > a 
-{
-  font-size: 1.32em;
-  line-height: 1.4em;
-
-  display: table-cell;   
-  text-align: right;
-  width: 3.2em;
-  vertical-align: middle;
-}
-
-h2
-{
-  font-style: italic;
-  font-weight: normal;
-  font-size: 1.32em;
-  line-height: 1.4em;
-
-  margin: .4em 0 .4em 0;
-}
-
-h1, h2
-{
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Re-styling for full page variant. */
-
-.full h2
-{
-  white-space: normal;
-}
-
-/* 
- * Package details table.
- */
-#package 
-{
-  margin-top: 1.5em;
-  margin-bottom: 1.5em;
-}
-#package th {width: 6.4em;}
-
-/*
- * Search form (based on form-table)
- */
-#search-txt, #search-txt input {width: 100%;}
-#search-btn {padding-left: .4em;}
-
-/*
- * Version count.
- */
-#count
-{
-  font-size: 1.32em;
-  line-height: 1.4em;
-  color: #555;
-
-  margin: 1.2em 0 0 0;
-}
-
-/* 
- * Version table. 
- */
-table.version
-{
-  margin-top: .8em;
-  margin-bottom: .8em;
-
-  padding-top: .4em;
-  padding-bottom: .4em;
-
-}
-table.version:nth-child(even) {background-color: rgba(0, 0, 0, 0.07);}
-
-table.version th {width: 6.4em;}
-
-table.version tr.version td .value,
-table.version tr.priority td .value,
-table.version tr.location td .value,
-table.version tr.depends td .value,
-table.version tr.requires td .value
-{
-  /* <code> style. */
-  font-family: monospace;
-  font-size: 0.94em;
-}
+@import url(common.css);
+@import url(brep-common.css);
+@import url(package-details-body.css);
diff --git a/www/package-details.scss b/www/package-details.scss
new file mode 100644
index 0000000..836479f
--- /dev/null
+++ b/www/package-details.scss
@@ -0,0 +1,3 @@
+@import "common";
+@import "brep-common";
+@import "package-details-body";
diff --git a/www/package-search-body.css b/www/package-search-body.css
new file mode 100644
index 0000000..ef8b59c
--- /dev/null
+++ b/www/package-search-body.css
@@ -0,0 +1,41 @@
+/*
+ * Search form (based on form-table)
+ */
+#search-txt, #search-txt input {width: 100%;}
+#search-btn {padding-left: .4em;}
+
+/*
+ * Package count.
+ */
+#count
+{
+  font-size: 1.32em;
+  line-height: 1.4em;
+  color: #555;
+
+  margin: 1.2em 0 0 0;
+}
+
+/* 
+ * Version table. 
+ */
+.package
+{
+  margin-top: .8em;
+  margin-bottom: .8em;
+
+  padding-top: .4em;
+  padding-bottom: .4em;
+}
+.package:nth-child(even) {background-color: rgba(0, 0, 0, 0.07);}
+
+.package th {width: 6.4em;}
+
+.package tr.name td .value,
+.package tr.depends td .value,
+.package tr.requires td .value
+{
+  /* <code> style. */
+  font-family: monospace;
+  font-size: 0.94em;
+}
diff --git a/www/package-search.css b/www/package-search.css
index ef8b59c..88e0be9 100644
--- a/www/package-search.css
+++ b/www/package-search.css
@@ -1,41 +1,3 @@
-/*
- * Search form (based on form-table)
- */
-#search-txt, #search-txt input {width: 100%;}
-#search-btn {padding-left: .4em;}
-
-/*
- * Package count.
- */
-#count
-{
-  font-size: 1.32em;
-  line-height: 1.4em;
-  color: #555;
-
-  margin: 1.2em 0 0 0;
-}
-
-/* 
- * Version table. 
- */
-.package
-{
-  margin-top: .8em;
-  margin-bottom: .8em;
-
-  padding-top: .4em;
-  padding-bottom: .4em;
-}
-.package:nth-child(even) {background-color: rgba(0, 0, 0, 0.07);}
-
-.package th {width: 6.4em;}
-
-.package tr.name td .value,
-.package tr.depends td .value,
-.package tr.requires td .value
-{
-  /* <code> style. */
-  font-family: monospace;
-  font-size: 0.94em;
-}
+@import url(common.css);
+@import url(brep-common.css);
+@import url(package-search-body.css);
diff --git a/www/package-search.scss b/www/package-search.scss
new file mode 100644
index 0000000..ae2689e
--- /dev/null
+++ b/www/package-search.scss
@@ -0,0 +1,3 @@
+@import "common";
+@import "brep-common";
+@import "package-search-body";
diff --git a/www/package-version-details-body.css b/www/package-version-details-body.css
new file mode 100644
index 0000000..9d08a42
--- /dev/null
+++ b/www/package-version-details-body.css
@@ -0,0 +1,168 @@
+#heading
+{ 
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+  border: none;
+}
+
+/* Since it is a link to itself, it will always be visited. */
+#heading a:visited {color: #006fbf;}
+#heading a:hover, h1 a:active {color: #0087e7; text-decoration: none;}
+
+h1
+{
+  font-family: monospace;
+  font-weight: normal;
+  font-size: 2.074em;
+  line-height: 1.4em;
+  color: #444;
+
+  margin: .6em 0 .6em 0;
+
+  display: table-cell;
+  text-align: left; 
+}
+
+#heading > a 
+{
+  font-size: 1.32em;
+  line-height: 1.4em;
+
+  display: table-cell;   
+  text-align: right;
+  width: 3.2em;
+  vertical-align: middle;
+}
+
+h1 a:first-child {margin-right: .14em;}
+h1 a:last-child {margin-left: .14em;}
+
+h2
+{
+  font-style: italic;
+  font-weight: normal;
+  font-size: 1.32em;
+  line-height: 1.4em;
+
+  margin: .4em 0 .4em 0;
+}
+
+h3
+{
+  font-family: monospace;  
+  font-weight: normal;
+  font-size: 1.26em;
+  line-height: 1.4em;
+
+  margin: 1.8em 0 0 0;
+}
+h3:after{content: ":";}
+
+h1, h2, h3
+{
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Re-styling for full page variant. */
+
+.full h2
+{
+  white-space: normal;
+}
+
+/* 
+ * Version details table. 
+ */
+#version 
+{
+  margin-top: .5em;
+  margin-bottom: 1em;
+
+  padding-top: .4em;
+  padding-bottom: .4em;
+
+  background-color: rgba(0, 0, 0, 0.07);  /* Emphasize. */
+
+  /*
+  background: #eee;
+  border-radius: 6px;
+  border: 1px outset rgba(230,230,230,.24);
+  */
+}
+#version th {width: 6.4em;}
+
+#version tr.version td .value,
+#version tr.priority td .value,
+#version tr.location td .value
+{
+  /* <code> style. */
+  font-family: monospace;
+  font-size: 0.94em;
+}
+
+/* 
+ * Package details table. 
+ */
+#package 
+{
+  margin-top: 1.2em;
+  margin-bottom: 1em;
+}
+#package th {width: 6.4em;}
+
+/* 
+ * Dependencies and requirements tables. 
+ */
+#depends {margin-top: .4em; margin-bottom: 1em;}
+#depends th {width: 2.8em; text-align: center;}
+#depends th:after{content: "";}
+
+/* Striping. For some reason (related to flexbox), this works exactly as
+   we want, that is, the background extends all the way to the browser's
+   right frame. */
+#depends tr:nth-child(even) td {background-color: rgba(0, 0, 0, 0.07);}
+#depends td {padding-left: .4em;}
+#depends td .comment {padding-right: .4em;}
+
+/*
+#depends td .value {padding-left: .4em;}
+#depends td .comment {padding-right: .4em;}
+*/
+
+#depends tr.depends td .value
+{
+  /* <code> style. */
+  font-family: monospace;
+  font-size: 0.94em;
+}
+
+#requires {margin-top: .4em; margin-bottom: 1em;}
+#requires th {width: 2.8em; text-align: center;}
+#requires th:after{content: "";}
+
+#requires tr:nth-child(even) td {background-color: rgba(0, 0, 0, 0.07);}
+#requires td {padding-left: .4em;}
+#requires td .comment {padding-right: .4em;}
+
+#requires tr.requires td .value
+{
+  /* <code> style. */
+  font-family: monospace;
+  font-size: 0.94em;
+}
+
+/* 
+ * Changes.
+ *
+ * This is a <pre> block that fits lines up to 80 characters long and
+ * wraps longer ones.
+ */
+#changes 
+{     
+  font-size: 0.78em;
+  white-space: pre-wrap;
+  margin: .5em 0 .5em 0;
+}
diff --git a/www/package-version-details.css b/www/package-version-details.css
index 9d08a42..022a173 100644
--- a/www/package-version-details.css
+++ b/www/package-version-details.css
@@ -1,168 +1,3 @@
-#heading
-{ 
-  display: table;
-  table-layout: fixed;
-  width: 100%;
-  border: none;
-}
-
-/* Since it is a link to itself, it will always be visited. */
-#heading a:visited {color: #006fbf;}
-#heading a:hover, h1 a:active {color: #0087e7; text-decoration: none;}
-
-h1
-{
-  font-family: monospace;
-  font-weight: normal;
-  font-size: 2.074em;
-  line-height: 1.4em;
-  color: #444;
-
-  margin: .6em 0 .6em 0;
-
-  display: table-cell;
-  text-align: left; 
-}
-
-#heading > a 
-{
-  font-size: 1.32em;
-  line-height: 1.4em;
-
-  display: table-cell;   
-  text-align: right;
-  width: 3.2em;
-  vertical-align: middle;
-}
-
-h1 a:first-child {margin-right: .14em;}
-h1 a:last-child {margin-left: .14em;}
-
-h2
-{
-  font-style: italic;
-  font-weight: normal;
-  font-size: 1.32em;
-  line-height: 1.4em;
-
-  margin: .4em 0 .4em 0;
-}
-
-h3
-{
-  font-family: monospace;  
-  font-weight: normal;
-  font-size: 1.26em;
-  line-height: 1.4em;
-
-  margin: 1.8em 0 0 0;
-}
-h3:after{content: ":";}
-
-h1, h2, h3
-{
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Re-styling for full page variant. */
-
-.full h2
-{
-  white-space: normal;
-}
-
-/* 
- * Version details table. 
- */
-#version 
-{
-  margin-top: .5em;
-  margin-bottom: 1em;
-
-  padding-top: .4em;
-  padding-bottom: .4em;
-
-  background-color: rgba(0, 0, 0, 0.07);  /* Emphasize. */
-
-  /*
-  background: #eee;
-  border-radius: 6px;
-  border: 1px outset rgba(230,230,230,.24);
-  */
-}
-#version th {width: 6.4em;}
-
-#version tr.version td .value,
-#version tr.priority td .value,
-#version tr.location td .value
-{
-  /* <code> style. */
-  font-family: monospace;
-  font-size: 0.94em;
-}
-
-/* 
- * Package details table. 
- */
-#package 
-{
-  margin-top: 1.2em;
-  margin-bottom: 1em;
-}
-#package th {width: 6.4em;}
-
-/* 
- * Dependencies and requirements tables. 
- */
-#depends {margin-top: .4em; margin-bottom: 1em;}
-#depends th {width: 2.8em; text-align: center;}
-#depends th:after{content: "";}
-
-/* Striping. For some reason (related to flexbox), this works exactly as
-   we want, that is, the background extends all the way to the browser's
-   right frame. */
-#depends tr:nth-child(even) td {background-color: rgba(0, 0, 0, 0.07);}
-#depends td {padding-left: .4em;}
-#depends td .comment {padding-right: .4em;}
-
-/*
-#depends td .value {padding-left: .4em;}
-#depends td .comment {padding-right: .4em;}
-*/
-
-#depends tr.depends td .value
-{
-  /* <code> style. */
-  font-family: monospace;
-  font-size: 0.94em;
-}
-
-#requires {margin-top: .4em; margin-bottom: 1em;}
-#requires th {width: 2.8em; text-align: center;}
-#requires th:after{content: "";}
-
-#requires tr:nth-child(even) td {background-color: rgba(0, 0, 0, 0.07);}
-#requires td {padding-left: .4em;}
-#requires td .comment {padding-right: .4em;}
-
-#requires tr.requires td .value
-{
-  /* <code> style. */
-  font-family: monospace;
-  font-size: 0.94em;
-}
-
-/* 
- * Changes.
- *
- * This is a <pre> block that fits lines up to 80 characters long and
- * wraps longer ones.
- */
-#changes 
-{     
-  font-size: 0.78em;
-  white-space: pre-wrap;
-  margin: .5em 0 .5em 0;
-}
+@import url(common.css);
+@import url(brep-common.css);
+@import url(package-version-details-body.css);
diff --git a/www/package-version-details.scss b/www/package-version-details.scss
new file mode 100644
index 0000000..e205076
--- /dev/null
+++ b/www/package-version-details.scss
@@ -0,0 +1,3 @@
+@import "common";
+@import "brep-common";
+@import "package-version-details-body";
diff --git a/www/repository-details-body.css b/www/repository-details-body.css
new file mode 100644
index 0000000..29d62f6
--- /dev/null
+++ b/www/repository-details-body.css
@@ -0,0 +1,28 @@
+h1
+{
+  font-family: monospace;  
+  font-weight: normal;
+  font-size: 2.074em;
+  line-height: 1.4em;
+
+  margin: 1.6em 0 .4em 0;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+h1:first-child {margin-top: .6em;}
+
+/* Since it is a link to itself, it will always be visited. */
+h1 a:visited {color: #006fbf;}
+h1 a:hover, h1 a:active {color: #0087e7; text-decoration: none;}
+
+h2
+{
+  font-style: italic;
+  font-weight: normal;
+  font-size: 1.32em;
+  line-height: 1.4em;
+
+  margin: .4em 0 .4em 0;
+}
diff --git a/www/repository-details.css b/www/repository-details.css
index 29d62f6..0e73198 100644
--- a/www/repository-details.css
+++ b/www/repository-details.css
@@ -1,28 +1,3 @@
-h1
-{
-  font-family: monospace;  
-  font-weight: normal;
-  font-size: 2.074em;
-  line-height: 1.4em;
-
-  margin: 1.6em 0 .4em 0;
-
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-h1:first-child {margin-top: .6em;}
-
-/* Since it is a link to itself, it will always be visited. */
-h1 a:visited {color: #006fbf;}
-h1 a:hover, h1 a:active {color: #0087e7; text-decoration: none;}
-
-h2
-{
-  font-style: italic;
-  font-weight: normal;
-  font-size: 1.32em;
-  line-height: 1.4em;
-
-  margin: .4em 0 .4em 0;
-}
+@import url(common.css);
+@import url(brep-common.css);
+@import url(repository-details-body.css);
diff --git a/www/repository-details.scss b/www/repository-details.scss
new file mode 100644
index 0000000..3755a72
--- /dev/null
+++ b/www/repository-details.scss
@@ -0,0 +1,3 @@
+@import "common";
+@import "brep-common";
+@import "repository-details-body";