Style photos more neatly

aquarion · Apr 13, 2012 · 01930c5 · 01930c5
1 parent 3ade3df
commit 01930c5
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 5 deletions.
diff --git a/dayze/assets/css/style.css b/dayze/assets/css/style.css
@@ -127,15 +127,16 @@ border: none;
 
   overflow: hidden;
 
-  color: #333;
+	color: white;
   font-weight: normal;
   border-radius: .4em;
   text-shadow: 1px 1px 1px rgba(0,0,0,.2);
   min-height: 128;
   background: rgba(125,96,103, .4);
   background: -moz-linear-gradient(100% 100% 90deg, rgba(125,96,103, .8), rgba(184,163,168, .8));
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(125,96,103, .8)), to(rgba(184,163,168, .8)));
-}
+
+  }
 
 
 .Twitter {
@@ -172,6 +173,52 @@ border: none;
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(200,50,50, .8)), to(rgba(200,128,128, .8)));
 }
 
+li.Photo {
+	border-width: 20px 20px 20px 20px;
+	-moz-border-image: url(http://liveart.istic.net/images/gold-frame.png) 20 20 20 20 stretch;
+	-webkit-border-image: url(http://liveart.istic.net/images/gold-frame.png) 20 20 20 20 stretch;
+	-o-border-image: url(http://liveart.istic.net/images/gold-frame.png) 20 20 20 20 stretch;
+	border-image: url(http://liveart.istic.net/images/gold-frame.png) 20 20 20 20 stretch;
+	background: rgba(0,0,0,.6);
+	margin: 0;
+	position: relative;
+	  width: 500px;
+	    height: 300px;
+}
+
+li.Photo  a.iconlink {
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: block;
+	text-align: center;
+	width: 100%;
+}
+
+li.Photo img.icon {
+	max-width: 105%;
+	max-height: 100%;
+	float: none ;
+}
+
+li.Photo .description, li.Photo .cite {
+	display: block;
+	position: absolute;
+	background: rgba(0,0,0,.6);
+	color: white;
+	text-align: right;
+	bottom: 1.2em;
+	left: 0;
+	width: 100%;
+	overflow: none;
+	height: 1.2em;
+	font-size: smaller;
+}
+
+li.Photo .cite {
+	bottom: 0;
+}
+
 .Location {
   background: rgba(78,179,75, .8);
   background: -moz-linear-gradient(100% 100% 90deg, rgba(78,179,75, .8), rgba(207,227,207, .8));

diff --git a/dayze/today.php b/dayze/today.php
@@ -191,6 +191,10 @@
 	continue 2;
       }
       break;
+
+	case "flickr":
+		$class = "Photo";
+		break;
 
     case "tumblr":
       $class = "Tumblr";

diff --git a/dayze/view.php b/dayze/view.php
@@ -177,15 +177,15 @@
   usort($items, "epochsort");
 
   foreach($items as $row){
-    echo "<li class=\"contentbox ".$row['class']."\" >";
+    echo "<li class=\"contentbox ".$row['class']." source".$row['type']."\" >";
 
     if ($row['icon']){
-      echo "<a href=\"".$row['url']."\" >";
+      echo "<a href=\"".$row['url']."\" class=\"iconlink\"/>";
       echo "<img src='".$row['icon']."' class=\"icon\"/>";
       echo "</a>";
     }
 
-    $content = $row['content'];
+    $content = '<span class="description">'.$row['content'].'</span>';
 
     if (isset($row['subitems'])){
       $content .= " (+ ".count($row['subitems'])." more)";