CSS ============================================================ /* Making textboxes and other text inputs behave normally (i.e. now an input with “width:100%;padding:10px” is going to take 100% of width, not 100%+20px) */ *, *:before, *:after { box-sizing: border-box; } /* Making the footer stick to the bottom of the screen */ body { display: flex; min-height: 100vh; flex-direction: column; } #header > h1 { font-size: 250%; font-weight: 600; margin-bottom: 0px; } #header > h1 span { font-weight: 200; } #header > h1 a { color: inherit; text-decoration: none; } #main { flex: 1; } /* TODO: Remove after instances are moved to #header */ #main > h1 { font-size: 250%; font-weight: 600; margin-bottom: 0px; } #main > h1 span { font-weight: 200; } #main > h1 a { color: inherit; text-decoration: none; } .subtitle { font-weight: 500; color: #e03; margin-top: 0.4em; margin-bottom: 2em; } .subtitle a { color: inherit; border-bottom: 1.5px solid; text-decoration: none; } .subtitle a:hover { color: #f35; } /* headers look bad when the width is small, so */ h1 { line-height: 100%; } /* Other CSS */ #footer { display: flex; flex-flow: row wrap; justify-content: space-around; padding: 1.5em 0 0em 0; margin: 0 -1em; margin-top: 2em; border-top: 1px solid black; } .footer-item { margin: 0 0.75em; min-height: 40px; text-align: center; } body { padding: 0px 15px; padding-top: 2em; margin: auto; max-width: 800px; font-family: sans-serif; line-height: 120%; } #noscript-message { padding: 1px 1em; background-color: #FFEBEE; } #categories { display: flex; flex-flow: row wrap; justify-content: space-between; margin-top: 3em; } #categories-search-results { margin-top: 3em; margin-bottom: 1em; padding-left: 2em; } .category-group { width: 340px; padding: 0 30px; padding-bottom: 50px; } .category-group h2 { font-size: 190%; font-weight: 600; padding: 0px 10px; margin: 0 -36px; margin-top: 0px; margin-bottom: 30px; } /* inside .category-group we have .categories-finished|wip|stub */ .categories-finished { margin-top: -5px; margin-bottom: 17px; } .categories-wip, .categories-stub { margin-bottom: 13px; } .categories-wip, .categories-wip h3, .categories-stub, .categories-stub h3 { font-size: 15px; font-weight: 600; } .categories-wip h3, .categories-stub h3 { margin: 0px; } .categories-wip p, .categories-stub p { padding-left: 2em; margin: 1px 0px; line-height: 18px; } #categories-search-results .category-link, .categories-finished .category-link { font-size: 21px; font-weight: 600; line-height: 28px; display: block; } .categories-wip .category-link, .categories-stub .category-link { white-space: nowrap; } /* category pages */ .category { margin-top: 3em; } .category-title { font-weight: 600; } .item { margin-top: 20px; } .category-info .controls { margin-right: 0.5em; vertical-align: -1px; } .category-info .controls img { opacity: 0.3; height: 20px; } .category-info .group { font-size: 60%; font-weight: normal; color: gray; } .item-body { padding-top: 5px; } .item-traits, .item-notes, .item-description, .item-ecosystem { padding: 10px 15px 20px 15px; } .traits-groups-container { display: flex; flex-wrap: wrap; margin: 0px -15px; } .traits-group { flex: 1; min-width: 300px; padding: 0px 15px; } .traits-group > ul { padding-left: 1em; } .traits-group > ul li { margin: 10px 0px; } .text-button { font-size: 10pt; font-weight: normal; } .text-button::before {content: "[";} .text-button::after {content: "]";} textarea { font-size: 100%; } input { font-size: 100%; } .edit-field-instruction { margin-right: 2em; font-size: 75%; vertical-align: 1px; color: #666; } .text-button > a:visited {color: #008ACE;} h1 > a:visited {color: #008ACE;} /* for header in category pages */ a.anchor { margin-right: 0.5em; color: gray; } form { margin: 0; } textarea { border: 1px solid #ccc; padding: 5px 7px; } textarea:focus { outline: 0px none; border: 1px solid #07C; } textarea.big { padding: 10px; } .fullwidth { width: 100%; } textarea.fullwidth { resize: vertical; } .notes-toc { background-color: rgba(10, 10, 10, 0.1); padding: 1px 0; } .diff-popup { background: white; padding: 20px 30px; text-align: left; margin: 40px auto; position: relative; } .diff-choices { display: flex; flex-flow: row wrap; justify-content: space-between; margin: 0px -10px; } .diff-choices > * { flex: 1; margin-top: 10px; margin: 7px 5px; min-width: 400px; margin-top: 10px; } .diff-choices > * > .text { white-space: pre-wrap; font-family: monospace; border: 1px solid gray; padding: 5px 10px; margin: 5px 0px; font-size: 80%; word-wrap: break-word; } .diff-choices > .var-a > .text { background-color: #fdd; } .diff-choices > .var-b > .text { background-color: #cfc; } .diff-choices > .var-merged > textarea { margin: 5px 0px; width: 100%; } .markdown-supported { height: 1em; }