[Xfce4-commits] <www:nick/gettext> Optimize css loading.

[Nick Schermer]

Updating branch refs/heads/nick/gettext
         to cbd53d73a9d28a7e1d78ab037f9cdc3c2949c1fe (commit)
       from 9b3cc0303c95efb7bd046d01ee41efae66174019 (commit)

commit cbd53d73a9d28a7e1d78ab037f9cdc3c2949c1fe
Author: Nick Schermer <nick at xfce.org>
Date:   Wed Mar 23 21:19:12 2011 +0100

    Optimize css loading.
    
    Add a php file that returns all the css files at once
    and in a minified state.

 pages/header.php   |    6 ++++--
 style/base.css     |    8 +++-----
 style/bundle.php   |   40 ++++++++++++++++++++++++++++++++++++++++
 style/news.css     |    1 -
 style/projects.css |   12 ++++++------
 5 files changed, 53 insertions(+), 14 deletions(-)

diff --git a/pages/header.php b/pages/header.php
index e0ead55..42d7591 100644
--- a/pages/header.php
+++ b/pages/header.php
@@ -12,12 +12,14 @@ else
 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 	<title><?php echo $title ?></title>
 	<link rel="shortcut icon" href="/style/favicon.png" type="image/png" />
-	<link rel="stylesheet" media="screen" href="/style/base.css" type="text/css" />
+	<link rel="stylesheet" media="screen" href="/style/bundle.php" type="text/css" />
 <?php
+        /*
+        add filename to the array in bundle.php instead
         if (isset ($head['stylesheet']) && is_array ($head['stylesheet']))
                 foreach ($head['stylesheet'] as $sheet)
                         echo "\t<link rel=\"stylesheet\" media=\"screen\" href=\"$sheet\" type=\"text/css\" />\n";
-
+        */
         if (isset ($head['description']))
                 echo "\t<meta name=\"description\" content=\"".$head['description']."\" />\n";
 
diff --git a/style/base.css b/style/base.css
index 6a7a212..a50a905 100644
--- a/style/base.css
+++ b/style/base.css
@@ -1,5 +1,3 @@
- at import url('header.css');
-
 body {
 	margin: 0;
         padding: 0;
@@ -81,7 +79,7 @@ body {
 }
 
 #page-contents p {
-  text-align: justify;
+	text-align: justify;
 }
 
 #footer {
@@ -113,7 +111,7 @@ body {
 }
 
 table th {
-        text-align: left;
+	text-align: left;
 }
 
 p em {
@@ -197,5 +195,5 @@ blockquote {
 }
 
 .image {
-  margin-left: 50px;
+	margin-left: 50px;
 }
diff --git a/style/bundle.php b/style/bundle.php
new file mode 100644
index 0000000..6ee88db
--- /dev/null
+++ b/style/bundle.php
@@ -0,0 +1,40 @@
+<?php
+
+/* this file loads all the css required for the Xfce website
+ * and bundles it in a single file. The css files are split
+ * to make them both readable and some files are fetched for
+ * other domains too (header.css). */
+
+$dateformat = 'D, d M Y H:i:s';
+$expireoffset = 3600 * 24 * 7;
+$files = array ('header.css',
+                'base.css',
+                'home.css',
+                'news.css',
+                'projects.css');
+
+$buf = '';
+$mtime = 0;
+foreach ($files as $file)
+  $buf .= file_get_contents ($file);
+  $fmtime = filemtime ($file);
+  if ($fmtime > $mtime)
+    $mtime = $fmtime;
+
+/* remove comments */
+$buf = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buf);
+
+/* compress lines */
+$buf = str_replace(array (': ', ' {', ', '), array (':', '{', ','), $buf);
+
+/* remove whitespaces */
+$buf = str_replace (array ("\r\n", "\r", "\n", "\t", '  '), '', $buf);
+
+header('Content-type: text/css');
+header('Cache-Control: max-age='. $expireoffset .', public');
+header('Expires: '. gmdate ($dateformat, time() + $expireoffset) .' GMT');
+header('Last-Modified: '. gmdate ($dateformat, $mtime ) .' GMT');
+
+echo $buf;
+
+?>
diff --git a/style/news.css b/style/news.css
index fb111d3..855035b 100644
--- a/style/news.css
+++ b/style/news.css
@@ -11,7 +11,6 @@
 	padding: 2px;
 	background: #2284f2;
 	border-bottom: 1px dotted #2284f2;
-	
 }
 .post-day {
 	text-transform: uppercase;
diff --git a/style/projects.css b/style/projects.css
index 7bdcc36..533357f 100644
--- a/style/projects.css
+++ b/style/projects.css
@@ -1,12 +1,12 @@
 
 #page-contents div.module {
-        float: left;
-        width: 50%;
+	float: left;
+	width: 50%;
 }
 
 #page-contents div.module p {
-        margin: 0 10px 10px 0;
-        padding-left: 58px;
-        background: no-repeat 0% 0%;
-        min-height: 48px;
+	margin: 0 10px 10px 0;
+	padding-left: 58px;
+	background: no-repeat 0% 0%;
+	min-height: 48px;
 }