/* Shared styles for all pages. Pages opt in with a class on : narrow / wide (page width) or http-error (403/404/500). */ body.narrow { max-width: 40rem; } body.wide { max-width: 60rem; } body.http-error a { color: red; } img { max-width: 100%; height: auto; } .error { color: #c0392b; } .hint { color: #666; font-size: 0.85rem; } #error { min-height: 1.2em; margin-bottom: 0.75rem; } #result { word-break: break-word; } /* Forms */ form { display: flex; flex-direction: column; gap: 1rem; margin: 1.5rem 0 1rem; } form > button { align-self: flex-start; } label { display: flex; flex-direction: column; gap: 0.25rem; } label.error { color: #c0392b; } .row { display: flex; gap: 2rem; flex-wrap: wrap; } .row > div { flex: 1 1 18rem; min-width: 0; } .inline { display: flex; gap: 0.5rem; } form input, form textarea, form button { font: inherit; padding: 0.6rem 0.8rem; border: 1px solid #bbb; border-radius: 6px; box-sizing: border-box; } form input, form textarea { width: 100%; min-width: 0; } .inline input { flex: 1; width: auto; } form input:focus, form textarea:focus { outline: none; border-color: #3b7ddd; box-shadow: 0 0 0 3px rgba(59, 125, 221, 0.25); } form button { border: 0; background: #3b7ddd; color: #fff; cursor: pointer; } form button:hover { background: #2f68bb; } form button.secondary { background: #6c757d; } form button.secondary:hover { background: #565e64; } textarea.mono { font-family: monospace; font-size: 0.8rem; resize: vertical; white-space: pre; overflow-x: auto; } /* ASL index */ .list { display: flex; flex-direction: column; border: 1px solid #ddd; border-radius: 6px; overflow: hidden; } .list a { padding: 0.6rem 1rem; font-size: large; text-decoration: none; border-top: 1px solid #ddd; } .list a:first-child { border-top: 0; } .list a:hover { background: #f0f4fa; } /* Tutorials */ pre code.hljs { background: #f3f4f6; border-radius: 6px; padding: 0.8rem 1rem; } /* Home page */ main { font-family: monospace; margin: 13px 0; line-height: normal; } main p, main .section { margin: 0 0 2.3em; } main .links { margin-bottom: 2.3em; } .section { display: grid; grid-template-columns: 22ch 1fr; } .section h2 { font: inherit; margin: 0; } .section ul { list-style: none; margin: 0; padding: 0; } .section li { padding-left: 2ch; text-indent: -2ch; } .section li::before { content: "- "; } .section + .section { margin-top: -1.15em; } figure { margin: 0; } @media (max-width: 700px) { .section { grid-template-columns: 1fr; } .section + .section { margin-top: 0; } .section h2 { margin-bottom: 0.3em; } }