websites.factorcode: better mobile responsive css.

flac
John Benediktsson 2020-02-29 08:06:59 -08:00 committed by Steve Ayerhart
parent 4e97e9a8fb
commit ac5b03baab
No known key found for this signature in database
GPG Key ID: 5BFD39C5359E967D
3 changed files with 50 additions and 20 deletions

View File

@ -37,7 +37,7 @@ CONSTANT: cpus
render-grid-header render-grid-header
cpus [ quot render-grid-row ] map cpus [ quot render-grid-row ] map
[XML [XML
<table id="downloads" cellspacing="0"> <table class="downloads" cellspacing="0">
<tr><th class="nobg">OS/CPU</th><-></tr> <tr><th class="nobg">OS/CPU</th><-></tr>
<-> <->
</table> </table>

View File

@ -12,6 +12,7 @@ webapps.mason.utils webapps.mason.version.data xml.writer xmode.highlight ;
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
@ -31,10 +32,7 @@ webapps.mason.utils webapps.mason.version.data xml.writer xmode.highlight ;
<p>The <b>Factor programming language</b> is a <a href="http://www.concatenative.org/">concatenative</a>, stack-based programming language with <a href="http://concatenative.org/wiki/view/Factor/Features/The%20language">high-level features</a> including dynamic types, extensible syntax, macros, and garbage collection. On a practical side, Factor has a <a href="http://docs.factorcode.org/content/article-vocab-index.html">full-featured library</a>, supports many different platforms, and has been extensively documented.</p> <p>The <b>Factor programming language</b> is a <a href="http://www.concatenative.org/">concatenative</a>, stack-based programming language with <a href="http://concatenative.org/wiki/view/Factor/Features/The%20language">high-level features</a> including dynamic types, extensible syntax, macros, and garbage collection. On a practical side, Factor has a <a href="http://docs.factorcode.org/content/article-vocab-index.html">full-featured library</a>, supports many different platforms, and has been extensively documented.</p>
<p>The implementation is <a href="http://concatenative.org/wiki/view/Factor/Optimizing%20compiler">fully compiled</a> for performance, while still supporting <a href="http://concatenative.org/wiki/view/Factor/Interactive%20development">interactive development</a>. Factor applications are portable between all common platforms. Factor can <a href="http://concatenative.org/wiki/view/Factor/Deployment">deploy stand-alone applications</a> on all platforms. Full <a href="https://github.com/factor/factor">source code</a> for the Factor project is available under a <a href="https://factorcode.org/license.txt">BSD license</a>.</p> <p>The implementation is <a href="http://concatenative.org/wiki/view/Factor/Optimizing%20compiler">fully compiled</a> for performance, while still supporting <a href="http://concatenative.org/wiki/view/Factor/Interactive%20development">interactive development</a>. Factor applications are portable between all common platforms. Factor can <a href="http://concatenative.org/wiki/view/Factor/Deployment">deploy stand-alone applications</a> on all platforms. Full <a href="https://github.com/factor/factor">source code</a> for the Factor project is available under a <a href="https://factorcode.org/license.txt">BSD license</a>.</p>
<table> <div class="left">
<tr>
<td width="50%" valign="top">
<ul> <ul>
<li><a href="https://concatenative.org/wiki/view/Factor">Learn more about Factor</a></li> <li><a href="https://concatenative.org/wiki/view/Factor">Learn more about Factor</a></li>
@ -47,8 +45,10 @@ webapps.mason.utils webapps.mason.version.data xml.writer xmode.highlight ;
<li>Screenshots on <a href="https://factorcode.org/factor-macosx.png">Mac OS X</a>, <a href="https://factorcode.org/factor-windows7.png">Windows</a></li> <li>Screenshots on <a href="https://factorcode.org/factor-macosx.png">Mac OS X</a>, <a href="https://factorcode.org/factor-windows7.png">Windows</a></li>
</ul> </ul>
</td> </div>
<td width="50%" valign="top">
<div class="right">
<pre><% <pre><%
"resource:extra/websites/factorcode/examples.txt" utf8 file-lines "resource:extra/websites/factorcode/examples.txt" utf8 file-lines
{ "----" } split random { "----" } split random
@ -56,9 +56,10 @@ webapps.mason.utils webapps.mason.version.data xml.writer xmode.highlight ;
xml>string write-html xml>string write-html
%></pre> %></pre>
</td> </div>
</tr>
</table> <div style="clear: both;"></div>
<h1>Downloads</h1> <h1>Downloads</h1>

View File

@ -21,6 +21,12 @@ body {
max-width: 800px; max-width: 800px;
text-align: left; text-align: left;
line-height: 150%; line-height: 150%;
padding: 10px;
}
img {
max-width: 100%;
height: auto;
} }
pre { pre {
@ -29,7 +35,8 @@ pre {
margin-top: 10px; margin-top: 10px;
padding: 10px; padding: 10px;
font-size: smaller; font-size: smaller;
width: 400px; width: 100%;
overflow: auto;
} }
ul { ul {
@ -42,13 +49,13 @@ li {
padding: 5px; padding: 5px;
} }
#downloads { .downloads {
width: 520px; width: 520px;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
#downloads th { .downloads th {
color: #4f6b72; color: #4f6b72;
border: 1px solid #C1DAD7; border: 1px solid #C1DAD7;
border-left: none; border-left: none;
@ -61,34 +68,56 @@ li {
vertical-align: center; vertical-align: center;
} }
#downloads th.nobg { .downloads th.nobg {
border: 0; border: 0;
border-right: 1px solid #C1DAD7; border-right: 1px solid #C1DAD7;
background: none; background: none;
} }
#downloads td { .downloads td {
text-align: center; text-align: center;
vertical-align: center; vertical-align: center;
} }
#downloads td.alt { .downloads td.alt {
background: #F5FAFA; background: #F5FAFA;
color: #797268; color: #797268;
} }
#downloads td.doesnotexist { .downloads td.doesnotexist {
background: #E5EAEA; background: #E5EAEA;
} }
#downloads td.unsupported { .downloads td.unsupported {
background: #ffaaaa; background: #ffaaaa;
} }
#downloads td.supported { .downloads td.supported {
background: #aaffaa; background: #aaffaa;
} }
#downloads td.nobinary { .downloads td.nobinary {
background: #eeee88; background: #eeee88;
} }
.left {
width: 50%;
float: left;
}
.right {
width: 50%;
float: right;
}
@media screen and (max-width: 600px) {
.left, .right {
width: 100%;
float: none;
}
.downloads {
width: 100%;
max-width: 520px;
}
}