Add : separated CSS file
Dev : better responsive design
This commit is contained in:
Raphaël Renaudon
parent
8a1fd7d346
commit
5286ab76a8
2 changed files with 149 additions and 53 deletions
118
htdocs/css/style.css
Normal file
118
htdocs/css/style.css
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -7,58 +7,32 @@
|
|||
<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."; ?>" />
|
||||
<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("←", "↑", "→", "↓", "↔", "↕", "↖", "↗", "↘", "↙", "↚", "↛", "↜", "↝", "↞",
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in a new issue