Merge pull request ocaml#10497 from wiktorkuchta/webman-css

CSS adjustments in post-processed HTML manual (cherry picked from commit f0d61fa)
gerdstolpmann · Mar 24, 2023 · 5125d33 · 5125d33
1 parent 2a5e8f8
commit 5125d33
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 29 deletions.
diff --git a/Changes b/Changes
@@ -33,6 +33,11 @@ OCaml 4.12, maintenance version
   ID when a thread starts.
   (David Allsopp, Nicolás Ojeda Bär, review by Xavier Leroy)
 
+### Manual and documentation
+
+- #10497: Styling changes in the post-processed HTML manual (webman)
+  (Wiktor Kuchta, review by Florian Angeletti)
+
 OCaml 4.12.0 (24 February 2021)
 -------------------------------
 

diff --git a/manual/manual/html_processing/scss/_common.scss b/manual/manual/html_processing/scss/_common.scss
@@ -19,6 +19,10 @@ $logo_height:67px;
 @import url(https://fonts.googleapis.com/css?family=Noticia+Text:400,400i,700);
 @import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,500,500i,600,600i,700,700i);
 
+$font-sans: "Fira Sans", Helvetica, Arial, sans-serif;
+$font-mono: "Fira Mono", courier, monospace;
+$font-serif: "Noticia Text", Georgia, serif;
+
 /* Reset */
 .pre,a,b,body,code,div,em,form,h1,h2,h3,h4,h5,h6,header,html,i,img,li,mark,menu,nav,object,output,p,pre,s,section,span,time,ul,td,var{
     margin:0;
@@ -47,7 +51,7 @@ html.smooth-scroll {
 }
 
 body{
-    font-family:"Fira Sans",Helvetica,Arial,sans-serif;
+    font-family: $font-sans;
     text-align:left;
     color:#333;
     background:#fff
@@ -76,7 +80,7 @@ html {
     &>header {
 	margin-bottom: 30px;
 	nav {
-	    font-family: "Fira Sans", Helvetica, Arial, sans-serif;
+	    font-family: $font-sans;
 	}
     }
 }
@@ -87,7 +91,7 @@ html {
     margin-right:4ex;
     margin-top:20px;
     margin-bottom:50px;
-    font-family:"Noticia Text",Georgia,serif;
+    font-family: $font-serif;
     line-height:1.5
 }
 
@@ -131,7 +135,7 @@ html {
 		padding-left:12px;
 	    }
 	    a {
-		font-family:"Fira Sans",sans-serif;
+		font-family: $font-sans;
 		font-size:.95em;
 		color:#333;
 		font-weight:400;
@@ -250,7 +254,7 @@ html {
     color:$logocolor;
     margin-right:4px;
     margin-left:-1em;
-    font-family:"Fira Sans",Helvetica,Arial,sans-serif;
+    font-family: $font-sans;
     font-size:13px;
     vertical-align:1px;
 }
@@ -260,7 +264,7 @@ html {
     color:$logocolor;
     margin-right:4px;
     margin-left:-1em;
-    font-family:"Fira Sans",Helvetica,Arial,sans-serif;
+    font-family: $font-sans;
     font-size:14px;
     vertical-align:1px;
 }
diff --git a/manual/manual/html_processing/scss/manual.scss b/manual/manual/html_processing/scss/manual.scss
@@ -16,7 +16,7 @@
 	float:left;
 	color:#777;
 	cursor: context-menu;
-	font-family:"Fira Sans",Helvetica,Arial,sans-serif;
+	font-family: $font-sans;
 	span{ /* menu icon */
 	    font-size:22px;
 	    margin-right:1ex;
@@ -63,7 +63,7 @@
 	font-size:smaller;
     }
     section>ul>li>a{ /* for Parts title */
-	font-family:"Fira Sans",Helvetica,Arial,sans-serif;
+	font-family: $font-sans;
 	font-size:larger;
 	background:linear-gradient(to left,#fff 0,#ede8e5 100%);
     }
@@ -143,7 +143,7 @@ a.section-anchor{
     color:#d5d5d5
 }
 .h10,.h7,.h8,.h9,h1,h2,h3,h4,h5,h6{
-    font-family:"Fira Sans",Helvetica,Arial,sans-serif;
+    font-family: $font-sans;
     font-weight:400;
     margin:.5em 0 .5em 0;
     padding-top:.1em;
@@ -185,8 +185,11 @@ h3 code{
 h4{
     font-size:1.12em
 }
+h2, h3, h4, h5 {
+	font-weight: 500;
+}
 .ocaml,.pre,code,pre,tt{
-    font-family:"Fira Mono",courier;
+    font-family: $font-mono;
     font-weight:400
 }
 .pre,pre{
@@ -263,14 +266,13 @@ h1 span{
     color: #d28853;
 }
 blockquote.quote{
-    margin:0;
     /*font-size: smaller;*/
     hr{
 	display:none;
     }
 }
 #part-menu{
-    font-family:"Fira Sans";
+    font-family: $font-sans;
     text-align:right;
     list-style:none;
     overflow-y:hidden;
@@ -280,10 +282,21 @@ blockquote.quote{
     color:#000;
     &::before{@include diamond}
 }
+.center {
+	text-align: center;
+	margin-left: auto;
+	margin-right: auto;
+}
+.display {
+	margin: 0 auto;
+}
+.c001 {
+	border-spacing: 6px;
+	border-collapse: separate;
+}
 span.c003{
     color:#564233;
-    font-family:"Fira Mono",courier;
-    background-color:#f3ece6;
+    font-family: $font-mono;
     border-radius:6px
 }
 div.caml-example.toplevel code.caml-input::before,
@@ -294,25 +307,51 @@ div.caml-example.toplevel div.caml-input::before{
 span.number{
     padding-right: 1ex;
 }
-span.c004, span.c002{
+span.c004, span.c005, span.c007 {
+	font-family: $font-mono;
+}
+span.c003, span.c005 {
+	color: rgba(91, 33, 6, 0.87);
+}
+span.c002{
     color:#888
 }
 span.c006{
     font-weight:700;
     color:#564233;
-    font-family:"Fira Mono",courier;
+    font-family: $font-mono;
 }
-span.c009{
-    font-style:italic;
-    background-color:#f3ece6;
-    border-radius:6px
+.c008 {
+	font-family: $font-sans;
+}
+span.c010 {
+	font-style: italic;
 }
 span.authors{
     font-style:italic;
     background-color:inherit
 }
+span.c011 {
+	font-style: italic;
+}
+.c012 {
+	font-style: italic;
+}
 span.c013{
-    font-weight:700
+    font-style: italic;
+}
+.center table {
+	margin-left: inherit;
+	margin-right: inherit;
+}
+td .c014 {
+	font-weight: bold;
+}
+.c016 {
+	text-align: center;
+}
+.cellpadding1 tr td {
+	padding: 1px 4px;
 }
 .caml-input{
     span.ocamlkeyword{

diff --git a/manual/manual/html_processing/scss/style.scss b/manual/manual/html_processing/scss/style.scss
@@ -39,7 +39,7 @@
 
 .api {
     // font-size: 16px;
-    // font-family: "Fira Sans", Helvetica, Arial, sans-serif;
+    // font-family: $font-sans;
     // text-align: left;
     // color: #333;
     // background: #FFFFFF;
@@ -259,7 +259,7 @@
     we restart the sequence there like h2  */
 
        h1, h2, h3, h4, h5, h6, .h7, .h8, .h9, .h10 {
-	font-family: "Fira Sans", Helvetica, Arial, sans-serif;
+	font-family: $font-sans;
 	font-weight: 400;
 	margin: 0.5em 0 0.5em 0;
 	padding-top: 0.1em;
@@ -316,7 +316,7 @@
     /* Preformatted and code */
 
     tt, code, pre {
-	font-family: "Fira Mono", courier;
+	font-family: $font-mono;
 	font-weight: 400;
     }
 
@@ -705,7 +705,7 @@
     span.arrow {
 	font-size: 20px;
 	line-height: 8pt;
-	font-family: "Fira Mono";
+	font-family: $font-mono;
     }
     header dl dd, header dl dt {
 	display: inline-block;
@@ -742,7 +742,7 @@
     }
 
     ul.tutos_menu {
-	font-family: "Fira Sans";
+	font-family: $font-sans;
 	text-align: right;
 	list-style: none;
     }
@@ -756,7 +756,7 @@
     }
 
     span.c003 {
-	font-family: "Fira Mono", courier;
+	font-family: $font-mono;
 	background-color: #f3ece6;
 	border-radius: 6px;
     }
@@ -793,8 +793,7 @@
 
     code span.constructor,
     .caml-input span.kw2 {
-	font-weight: 500;
-	color: #a28867;
+	color: #8d543c;
     }
 
     .caml-input span.numeric {