[Xfce4-commits] <www:master> Make css adaptive for smaller screen sizes.

Nick Schermer noreply at xfce.org
Sun Jun 2 20:28:01 CEST 2013


Updating branch refs/heads/master
         to f3273cc0c539d3cc415a0082f73c68ccc43683c5 (commit)
       from 95d1e9b863f98529be86a4328edfb470c2c5bf6e (commit)

commit f3273cc0c539d3cc415a0082f73c68ccc43683c5
Author: Nick Schermer <nick at xfce.org>
Date:   Sun Jun 2 20:27:04 2013 +0200

    Make css adaptive for smaller screen sizes.

 pages/footer.php        |    9 +++
 pages/header.php        |   17 +++----
 style/base.css          |   40 ++++++++++++---
 style/css.php           |    2 +-
 style/img/menu-icon.png |  Bin 0 -> 186 bytes
 style/mobile.css        |  133 +++++++++++++++++++++++++++++++++++++++++++++++
 6 files changed, 183 insertions(+), 18 deletions(-)

diff --git a/pages/footer.php b/pages/footer.php
index c80ddfa..a17f9f2 100644
--- a/pages/footer.php
+++ b/pages/footer.php
@@ -1,4 +1,13 @@
 	</div> <!-- page-contents -->
+<?php
+	if (isset($toc['filename']))
+	{
+		echo '<hr class="hidden" />';
+		echo '<div id="related">';
+		include ($toc['filename']);
+		echo '</div>';
+	}
+?>
 	<div class="clearboth"></div>
 	</div> <!-- content-wrap -->
 	<div id="footer">
diff --git a/pages/header.php b/pages/header.php
index 0187c4b..2597b22 100644
--- a/pages/header.php
+++ b/pages/header.php
@@ -11,6 +11,7 @@ else
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 	<title><?php echo $title ?></title>
 	<link rel="icon" href="/favicon.ico" />
 	<link rel="stylesheet" media="screen" href="/style/css.php" type="text/css" />
@@ -49,8 +50,10 @@ else
 
 <div id="main">
 	<div id="mainnav">
+
+		<h5 class="hidden"><?php E_('Categories') ?></h5>
 		<div>
-			<h5 class="hidden"><?php E_('Categories') ?></h5>
+			<a href="#" id="mainnav-icon"><?php E_('Navigate') ?></a>
 			<ul>
 				<li><a href="/"><?php E_('Home') ?></a></li>
 				<li><a href="/about"><?php E_('About') ?></a></li>
@@ -81,13 +84,7 @@ else
 	</div>
 
 	<div id="content">
-<?php
-	if (isset($toc['filename']))
-	{
-		echo '<div id="sidebar">';
-		include ($toc['filename']);
-		echo '</div>';
-	}
-?>
-
+<?php if (isset($toc['filename'])) { ?>
+	<p id="related-jump" class="file_<?php echo $page_class ?>"><a href="#related"><?php E_('Related Pages') ?> ↓</a></p>
+<?php } ?>
 	<div id="article" class="file_<?php echo $page_class ?>">
diff --git a/style/base.css b/style/base.css
index d6e98de..2458803 100644
--- a/style/base.css
+++ b/style/base.css
@@ -15,12 +15,13 @@ body {
 	margin: auto;
 	padding: 0 6px;
 	text-align: left;
-	min-width: 850px;
+	min-width: 830px;
 	max-width: 1000px;
 }
 
 #content {
 	background-color: #fff;
+	position: relative; /* for the sidebar */
 
 	box-shadow: 0 0 3px rgba(0, 0, 0, .25);
 	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .25);
@@ -69,34 +70,59 @@ body {
 
 #mainnav ul li:first-child {
 	border-left: 0;
+	border-top: 0;
 }
 
 #mainnav select {
 	float: right;
 }
+#mainnav-icon {
+	display: none;
+	height: 32px;
+	background: #333 url('img/menu-icon.png') no-repeat 6px 50%;
 
-#sidebar {
-	float: right;
+	padding: 0 6px 0 32px;
+	line-height: 32px;
+
+	color: #fff;
+	font-weight: bold;
+
+	-webkit-border-radius: 4px;
+	-moz-border-radius: 4px;
+	border-radius: 4px;
+}
+
+#related {
+	position:absolute;
+	right: 0;
+	top: 0;
 	width: 230px;
 	border-left: 1px solid #ccc;
+	margin-top: 2em;
 }
-
-#sidebar ul {
+#related h2:first-child {
+	margin-top: 0;
+}
+#related ul {
 	margin-left: 3em;
 	margin-right: 1em;
 }
 
-#sidebar ul li {
+#related ul li {
 	margin-bottom: 6px;
 }
 
-#sidebar h2 {
+#related h2 {
 	font-size: 16px;
 	font-weight: normal;
 	padding: 0;
 	margin: 2em 1em 6px 1em;
 }
 
+#related-jump {
+	display: none;
+}
+
 #footer {
 	color: #999;
 	font-size: small;
diff --git a/style/css.php b/style/css.php
index b552962..e657094 100644
--- a/style/css.php
+++ b/style/css.php
@@ -54,7 +54,7 @@ $buf = '';
 $mtime = 0;
 
 /* load contents */
-$files = array ('header.css', 'base.css', 'frontpage.css', 'news.css');
+$files = array ('header.css', 'base.css', 'frontpage.css', 'news.css', 'mobile.css');
 foreach ($files as $file)
   {
     $buf .= file_get_contents ($file);
diff --git a/style/img/menu-icon.png b/style/img/menu-icon.png
new file mode 100644
index 0000000..3304bcf
Binary files /dev/null and b/style/img/menu-icon.png differ
diff --git a/style/mobile.css b/style/mobile.css
new file mode 100644
index 0000000..21c957e
--- /dev/null
+++ b/style/mobile.css
@@ -0,0 +1,133 @@
+
+ at media screen and (max-width: 850px) {
+	body, h2, h3, h4 {
+		font-size: 110%; /* 10% bigger fonts */
+	}
+	h1 {
+		font-size: 26px;
+		text-align: left;
+	}
+	#main {
+		min-width: 380px;
+		width: 380px;
+		padding: 0;
+	}
+	#slidewrap {
+		background-size: 463px 185px;
+	}
+	#slide img, #slide {
+		width: 370px;
+		height: 185px;
+
+	}
+	div.column {
+		float: none;
+		width: 100%;
+
+	}
+	div.lcolumn {
+		margin-right: 0;
+		margin-bottom: 3em;
+	}
+	div.rcolumn {
+		margin-left: 0;
+	}
+	.post-wrap {
+		padding-bottom: 0;
+	}
+	.frontpage_cols {
+		padding: 1em;
+	}
+	#article {
+		margin-right: 0;
+		border-right: 0;
+		padding: 1em;
+	}
+	.figure img {
+		max-width: 330px;
+	}
+	#article.file_screenshots img {
+		max-width: 48%;
+	}
+	#mainnav select {
+		font-size: 110%;
+		height: 32px;
+	}
+	#mainnav-icon {
+		display: block;
+		float: left;
+	}
+	#mainnav div ul {
+		display: none;
+		background: #333;
+		position: absolute;
+		margin-top: 32px;
+		color: #fff !important;
+		width: 200px;
+		float: left;
+		z-index: 99;
+
+	}
+	#mainnav div:hover ul {
+		display: block;
+	}
+	#mainnav div:hover #mainnav-icon {
+		-webkit-border-bottom-right-radius: 0;
+		-webkit-border-bottom-left-radius: 0;
+		-moz-border-radius-bottomright: 0;
+		-moz-border-radius-bottomleft: 0;
+		border-bottom-right-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+	#mainnav ul li {
+		float: none;
+		border-left: 0;
+		border-top: 1px solid #fff;
+		padding: 0;
+	}
+	#mainnav ul li a {
+		display: block;
+		color: #fff;
+		padding: 6px 20px;
+		font-weight: bold;
+	}
+	#mainnav ul li a:hover {
+		background-color: #666;
+		text-decoration: none;
+	}
+	#related {
+		position: relative;
+		border: 0;
+		background-color: #ccc;
+		width: auto;
+		padding: 1em 0;
+		margin-top: 0;
+
+		-webkit-border-bottom-right-radius: 4px;
+		-webkit-border-bottom-left-radius: 4px;
+		-moz-border-radius-bottomright: 4px;
+		-moz-border-radius-bottomleft: 4px;
+		border-bottom-right-radius: 4px;
+		border-bottom-left-radius: 4px;
+	}
+	#related-jump {
+		float: right;
+		display: block;
+		background-color: #d7d7d7;
+		margin: 0;
+
+		-webkit-border-top-right-radius: 4px;
+		-webkit-border-bottom-left-radius: 4px;
+		-moz-border-radius-topright: 4px;
+		-moz-border-radius-bottomleft: 4px;
+		border-top-right-radius: 4px;
+		border-bottom-left-radius: 4px;
+	}
+	#related-jump a {
+		padding: 6px;
+		display: block;
+	}
+	#related-jump.file_frontpage {
+		display: none;
+	}
+}


More information about the Xfce4-commits mailing list