[Xfce4-commits] <www:master> Experiment a bit with the frontpage.

Nick Schermer noreply at xfce.org
Tue Apr 17 20:22:02 CEST 2012


Updating branch refs/heads/master
         to 168198732e0e0c8450ad13746f46b24b123b602e (commit)
       from 4f05dccddf18ce4a164ab7c8908fea187245c32c (commit)

commit 168198732e0e0c8450ad13746f46b24b123b602e
Author: Nick Schermer <nick at xfce.org>
Date:   Sun Apr 8 21:59:02 2012 +0200

    Experiment a bit with the frontpage.

 pages/frontpage.php |   30 ++++++++++++---------
 pages/header.php    |   14 ++++++----
 style/base.css      |    5 +--
 style/frontpage.css |   69 ++++++++++++++++++++++++++++++--------------------
 4 files changed, 68 insertions(+), 50 deletions(-)

diff --git a/pages/frontpage.php b/pages/frontpage.php
index b00232b..0861159 100644
--- a/pages/frontpage.php
+++ b/pages/frontpage.php
@@ -7,10 +7,11 @@ $head['description'] = 'Xfce Desktop Environment';
 $head['keywords'] = 'desktop environment, window manager, desktop, speed, lightweight, gtk+, open source, xforms common environment';
 $head['feed'] = 'http://www.xfce.org/feed?lang='.$lang;
 $head['javascript'] = '/style/tinyslider.js';
+$head['pagediv'] = false;
 ?>
 
-<div id="slides">
-  <div id="slider">
+<div id="slidewrap" class="page_contents">
+  <div id="slide">
     <ul>
       <li>
         <img src="/images/frontpage/slider-desktop.jpg" width="800" height="400" alt="Xfce Desktop" />
@@ -38,23 +39,24 @@ $head['javascript'] = '/style/tinyslider.js';
       </li>
     </ul>
   </div>
-  <ul id="pagination">
-    <li onclick="slideshow.pos(0)"></li>
-    <li onclick="slideshow.pos(1)"></li>
-    <li onclick="slideshow.pos(2)"></li>
-    <li onclick="slideshow.pos(3)"></li>
-    <li onclick="slideshow.pos(4)"></li>
-    <li onclick="slideshow.pos(5)"></li>
-  </ul>
-  <div class="clearboth"></div>
+  <div id="slidenavwrap">
+    <ul id="slidenav">
+      <li onclick="slideshow.pos(0)"></li>
+      <li onclick="slideshow.pos(1)"></li>
+      <li onclick="slideshow.pos(2)"></li>
+      <li onclick="slideshow.pos(3)"></li>
+      <li onclick="slideshow.pos(4)"></li>
+      <li onclick="slideshow.pos(5)"></li>
+    </ul>
+  </div>
 </div>
 
 <script type="text/javascript">
 var slideshow=new TINY.slider.slide('slideshow',{
-  id:'slider',
+  id:'slide',
   auto:10,
   vertical:false,
-  navid:'pagination',
+  navid:'slidenav',
   activeclass:'current',
   position:0,
   rewind:false,
@@ -62,6 +64,8 @@ var slideshow=new TINY.slider.slide('slideshow',{
 });
 </script>
 
+<div class="page_contents file_frontpage">
+
 <h2><?php E_('Latest News') ?></h2>
 <?php
   $count = 3;
diff --git a/pages/header.php b/pages/header.php
index a3d061d..ce304f0 100644
--- a/pages/header.php
+++ b/pages/header.php
@@ -47,7 +47,7 @@ else
 	<div  id="xfce-header-clear"></div>
 </div>
 
-<div id="page-wrap">
+<div class="page-wrap">
 	<div id="menu-main">
 		<div>
 			<h5 class="hidden"><?php E_('Categories') ?></h5>
@@ -60,9 +60,6 @@ else
 				<li><a href="/projects"><?php E_('Projects') ?></a></li>
 			</ul>
 		</div>
-<?php
-	if (count ($languages) > 1) {
-?>
 		<form id="languageform" action="" method="get">
 			<select name="lang" onchange="document.getElementById('languageform').submit(); return true;" title="<?php E_('Change language') ?>">
 <?php
@@ -80,7 +77,6 @@ else
 			</select>
 			<button type="submit" class="hidden"><?php E_('Change language') ?></button>
 		</form>
-<?php } ?>
 		<div class="clearboth"></div>
 	</div>
 
@@ -123,5 +119,11 @@ else
 
 		echo '</div>';
 	}
+	
+	if (!isset ($head['pagediv']) || $head['pagediv'] == true)
+	{
+?>
+	<div class="page_contents file_<?php echo $page_class ?>">
+<?php
+	}
 ?>
-	<div id="page-contents" class="page_contents file_<?php echo $page_class ?>">
diff --git a/style/base.css b/style/base.css
index 3119f41..23eb989 100644
--- a/style/base.css
+++ b/style/base.css
@@ -7,11 +7,10 @@ body {
 	background-color: #eee;
 }
 
-#page-wrap {
+.page-wrap {
 	margin: auto;
 	text-align: left;
-	margin-bottom: 3em;
-	padding: 10px;
+	padding: 12px;
 	min-width: 850px;
 	max-width: 1000px;
 }
diff --git a/style/frontpage.css b/style/frontpage.css
index b59e716..8b4fd17 100644
--- a/style/frontpage.css
+++ b/style/frontpage.css
@@ -2,27 +2,26 @@
 	margin-right: 0;
 }
 
-#slides {
-	width: 800px;
+#slidewrap {
+	text-align: center;
 	margin: auto;
-	height: 400px;
-	position: relative;
-	
-	box-shadow: 0 0 3px rgba(0, 0, 0, .5);
-	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .5);
-	-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .5);
+	background: #bcbcbc;
+	margin-bottom: 12px;
+	padding: 0;
 }
-#slider {
-	float: left; 
-	position: relative; 
-	overflow: auto; 
+#slide {
+	float: inline-block; 
+	position: relative;
+	overflow: hidden; 
 	width: 800px; 
 	height: 400px;
 	background: #000;
 	cursor: default;
 	overflow: hidden;
+	margin: auto;
+	border: 12px #bcbcbc solid;
 }
-#slider ul {
+#slide ul {
 	position: absolute; 
 	list-style: none; 
 	top: 0; 
@@ -30,12 +29,13 @@
 	margin: 0;
 	padding: 0;
 }
-#slider li {
+#slide li {
 	float: left; 
 	width: 800px; 
 	height: 400px;
 }
-#slider li p {
+#slide li p {
+	text-align: left;
 	padding:6px;
 	margin:6px;
 	position:absolute;
@@ -46,25 +46,38 @@
 	border: 0;
 	border-radius: 6px;
 }
-#slider li p {
+#slide li p {
 	background:rgba(0, 0, 0, 0.8)
 }
-#pagination {
-	position:absolute;
-	top:8px;
-	right:0;
+#slidenavwrap {
+	background: #fff;
+}
+#slidenav {
 	list-style:none; 
 	margin:0;
 	padding:0;
+	line-height: 0;
 }
-#pagination li {
-	float:left; 
+#slidenav li {
+	border: 1px solid #bcbcbc;
+	border-radius: 50%;
+	width: 12px;
+	height: 12px;
+	display: inline-block;
 	cursor:pointer; 
-	height:8px; 
-	width:8px; 
-	margin:0 8px 0 0; 
-	border:2px solid #fff;
+	margin: 12px 6px;
+	background: #dcdcdc;
+
+	transition: background 0.2s linear;
+	-moz-transition: background 0.2s linear;
+	-webkit-transition: background 0.2s linear;
+	-o-transition: background 0.2s linear;
 }
-#pagination li:hover, #pagination li.current  {
-	background:#fff;
+#slidenav li:hover {
+	background: #bababa;
+}
+
+#slidenav li.current  {
+	background: #acacac;
+	border-color: #5f5f5f;
 }


More information about the Xfce4-commits mailing list