[PATCH 1 of 3] CSS as file.

Liam Crilly l.crilly at f5.com
Mon Jul 24 14:23:12 UTC 2023


# HG changeset patch
# User Liam Crilly <liam.crilly at nginx.com>
# Date 1690207197 -3600
#      Mon Jul 24 14:59:57 2023 +0100
# Node ID df1cf98cf8f50eb1770d966aed583d21e481558b
# Parent  1f672755959a64aec3f0aeceab1dbdc13cb36414
CSS as file.

Extracts the inline styles from style.xsls into separate files for
ease of style-development and to take advantage of browser caching.
Hebrew and Chinese variants are preserved.

Stylesheets are located in a new top-level directory (/css) and are
compressed during the gzip process.

diff -r 1f672755959a -r df1cf98cf8f5 GNUmakefile
--- a/GNUmakefile	Thu Jul 06 18:12:53 2023 +0100
+++ b/GNUmakefile	Mon Jul 24 14:59:57 2023 +0100
@@ -1,6 +1,7 @@
 
 OUT =		libxslt
 TEXT =		text
+CSS =		css
 BANNER =	banner
 ZIP =		gzip
 NGINX_ORG =	/data/www/nginx.org
@@ -73,11 +74,12 @@
 		2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019	\
 		2020 2021 2022
 
-all:		news arx 404 $(LANGS)
+all:		news arx 404 css $(LANGS)
 
 news:		$(OUT)/index.html $(OUT)/index.rss
 arx:		$(foreach year,$(YEARS),$(OUT)/$(year).html)
 404:		$(OUT)/404.html
+css:		$(foreach f,$(wildcard css/*.css),$(OUT)/$(f))
 
 
 DIRIND_DEPS =
@@ -171,6 +173,9 @@
 	mkdir -p $(dir $@)
 	$(call XSLScript, $<, $@)
 
+$(OUT)/css/%.css:      css/%.css
+		mkdir -p $(dir $@)
+		cp $< $@
 
 genapi:
 	$(MAKE) -C yaml
@@ -332,6 +337,7 @@
 		$(addsuffix .gz, $(wildcard $(ZIP)/ru/CHANGES.ru-?.?))	\
 		$(addsuffix .gz, $(wildcard $(ZIP)/ru/CHANGES.ru-?.??))	\
 		$(addsuffix .gz, $(wildcard $(ZIP)/keys/*.key))		\
+		$(addsuffix .gz, $(wildcard $(ZIP)/css/*.css))		\
 
 	find $(ZIP) -type f ! -name '*.gz' -exec test \! -e {}.gz \; -print
 
diff -r 1f672755959a -r df1cf98cf8f5 css/style_cn.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/css/style_cn.css	Mon Jul 24 14:59:57 2023 +0100
@@ -0,0 +1,207 @@
+body {
+    background: white;
+    color: black;
+    font-family: sans-serif;
+    line-height: 1.4em;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+}
+
+#banner {
+    background: black;
+    color: #F2F2F2;
+    line-height: 1.2em;
+    padding: .3em 0;
+    box-shadow: 0 5px 10px black;
+}
+
+#banner a {
+    color: #00B140;
+}
+
+#main {
+    text-align: left;
+    margin: 0 auto;
+    min-width: 32em;
+    max-width: 64em;
+}
+
+#menu {
+    float: right;
+    width: 11em;
+    padding: 0 .5em 1em .5em;
+    border-left: 2px solid #DDD;
+}
+
+ #content {
+    margin-right: 13.5em;
+    padding: 0 .2em 0 1.5em;
+}
+
+h1 {
+    display: block;
+    font-size: 3em;
+    text-align: left;
+    height: .7em;
+    margin: 0;
+    margin-bottom: .5em;
+}
+
+h1 img {
+    width: 100%;
+}
+
+h2 {
+    text-align: center;
+}
+
+p {
+    text-align: left;
+}
+
+table.news p {
+    margin-top: 0;
+}
+
+table.news td {
+    vertical-align: baseline;
+}
+
+table.news .date {
+    text-align: right;
+    padding-right: 0.5em;
+    white-space: nowrap;
+}
+
+table.donors td {
+    vertical-align: baseline;
+}
+
+table.donors li {
+    text-align: left;
+}
+
+div.directive {
+    background: #F2F2F2;
+    line-height: 1em;
+    margin: 1em 0 1em -1em;
+    padding: .7em .7em .7em 1em;
+    border-top: 2px solid #DDD;
+}
+
+div.directive th {
+    padding-left: 0;
+    padding-right: .5em;
+    vertical-align: baseline;
+    text-align: left;
+    font-weight: normal;
+}
+
+div.directive td {
+    vertical-align: baseline;
+}
+
+div.directive pre {
+    padding: 0;
+    margin: 0;
+}
+
+div.directive p {
+    margin: .5em 0 0 .1em;
+    font-size: .8em;
+}
+
+a.notrans {
+    color: gray;
+    text-decoration:none;
+}
+
+span.initial {
+    font-size: 200%;
+    float: left;
+    padding-right: 10pt;
+}
+
+ul, ol {
+    margin: .5em 0 1em 1em;
+    padding: 0 .5em;
+}
+
+ol {
+    list-style-position: inside;
+}
+
+li {
+    text-align: left;
+    padding: .5em 0 0 1px;
+}
+
+.compact li {
+    padding-top: 0;
+}
+
+dl {
+    margin: .5em 0 1em 0;
+}
+
+dt {
+    margin: .5em 0;
+}
+
+.compact dt {
+    margin-bottom: .2em;
+}
+
+dd {
+    margin-left: 1.5em;
+    padding-left: 1px;
+    text-align: left;
+}
+
+td.list {
+    background: #F2F2F2;
+}
+
+blockquote {
+    margin: 1em 0 1em 1em;
+    padding: .5em;
+}
+
+li blockquote, dd blockquote {
+    margin: .7em 0;
+}
+
+blockquote.note {
+    border: 1px dotted #999;
+    line-height: 1.2em;
+    text-align: left;
+}
+
+blockquote.example {
+    line-height: 1em;
+    border-left: 1px solid #BBB;
+}
+
+blockquote.example pre {
+    padding: 0;
+    margin: 0;
+}
+
+sup {
+    font-size: 50%;
+}
+
+.video {
+    position: relative;
+    padding-bottom: 56.25%;
+    overflow: hidden;
+}
+
+.video iframe, .video object, .video embed {
+    position: absolute;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+}
diff -r 1f672755959a -r df1cf98cf8f5 css/style_en.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/css/style_en.css	Mon Jul 24 14:59:57 2023 +0100
@@ -0,0 +1,207 @@
+body {
+    background: white;
+    color: black;
+    font-family: sans-serif;
+    line-height: 1.4em;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+}
+
+#banner {
+    background: black;
+    color: #F2F2F2;
+    line-height: 1.2em;
+    padding: .3em 0;
+    box-shadow: 0 5px 10px black;
+}
+
+#banner a {
+    color: #00B140;
+}
+
+#main {
+    text-align: left;
+    margin: 0 auto;
+    min-width: 32em;
+    max-width: 64em;
+}
+
+#menu {
+    float: right;
+    width: 11em;
+    padding: 0 .5em 1em .5em;
+    border-left: 2px solid #DDD;
+}
+
+ #content {
+    margin-right: 13.5em;
+    padding: 0 .2em 0 1.5em;
+}
+
+h1 {
+    display: block;
+    font-size: 3em;
+    text-align: left;
+    height: .7em;
+    margin: 0;
+    margin-bottom: .5em;
+}
+
+h1 img {
+    width: 100%;
+}
+
+h2 {
+    text-align: center;
+}
+
+p {
+    text-align: justify;
+}
+
+table.news p {
+    margin-top: 0;
+}
+
+table.news td {
+    vertical-align: baseline;
+}
+
+table.news .date {
+    text-align: right;
+    padding-right: 0.5em;
+    white-space: nowrap;
+}
+
+table.donors td {
+    vertical-align: baseline;
+}
+
+table.donors li {
+    text-align: left;
+}
+
+div.directive {
+    background: #F2F2F2;
+    line-height: 1em;
+    margin: 1em 0 1em -1em;
+    padding: .7em .7em .7em 1em;
+    border-top: 2px solid #DDD;
+}
+
+div.directive th {
+    padding-left: 0;
+    padding-right: .5em;
+    vertical-align: baseline;
+    text-align: left;
+    font-weight: normal;
+}
+
+div.directive td {
+    vertical-align: baseline;
+}
+
+div.directive pre {
+    padding: 0;
+    margin: 0;
+}
+
+div.directive p {
+    margin: .5em 0 0 .1em;
+    font-size: .8em;
+}
+
+a.notrans {
+    color: gray;
+    text-decoration:none;
+}
+
+span.initial {
+    font-size: 200%;
+    float: left;
+    padding-right: 10pt;
+}
+
+ul, ol {
+    margin: .5em 0 1em 1em;
+    padding: 0 .5em;
+}
+
+ol {
+    list-style-position: inside;
+}
+
+li {
+    text-align: justify;
+    padding: .5em 0 0 1px;
+}
+
+.compact li {
+    padding-top: 0;
+}
+
+dl {
+    margin: .5em 0 1em 0;
+}
+
+dt {
+    margin: .5em 0;
+}
+
+.compact dt {
+    margin-bottom: .2em;
+}
+
+dd {
+    margin-left: 1.5em;
+    padding-left: 1px;
+    text-align: justify;
+}
+
+td.list {
+    background: #F2F2F2;
+}
+
+blockquote {
+    margin: 1em 0 1em 1em;
+    padding: .5em;
+}
+
+li blockquote, dd blockquote {
+    margin: .7em 0;
+}
+
+blockquote.note {
+    border: 1px dotted #999;
+    line-height: 1.2em;
+    text-align: justify;
+}
+
+blockquote.example {
+    line-height: 1em;
+    border-left: 1px solid #BBB;
+}
+
+blockquote.example pre {
+    padding: 0;
+    margin: 0;
+}
+
+sup {
+    font-size: 50%;
+}
+
+.video {
+    position: relative;
+    padding-bottom: 56.25%;
+    overflow: hidden;
+}
+
+.video iframe, .video object, .video embed {
+    position: absolute;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+}
diff -r 1f672755959a -r df1cf98cf8f5 css/style_he.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/css/style_he.css	Mon Jul 24 14:59:57 2023 +0100
@@ -0,0 +1,222 @@
+body {
+    background: white;
+    color: black;
+    font-family: sans-serif;
+    line-height: 1.4em;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+}
+
+#banner {
+    background: black;
+    color: #F2F2F2;
+    line-height: 1.2em;
+    padding: .3em 0;
+    box-shadow: 0 5px 10px black;
+}
+
+#banner a {
+    color: #00B140;
+}
+
+#main {
+    text-align: left;
+    margin: 0 auto;
+    min-width: 32em;
+    max-width: 64em;
+}
+
+#menu {
+    float: right;
+    width: 11em;
+    padding: 0 .5em 1em .5em;
+    border-left: 2px solid #DDD;
+}
+
+ #content {
+    margin-right: 13.5em;
+    padding: 0 .2em 0 1.5em;
+}
+
+h1 {
+    display: block;
+    font-size: 3em;
+    text-align: left;
+    height: .7em;
+    margin: 0;
+    margin-bottom: .5em;
+}
+
+h1 img {
+    width: 100%;
+}
+
+h2 {
+    text-align: center;
+}
+
+p {
+    text-align: justify;
+}
+
+pre {
+    text-align: left;
+    direction: ltr;
+}
+
+code {
+    direction: ltr;
+    unicode-bidi: embed;
+}
+
+.ltr {
+    direction: ltr;
+    unicode-bidi: embed;
+}
+
+table.news p {
+    margin-top: 0;
+}
+
+table.news td {
+    vertical-align: baseline;
+}
+
+table.news .date {
+    text-align: right;
+    padding-right: 0.5em;
+    white-space: nowrap;
+}
+
+table.donors td {
+    vertical-align: baseline;
+}
+
+table.donors li {
+    text-align: left;
+}
+
+div.directive {
+    background: #F2F2F2;
+    line-height: 1em;
+    margin: 1em 0 1em -1em;
+    padding: .7em .7em .7em 1em;
+    border-top: 2px solid #DDD;
+}
+
+div.directive th {
+    padding-left: 0;
+    padding-right: .5em;
+    vertical-align: baseline;
+    text-align: left;
+    font-weight: normal;
+}
+
+div.directive td {
+    vertical-align: baseline;
+}
+
+div.directive pre {
+    padding: 0;
+    margin: 0;
+}
+
+div.directive p {
+    margin: .5em 0 0 .1em;
+    font-size: .8em;
+}
+
+a.notrans {
+    color: gray;
+    text-decoration:none;
+}
+
+span.initial {
+    font-size: 200%;
+    float: left;
+    padding-right: 10pt;
+}
+
+ul, ol {
+    margin: .5em 0 1em 1em;
+    padding: 0 .5em;
+}
+
+ol {
+    list-style-position: inside;
+}
+
+li {
+    text-align: justify;
+    padding: .5em 0 0 1px;
+}
+
+.compact li {
+    padding-top: 0;
+}
+
+dl {
+    margin: .5em 0 1em 0;
+}
+
+dt {
+    margin: .5em 0;
+}
+
+.compact dt {
+    margin-bottom: .2em;
+}
+
+dd {
+    margin-left: 1.5em;
+    padding-left: 1px;
+    text-align: justify;
+}
+
+td.list {
+    background: #F2F2F2;
+}
+
+blockquote {
+    margin: 1em 0 1em 1em;
+    padding: .5em;
+}
+
+li blockquote, dd blockquote {
+    margin: .7em 0;
+}
+
+blockquote.note {
+    border: 1px dotted #999;
+    line-height: 1.2em;
+    text-align: justify;
+}
+
+blockquote.example {
+    line-height: 1em;
+    border-left: 1px solid #BBB;
+}
+
+blockquote.example pre {
+    padding: 0;
+    margin: 0;
+}
+
+sup {
+    font-size: 50%;
+}
+
+.video {
+    position: relative;
+    padding-bottom: 56.25%;
+    overflow: hidden;
+}
+
+.video iframe, .video object, .video embed {
+    position: absolute;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+}
diff -r 1f672755959a -r df1cf98cf8f5 css/style_ru.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/css/style_ru.css	Mon Jul 24 14:59:57 2023 +0100
@@ -0,0 +1,207 @@
+body {
+    background: white;
+    color: black;
+    font-family: sans-serif;
+    line-height: 1.4em;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+}
+
+#banner {
+    background: black;
+    color: #F2F2F2;
+    line-height: 1.2em;
+    padding: .3em 0;
+    box-shadow: 0 5px 10px black;
+}
+
+#banner a {
+    color: #00B140;
+}
+
+#main {
+    text-align: left;
+    margin: 0 auto;
+    min-width: 32em;
+    max-width: 64em;
+}
+
+#menu {
+    float: right;
+    width: 11em;
+    padding: 0 .5em 1em .5em;
+    border-left: 2px solid #DDD;
+}
+
+ #content {
+    margin-right: 13.5em;
+    padding: 0 .2em 0 1.5em;
+}
+
+h1 {
+    display: block;
+    font-size: 3em;
+    text-align: left;
+    height: .7em;
+    margin: 0;
+    margin-bottom: .5em;
+}
+
+h1 img {
+    width: 100%;
+}
+
+h2 {
+    text-align: center;
+}
+
+p {
+    text-align: justify;
+}
+
+table.news p {
+    margin-top: 0;
+}
+
+table.news td {
+    vertical-align: baseline;
+}
+
+table.news .date {
+    text-align: right;
+    padding-right: 0.5em;
+    white-space: nowrap;
+}
+
+table.donors td {
+    vertical-align: baseline;
+}
+
+table.donors li {
+    text-align: left;
+}
+
+div.directive {
+    background: #F2F2F2;
+    line-height: 1em;
+    margin: 1em 0 1em -1em;
+    padding: .7em .7em .7em 1em;
+    border-top: 2px solid #DDD;
+}
+
+div.directive th {
+    padding-left: 0;
+    padding-right: .5em;
+    vertical-align: baseline;
+    text-align: left;
+    font-weight: normal;
+}
+
+div.directive td {
+    vertical-align: baseline;
+}
+
+div.directive pre {
+    padding: 0;
+    margin: 0;
+}
+
+div.directive p {
+    margin: .5em 0 0 .1em;
+    font-size: .8em;
+}
+
+a.notrans {
+    color: gray;
+    text-decoration:none;
+}
+
+span.initial {
+    font-size: 200%;
+    float: left;
+    padding-right: 10pt;
+}
+
+ul, ol {
+    margin: .5em 0 1em 1em;
+    padding: 0 .5em;
+}
+
+ol {
+    list-style-position: inside;
+}
+
+li {
+    text-align: justify;
+    padding: .5em 0 0 1px;
+}
+
+.compact li {
+    padding-top: 0;
+}
+
+dl {
+    margin: .5em 0 1em 0;
+}
+
+dt {
+    margin: .5em 0;
+}
+
+.compact dt {
+    margin-bottom: .2em;
+}
+
+dd {
+    margin-left: 1.5em;
+    padding-left: 1px;
+    text-align: justify;
+}
+
+td.list {
+    background: #F2F2F2;
+}
+
+blockquote {
+    margin: 1em 0 1em 1em;
+    padding: .5em;
+}
+
+li blockquote, dd blockquote {
+    margin: .7em 0;
+}
+
+blockquote.note {
+    border: 1px dotted #999;
+    line-height: 1.2em;
+    text-align: justify;
+}
+
+blockquote.example {
+    line-height: 1em;
+    border-left: 1px solid #BBB;
+}
+
+blockquote.example pre {
+    padding: 0;
+    margin: 0;
+}
+
+sup {
+    font-size: 50%;
+}
+
+.video {
+    position: relative;
+    padding-bottom: 56.25%;
+    overflow: hidden;
+}
+
+.video iframe, .video object, .video embed {
+    position: absolute;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+}
diff -r 1f672755959a -r df1cf98cf8f5 xsls/style.xsls
--- a/xsls/style.xsls	Thu Jul 06 18:12:53 2023 +0100
+++ b/xsls/style.xsls	Mon Jul 24 14:59:57 2023 +0100
@@ -7,126 +7,8 @@
 
 X:template style (lang) {
 
-    <style type="text/css">!{ normalize-space('
-        body              { background:     white;
-                            color:          black;
-                            font-family:    sans-serif;
-                            line-height:    1.4em;
-                            text-align:     center;
-                            margin:         0;
-                            padding:        0; }
-        #banner           { background:     black;
-                            color:          #F2F2F2;
-                            line-height:    1.2em;
-                            padding:        .3em 0;
-                            box-shadow:     0 5px 10px black; }
-        #banner a         { color:          #00B140; }
-        #main             { text-align:     left;
-                            margin:         0 auto;
-                            min-width:      32em;
-                            max-width:      64em; }
-        #menu             { float:          right;
-                            width:          11em;
-                            padding:        0 .5em 1em .5em;
-                            border-left:    2px solid #DDD; }
-        #content          { margin-right:   13.5em;
-                            padding:        0 .2em 0 1.5em; }
-        h1                { display:        block;
-                            font-size:      3em;
-                            text-align:     left;
-                            height:         .7em;
-                            margin:         0;
-                            margin-bottom:  .5em; }
-        h1 img            { width:          100%; }
-        h2                { text-align:     center; }
-        p                 { text-align:     justify; }
-        table.news p      { margin-top:     0; }
-        table.news td     { vertical-align: baseline; }
-        table.news .date  { text-align:     right;
-                            padding-right:  0.5em;
-                            white-space:    nowrap; }
-        table.donors td   { vertical-align: baseline; }
-        table.donors li   { text-align:     left; }
-        div.directive     { background:     #F2F2F2;
-                            line-height:    1em;
-                            margin:         1em 0 1em -1em;
-                            padding:        .7em .7em .7em 1em;
-                            border-top:     2px solid #DDD; }
-        div.directive th  { padding-left:   0;
-                            padding-right:  .5em;
-                            vertical-align: baseline;
-                            text-align:     left;
-                            font-weight:    normal; }
-        div.directive td  { vertical-align: baseline; }
-        div.directive pre { padding:        0;
-                            margin:         0; }
-        div.directive p   { margin:         .5em 0 0 .1em;
-                            font-size:      .8em; }
-        a.notrans         { color:          gray;
-                            text-decoration:none; }
-        span.initial      { font-size:      200%;
-                            float:          left;
-                            padding-right:  10pt;}
-        ul, ol            { margin:         .5em 0 1em 1em;
-                            padding:        0 .5em; }
-        ol                { list-style-position: inside; }
-        li                { text-align:     justify;
-                            padding:        .5em 0 0 1px; }
-        .compact li       { padding-top:    0; }
-        dl                { margin:         .5em 0 1em 0; }
-        dt                { margin:         .5em 0; }
-        .compact dt       { margin-bottom:  .2em; }
-        dd                { margin-left:    1.5em;
-                            padding-left:   1px;
-                            text-align:     justify; }
-        td.list           { background:     #F2F2F2; }
-        blockquote        { margin:         1em 0 1em 1em;
-                            padding:        .5em; }
-        li blockquote, dd blockquote
-                          { margin:         .7em 0; }
-        blockquote.note   { border:         1px dotted #999;
-                            line-height:    1.2em;
-                            text-align:     justify; }
-        blockquote.example {
-                            line-height:    1em;
-                            border-left:    1px solid #BBB; }
-        blockquote.example pre {
-                            padding:        0;
-                            margin:         0; }
-        sup               { font-size:      50%; }
-        .video            { position: relative;
-                            padding-bottom: 56.25%;
-                            overflow: hidden; }
-        .video iframe,
-        .video object,
-        .video embed      { position: absolute;
-                            top:0;
-                            left:0;
-                            width:100%;
-                            height:100%; }
-        ') }
+    <link rel="stylesheet" href="/css/style_{$lang}.css"></link>
 
-    X:if "$lang = 'he'" {
-        !{ normalize-space('
-        pre               { text-align:     left;
-                            direction:      ltr; }
-        code              { direction:      ltr;
-                            unicode-bidi:   embed; }
-        .ltr              { direction:      ltr;
-                            unicode-bidi:   embed; }
-        ') }
-    }
-
-    X:if "$lang = 'cn'" {
-        !{ normalize-space('
-        p                 { text-align:     left; }
-        li                { text-align:     left; }
-        dd                { text-align:     left; }
-        blockquote.note   { text-align:     left; }
-        ') }
-    }
-
-    </style>
 }
 
 }


More information about the nginx-devel mailing list