rerumaccusamus
Version:
The meta-framework suite designed from scratch for frontend-focused modern web development.
120 lines (105 loc) • 1.99 kB
CSS
html,
body {
padding: 0;
margin: 0;
font-family: nunito_for_arco, Helvetica Neue, Helvetica, PingFang SC,
Hiragino Sans GB, Microsoft YaHei, 微软雅黑, Arial, sans-serif;
}
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: border-box;
}
.container {
min-height: 100vh;
max-width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
main {
padding: 5rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer {
width: 100%;
height: 80px;
border-top: 1px solid #eaeaea;
display: flex;
justify-content: center;
align-items: center;
background-color: #470000;
}
.footer a {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
color: #f4f4f4;
text-decoration: none;
font-size: 1.1rem;
}
.logo {
margin-bottom: 2rem;
}
.logo svg {
width: 450px;
height: 132px;
}
.description {
text-align: center;
line-height: 1.5;
font-size: 1.5rem;
}
.code {
background: #fafafa;
border-radius: 5px;
padding: 0.75rem;
font-size: 1.1rem;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
}
@media (max-width: 600px) {
.grid {
width: 100%;
flex-direction: column;
}
}
.grid {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 800px;
margin-top: 3rem;
}
.card {
margin: 1rem;
padding: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
height: 100px;
color: inherit;
text-decoration: none;
border: 1px solid #470000;
color: #470000;
transition: color 0.15s ease, border-color 0.15s ease;
width: 45%;
}
.card:hover,
.card:focus,
.card:active {
transform: scale(1.05);
transition: 0.1s ease-in-out;
}
.card h2 {
font-size: 1.5rem;
margin: 0;
padding: 0;
}