html: Modernizing the styling for html help.
parent
71ad025aaf
commit
99d7297554
|
@ -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 -- )
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue