all repos — h3rald @ da3c25605f0a7960fc0764e99c88554819ff9db1

The sources of https://h3rald.com 

Twitter RSS feed + 3-col footer
h3rald h3rald@h3rald.com
Sat, 01 Aug 2009 15:10:06 +0200
commit

da3c25605f0a7960fc0764e99c88554819ff9db1

parent

ae6d8340b8643eb51252a5e14619b44c4fe75d04

4 files changed, 70 insertions(+), 53 deletions(-)

jump to
M ui-dev/css/elements.css → ui-dev/css/elements.css 
@@ -132,19 +132,19 @@ {
 	margin-left: 0;
 }
 
-.feed-item, .twitter-item
+.feed-item
 {
 	list-style-type: none;
 	padding: 0.2em;
 	border: 1px solid #000;
-	margin: 3px 0;
-	background: #171617;
+	margin: 3px 2px;
+	background: #111;
 	color: #BDB7BA;
 }
 
-.feed-item:hover, .twitter-item:hover
+.feed-item:hover
 {
-	background: #545153;
+	background: #171617;
 }
 
 /**** TABLES ****/
M ui-dev/css/layout.css → ui-dev/css/layout.css 
@@ -66,7 +66,7 @@ 
 #header-container, #footer-container
 {
 	margin: auto;
-	width: 850px;
+	width: 900px;
 }
 
 #header-left

@@ -116,7 +116,6 @@ /******** CONTENT *******/
 
 #container
 {
-	clear: both;
 	padding: 15px;
 	padding-top:60px;
 	background-color: #fff;

@@ -153,48 +152,58 @@ }
 
 #content
 {
-	width: 800px;
 	text-align: justify;
 }
 
+/* FOOTER */
 
 
+#wrapper {
+	min-height: 100%;
+	margin-bottom: -450px;
+	position: relative;
+}  
 
-/* FOOTER */
-/* Special Thanks to Ryan Fait (http://ryanfait.com/sticky-footer) */
+#footer {
+	position: relative;
+	height: 450px;
+	font-family: Georgia, Serif;
+	width: 100%;
+	font-size: 95%;
+	text-align: center;
+	background-color: #000;
+}
 
-
-#footer, #push
+.clearfooter
+{
+	height: 450px;
+	clear: both;
+}
+.footer-left, .footer-right, .footer-center
 {
-	height: 55px;
+	float:left;
+	text-align: left;
+	font-size: 90%;
 }
 
-#push
+.footer-left
 {
-	clear: both;
+	width: 40%;
 }
 
-#wrapper {
-	min-height: 100%;
-	height: auto !important;
-	height: 100%;
-	margin: 0 auto -55px; /* the bottom margin is the negative value of the footer's height */
+.footer-right
+{
+	width: 30%;
 }
 
-
-#footer
+.footer-center
 {
-	position: absolute;
-	padding-top: 5px;
-	font-family: Georgia, Serif;
-	width: 100%;
-	font-size: 95%;
-	text-align: center;
-	background-color: #000;
+	width: 30%;
 }
 
 .footer-div
 {
+	clear: both;
 	font-size: 95%;
 	color: #CACACA;
 }

@@ -202,7 +211,7 @@ 
 /* slider */
 
 #slider {
-  width: 800px;
+  width: 850px;
   margin: 0 auto;
   position: relative;
 	border: 1px solid #000;

@@ -219,7 +228,7 @@ 
 .scrollContainer div.panel {
   padding: 10px;
   height: 210px;
-  width: 800px; 
+  width: 850px;
 }
 .scrollButtons {
   position: absolute;
M ui-dev/home.htm → ui-dev/home.htm 
@@ -48,7 +48,7 @@ <script src="js/jquery.accordion.js" type="text/javascript"></script>
 		<script src="js/accordion.js" type="text/javascript"></script>
 		<script src="js/init.js" type="text/javascript"></script>
 
-		</head>
+	</head>
 	<body>
 		<div id="wrapper">
 			<div id="header">

@@ -84,9 +84,9 @@ <li><a href="#" id="up-arrow"><img alt="^" src="images/arrow_up.gif"></a></li>
 					<li><a href="#" id="down-arrow"><img alt="v" src="images/arrow_down.gif"></a></li>
 				</ul>
 				<!-- CONTENT START -->
-				<div id="content">
+				<div id="content" class="clearfix">
 					<h2>Home</h2>
-				
+
 					<div id="slider">
 						<div class="scroll">
 							<div class="scrollContainer">

@@ -127,28 +127,34 @@ </div><!-- .scrollContainer -->
 						</div><!-- .scroll -->
 					</div><!-- #slider -->
 
-					<div id="services">
-					<h3 class="accordion-h">Bookmarks</h3>
-					<div id="delicious">
-					</div>
-					<h3 class="accordion-h">Tweets</h3>
-					<div id="twitter">
-					</div>
-					<h3 class="accordion-h">Comments</h3>
-					<div id="backtype">
-					</div>
-					</div>
 
 
 				</div>
 				<!-- CONTENT END -->
 
-				<div id="push"></div>
 			</div>
 			<!-- CONTAINER END -->
+			<div class="clearfooter"></div>
 		</div> <!-- WRAPPER END -->
 		<div id="footer">
 			<div id="footer-container">
+				<div id="services">
+					<div class ="footer-left">
+						<h3>Tweets</h3>
+						<div id="twitter">
+						</div>
+					</div>
+					<div class ="footer-center">
+						<h3>Bookmarks</h3>
+						<div id="delicious">
+						</div>
+					</div>
+					<div class ="footer-right">
+						<h3>Comments</h3>
+						<div id="backtype">
+						</div>
+					</div>
+				</div>
 
 				<div class="footer-div">Interesting Places: 
 					<a href="http://www.cyberarmy.net/" class="link">CyberArmy</a> |

@@ -169,10 +175,8 @@ </div>
 		<script src="js/feeds.js" type="text/javascript"></script>
 		<script src="js/jquery.qtip.js" type="text/javascript"></script>
 		<script type="text/javascript">
-// tooltip
-$('.feed-item[title]').qtip(dark_tooltip);
-
-					Cufon.now();
-			</script>
-		</body>
-	</html>
+			// tooltip
+		$('.feed-item[title]').qtip(dark_tooltip);
+		</script>
+	</body>
+</html>
M ui-dev/js/feeds.js → ui-dev/js/feeds.js 
@@ -20,5 +20,9 @@ };
 var backtype_feed = function(feed){
 	display_feed(feed, "#backtype")
 };
+var twitter_feed = function(feed){
+	display_feed(feed, "#twitter")
+};
 $.jGFeed('http://feeds.delicious.com/v2/rss/h3rald', delicious_feed, 10)
 $.jGFeed('http://feeds.backtype.com/home/21105', backtype_feed, 10)
+$.jGFeed('http://twitter.com/statuses/user_timeline/h3rald.rss', twitter_feed, 7)