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
] [ 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
swap "\n" glue [XML <style><-></style> XML] ;
@ -75,14 +80,16 @@ M: pathname url-of
"conventions" >link topic>filename
[XML
<div class="navbar">
<b> Factor Documentation </b> |
<a href="/">Home</a> |
<a href=<->>Glossary</a> |
<div><b> Factor Documentation </b></div> |
<div><a href="/">Home</a></div> |
<div><a href=<->>Glossary</a></div> |
<div>
<form method="get" action="/search" style="display:inline;">
<input name="search" type="text"/>
<button type="submit">Search</button>
</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>
XML] ;
@ -120,7 +127,7 @@ M: pathname url-of
[ article-title " - Factor Documentation" append ]
[
[ 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 ;
: 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:visited { text-decoration: none; color: #104e8b; }
a:active { text-decoration: none; color: #104e8b; }
a:hover { text-decoration: underline; color: #104e8b; }
.navbar {
background-color: #f3f2ea;
padding: 5px;
border: 1px solid #ccc;
font: 9pt sans-serif;
margin-bottom: 10px;
display: flex;
align-items: baseline;
background-color: #f3f2ea;
padding: 5px;
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>
<body>
<t:html t:name="navbar"/>
<t:html t:name="navbar"/>
<t:if t:value="articles">
<h2>Articles</h2>