# HG changeset patch # User Liam Crilly <liam.cri...@nginx.com> # Date 1690207410 -3600 # Mon Jul 24 15:03:30 2023 +0100 # Node ID 29929155db5ad60e9f9c201d74fb73889287848f # Parent c4018ab31dc52632f470298fcc7cece1fd8f57b9 Stylesheet style changes.
Optimized for readability, including support for dark mode. diff -r c4018ab31dc5 -r 29929155db5a css/style_en.css --- a/css/style_en.css Mon Jul 24 15:01:25 2023 +0100 +++ b/css/style_en.css Mon Jul 24 15:03:30 2023 +0100 @@ -9,13 +9,12 @@ } #banner { - background: black; - color: #F2F2F2; + background: #000; + color: #f2f2f2; line-height: 1.2em; padding: .3em 0; - box-shadow: 0 5px 10px black; + box-shadow: 0 5px 10px #000; } - #banner a { color: #00B140; } @@ -24,7 +23,7 @@ text-align: left; margin: 0 auto; min-width: 32em; - max-width: 64em; + max-width: 66em; } #menu { @@ -46,9 +45,9 @@ margin:0; } - #content { +#content { margin-right: 13.5em; - padding: 0 .2em 0 1.5em; + padding: 0 2.5em 0 1.5em; } h1 { @@ -63,11 +62,23 @@ } h2 { - text-align: center; + font-size: 2rem; + line-height: 3.25rem; + margin: 1rem 0 .5rem 0; +} + +h4 { + font-size: 1.5rem; + margin: 2rem 0 .5rem 0; +} +/* Center field override */ +center h4 { + text-align: left!important; } p { text-align: justify; + margin-bottom: 0; } table.news p { @@ -80,7 +91,7 @@ table.news .date { text-align: right; - padding-right: 0.5em; + padding: 0.75rem 0.5rem 0 0; white-space: nowrap; } @@ -94,10 +105,11 @@ div.directive { background: #F2F2F2; + border-top: 2px solid #DDD; line-height: 1em; margin: 1em 0 1em -1em; padding: .7em .7em .7em 1em; - border-top: 2px solid #DDD; + width:100%; } div.directive th { @@ -117,13 +129,19 @@ margin: 0; } +div.directive code { + background: none!important; + padding: 0!important; + border: none; +} + div.directive p { margin: .5em 0 0 .1em; font-size: .8em; } a.notrans { - color: gray; + color: #808080; text-decoration:none; } @@ -143,7 +161,6 @@ } li { - text-align: justify; padding: .5em 0 0 1px; } @@ -156,7 +173,8 @@ } dt { - margin: .5em 0; + margin: 1em 0 0 0!important; + font-size: 0.9rem; } .compact dt { @@ -164,18 +182,18 @@ } dd { - margin-left: 1.5em; + margin: 0.25rem 0 1.5rem 1rem; padding-left: 1px; text-align: justify; } td.list { - background: #F2F2F2; + background: #f2f2f2; } blockquote { - margin: 1em 0 1em 1em; - padding: .5em; + margin: 0.5rem 0 0 0; + padding: 0; } li blockquote, dd blockquote { @@ -183,19 +201,49 @@ } blockquote.note { + padding: 0.5rem; border: 1px dotted #999; line-height: 1.2em; text-align: justify; } +pre { + border: 0; + display: block; + margin: 1em 0; + padding: 0.6em 1em; + overflow-x: auto; + line-height: 1.05rem; +} + +code,.legacy{ + font-size: 100%; + padding: 3px 7px; + overflow-x: scroll; + white-space: nowrap; + background: #eee; +} + +pre code{ + background: none; + padding: 0; + border-radius: 0; +} + +blockquote pre { + background-color: #f8f8f8!important; + color: #222!important; + margin: 0; + border: 1px solid #ddd; +} + +blockquote.terminal pre{ + background-color: #444!important; + color: #fff!important; +} + blockquote.example { line-height: 1em; - border-left: 1px solid #BBB; -} - -blockquote.example pre { - padding: 0; - margin: 0; } sup { @@ -210,10 +258,10 @@ .video iframe, .video object, .video embed { position: absolute; - top:0; - left:0; - width:100%; - height:100%; + top: 0; + left: 0; + width: 100%; + height: 100%; } @media screen and (max-width:768px) { @@ -337,3 +385,40 @@ display: none; } } + +/* Dark Mode */ +@media (prefers-color-scheme: dark) { + body { + background-color: #1c262d; + color:#eee; + } + h1,h2,h3,h4,h5,h6,p { + color: #eee; + } + a { + color: #55A4F1; + text-decoration: underline; + } + a:visited { + color: #8b79c0!important; + } + .nav { + background:var(--black); + } + #menu a { + color: #55A4F1; + } + blockquote pre { + color: #ddd!important; + background: #0f1b29!important; + border: 1px solid #132235; + } + div.directive { + background: #0c1622!important; + border-top: 2px solid #203c5e!important; + } + code { + background:#0c1622; + color: #ddd!important; + } +} diff -r c4018ab31dc5 -r 29929155db5a css/style_ru.css --- a/css/style_ru.css Mon Jul 24 15:01:25 2023 +0100 +++ b/css/style_ru.css Mon Jul 24 15:03:30 2023 +0100 @@ -9,13 +9,12 @@ } #banner { - background: black; - color: #F2F2F2; + background: #000; + color: #f2f2f2; line-height: 1.2em; padding: .3em 0; - box-shadow: 0 5px 10px black; + box-shadow: 0 5px 10px #000; } - #banner a { color: #00B140; } @@ -24,7 +23,7 @@ text-align: left; margin: 0 auto; min-width: 32em; - max-width: 64em; + max-width: 66em; } #menu { @@ -46,9 +45,9 @@ margin:0; } - #content { +#content { margin-right: 13.5em; - padding: 0 .2em 0 1.5em; + padding: 0 2.5em 0 1.5em; } h1 { @@ -63,11 +62,23 @@ } h2 { - text-align: center; + font-size: 2rem; + line-height: 3.25rem; + margin: 1rem 0 .5rem 0; +} + +h4 { + font-size: 1.5rem; + margin: 2rem 0 .5rem 0; +} +/* Center field override */ +center h4 { + text-align: left!important; } p { text-align: justify; + margin-bottom: 0; } table.news p { @@ -80,7 +91,7 @@ table.news .date { text-align: right; - padding-right: 0.5em; + padding: 0.75rem 0.5rem 0 0; white-space: nowrap; } @@ -94,10 +105,11 @@ div.directive { background: #F2F2F2; + border-top: 2px solid #DDD; line-height: 1em; margin: 1em 0 1em -1em; padding: .7em .7em .7em 1em; - border-top: 2px solid #DDD; + width:100%; } div.directive th { @@ -117,13 +129,19 @@ margin: 0; } +div.directive code { + background: none!important; + padding: 0!important; + border: none; +} + div.directive p { margin: .5em 0 0 .1em; font-size: .8em; } a.notrans { - color: gray; + color: #808080; text-decoration:none; } @@ -143,7 +161,6 @@ } li { - text-align: justify; padding: .5em 0 0 1px; } @@ -156,7 +173,8 @@ } dt { - margin: .5em 0; + margin: 1em 0 0 0!important; + font-size: 0.9rem; } .compact dt { @@ -164,18 +182,18 @@ } dd { - margin-left: 1.5em; + margin: 0.25rem 0 1.5rem 1rem; padding-left: 1px; text-align: justify; } td.list { - background: #F2F2F2; + background: #f2f2f2; } blockquote { - margin: 1em 0 1em 1em; - padding: .5em; + margin: 0.5rem 0 0 0; + padding: 0; } li blockquote, dd blockquote { @@ -183,19 +201,49 @@ } blockquote.note { + padding: 0.5rem; border: 1px dotted #999; line-height: 1.2em; text-align: justify; } +pre { + border: 0; + display: block; + margin: 1em 0; + padding: 0.6em 1em; + overflow-x: auto; + line-height: 1.05rem; +} + +code,.legacy{ + font-size: 100%; + padding: 3px 7px; + overflow-x: scroll; + white-space: nowrap; + background: #eee; +} + +pre code{ + background: none; + padding: 0; + border-radius: 0; +} + +blockquote pre { + background-color: #f8f8f8!important; + color: #222!important; + margin: 0; + border: 1px solid #ddd; +} + +blockquote.terminal pre{ + background-color: #444!important; + color: #fff!important; +} + blockquote.example { line-height: 1em; - border-left: 1px solid #BBB; -} - -blockquote.example pre { - padding: 0; - margin: 0; } sup { @@ -210,10 +258,10 @@ .video iframe, .video object, .video embed { position: absolute; - top:0; - left:0; - width:100%; - height:100%; + top: 0; + left: 0; + width: 100%; + height: 100%; } @media screen and (max-width:768px) { @@ -337,3 +385,40 @@ display: none; } } + +/* Dark Mode */ +@media (prefers-color-scheme: dark) { + body { + background-color: #1c262d; + color:#eee; + } + h1,h2,h3,h4,h5,h6,p { + color: #eee; + } + a { + color: #55A4F1; + text-decoration: underline; + } + a:visited { + color: #8b79c0!important; + } + .nav { + background:var(--black); + } + #menu a { + color: #55A4F1; + } + blockquote pre { + color: #ddd!important; + background: #0f1b29!important; + border: 1px solid #132235; + } + div.directive { + background: #0c1622!important; + border-top: 2px solid #203c5e!important; + } + code { + background:#0c1622; + color: #ddd!important; + } +} _______________________________________________ nginx-devel mailing list nginx-devel@nginx.org https://mailman.nginx.org/mailman/listinfo/nginx-devel