UNPKG

rerumaccusamus

Version:

The meta-framework suite designed from scratch for frontend-focused modern web development.

120 lines (105 loc) 1.99 kB
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; }