118 lines
No EOL
1.8 KiB
CSS
118 lines
No EOL
1.8 KiB
CSS
body{
|
|
background: #eee;
|
|
font-family: NoTo, sans-serif;
|
|
}
|
|
|
|
.char{
|
|
display: inline-block;
|
|
width: 100px;
|
|
height: 85px;
|
|
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;
|
|
}
|
|
|
|
.clear{
|
|
clear: both;
|
|
}
|
|
|
|
a, a.char span{
|
|
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;
|
|
}
|
|
} |