aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorBoris Kolpackov <boris@codesynthesis.com>2016-02-02 14:04:06 +0200
committerBoris Kolpackov <boris@codesynthesis.com>2016-02-02 14:04:06 +0200
commit648b0ee930d02316186603ed1e0e95f96611f1d3 (patch)
treeff5b92e6e0487615e0a360ace3cfba6dfd827c17
parentdc473b71d550fd6f9cc47ae558ea78452f32a9ad (diff)
Add support for optimizing CSS with SASS
-rw-r--r--INSTALL15
-rw-r--r--brep/page.cxx6
-rw-r--r--www/buildfile13
-rw-r--r--www/package-details-body.css114
-rw-r--r--www/package-details.css117
-rw-r--r--www/package-details.scss3
-rw-r--r--www/package-search-body.css41
-rw-r--r--www/package-search.css44
-rw-r--r--www/package-search.scss3
-rw-r--r--www/package-version-details-body.css168
-rw-r--r--www/package-version-details.css171
-rw-r--r--www/package-version-details.scss3
-rw-r--r--www/repository-details-body.css28
-rw-r--r--www/repository-details.css31
-rw-r--r--www/repository-details.scss3
15 files changed, 400 insertions, 360 deletions
diff --git a/INSTALL b/INSTALL
index 46a94d5..4a0f45f 100644
--- a/INSTALL
+++ b/INSTALL
@@ -205,7 +205,16 @@ $ sudo systemctl restart apache2
To verify, visit the repository root. To troubleshoot, see Apache logs.
-7. Setup Periodic Loader Execution
+7. Optimize CSS
+
+This step is optional and involves optimizing the CSS files used by brep. For
+example, using the sassc(1) command line tool:
+
+$ cd install/share/brep/www/
+$ for i in *.scss; do sassc -s compressed $i `basename -s .scss $i`.css; done
+
+
+8. Setup Periodic Loader Execution
In this guide we will use the systemd user session to periodically run loader
as the brep user. If your installation doesn't use systemd, then a cron job
@@ -243,7 +252,7 @@ If everything looks good, enable the timer to be started at boot time:
$ systemctl --user enable brep-load.timer
-8. Upgrade Procedure
+9. Upgrade Procedure
During upgrade we will stop apache for what should normally be a short period
of time. To ensure that there are no surprises, for production environments it
@@ -296,3 +305,5 @@ Start apache:
$ sudo systemctl start apache2
To verify, visit the repository root. To troubleshoot, see Apache logs.
+
+You may also need to repeat the CSS optimization step above.
diff --git a/brep/page.cxx b/brep/page.cxx
index 322efbd..4b13bcf 100644
--- a/brep/page.cxx
+++ b/brep/page.cxx
@@ -35,11 +35,7 @@ namespace brep
{
static const path css ("@");
- s << *LINK(REL="stylesheet", TYPE="text/css",
- HREF=root_ / css / path ("common.css"))
- << *LINK(REL="stylesheet", TYPE="text/css",
- HREF=root_ / css / path ("brep-common.css"))
- << *LINK(REL="stylesheet", TYPE="text/css", HREF=root_ / css / path_);
+ s << *LINK(REL="stylesheet", TYPE="text/css", HREF=root_ / css / path_);
}
// DIV_HEADER
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";