html: Modernizing the styling for html help.

html-help-styling
Doug Coleman 2019-12-16 23:36:20 -06:00
parent 71ad025aaf
commit 99d7297554
3 changed files with 36 additions and 12 deletions

View File

@ -67,7 +67,12 @@ M: pathname url-of
prepend prepend
] [ drop f ] if ; ] [ drop f ] if ;
: help-stylesheet ( stylesheet -- xml ) : prepend-help-viewport ( xml -- xml' )
[XML
<meta name="viewport" content="width=device-width, initial-scale=1" />
XML] prepend ;
: help-stylesheet ( assoc -- xml' )
"vocab:help/html/stylesheet.css" ascii file-contents "vocab:help/html/stylesheet.css" ascii file-contents
swap "\n" glue [XML <style><-></style> XML] ; swap "\n" glue [XML <style><-></style> XML] ;
@ -75,14 +80,16 @@ M: pathname url-of
"conventions" >link topic>filename "conventions" >link topic>filename
[XML [XML
<div class="navbar"> <div class="navbar">
<b> Factor Documentation </b> | <div><b> Factor Documentation </b></div> |
<a href="/">Home</a> | <div><a href="/">Home</a></div> |
<a href=<->>Glossary</a> | <div><a href=<->>Glossary</a></div> |
<div>
<form method="get" action="/search" style="display:inline;"> <form method="get" action="/search" style="display:inline;">
<input name="search" type="text"/> <input name="search" type="text"/>
<button type="submit">Search</button> <button type="submit">Search</button>
</form> </form>
<a href="http://factorcode.org" style="float:right; padding: 4px;">factorcode.org</a> </div>
<div><a href="http://factorcode.org">factorcode.org</a></div>
</div> </div>
XML] ; XML] ;
@ -120,7 +127,7 @@ M: pathname url-of
[ article-title " - Factor Documentation" append ] [ article-title " - Factor Documentation" append ]
[ [
[ print-topic ] with-html-writer css-styles-to-classes [ print-topic ] with-html-writer css-styles-to-classes
[ help-stylesheet ] [ help-navbar prepend ] bi* [ help-stylesheet prepend-help-viewport ] [ help-navbar prepend ] bi*
] bi simple-page ; ] bi simple-page ;
: generate-help-file ( topic -- ) : generate-help-file ( topic -- )

View File

@ -1,12 +1,29 @@
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
}
@media (max-width: 35em) {
:root {
//font-size: 5.125em;
}
}
@media (min-width: 50em) {
}
a:link { text-decoration: none; color: #104e8b; } a:link { text-decoration: none; color: #104e8b; }
a:visited { text-decoration: none; color: #104e8b; } a:visited { text-decoration: none; color: #104e8b; }
a:active { text-decoration: none; color: #104e8b; } a:active { text-decoration: none; color: #104e8b; }
a:hover { text-decoration: underline; color: #104e8b; } a:hover { text-decoration: underline; color: #104e8b; }
.navbar { .navbar {
background-color: #f3f2ea; display: flex;
padding: 5px; align-items: baseline;
border: 1px solid #ccc; background-color: #f3f2ea;
font: 9pt sans-serif; padding: 5px;
margin-bottom: 10px; border: 1px solid #ccc;
font: 9pt sans-serif;
margin-bottom: 10px;
} }
.navbar div:last-child {
margin-left: auto;
padding: 4px;
}

View File

@ -32,7 +32,7 @@
</head> </head>
<body> <body>
<t:html t:name="navbar"/> <t:html t:name="navbar"/>
<t:if t:value="articles"> <t:if t:value="articles">
<h2>Articles</h2> <h2>Articles</h2>