mirror of
https://github.com/roc-lang/roc.git
synced 2024-11-05 01:58:58 +03:00
Merge repl css into site.css
This commit is contained in:
Richard Feldman
parent
84559770d0
commit
ad743854d7
@ -9,7 +9,7 @@ console.error = function displayErrorInHistoryPanel(string) {
|
||||
updateHistoryEntry(repl.inputHistoryIndex, false, html);
|
||||
};
|
||||
|
||||
import * as roc_repl_wasm from "./roc_repl_wasm.js";
|
||||
import * as roc_repl_wasm from "/repl/roc_repl_wasm.js";
|
||||
|
||||
// ----------------------------------------------------------------------------
|
||||
// REPL state
|
||||
|
||||
@ -75,7 +75,6 @@ view = \page, htmlContent ->
|
||||
preloadWoff2 "/fonts/permanent-marker-v16-latin/permanent-marker-v16-latin-regular.woff2",
|
||||
link [rel "prefetch", href "/repl/roc_repl_wasm.js"],
|
||||
link [rel "stylesheet", href "/wip/site.css"],
|
||||
link [rel "stylesheet", href "/wip/repl.css"],
|
||||
# Safari ignores rel="icon" and only respects rel="mask-icon". It will render the SVG with
|
||||
# fill="#000" unless this `color` attribute here is hardcoded (not a CSS `var()`) to override it.
|
||||
link [rel "mask-icon", href "/favicon.svg", color "#7d59dd"],
|
||||
|
||||
@ -1,164 +0,0 @@
|
||||
#repl {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#repl-prompt {
|
||||
position: relative;
|
||||
left: 16px;
|
||||
top: 1.25rem;
|
||||
font-size: 1.25rem;
|
||||
height: 0;
|
||||
z-index: 2;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--light-cyan);
|
||||
/* Let clicks pass through to the textarea */
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#source-input {
|
||||
width: 100%;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--code-color);
|
||||
background-color: var(--code-bg);
|
||||
display: inline-block;
|
||||
height: 78px;
|
||||
padding: 16px;
|
||||
padding-left: 36px;
|
||||
border: 1px solid transparent;
|
||||
margin: 0;
|
||||
margin-bottom: 2em;
|
||||
box-sizing: border-box;
|
||||
font-size: 18px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
#source-input:focus {
|
||||
outline: 2px solid var(--primary-1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.history {
|
||||
padding: 1em;
|
||||
padding-bottom: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#help-text,
|
||||
#history-text {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
#history-text {
|
||||
margin-top: 16px;
|
||||
min-height: 26px;
|
||||
}
|
||||
|
||||
#loading-message {
|
||||
text-align: center;
|
||||
/* approximately match height after loading and printing help message */
|
||||
height: 96px;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
margin-bottom: 24px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.history-item .input {
|
||||
margin: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.history-item .output {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.panic {
|
||||
color: #ff6666;
|
||||
}
|
||||
|
||||
.input-line-prefix {
|
||||
color: var(--cyan);
|
||||
}
|
||||
|
||||
.color-red {
|
||||
color: #ff6666;
|
||||
}
|
||||
|
||||
.color-green {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.color-yellow {
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
.color-blue {
|
||||
color: var(--cyan);
|
||||
}
|
||||
|
||||
.color-magenta {
|
||||
color: var(--primary-1);
|
||||
}
|
||||
|
||||
.color-cyan {
|
||||
color: var(--cyan);
|
||||
}
|
||||
|
||||
.color-white {
|
||||
/* Really this isn't white so much as "default text color." For the repl, this should be black
|
||||
in a light color scheme, and only white in dark mode. The name could be better! */
|
||||
color: black;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.color-white {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Mobile-friendly screen width */
|
||||
@media only screen and (max-width: 767px) {
|
||||
#repl {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: calc(100vh - var(--top-bar-height));
|
||||
}
|
||||
|
||||
code.history {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#source-input {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#loading-message {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#homepage-repl-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#homepage-repl-container #repl-description {
|
||||
padding: 0;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
#repl-arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -361,6 +361,177 @@ pre > code {
|
||||
color: var(--code-color);
|
||||
}
|
||||
|
||||
|
||||
/* REPL */
|
||||
|
||||
#repl {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#repl-prompt {
|
||||
position: relative;
|
||||
left: 16px;
|
||||
top: 1.25rem;
|
||||
font-size: 1.25rem;
|
||||
height: 0;
|
||||
z-index: 2;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--light-cyan);
|
||||
/* Let clicks pass through to the textarea */
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#source-input {
|
||||
width: 100%;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--code-color);
|
||||
background-color: var(--code-bg);
|
||||
display: inline-block;
|
||||
height: 78px;
|
||||
padding: 16px;
|
||||
padding-left: 36px;
|
||||
border: 1px solid transparent;
|
||||
margin: 0;
|
||||
margin-bottom: 2em;
|
||||
box-sizing: border-box;
|
||||
font-size: 18px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
#source-input:focus {
|
||||
outline: 2px solid var(--primary-1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.history {
|
||||
padding: 1em;
|
||||
padding-bottom: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#help-text,
|
||||
#history-text {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
#history-text {
|
||||
margin-top: 16px;
|
||||
min-height: 26px;
|
||||
}
|
||||
|
||||
#loading-message {
|
||||
text-align: center;
|
||||
/* approximately match height after loading and printing help message */
|
||||
height: 96px;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
margin-bottom: 24px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.history-item .input {
|
||||
margin: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.history-item .output {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.panic {
|
||||
color: #ff6666;
|
||||
}
|
||||
|
||||
.input-line-prefix {
|
||||
color: var(--cyan);
|
||||
}
|
||||
|
||||
.color-red {
|
||||
color: #ff6666;
|
||||
}
|
||||
|
||||
.color-green {
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.color-yellow {
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
.color-blue {
|
||||
color: var(--cyan);
|
||||
}
|
||||
|
||||
.color-magenta {
|
||||
color: var(--primary-1);
|
||||
}
|
||||
|
||||
.color-cyan {
|
||||
color: var(--cyan);
|
||||
}
|
||||
|
||||
.color-white {
|
||||
/* Really this isn't white so much as "default text color." For the repl, this should be black
|
||||
in a light color scheme, and only white in dark mode. The name could be better! */
|
||||
color: black;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.color-white {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Mobile-friendly screen width */
|
||||
@media only screen and (max-width: 767px) {
|
||||
#repl {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: calc(100vh - var(--top-bar-height));
|
||||
}
|
||||
|
||||
code.history {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#source-input {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#loading-message {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#homepage-repl-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#homepage-repl-container #repl-description {
|
||||
padding: 0;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
#repl-arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Homepage */
|
||||
|
||||
/* The repl won't work at all if you have JS disabled. */
|
||||
.no-js #try-roc {
|
||||
display: none !important;
|
||||
|
||||
@ -11,7 +11,7 @@ console.error = function displayErrorInHistoryPanel(string) {
|
||||
updateHistoryEntry(repl.inputHistoryIndex, false, html);
|
||||
};
|
||||
|
||||
import * as roc_repl_wasm from "./roc_repl_wasm.js";
|
||||
import * as roc_repl_wasm from "/repl/roc_repl_wasm.js";
|
||||
|
||||
const isHomepage = document.getElementById("homepage-repl-container") != null;
|
||||
|
||||
@ -65,7 +65,7 @@ resetSourceInputHeight();
|
||||
repl.elemSourceInput.addEventListener("input", resetSourceInputHeight);
|
||||
repl.elemSourceInput.addEventListener("keydown", onInputKeydown);
|
||||
repl.elemSourceInput.addEventListener("keyup", onInputKeyup);
|
||||
roc_repl_wasm.default("/wip/roc_repl_wasm_bg.wasm").then(async (instance) => {
|
||||
roc_repl_wasm.default("/repl/roc_repl_wasm_bg.wasm").then(async (instance) => {
|
||||
const loadingMessage = repl.elemHistory.querySelector("#loading-message");
|
||||
|
||||
if (loadingMessage != null) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user