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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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("←", "↑", "→", "↓", "↔", "↕", "↖", "↗", "↘", "↙", "↚", "↛", "↜", "↝", "↞",
|
||||
|
|
@ -72,14 +46,14 @@
|
|||
"➸", "➹", "➺", "➻", "➼", "➽", "➾", "⬅", "⬆", "⬇", "☚",
|
||||
"☛", "☜", "☝", "☞", "☟", "⏎", "★", "☆", "⭐", "⍟", "☑", "☒", "☓", "❏", "❐", "❑",
|
||||
"❒", "✁", "✂", "✃", "⚐", "⚑", "⚒", "⚔", "⚖", "⚛", "✌", "✿", "❀",
|
||||
"♂", "⚢", "⚣", "⚤", "⚥", "⚦", "♲", "♺", "♻", "☸", "⚓", "✚", "☤", "⌽", "⌨", "⌘",
|
||||
"⌦", "☕", "♨",
|
||||
"♂", "⚢", "⚣", "⚤", "⚥", "⚦", "♲", "♺", "♻", "☸", "⚓", "✚", "☤", "⌽", "⌨", "⌘",
|
||||
"⌦", "☕", "♨",
|
||||
"⛲", "⛳", "⛵", "⛺", "⛽", "✈", "⚽", "⚾", "⚰", "⚱", "☠", "⛔",
|
||||
"♿", "⊘", "⊗", "☨", "☩", "☭", "☮",
|
||||
"☯", "∝", "☢", "☣", "⚠", "⚡", "♔", "♕", "♖", "♗", "♘", "♙", "♚", "♛", "♜", "♝",
|
||||
"♞", "♟", "♠", "♡", "♢", "♣", "♤", "♥", "❤", "♦", "♧", "⚀", "⚁", "⚂", "⚃", "⚄",
|
||||
"⚅", "☎", "☏", "✆", "•", "‣", "⏩", "⏪", "⏫", "⏬", "✉",
|
||||
"✏", "✒", "✍", "✎", "✏", "✐", "⏰", "⌚", "⏳", "⌛", "✝", "✡", "☪",
|
||||
"✏", "✒", "✍", "✎", "✏", "✐", "⏰", "⌚", "⏳", "⌛", "✝", "✡", "☪",
|
||||
"⛪", "☥", "♰", "♱", "☀", "☁", "☂", "☃", "❄", "☼", "☽", "☾", "☔", "⛄",
|
||||
"⛅", "℃", "℉", "℡", "™", "₩", "€", "₧", "⁇", "⁈", "⁉",
|
||||
"⁋", "‽", "®", "©", "œ", "É", "ᴙ", "«", "»", "¿", "∅", "∘", "∞", "≃", "≄", "≈", "≉",
|
||||
|
|
@ -87,7 +61,7 @@
|
|||
"┗", "┛", "━", "┃", "├", "┤", "┴", "┬", "═", "║", "╔", "╗", "╚", "╝", "╣", "╠", "╦",
|
||||
"╩", "╭", "╮", "╰", "╯", "♩", "♪", "♫", "♬", "♭", "♮", "♯", "『", "』", "【",
|
||||
"】", "〒", "〖", "〗", "'ᴥ'", "〠", "☺", "☹", "☻", "シ", "ῳ", "㎅",
|
||||
"㎆", "㎇", "㎈", "㎉", "㎍", "㎎", "㎏", "㎐", "㎛", "㎜", "㎝", "㎞", "㎟", "㎠", "㎡",
|
||||
"㎆", "㎇", "㎈", "㎉", "㎍", "㎎", "㎏", "㎐", "㎛", "㎜", "㎝", "㎞", "㎟", "㎠", "㎡",
|
||||
"㎢", "㎣", "㎤", "㎥", "㎦",
|
||||
"Ⓐ", "Ⓑ", "Ⓒ", "Ⓓ", "Ⓔ", "Ⓕ", "Ⓖ", "Ⓗ", "Ⓘ", "Ⓙ", "Ⓚ", "Ⓛ", "Ⓜ", "Ⓝ", "Ⓞ", "Ⓟ",
|
||||
"Ⓠ", "Ⓡ", "Ⓢ", "Ⓣ", "Ⓤ", "Ⓥ", "Ⓦ", "Ⓧ", "Ⓨ", "Ⓩ", "ⓐ", "ⓑ", "ⓒ", "ⓓ", "ⓔ", "ⓕ",
|
||||
|
|
@ -105,10 +79,14 @@
|
|||
}
|
||||
echo '<a class="char" href="' . (is_numeric($_GET['page']) ? $_GET['page'] + 1 : 1) . '"><strong>»</strong>Next</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 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>
|
||||
<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