commit 76382c67c8cd40bacd2c3736d4dc4cc2c0f8453d
parent 17e68fe3ad88042864fc7959498fa743fb2eacbf
Author: Leah (ctucx) <leah@ctu.cx>
Date: Thu, 26 May 2022 18:19:51 +0200
parent 17e68fe3ad88042864fc7959498fa743fb2eacbf
Author: Leah (ctucx) <leah@ctu.cx>
Date: Thu, 26 May 2022 18:19:51 +0200
add new css
1 file changed, 249 insertions(+), 173 deletions(-)
diff --git a/style.css b/style.css @@ -1,257 +1,333 @@ -body { - color: #000; - background-color: #fff; - font-family: sans-serif; - max-width: 800px; - margin: 8px auto; - padding: 5px; - line-height: 1.5; -} - -#branches, -#tags, -#index, -#log, -#files { +* { font-family: monospace; + line-height: 1.25; } -#head, #content, .table-container { - max-width: 800px; - overflow-x: auto; - margin: auto; +*, ::after, ::before { + box-sizing: border-box; } -#log, #index { - min-width: 600px; - width: 100%; - overflow-x: auto; +body { + margin: 0 auto; + max-width: 960px; } -pre:not(#about) { - overflow-x: auto; - border: 1px solid #d2d2d2; - border-radius: 4px; - padding: 10px; +img { + max-width: 900px; } a { - color: #00c; + color: black; + text-decoration: none; +} + +a:hover { + text-decoration: underline; } -#head table { - margin-top: 0.5em; - margin-bottom: 0.5em; +header { + margin: 10px; } -#head table td:first-child { - padding: 0 0.4em 0 0; +header h1 { + color: #000; + font-size: 2em; + font-weight: bold; + margin-bottom: 0; } -#head table td:last-child { - padding: 0 0 0 0.4em; +header p { + color: #777; + margin-top: 0; } -#head p { - margin: 0; +nav { + margin-top: 2em; + padding: 0px 1em; + vertical-align: bottom; } -#files .dir { - font-weight: bold; +nav a { + color: #777; text-decoration: none; + padding: 2px 0.75em; + font-size: 110%; } -.url { - font-family: monospace; +nav a.active { + color: #000; + background-color: #ccc; +} + +main { + padding: 1em; } -#home h1 { - font-size: 1.5em; +footer { + margin-top: 0; text-align: center; - margin-top: 1em; + font-size: 1em; + color: #ccc; } -#home h2 { - font-size: 1.25em; - margin-top: 2.5em; +dl { + margin: 0; margin-bottom: 1em; } -h1, h2, h3, h4, h5, h6 { - font-size: 1em; - margin: 0; +.breadcrumb { + background-color: #ccc; + padding: 2px 1em; } -.md h1 { - font-size: 1.5em; + + +/*** + * + * Tables + * + ***/ + +table { + width: 100%; } -.md h2 { - font-size: 1.25em; +thead { + font-weight: bold; } -img, svg, h1, h2 { - vertical-align: middle; +table.files > thead > tr > td:nth-of-type(1) { + width: 10%; } -img, svg { - border: 0; +table.files > thead > tr > td:nth-of-type(2) { + width: 70%; } -a:target { - background-color: #ccc; +table.files > thead > tr > td:nth-of-type(3), +table.files > thead > tr > td:nth-of-type(4) { + width: 10%; } -a.d, -a.h, -a.i, -a.line { - text-decoration: none; +table.repositories > tbody > tr > td:nth-of-type(3), +table.files > tbody > tr > td:nth-of-type(1) { + white-space: nowrap; } -#blob a { - color: #777; + + +/*** + * + * diffstat + * + ***/ + +.diffstat { + width: 100%; + display: table; } -#blob a:hover { - color: blue; - text-decoration: none; +.diffstat > div { + display: table-row; } -table thead td { - font-weight: bold; +.diffstat > div > div { + display: table-cell; } -table td { - padding: 0 0.4em; +.diffstat > div > div:nth-of-type(1) { + padding-right: 12px; } -#content table td { - vertical-align: top; - white-space: nowrap; +.diffstat > div > div:nth-of-type(3), +.diffstat > div > div:nth-of-type(4) { + padding-right: 5px; } -#branches tr:hover td, -#tags tr:hover td, -#index tr:hover td, -#log tr:hover td, -#files tr:hover td { - background-color: #eee; +.diffstat > div > div:nth-of-type(2) { + padding-right: 15px; } -#index tr td:nth-child(2), -#tags tr td:nth-child(3), -#branches tr td:nth-child(3), -#log tr td:nth-child(2) { - white-space: normal; +.diffstat > div > div:nth-of-type(1), +.diffstat > div > div:nth-of-type(2), +.diffstat > div > div:nth-of-type(3), +.diffstat > div > div:nth-of-type(4) { + width: 1%; + white-space: nowrap; } -td.num { - text-align: right; + + +/*** + * + * events (e.g. commit) + * + ***/ + +.event { + text-overflow: ellipsis; + overflow: hidden; + padding: .5rem; + margin: .5rem 0; + background: #f8f9fa; } -.desc { - color: #777; +.event :last-child { + margin-bottom: 0; +} + +.event pre { + padding-left: 0; + padding-right: 0; + background: 0 0; + display: block; + font-size: 87.5%; + color: #212529; +} + +.event .commit pre { + text-overflow: ellipsis; + overflow: none; +} + +.log a { + text-decoration: none; } -hr { - border: 0; - border-top: 1px solid #777; - height: 1px; +.log div:hover { + background-color: #ddd; } + +/*** + * + * code viewer (blob page) + * + ***/ + pre { - font-family: monospace; + background-color: #ddd; + color: #212529; + overflow: auto; + margin: 0; + padding: .25rem; + font-size: 85%; } -.A, -span.i, -pre a.i { - color: #181; +pre code, pre .line-number { + display: block; } -.D, -span.d, -pre a.d { - color: #e02; +pre .line-number { + color: black; + float: left; + margin: 0 1em 0 -1em; + border-right: 1px solid; + text-align: right; } -pre a.h:hover, -pre a.i:hover, -pre a.d:hover { - text-decoration: none; +pre .line-number a { + padding: 0 .5em 0 1em; } -.md table { - border-collapse: collapse; - margin: 1em 1em; - border: 1px solid #d2d2d2; +.insertion { + color: #080; } -.md table td, -.md table th { - padding: 0.25em 1em; - border: 1px solid #d2d2d2; +.deletion { + color: #800; } -#index .cat td { + +/*** + * + * overview page + * + ***/ + +td.sublevel-repo { + padding-left: 1.5em; +} + +td.reposection { + color: #888; font-style: italic; } -#index .repo td:first-child { - padding-left: 1.5em; + + +/*** + * + * grid-system + * + ***/ + +.container { + width: 100%; + margin-left: -2%; + margin-right: -2%; +} + +.row { + position: relative; + width: 100%; +} + +.row [class^="col"] { + float: left; + margin: 0 2%; + min-height: 0.125rem; +} + +.row::after { + content: ""; + display: table; + clear: both; +} + + +.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { + width: 96%; +} + +@media only screen and (min-width: 45em) { /* 720px */ + .col-1 { width: 4.33%; } + .col-2 { width: 12.66%; } + .col-3 { width: 21%; } + .col-4 { width: 29.33%; } + .col-5 { width: 37.66%; } + .col-6 { width: 46%; } + .col-7 { width: 54.33%; } + .col-8 { width: 62.66%; } + .col-9 { width: 71%; } + .col-10 { width: 79.33%; } + .col-11 { width: 87.66%; } + .col-12 { width: 96%; } +} + + + +/*** + * + * helper + * + ***/ + +.responsive { + width: 100%; + overflow: auto; +} + +.center-text { + text-align: center; +} + +.right { + float: right; } -@media (prefers-color-scheme: dark) { - body { - background-color: #111; - color: #ccc; - } - hr { - border-color: #555; - } - a { - color: #4d80b3; - } - a:target { - background-color: #222; - } - .desc { - color: #aaa; - } - #blob a { - color: #555; - } - #blob a:target { - color: #eee; - } - #blob a:hover { - color: #56c8ff; - } - pre a.h { - color: #0bb; - } - .A, - span.i, - pre a.i { - color: #1a1; - } - .D, - span.d, - pre a.d { - color: #e44; - } - #branches tr:hover td, - #tags tr:hover td, - #index tr:hover td, - #log tr:hover td, - #files tr:hover td { - background-color: #111; - } - pre:not(#about), - .md table, - .md table td, - .md table th { - border-color: #555; - } +.clearfix::after { + content: ""; + clear: both; + display: table; }