[PATCH 3 of 3] Stylesheet style changes.
Liam Crilly
l.crilly at f5.com
Mon Jul 24 14:26:41 UTC 2023
# HG changeset patch
# User Liam Crilly <liam.crilly at 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 */
+ at 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 */
+ at 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;
+ }
+}
More information about the nginx-devel
mailing list