improved CSS of all built in templates

mojolicious · Sep 7, 2011 · 685571b · 685571b
1 parent 65205c6
commit 685571b
Show file tree

Hide file tree

Showing 12 changed files with 42 additions and 45 deletions.
diff --git a/Changes b/Changes
@@ -1,6 +1,7 @@
 This file documents the revision history for Perl extension Mojolicious.
 
 1.98    2011-09-06 00:00:00
+        - Improved CSS of all built in templates.
         - Improved documentation.
         - Improved tests.
         - Fixed small bug in cookie jar.

diff --git a/lib/Mojo/JSON.pm b/lib/Mojo/JSON.pm
@@ -346,7 +346,7 @@ sub _exception {
 
   # Context
   my $context = 'Malformed JSON: ' . shift;
-  if (m/\G\z/gc) { $context .= ' before end of data'; }
+  if (m/\G\z/gc) { $context .= ' before end of data' }
   else {
     my @lines = split /\n/, substr($_, 0, pos);
     $context .= ' at line ' . @lines . ', offset ' . length(pop @lines || '');

diff --git a/lib/Mojo/Util.pm b/lib/Mojo/Util.pm
@@ -299,7 +299,7 @@ push @EXPORT_OK, qw/punycode_encode qp_decode qp_encode quote/;
 push @EXPORT_OK, qw/secure_compare sha1_bytes sha1_sum trim unquote/;
 push @EXPORT_OK, qw/url_escape url_unescape xml_escape/;
 
-sub b64_decode { $_[0] = MIME::Base64::decode_base64($_[0]); }
+sub b64_decode { $_[0] = MIME::Base64::decode_base64($_[0]) }
 
 sub b64_encode { $_[0] = MIME::Base64::encode_base64($_[0], $_[1]) }
 

diff --git a/lib/Mojolicious/public/css/prettify-mojo.css b/lib/Mojolicious/public/css/prettify-mojo.css
diff --git a/lib/Mojolicious/templates/exception.development.html.ep b/lib/Mojolicious/templates/exception.development.html.ep
@@ -8,15 +8,14 @@
     %= stylesheet '/css/prettify-mojo.css'
     %= javascript '/js/prettify.js'
     %= stylesheet begin
-      a img { border: 0; }
+      a img { border: 0 }
       body {
         background-color: #f5f6f8;
-        color: #333;
-        font: 0.9em Verdana, sans-serif;
+        color: #445555;
+        font: 0.9em 'Helvetica Neue', 'Helvetica', sans-serif;
         margin-left: 3em;
         margin-right: 3em;
         margin-top: 0;
-        text-shadow: #ddd 0 1px 0;
       }
       pre {
         margin: 0;
@@ -28,7 +27,7 @@
         margin-bottom: 1em;
         width: 100%;
       }
-      td { padding: 0.3em; }
+      td { padding: 0.3em }
       .box {
         background-color: #fff;
         -moz-box-shadow: 0px 0px 2px #ccc;
@@ -48,9 +47,10 @@
         margin-bottom: 0.5em;
         margin-top: 1em;
       }
-      .important { background-color: rgba(47, 48, 50, .75); }
-      .infobox tr:nth-child(odd) .value { background-color: #ddeeff; }
-      .infobox tr:nth-child(even) .value { background-color: #eef9ff; }
+      .important { background-color: rgba(47, 48, 50, .75) }
+      .infobox { color: #333 }
+      .infobox tr:nth-child(odd) .value { background-color: #ddeeff }
+      .infobox tr:nth-child(even) .value { background-color: #eef9ff }
       .key {
         text-align: right;
         text-weight: bold;
@@ -66,6 +66,7 @@
       .tap {
         font: 0.5em Verdana, sans-serif;
         text-align: center;
+        text-shadow: #ddd 0 1px 0;
       }
       .value {
         padding-left: 1em;

diff --git a/lib/Mojolicious/templates/exception.html.ep b/lib/Mojolicious/templates/exception.html.ep
@@ -1,7 +1,7 @@
 <!doctype html><html>
   <head><title>Server Error</title></head>
    %= stylesheet begin
-      body { background-color: #caecf6; }
+      body { background-color: #caecf6 }
       #raptor {
         background: url(<%= url_for '/failraptor.png' %>);
         height: 488px;

diff --git a/lib/Mojolicious/templates/mojobar.html.ep b/lib/Mojolicious/templates/mojobar.html.ep
@@ -24,7 +24,6 @@
       overflow: hidden;
       position: absolute;
       text-align: right;
-      text-shadow: 0;
       vertical-align: middle;
       width: 100%;
       z-index: 1000;
@@ -42,15 +41,19 @@
       margin-top: 1.5em;
     }
     #mojobar-links a {
-      color: #ccc;
-      font: 1.1em Georgia, Times, serif;
+      color: #999;
+      font: 1em 'Helvetica Neue', 'Helvetica', sans-serif;
+      font-weight: lighter;
       margin-left: 0.5em;
       padding-bottom: 1em;
       padding-top: 1em;
       text-decoration: none;
-      text-shadow: 0px -1px 0px #555;
+      -webkit-transition: all 200ms ease-in-out;
+      -moz-transition: all 200ms ease-in-out;
+      -o-transition: all 200ms ease-in-out;
+      transition: all 200ms ease-in-out;
     }
-    #mojobar-links a:hover { color: #fff; }
+    #mojobar-links a:hover { color: #fff }
   % end
 % end
 <div id="mojobar">

diff --git a/lib/Mojolicious/templates/not_found.development.html.ep b/lib/Mojolicious/templates/not_found.development.html.ep
@@ -8,7 +8,7 @@
         color: inherit;
         text-decoration: none;
       }
-      a img { border: 0; }
+      a img { border: 0 }
       body {
         background-color: #f5f6f8;
         color: #333;
@@ -28,13 +28,13 @@
         padding-top: 20em;
         width: 100%;
       }
-      #footer a img { margin-top: 20em; }
+      #footer a img { margin-top: 20em }
       #documentation {
         background-color: #ecf1da;
         padding-bottom: 20em;
         padding-top: 20em;
       }
-      #documentation h1 { margin-bottom: 3em; }
+      #documentation h1 { margin-bottom: 3em }
       #header {
         margin-bottom: 20em;
         margin-top: 15em;

diff --git a/lib/Mojolicious/templates/not_found.html.ep b/lib/Mojolicious/templates/not_found.html.ep
@@ -1,8 +1,8 @@
 <!doctype html><html>
   <head><title>Page Not Found</title></head>
    %= stylesheet begin
-      a img { border: 0; }
-      body { background-color: #caecf6; }
+      a img { border: 0 }
+      body { background-color: #caecf6 }
       #noraptor {
         left: 0%;
         position: fixed;

diff --git a/lib/Mojolicious/templates/perldoc.html.ep b/lib/Mojolicious/templates/perldoc.html.ep
@@ -5,23 +5,25 @@
     %= javascript '/js/prettify.js'
     %= content_for 'header'
     %= stylesheet begin
-      a { color: inherit; }
-      a img { border: 0; }
+      a { color: inherit }
+      a:hover { color: #2a2a2a }
+      a img { border: 0 }
       body {
         background-color: #f5f6f8;
-        color: #333;
-        font: 0.9em Verdana, sans-serif;
+        color: #445555;
+        font: 0.9em 'Helvetica Neue', 'Helvetica', sans-serif;
+        font-weight: normal;
         line-height: 1.5;
         margin: 0;
-        text-shadow: #ddd 0 1px 0;
       }
       h1, h2, h3 {
-        font: 1.5em Georgia, Times, serif;
+        color: #2a2a2a;
+        font-size: 1.5em;
         margin: 0;
       }
-      h1 a, h2 a, h3 a { text-decoration: none; }
+      h1 a, h2 a, h3 a { text-decoration: none }
       pre {
-        background-color: #1a1a1a;
+        background-color: #eee;
         background: url(<%= url_for '/mojolicious-pinstripe.gif' %>);
         -moz-border-radius: 5px;
         border-radius: 5px;
@@ -51,7 +53,7 @@
         padding: 3em;
         padding-top: 7em;
       }
-      #perldoc > ul:first-of-type a { text-decoration: none; }
+      #perldoc > ul:first-of-type a { text-decoration: none }
       #wrapperlicious {
         max-width: 1000px;
         margin: 0 auto;

diff --git a/t/mojolicious/lite_app.t b/t/mojolicious/lite_app.t
@@ -36,7 +36,7 @@ use Test::Mojo;
 my $ua = Mojo::UserAgent->new(ioloop => Mojo::IOLoop->singleton)->app(app);
 
 # Missing plugin
-eval { plugin 'does_not_exist'; };
+eval { plugin 'does_not_exist' };
 is $@, "Plugin \"does_not_exist\" missing, maybe you need to install it?\n",
   'right error';
 
@@ -688,7 +688,7 @@ under sub {
 
 # GET /bridge2stash
 get '/bridge2stash' =>
-  sub { shift->render(template => 'bridge2stash', handler => 'ep'); };
+  sub { shift->render(template => 'bridge2stash', handler => 'ep') };
 
 # Make sure after_dispatch can make session changes
 hook after_dispatch => sub {

diff --git a/t/mojolicious/longpolling_lite_app.t b/t/mojolicious/longpolling_lite_app.t
@@ -58,7 +58,7 @@ get '/longpoll' => sub {
   $self->write_chunk('hi ');
   Mojo::IOLoop->timer(
     '0.5' => sub {
-      $self->write_chunk('there,', sub { shift->write_chunk(' whats up?'); });
+      $self->write_chunk('there,', sub { shift->write_chunk(' whats up?') });
       shift->timer('0.5' => sub { $self->finish });
     }
   );
@@ -74,7 +74,7 @@ get '/longpoll/nolength' => sub {
   $self->write('hi ');
   Mojo::IOLoop->timer(
     '0.5' => sub {
-      $self->write('there,', sub { shift->write(' what length?'); });
+      $self->write('there,', sub { shift->write(' what length?') });
       shift->timer('0.5' => sub { $self->finish });
     }
   );