This commit is contained in:
bigeagle 2013-12-11 17:11:32 +08:00
parent 1768b8fc63
commit 994e1ea954
5 changed files with 111 additions and 63 deletions

View File

@ -4,9 +4,9 @@ include "includes/before.php";
?>
<div id="content" class="pure-u-1">
<div class="padding-1-lr pure-g-r">
<div class="pure-u-2-3 pure-g-r">
<div class="pure-u-1 padding-1-lr">
<div class="container pure-g-r">
<div class="pure-u-5-8">
<div id="mirrorlist-container">
<h2> 镜像列表 </h2>
<table id="mirrorlist" border="0" cellspacing="0" cellpadding="0" >
<thead>
@ -50,24 +50,14 @@ include "includes/before.php";
</tr>
</tbody>
</table>
</div>
</div>
<div class="pure-u-1-3">
<div class="aside">
<div class="padding-1-lr">
<h2>简介</h2>
<div class="tuna-logo">
<p>Powered by <a href="http://tuna.tsinghua.edu.cn/">
<img src="files/logo-01.png" alt="TUNA" /></a>
</p>
</div>
<p> 欢迎来到清华大学开源镜像网站,它由清华大学开源镜像站管理团队维护管理。</p>
</div>
</div>
<div class="pure-u-1">
<div style="height: 600px;">
<h3 style="margin-top: 300px;">我是刷存在感的占位层。</h3>
</div>
</div>
</div>
<div class="pure-u-3-8">
<div>
<p> 欢迎来到清华大学开源镜像网站,它由清华大学开源镜像站管理团队维护管理。</p>
<p>本站可以在校内外通过 IPv4/IPv6 使用。
<br />本站域名有:</p>
<ul>
@ -79,7 +69,7 @@ include "includes/before.php";
<p><strong>镜像使用所需配置参见 <a href="http://wiki.tuna.tsinghua.edu.cn/MirrorUseHowto">Wiki</a></strong></p>
</div>
<div class="pure-u-1">
<div>
<p>如果您有任何问题或建议,请在我们的 <a href="http://issues.tuna.tsinghua.edu.cn">issue tracker</a>
上提交 bug或者访问我们的<a
@ -91,11 +81,6 @@ include "includes/before.php";
</div>
</div>
</div> <!-- end of content div -->
<div id="footer" class="pure-u-1">
<div class="ack">
<p>本站的网络和硬件由清华大学网络工程研究中心提供支持。</p>
</div>
</div> <!-- end of footer div -->
<?php include("includes/after.php")?>

View File

@ -1,6 +1,19 @@
<div id="google_translate_element" style="display:none;"></div>
<div id="footer" class="pure-u-1 pure-g-r">
<div class="container">
<div class="ack pure-u-3-4">
<p>清华大学开源镜像站的网络和硬件由清华大学网络工程研究中心提供支持。</p>
</div>
<div class="aside pure-u-1-4">
<div class="tuna-logo">
<p><a href="http://tuna.tsinghua.edu.cn/"><img id="foot-logo" src="files/logo.png" alt="TUNA" /></a></p>
</div>
</div>
</div>
</div> <!-- end of footer div -->
</div> <!-- end of div wrapper -->
<div class="placeholder" ></div>
<script type="text/javascript">
function googleTranslateElementInit() {

View File

@ -14,13 +14,28 @@ include "includes/bydistro.php";
<style type="text/css">
<?php
$tunablue = "#2c7edf";
$lightblue = "#7daadf";
$thupurple = "#71337F";
$grey = "#444";
$light_grey = "#DDD";
$light_purple = "#ddb7e1";
$very_light_purple = "#fef5ff";
include "includes/colors.php";
$bg_color = $white;
$theme_color = $thupurple;
$text_color = $grey;
$link_color = $tunablue;
$link_hover_color = $lightblue;
$border_color = $light_grey;
$header_bg_color = $theme_color;
$header_fg_color = $white;
$header_fg_color_light = $light_purple;
$menu_active_fg_color = $theme_color;
$menu_active_bg_color = $white;
$menu_inactive_fg_color = $white;
$menu_inactive_bg_color = $theme_color;
$strip_color = $very_light_purple;
$footer_bg_color = $very_light_grey;
include "includes/tuna.css.php";?>
</style>
<!-- <link href="files/tuna.css" rel="stylesheet" type="text/css" /> -->
@ -34,10 +49,9 @@ include "includes/tuna.css.php";?>
</head>
<body>
<div class="placeholder" ></div>
<div id="wrapper" class="pure-g-r">
<div id="header" class="pure-u-1">
<div class="padding-2-lr pull-left">
<div class="container padding-2-lr">
<h1>清华大学开源镜像站</h1>
<div class="tagline pure-hidden-phone">
Portal of Tsinghua University Open Source Software Mirror Sites
@ -51,9 +65,11 @@ include "includes/tuna.css.php";?>
</ul>
</div>
</div>
<!--
<div class="pull-right pure-hidden-phone">
<img src="files/logo-w.png" alt="TUNA" /></a>
</div>
-->
</div> <!-- end of header div -->
<?php
if (file_exists('notice.html') && filesize('notice.html') != 0) {

11
includes/colors.php Normal file
View File

@ -0,0 +1,11 @@
<?php
$white = "#FFF";
$tunablue = "#2c7edf";
$lightblue = "#7daadf";
$thupurple = "#71337F";
$grey = "#444";
$light_grey = "#DDD";
$very_light_grey = "#EEE";
$light_purple = "#ddb7e1";
$very_light_purple = "#fef5ff";
?>

View File

@ -21,28 +21,27 @@
}
body {
font-size: 16px;
color: #444;
color: <?= $text_color ?>;
}
a, a:visited {
color: <?= $tunablue ?>;
color: <?= $link_color ?>;
text-decoration: none;
}
a:hover {
color: <?= $light_blue ?>;
color: <?= $link_hover_color ?>;
}
h1, h2, h3, h4 {
color: <?= $thupurple ?>;
color: <?= $theme_color ?>;
}
.aside {
border: 1px solid #777777;
background-color: #e6e6e6;
ul {
padding: 0 0 0 20px;
}
.placeholder {
height: 1em;
width: 100%;
display: none;
}
.pull-right {
float: right;
}
@ -57,11 +56,18 @@ h1, h2, h3, h4 {
}
#wrapper {
background-color: #FFFFFF;
background-color: <?= $bg_color ?>;
width: 100%;
}
@media screen and (min-width: 1130px) {
.container {
margin: 0 5% 0 5%;
width: auto;
}
.placeholder {
display: block;
}
@ -76,15 +82,26 @@ h1, h2, h3, h4 {
padding-right: 2em;
}
#wrapper {
margin: 0 5% 0 5%;
#mirrorlist-container {
margin: 0 1em;
width: auto;
}
}
@media screen and (max-width: 1129px) {
.container {
margin: 0;
width: 100%;
}
#mirrorlist-container {
margin: 0 2%;
width: auto;
}
.padding-1-lr {
padding-left: 1%;
padding-right: 1%;
@ -94,24 +111,21 @@ h1, h2, h3, h4 {
padding-left: 2%;
padding-right: 2%;
}
#wrapper {
width: 100%;
}
}
#header {
margin-bottom: 1em;
background-color: <?= $thupurple ?>;
background-color: <?= $header_bg_color ?>;
}
#header h1 {
color: white;
color: <?= $header_fg_color ?>;
font-weight: normal;
}
#header .tagline {
margin-bottom: 1.2em;
color: <?= $light_purple ?>;
color: <?= $header_fg_color_light ?>;
}
#header .pure-menu {
@ -119,33 +133,32 @@ h1, h2, h3, h4 {
}
#header .pure-menu li {
background-color: <?= $thupurple ?>;
background-color: <?= $menu_inactive_bg_color ?>;
height: 100%;
}
#header .pure-menu li.pure-menu-selected, #header .pure-menu li.pure-menu-selected:hover {
background-color: white;
background-color: <?= $menu_active_bg_color ?>;
}
#header .pure-menu li.pure-menu-selected a, #header .pure-menu li.pure-menu-selected a:hover, #header .pure-menu li.pure-menu-selected:hover a, #header .pure-menu li.pure-menu-selected:hover a:hover {
font-weight: bold;
color: <?= $thupurple ?>;
color: <?= $menu_active_fg_color ?>;
}
#header .pure-menu li a {
color: white;
color: <?= $menu_inactive_fg_color ?>;
}
#header .pure-menu li a:hover {
background-color: transparent !important;
color: <?= $thupurple ?>;
color: <?= $menu_active_fg_color ?>;
}
#header .pure-menu li:hover {
background-color: white;
background-color: <?= $menu_active_bg_color ?>;
}
#mirrorlist {
width: 100%;
border-spacing: 0;
@ -166,11 +179,11 @@ h1, h2, h3, h4 {
}
#mirrorlist thead > tr {
border-bottom: 1px solid #DDD;
border-bottom: 1px solid <?= $border_color ?>;
}
#mirrorlist tbody > tr:nth-child(even) {
background-color: <?= $very_light_purple ?>;
background-color: <?= $strip_color ?>;
}
#mirrorlist .distribution {
@ -200,3 +213,13 @@ h1, h2, h3, h4 {
width: 20%;
}
}
#footer {
border-top: 1px solid <?= $border_color ?>;
background-color: <?= $footer_bg_color?>;
}
#foot-logo {
height: 96px;
}