charmap/htdocs/css/style.css

124 lines
1.9 KiB
CSS

body{
background: #eee;
font-family: sans-serif;
}
.char{
display: inline-block;
width: 100px;
height: 100px;
text-align: center;
border: #ccc 1px solid;
background: #fff;
margin: 5px;
font-size: 12px;
color: #666;
text-decoration: none;
overflow: hidden;
float: left;
}
.char span{
font-size: 40px;
display: block;
color: #000;
padding: 5px;
/* font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", NoTo, NotoEmoji, sans-serif; */
}
.link-button {
background: none;
border: none;
/*cursor: pointer; */
}
.clear{
clear: both;
}
a, a.char span{
color: #006699;
}
.welcome{
width: 548px;
}
.welcome a{
color: #006699;
text-decoration: none;
}
.search{
width: 314px;
padding-top: 26px;
height: 59px;
text-align: center;
padding-left: 10px;
}
.search>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;
}
}