Skip to content

Commit 23e68a3

Browse files
hugoplhugopl
committed
Added mobile version for website.
1 parent 784f7aa commit 23e68a3

12 files changed

+320
-49
lines changed

‎bottom.css

+23-22
Original file line numberDiff line numberDiff line change
@@ -7,58 +7,59 @@
77
height: 180px;
88
}
99

10-
#bottom .content div {
11-
padding-top: 32px;
10+
#bottom_menu {
11+
margin-top: 32px;
1212
float: right;
1313
}
1414

15-
#bottom .content ul {
15+
#bottom_menu th {
16+
font-family: "LatoBlack";
17+
font-size: 16px;
18+
text-transform: uppercase;
19+
color: #98989b;
20+
border-left: 1px solid #69696F;
21+
text-align: left;
22+
margin: 0;
23+
padding: 0px 16px 10px 16px;
24+
}
25+
26+
#bottom_menu th.firstcol {
27+
border-left: none;
28+
}
29+
30+
#bottom_menu ul {
1631
list-style: none;
1732
margin: 0px;
1833
padding: 0px;
1934
}
2035

21-
#bottom .content li {
36+
#bottom_menu li {
2237
font-family: "LatoLight";
2338
font-size: 16px;
2439
color: #98989b;
2540
padding-left: 1px;
2641
margin: 0px 16px 4px 16px;
2742
}
2843

29-
#bottom .content li a {
44+
#bottom_menu li a {
3045
font-family: "LatoLight";
3146
color: #98989b;
3247
text-decoration: none;
3348
}
3449

35-
#bottom .content li a:hover {
50+
#bottom_menu li a:hover {
3651
color: #eeeeef;
3752
text-decoration: underline;
3853
}
3954

40-
#bottom .content div.lastcol h2 {
41-
border-left: none;
42-
}
43-
44-
#bottom .content h2 {
45-
font-family: "LatoBlack";
46-
font-size: 16px;
47-
text-transform: uppercase;
48-
color: #98989b;
49-
border-left: 1px solid #69696F;
50-
margin: 0;
51-
padding: 0px 16px 10px 16px;
52-
}
53-
54-
#bottom .content h2 a {
55+
#bottom_menu th a {
5556
font-family: "LatoBlack";
5657
font-size: 16px;
5758
color: #98989b;
5859
text-decoration: none;
5960
}
6061

61-
#bottom .content h2 a:hover {
62+
#bottom_menu th a:hover {
6263
text-decoration: underline;
6364
}
6465

‎bottom.php

+32-24
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,37 @@
44
?>
55
<div id="bottom">
66
<div class="content">
7-
<a href="http://www.indt.org"><img id="logo_indt" src="img/logo_indt.png" alt="INdT" /></a>
8-
<img height="30" src="img/line.png" alt="" />
9-
<a href="http://www.qt-project.org"><img id="logo_qt" src="img/logo_qt.png" alt="Qt Project" title="Qt Project" /></a>
10-
<div>
11-
<h2>Contact</h2>
12-
<ul>
13-
<li><span class="beloponto">.</span><a href="http://groups.google.com/group/snowshoe-dev">Mailing list</a></li>
14-
<li><span class="beloponto">.</span>#snowshoe at freenode</li>
15-
</ul>
16-
</div>
17-
<div>
18-
<h2>Code</h2>
19-
<ul>
20-
<li><span class="beloponto">.</span><a href="https://github.com/snowshoe/snowshoe">Git</a></li>
21-
<li><span class="beloponto">.</span><a href="https://github.com/snowshoe/snowshoe/tarball/master">Latest tarball</a></li>
22-
</ul>
23-
</div>
24-
<div class="lastcol">
25-
<h2><?php echo $index; ?></h2>
26-
<ul>
27-
<li><span class="beloponto">.</span><?php echo $about; ?></li>
28-
<li><span class="beloponto">.</span><a href="https://github.com/snowshoe/snowshoe/wiki">Wiki</a></li>
29-
</ul>
30-
</div>
7+
<table id="bottom_menu">
8+
<tr>
9+
<th class="firstcol"><?php echo $index; ?></th>
10+
<th>Code</th>
11+
<th>Contact</th>
12+
</tr>
13+
<tr>
14+
<td>
15+
<ul>
16+
<li><span class="beloponto">.</span><?php echo $about; ?></li>
17+
<li><span class="beloponto">.</span><a href="https://github.com/snowshoe/snowshoe/wiki">Wiki</a></li>
18+
</ul>
19+
</td>
20+
<td>
21+
<ul>
22+
<li><span class="beloponto">.</span><a href="https://github.com/snowshoe/snowshoe">Git</a></li>
23+
<li><span class="beloponto">.</span><a href="https://github.com/snowshoe/snowshoe/tarball/master">Latest tarball</a></li>
24+
</ul>
25+
</td>
26+
<td>
27+
<ul>
28+
<li><span class="beloponto">.</span><a href="http://groups.google.com/group/snowshoe-dev">Mailing list</a></li>
29+
<li><span class="beloponto">.</span>#snowshoe at freenode</li>
30+
</ul>
31+
</td>
32+
</tr>
33+
</table>
34+
<span id="logos">
35+
<a href="http://www.indt.org"><img id="logo_indt" src="img/logo_indt.png" alt="INdT" /></a>
36+
<img height="30" src="img/line.png" alt="" />
37+
<a href="http://www.qt-project.org"><img id="logo_qt" src="img/logo_qt.png" alt="Qt Project" title="Qt Project" /></a>
38+
</span>
3139
</div>
3240
</div>

‎header_index_mob.php

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Snowshoe</title>
6+
<meta content="width=480px" name="viewport" />
7+
<script src="jquery.min.js"></script>
8+
<script src="slides.min.jquery.js"></script>
9+
<link href="mob_styles.css" rel="stylesheet" type="text/css" />
10+
11+
<script type="text/javascript">
12+
$(function(){
13+
$('#slides').slides({
14+
preload: true,
15+
generateNextPrev: false,
16+
effect: "fade",
17+
paginationClass: "pagination",
18+
play: 8000
19+
});
20+
});
21+
</script>
22+
<?php include("analytics.php"); ?>
23+
</head>
24+
<body>
25+
<div id="top">
26+
<div class="content">
27+
<div id="slides">
28+
<div class="slides_container">
29+
<div id="highlight01"></div>
30+
<div id="highlight02"></div>
31+
<div id="highlight03"></div>
32+
</div>
33+
</div>
34+
</div>
35+
</div>

‎header_mob.php

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Snowshoe - About</title>
6+
<meta content="width=480px" name="viewport" />
7+
<base href="/" />
8+
<link href="mob_styles.css" rel="stylesheet" type="text/css" />
9+
10+
<?php include("analytics.php"); ?>
11+
</style>
12+
</head>
13+
<body>
14+
<div id="main">
15+
<div id="intern">
16+
<h1 id="welcome">Welcome<br/><span style="white-space: nowrap">to <strong>SnowShoe</strong></span></h1>
17+
18+
<div id="middle">
19+
<div class="content">
20+
<!-- Contents -->
21+
<?php echo $contents; ?>
22+
<!-- End of contents -->
23+
</div>
24+
</div>
25+
</div>
26+
</div>

‎img/mob_bg.png

1.04 KB
Loading

‎img/mob_highlight_01.png

107 KB
Loading

‎img/mob_highlight_02.png

145 KB
Loading

‎img/mob_highlight_03.png

217 KB
Loading

‎img/mob_indextitle.png

7.04 KB
Loading

‎index.php

+8-3
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,14 @@
44
$isIndex = sizeof($keys) === 0;
55
$page = "";
66

7+
$useragent=$_SERVER['HTTP_USER_AGENT'];
8+
$isMobile = preg_match('/android.+mobile|avantgo|bada\/|blackberry|NokiaN9|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)
9+
|| preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i',substr($useragent,0,4));
10+
$suffix = $isMobile ? "_mob" : "";
11+
712
if ($isIndex) {
813
// index
9-
include("header_index.php");
14+
include("header_index$suffix.php");
1015
} else {
1116
// some intern page
1217
$page = $keys[0];
@@ -17,11 +22,11 @@
1722
$page = "404";
1823
}
1924
$contents = file_get_contents("contents/$page.html", false);
20-
include("header.php");
25+
include("header$suffix.php");
2126
}
2227

2328
include("bottom.php");
24-
if ($isIndex)
29+
if ($isIndex && !$isMobile) // FIXME this should not be here!
2530
echo "<h1 id=\"browser\">browser</h1>";
2631
?>
2732
</body>

‎mob_bottom.css

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
2+
/* bottom stuff */
3+
4+
#bottom {
5+
background-image: url("img/pixel_cinzaescuro.png");
6+
background-repeat: repeat-x;
7+
}
8+
9+
#bottom_menu {
10+
padding-top: 32px;
11+
margin: auto;
12+
}
13+
14+
#bottom_menu th {
15+
font-family: "LatoBlack";
16+
font-size: 16px;
17+
text-transform: uppercase;
18+
color: #98989b;
19+
border-left: 1px solid #69696F;
20+
text-align: left;
21+
margin: 0;
22+
padding: 0px 16px 10px 16px;
23+
}
24+
25+
#bottom_menu th.firstcol {
26+
border-left: none;
27+
}
28+
29+
#bottom_menu ul {
30+
list-style: none;
31+
margin: 0px;
32+
padding: 0px;
33+
}
34+
35+
#bottom_menu li {
36+
font-family: "LatoLight";
37+
font-size: 16px;
38+
color: #98989b;
39+
padding-left: 1px;
40+
margin: 0px 16px 4px 16px;
41+
}
42+
43+
#bottom_menu li a {
44+
font-family: "LatoLight";
45+
color: #98989b;
46+
text-decoration: none;
47+
}
48+
49+
#bottom_menu li a:hover {
50+
color: #eeeeef;
51+
text-decoration: underline;
52+
}
53+
54+
#bottom_menu th a {
55+
font-family: "LatoBlack";
56+
font-size: 16px;
57+
color: #98989b;
58+
text-decoration: none;
59+
}
60+
61+
#bottom_menu th a:hover {
62+
text-decoration: underline;
63+
}
64+
65+
#bottom .beloponto {
66+
font-family: "LatoBlack";
67+
color: #98989b;
68+
padding-right: 4px;
69+
}
70+
71+
#logos {
72+
padding-left: 32px;
73+
padding-bottom: 32px;
74+
float: left;
75+
}
76+
77+
#logo_indt, #logo_qt {
78+
margin-top: 28px;
79+
padding-right: 10px;
80+
}
81+
82+
#logo_qt {
83+
padding-left: 10px;
84+
margin-top: 32px;
85+
}
86+
87+
.itsme {
88+
color: #eeeeef;
89+
font-family: "LatoBlack";
90+
}

0 commit comments

Comments
 (0)