beat/charmap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add : separated CSS file

Browse source 
Dev : better responsive design
This commit is contained in:
Raphaël Renaudon 2013-06-02 14:41:35 +02:00
parent 8a1fd7d346
commit 5286ab76a8
2 changed files with 149 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

118
htdocs/css/style.css Normal file
View file

@ -0,0 +1,118 @@
body{
background: #eee;
font-family: 'Source Sans Pro', Arial, Trebuchet MS, sans-serif;
}
.char{
display: inline-block;
width: 100px;
height: 85px;
float: left;
text-align: center;
border: #ccc 1px solid;
background: #fff;
margin: 5px;
font-size: 12px;
color: #666;
text-decoration: none;
overflow: hidden;
}
.char strong{
font-size: 40px;
display: block;
color: #000;
font-family: Arial, sans-serif;
padding: 5px;
}
.clear{
clear: both;
}
a, a.char strong{
color: #006699;
}
.welcome{
width: 548px;
}
.welcome a{
color: #006699;
text-decoration: none;
}
.socials{
width: 314px;
padding-top: 26px;
height: 59px;
text-align: center;
padding-left: 10px;
}
.socials>div{
display: inline-block;
max-height: 38px;
min-width: 250px;
}
.footer{
width: 864px;
padding: 10px;
height: auto;
text-align: center;
padding-left: 10px;
}
/**
* RESPONSIVE
*/
@media (max-width: 912px){
.welcome{
width: 548px;
}
.socials{
width: 538px;
padding-top: 10px;
padding-bottom: 10px;
height: 36px;
text-align: center;
padding-left: 10px;
}
.footer{
width: 528px;
}
}
@media (max-width: 563px){
.welcome{
width: 324px;
}
.socials{
width: 314px;
padding-top: 10px;
padding-bottom: 10px;
height: 36px;
text-align: center;
padding-left: 10px;
}
.footer{
width: 314px;
}
}
@media (max-width: 370px){
.socials{
display: none;
}
.footer{
display: none;
}
.welcome{
width: 100%;
border: none;
background: none;
}
}

74
htdocs/index.php
View file

@ -5,60 +5,34 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="http://www.onlinecreation.pro">
<meta name="description" content="<?php echo $_GET["page"] > 0 ? "UTF-8 and HTML charmap, Page " . $_GET["page"] . ", from char nr.".(($_GET["page"]-1)*1000)." to char nr.".($_GET["page"]*1000-1)."." : "Certainly the biggest unicode character map in the world. Each char is associated with its HTML code."; ?>" />
<meta name="description" content="<?php echo $_GET["page"] > 0 ? "UTF-8 and HTML charmap, Page " . $_GET["page"] . ", from char nr." . (($_GET["page"] - 1) * 1000) . " to char nr." . ($_GET["page"] * 1000 - 1) . "." : "Certainly the biggest unicode character map in the world. Each char is associated with its HTML code."; ?>" />
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400' rel='stylesheet' type='text/css'>
<style type="text/css">
body{
background: #eee;
font-family: 'Source Sans Pro', Arial, Trebuchet MS, sans-serif;
}
.welcome{
width: 548px !important;
display: block !important;
}
.char{
display: inline-block;
width: 100px;
height: 85px;
float: left;
text-align: center;
border: #ccc 1px solid;
background: #fff;
margin: 5px;
font-size: 12px;
color: #666;
text-decoration: none;
overflow: hidden;
}
.char strong{
font-size: 40px;
display: block;
color: #000;
font-family: Arial, sans-serif;
padding: 5px;
}
a.char strong{
color: #006699;
}
.welcome a{
color: #006699;
text-decoration: none;
}
</style>
<link href='css/style.css' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="/img/icon_128.png" />
<link rel="apple-touch-icon" href="img/icon_128.png" />
</head>
<body>
<div class="char welcome">
<strong>uuu.tf</strong>
The biggest HTML UTF-8 charmap you can imagine !
</div>
<div class="char socials">
<div class="addthis_toolbox addthis_default_style addthis_32x32_style" addthis:url="http://uuu.tf" addthis:title="uuu.tf">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
</div>
<?php
if ($_GET['page'] > 0) {
echo '<a class="char" href="' . ($_GET['page'] - 1) . '"><strong>«</strong>Previous</a>';
if ($_GET['page'] > 1) {
echo '<a class="char clear" href="' . ($_GET['page'] - 1) . '"><strong>«</strong>Previous</a>';
} elseif ($_GET['page'] == 1) {
echo '<a class="char clear" href="/"><strong>«</strong>Previous</a>';
}else{
echo '<div class="clear"></div>';
}
if (!is_numeric($_GET['page']) || $_GET["page"] < 1) {
$charmap = array("&#8592;", "&#8593;", "&#8594;", "&#8595;", "&#8596;", "&#8597;", "&#8598;", "&#8599;", "&#8600;", "&#8601;", "&#8602;", "&#8603;", "&#8604;", "&#8605;", "&#8606;",
@ -105,10 +79,14 @@
}
echo '<a class="char" href="' . (is_numeric($_GET['page']) ? $_GET['page'] + 1 : 1) . '"><strong>»</strong>Next</a>';
?>
<div class="char footer clear">
Charmap under GPL licence. If you find any interests into this
humble site, you can use it and its source code as much as you wish :
<a href="https://github.com/onlinecreation/uuu.tf">Download and fork source code</a>;
if you make something great with this code,
<a href="http://www.onlinecreation.pro/#bottom">please let us know</a> !
<div class="char welcome">
<strong><a href="https://github.com/onlinecreation/uuu.tf">Fork this charmap</a></strong>
Made and hosted by <a href="http://www.onlinecreation.pro" target="_blank">OnLineCreation.pro</a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-51aaf7be7c3d94b2"></script>
</body>
</html>