From 41abfed906f35a3a426ad0c591d71d79a89d7ec5 Mon Sep 17 00:00:00 2001
From: Romain d'Alverny <rda@mageia.org>
Date: Thu, 5 May 2011 10:49:08 +0000
Subject: style update

---
 README.md |  2 ++
 index.php | 34 +++++++++++++++++++++++++---------
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 21e0793..ce026ae 100644
--- a/README.md
+++ b/README.md
@@ -20,3 +20,5 @@ See https://bugs.mageia.org/show_bug.cgi?id=1043
  - Submission guidelines for photographs. 
  - Add a caption to a picture + a link to bonjourmageia.fr?
    => use photograph EXIF data for Copyright, comment, link?
+ - http://stackoverflow.com/questions/1578169/how-can-i-read-xmp-data-from-a-jpg-with-php
+ - http://desandro.github.com/3dtransforms/docs/card-flip.html
\ No newline at end of file
diff --git a/index.php b/index.php
index 4ddde46..5623bd5 100644
--- a/index.php
+++ b/index.php
@@ -22,7 +22,9 @@ if (count($images) > 0) {
     $img_tmpl = '<img id="hi" src="%s" alt="Free Hugs!" title="Come get a hug!">';
     $img      = $images[array_rand($images)];
     $out      = sprintf($img_tmpl,
-        str_replace(realpath(dirname(__FILE__)), '', $img));
+        str_replace($app_root, '', $img));
+
+    // TODO $exif = exif_read_data($img, null, true);
 } else {
     $out = '<div id="hi"><p>404 Hug Not Found :(</p></div>';
 }
@@ -37,26 +39,40 @@ if (count($images) > 0) {
     <meta name="robots" content="index, follow">
     <link rel="canonical" href="http://hugs.mageia.org/">
     <link rel="icon" type="image/png" href="/static/favicon.png">
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Unkempt">
+    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Pacifico">
     <style>
     html { margin: 0; padding: 0; background: #fff; }
     body { margin: 0 auto; padding: 20px 40px; font-size: 100%; }
-    h1, h2 { font-family: Unkempt, "Times New Roman", serif; font-weight: normal; }
-    h1 { margin: 0 0 1em 0; font-size: 250%; }
+    h1, h2 { font-family: Pacifico, "Times New Roman", serif; font-weight: normal;
+        font-effect: outline; }
+    h1 { margin: 0 0 1em 0; font-size: 260%; }
     h2 { margin-top: 2em; font-size: 180%; }
     a, a:link { color: #2383c2; text-decoration: none; }
+    a:hover { text-decoration: underline; }
     ul { margin-bottom: 4em; }
     li { margin-bottom: 0.6em; }
-    #hi { margin: 10px 0 0 0; width: 350px; -webkit-box-shadow: 0 0 40px #555;
-        -moz-box-shadow: 0 0 40px #555; box-shadow: 0 0 40px #555; }
+    #hi { margin: 10px 0 0 0; width: 350px;
+        -webkit-box-shadow: 0 0 40px #555; -moz-box-shadow: 0 0 40px #555;
+        box-shadow: 0 0 40px #555;
+        -webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease;
+        transition: all 1.5s ease;
+        border: 4px solid #fff;
+        -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
+    }
+    #hi.flipped { -webkit-transform: rotateY(180deg);
+        -moz-transform: rotateY(180deg);
+    }
     #hi p { padding: 2em; }
-    p { font-family: "Trebuchet MS"; font-size: 80%; color: #222; }
+    p { font-family: "Trebuchet MS"; font-size: 90%; color: #222; }
     section { float: left; margin-left: 20px; }
     aside { float: left; text-align: left; margin-left: 60px; width: 350px;
         display: block; }
     article { display: block; width: auto; margin: auto; }
-    footer { clear: both; color: #ddd; margin-top: 3em; }
-    footer a { color: #ddd; text-decoration: none;  }
+    footer { clear: both; color: #aaa; margin-top: 3em; }
+    footer p { color: #aaa; }
+    footer a { color: #aaa; text-decoration: none;  }
+    p.yours { font-size: 70%; color: #aaa; font-family: Verdana; }
+    p.yours a { color: #aaa; }
     div.clear { clear: both; }
     </style>
 </head>
-- 
cgit v1.2.1