html, body { font-size: 100%; } body { font-family: sans-serif; background: url("images/floating-cogs.svg"), hsl(52, 75%, 50%); color: hsl(232, 76%, 35%); display: grid; grid-template-columns: [side-right] 10em [main] auto [side-right] 10em; grid-template-rows: [header] 4em [sub-header] 4em [main] auto; grid-template-areas: ". header ." ". header " ". content ."; } h1 { grid-column-start: main; grid-row: header / span 2; justify-self: center; align-self: center; } h2 ~ h1 { grid-row: header / span 1; } h2 { grid-column-start: main; grid-row-start: sub-header; justify-self: center; align-self: center; } pre { white-space: pre-wrap; word-break: break-all; } /*****************************************************************************/ .back-button-main { grid-column-start: side-right; grid-row-start: header; justify-self: center; align-self: center; color: inherit; font-weight: bold; text-decoration: none; } /*****************************************************************************/ .project-list { grid-column-start: main; grid-row-start: main; justify-self: center; } .project-list > a { display: inline-block; margin: 1em; padding: 1em 2em; background: hsla(202, 75%, 50%, 0.8); color: inherit; font-size: 2em; text-decoration: none; } /*****************************************************************************/ .error-list { grid-column-start: main; grid-row-start: main; display: table; margin: 0; padding: 0.5em 2em 1em 2em; list-style-type: none; background: hsla(22, 76%, 50%, 0.68); } .error-list-header > span { display: table-cell; margin: 0.25em 0; padding: 1em 0 1.5em 0; font-weight: bold; } .error-list > a, .error-list > div { display: table-row; } .error-list > a { color: inherit; text-decoration: none; } .error-list > a > span { display: table-cell; padding: 0.5em 0; } .error-list .summary { width: auto; } .error-list .last-updated { width: 10%; } .error-list .reports-count { width: 3em; text-align: center; } .reports-count > span { display: inline-block; min-width: 1.25em; line-height: 1.25em; padding: 0.25em; text-align: center; border-radius: 50%; background: hsla(232, 76%, 50%, 0.4); } /*****************************************************************************/ .report-list { grid-column-start: main; grid-row-start: main; max-width: 100%; } .report { --padding-vertical: 0.25em; --padding-horizontal: 1em; background: hsla(202, 76%, 50%, 0.8); margin: 1em 0; padding: var(--padding-vertical) 0; } .report > div:first-child { font-weight: bold; padding: var(--padding-vertical) var(--padding-horizontal); } .report .version { float: right; } .report > pre { background: rgba(238, 238, 238, 0.8); padding: var(--padding-vertical) var(--padding-horizontal); } /* * rgb(226,105,34) * rgb(226,201,34) * rgb(155,226,34) * rgb(34,59,226) * * rgb(105,34,226) * rgb(34,155,226) */