src/css/global.css
main {
margin: 0;
padding: 4em 0 0;
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
color: #666;
text-align: center;
}
a {
color: inherit;
text-decoration: none;
}
p a {
color: #42b983;
font-weight: 600;
}
#logo {
display: block;
width: 120px;
height: 120px;
margin: 20px auto 40px;
padding: 20px;
position: relative;
border-radius: 50%;
background-color: #35495e;
color: #41b883;
cursor: pointer;
user-select: none;
transition: all 0.3s;
}
#logo:hover {
margin: 10px auto 30px;
padding: 30px;
background-color: #41b883;
color: #35495e;
}
figure .fa-icon {
display: block;
}
#logo .fa-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1 {
margin-bottom: 1em;
font-family: Dosis, 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
}
h1,
h2 {
color: #2c3e50;
font-weight: 300;
}
h2 {
margin-top: 3em;
font-size: 1.2em;
}
.desc {
margin-bottom: 4em;
color: #7f8c8d;
}
p small {
font-size: 0.8em;
color: #7f8c8d;
}
pre {
display: inline-block !important;
margin: 0;
padding: 0.8em !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.125);
text-align: left;
line-height: 1.1;
border-radius: 5px;
}
footer {
margin: 5em 0 3em;
font-size: 0.5em;
vertical-align: middle;
}
footer a {
display: inline-block;
margin: 0 5px;
padding: 3px 0 6px;
color: #7f8c8d;
font-size: 2em;
text-decoration: none;
}
footer a:hover {
padding-bottom: 3px;
border-bottom: 3px solid #42b983;
}
.alert {
color: #c33;
opacity: 0.8;
}
@media (max-width: 640px) {
body {
padding-top: 0;
text-align: left;
}
#logo {
margin: 0 auto;
transform: scale(0.6);
}
#logo:hover {
margin: -10px auto;
}
h1,
p {
padding: 0 25px;
}
h1 {
border-left: 5px solid #2c3e50;
}
h2 {
padding-left: 20px;
border-left: 5px solid rgba(0, 0, 0, 0.1);
}
figure {
margin: 1em 0;
}
pre {
display: block !important;
box-shadow: none;
overflow-x: auto;
font-size: 0.9em;
text-align: center;
}
}
input[type='text'] {
border-radius: 0.5em;
margin: 0.5em;
padding: 0.5em;
border-color: #2c3e50;
}