mirror of
https://github.com/facebookarchive/prepack.git
synced 2024-10-05 19:07:43 +03:00
New color scheme for the website (#2225)
Summary: Release note: new color scheme for the website 🔥 Pull Request resolved: https://github.com/facebook/prepack/pull/2225 Differential Revision: D8779444 Pulled By: NTillmann fbshipit-source-id: 2c713d3a0a98dfc62f0a7cdf4e695a32c568fa05
This commit is contained in:
Guru107
Facebook Github Bot
parent
ca9246c270
commit
7273bacc51
@ -1,139 +1,123 @@
|
||||
/* http://prismjs.com/download.html?themes=prism&languages=clike+javascript */
|
||||
/* PrismJS 1.15.0
|
||||
https://prismjs.com/download.html#themes=prism-tomorrow&languages=clike+javascript */
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
* prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
|
||||
* Based on https://github.com/chriskempson/tomorrow-theme
|
||||
* @author Rose Pritchard
|
||||
*/
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection, code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #fdfaeb;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #a67f59;
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function {
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: #ccc;
|
||||
background: none;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #2d2d2d;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.block-comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.token.tag,
|
||||
.token.attr-name,
|
||||
.token.namespace,
|
||||
.token.deleted {
|
||||
color: #e2777a;
|
||||
}
|
||||
|
||||
.token.function-name {
|
||||
color: #6196cc;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.function {
|
||||
color: #f08d49;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.class-name,
|
||||
.token.constant,
|
||||
.token.symbol {
|
||||
color: #f8c555;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.important,
|
||||
.token.atrule,
|
||||
.token.keyword,
|
||||
.token.builtin {
|
||||
color: #cc99cd;
|
||||
}
|
||||
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.attr-value,
|
||||
.token.regex,
|
||||
.token.variable {
|
||||
color: #7ec699;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url {
|
||||
color: #67cdcc;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.token.inserted {
|
||||
color: green;
|
||||
}
|
||||
@ -20,6 +20,18 @@ body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Prism.js overrides */
|
||||
|
||||
pre[class*="language-"] {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"], pre[class*="language-"] {
|
||||
background: #1c231f;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
|
||||
header, .repl-container {
|
||||
@ -196,7 +208,7 @@ header, .repl-container {
|
||||
}
|
||||
|
||||
.nav-toggle span {
|
||||
background-color: #323330;
|
||||
background-color: #ffffff;
|
||||
display: block;
|
||||
height: 1px;
|
||||
left: 50%;
|
||||
@ -225,11 +237,11 @@ header, .repl-container {
|
||||
}
|
||||
|
||||
.nav-toggle:hover {
|
||||
background-color: #f5da55;
|
||||
background-color: #1eb168;
|
||||
}
|
||||
|
||||
.nav-toggle.is-active span {
|
||||
background-color: #323330;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.nav-toggle.is-active span:nth-child(1) {
|
||||
@ -297,7 +309,7 @@ header, .repl-container {
|
||||
}
|
||||
|
||||
a.nav-item {
|
||||
color: #323330;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
@ -312,20 +324,25 @@ a.nav-item:not(.is-brand) {
|
||||
}
|
||||
|
||||
a.nav-item:hover:not(.is-brand) {
|
||||
color: #363636;
|
||||
border-bottom: 1px solid #323330;
|
||||
color: #1eb168;
|
||||
border-bottom: 1px solid #1eb168;
|
||||
}
|
||||
|
||||
a.nav-item.is-active {
|
||||
color: #363636;
|
||||
border-bottom: 1px solid #323330;
|
||||
color: #1eb168;
|
||||
border-bottom: 1px solid #1eb168;
|
||||
}
|
||||
|
||||
a.nav-item.is-brand {
|
||||
color: #323330;
|
||||
color: #ffffff;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
img.nav-logo {
|
||||
height: 30px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
a.nav-item.is-brand {
|
||||
padding-left: 0;
|
||||
@ -364,7 +381,7 @@ a.nav-item.is-brand {
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.nav-menu.nav-right {
|
||||
background-color: white;
|
||||
background-color: #101512;
|
||||
-webkit-box-shadow: 0 4px 7px rgba(10, 10, 10, 0.1);
|
||||
box-shadow: 0 4px 7px rgba(10, 10, 10, 0.1);
|
||||
left: 0;
|
||||
@ -380,7 +397,8 @@ a.nav-item.is-brand {
|
||||
|
||||
.nav-menu.nav-right .nav-item:hover {
|
||||
padding: 0.75rem;
|
||||
background-color: #f5da55;
|
||||
background-color: #1eb168;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.nav-menu.nav-right.is-active {
|
||||
@ -393,7 +411,7 @@ a.nav-item.is-brand {
|
||||
-webkit-box-align: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
align-items: stretch;
|
||||
background-color: #f5da55;
|
||||
background-color: #101512;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
@ -428,8 +446,8 @@ a.nav-item.is-brand {
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: #323330;
|
||||
color: #FFF;
|
||||
background: #1c231f;
|
||||
color: #ffffff;
|
||||
padding: 50px 0;
|
||||
font-weight: 200;
|
||||
text-align: center;
|
||||
@ -440,7 +458,7 @@ a.nav-item.is-brand {
|
||||
margin: 0;
|
||||
font-size: 64px;
|
||||
line-height: 96px;
|
||||
color: #f5da55;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.hero h2.minitext {
|
||||
@ -460,8 +478,8 @@ a.nav-item.is-brand {
|
||||
|
||||
.button {
|
||||
border-radius: 4px;
|
||||
border: solid 1px #f5da55;
|
||||
color: #f5da55;
|
||||
border: solid 1px #1eb168;
|
||||
color: #1eb168;
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
@ -473,8 +491,8 @@ a.nav-item.is-brand {
|
||||
.button:hover, .button:active, .button:focus {
|
||||
text-decoration: none;
|
||||
box-shadow: none;
|
||||
color: #fafafa;
|
||||
background-color: #f5da55;
|
||||
color: #ffffff;
|
||||
background-color: #1eb168;
|
||||
}
|
||||
|
||||
.section {
|
||||
@ -497,7 +515,7 @@ a.nav-item.is-brand {
|
||||
.example-input, .example-output {
|
||||
flex: 1;
|
||||
margin: 0 5px;
|
||||
background-color: #fdfaeb;
|
||||
background-color:#1c231f;
|
||||
width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -514,8 +532,8 @@ a.nav-item.is-brand {
|
||||
}
|
||||
|
||||
.example-input::before, .example-output::before, .code-block::before {
|
||||
background: #FBF4D0;
|
||||
color: #B0A673;
|
||||
background: #101512;
|
||||
color: #ffffff;
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
|
||||
BIN
website/favicon.ico
Normal file
BIN
website/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
@ -3,8 +3,8 @@
|
||||
<head>
|
||||
<title>Prepack · Partial evaluator for JavaScript</title>
|
||||
<script src="js/prism.js"></script>
|
||||
<link rel="stylesheet" href="css/style.css"/>
|
||||
<link rel="stylesheet" href="css/prism.css"/>
|
||||
<link rel="stylesheet" href="css/style.css"/>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
@ -21,6 +21,7 @@
|
||||
|
||||
<div class="nav-left">
|
||||
<a class="nav-item is-brand" href="./">
|
||||
<img class="nav-logo" src="static/images/prepack_logo.png" alt="prepack logo"/>
|
||||
Prepack
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
<head>
|
||||
<title>Prepack · Partial evaluator for JavaScript</title>
|
||||
<script src="js/prism.js"></script>
|
||||
<link rel="stylesheet" href="css/style.css"/>
|
||||
<link rel="stylesheet" href="css/prism.css"/>
|
||||
<link rel="stylesheet" href="css/style.css"/>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
@ -21,6 +21,7 @@
|
||||
|
||||
<div class="nav-left">
|
||||
<a class="nav-item is-brand" href="./">
|
||||
<img class="nav-logo" src="static/images/prepack_logo.png" alt="prepack logo"/>
|
||||
Prepack
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -2,9 +2,10 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Prepack · Partial evaluator for JavaScript</title>
|
||||
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
|
||||
<script src="js/prism.js"></script>
|
||||
<link rel="stylesheet" href="css/style.css"/>
|
||||
<link rel="stylesheet" href="css/prism.css"/>
|
||||
<link rel="stylesheet" href="css/style.css"/>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
@ -21,6 +22,7 @@
|
||||
|
||||
<div class="nav-left">
|
||||
<a class="nav-item is-brand" href="./">
|
||||
<img class="nav-logo" src="static/images/prepack_logo.png" alt="prepack logo"/>
|
||||
Prepack
|
||||
</a>
|
||||
</div>
|
||||
@ -238,7 +240,7 @@ three = require("three");</code></pre>
|
||||
<li>
|
||||
<b>Symbolic Execution</b>
|
||||
<p>
|
||||
In addition to computing over concrete values, Prepack's interpreter has the ability to operate on <b>abstract values</b> which typically arise from environment interactions. For example, <code class="language-js">Date.now</code> can return an abstract value. You can also manually inject abstract values via auxiliary helper functions such as <code class="language-js">__abstract()</code>. Prepack tracks all operations that are performed over abstract values. When branching over abstract values, Prepack will fork execution and explore all possibilities. Thus, Prepack implements a <a href="https://en.wikipedia.org/wiki/Symbolic_execution">Symbolic Execution</a> engine for JavaScript.
|
||||
In addition to computing over concrete values, Prepack's interpreter has the ability to operate on <b>abstract values</b> which typically arise from environment interactions. For example, <code>Date.now</code> can return an abstract value. You can also manually inject abstract values via auxiliary helper functions such as <code>__abstract()</code>. Prepack tracks all operations that are performed over abstract values. When branching over abstract values, Prepack will fork execution and explore all possibilities. Thus, Prepack implements a <a href="https://en.wikipedia.org/wiki/Symbolic_execution">Symbolic Execution</a> engine for JavaScript.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
@ -264,7 +266,7 @@ three = require("three");</code></pre>
|
||||
<h2>The Environment matters!</h2>
|
||||
<div class="align-left">
|
||||
<p>
|
||||
Out of the box, Prepack does not fully model a browser or node.js environment: Prepack has no built-in knowledge of <code class="language-js">document</code> or <code class="language-js">window</code>. In fact, when prepacking code which references such properties, they will evaluate to <code class="language-js">undefined</code>. You would have to insert a model of the relevant functionality at the beginning of the code you want to prepack.
|
||||
Out of the box, Prepack does not fully model a browser or node.js environment: Prepack has no built-in knowledge of <code>document</code> or <code>window</code>. In fact, when prepacking code which references such properties, they will evaluate to <code>undefined</code>. You would have to insert a model of the relevant functionality at the beginning of the code you want to prepack.
|
||||
</p>
|
||||
<p>The following helper functions aid in writing models.
|
||||
<pre><code class="language-js">// Assume that a certain property has a simple known value.
|
||||
|
||||
@ -4,9 +4,9 @@
|
||||
<title>Prepack · Partial evaluator for JavaScript</title>
|
||||
<script src="js/prism.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
|
||||
<link rel="stylesheet" href="css/style.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether-select/1.1.1/css/select-theme-dark.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css"/>
|
||||
<link rel="stylesheet" href="css/style.css"/>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
@ -23,6 +23,7 @@
|
||||
|
||||
<div class="nav-left">
|
||||
<a class="nav-item is-brand" href="./">
|
||||
<img class="nav-logo" src="static/images/prepack_logo.png" alt="prepack logo"/>
|
||||
Prepack
|
||||
</a>
|
||||
</div>
|
||||
|
||||
BIN
website/static/images/prepack_logo.png
Normal file
BIN
website/static/images/prepack_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Loading…
Reference in New Issue
Block a user