mirror of
https://github.com/jashkenas/coffeescript.git
synced 2026-01-13 00:37:54 -05:00
5cbd25f5d4
* Mobile Safari needs the code to be >= 16px * Buttons that just run the code shouldn’t have a label, since in all the other examples the label signifies the command to be run * Use Bootstrap’s breakpoints * Use Bootstrap’s styling for the <code> element, to avoid misaligned baseline * Updated output * Fix #4704: use replaceState, so that back/forward only happen for user clicks on links; opening and closing Try CoffeeScript doesn’t count as a new history entry, and closing it retrieves the previous URL * Fix #4702: Some changelog entries are more equal than others * Updated output * Eliminate the 1px jitter when initializing code editors * On first time opening Try CoffeeScript, use just #try as the hash * Update output * Increase general body line spacing * Code styling per Jeremy * Don’t let the main text column grow unreasonably wide * Give list items some modest bottom margin (and use ems whenever possible) * Updated output
107 lines
2.4 KiB
CSS
107 lines
2.4 KiB
CSS
/* Adapted from https://github.com/FarhadG/code-mirror-themes/blob/master/themes/twilight.css */
|
||
|
||
.CodeMirror,
|
||
.placeholder-code {
|
||
letter-spacing: 0.3px;
|
||
color: #f8f8f8;
|
||
/* Prevent mobile Safari from zooming in on our code editors; the code is 16px naturally, but somehow being explicit about it prevents the zooming */
|
||
font-size: 16px;
|
||
}
|
||
@media (min-width: 768px) {
|
||
.CodeMirror,
|
||
.placeholder-code {
|
||
font-size: 90%; /* Matching Bootstrap’s font size for code, which calculates to 14.4px */
|
||
}
|
||
}
|
||
.CodeMirror-lines {
|
||
padding: 0.5em 0;
|
||
}
|
||
.placeholder-code {
|
||
padding: 0.5em 4px;
|
||
margin-bottom: 1.37em;
|
||
white-space: pre-wrap;
|
||
}
|
||
div.CodeMirror-cursor {
|
||
border-left: 3px solid #f8f8f8;
|
||
}
|
||
.CodeMirror-activeline-background {
|
||
background: #ffffff08;
|
||
}
|
||
.CodeMirror-selected {
|
||
background: #ddf0ff33;
|
||
}
|
||
.cm-comment,
|
||
.placeholder-code .comment {
|
||
font-style: italic;
|
||
color: #5f5a60;
|
||
}
|
||
.cm-keyword,
|
||
.placeholder-code .keyword {
|
||
color: #cda869;
|
||
}
|
||
.cm-string,
|
||
.placeholder-code .string {
|
||
color: #8f9d6a;
|
||
}
|
||
.cm-property,
|
||
.placeholder-code .attribute {
|
||
color: #dad085;
|
||
}
|
||
.cm-atom {
|
||
color: #dad085;
|
||
}
|
||
.cm-number,
|
||
.placeholder-code .number,
|
||
.placeholder-code .built_in,
|
||
.placeholder-code .builtin-name,
|
||
.placeholder-code .literal,
|
||
.placeholder-code .type,
|
||
/*.placeholder-code .params,*/
|
||
.placeholder-code .meta,
|
||
.placeholder-code .link {
|
||
color: #dad085;
|
||
}
|
||
.cm-operator,
|
||
.placeholder-code .punctuation,
|
||
.placeholder-code .symbol,
|
||
.placeholder-code .bullet,
|
||
.placeholder-code .addition,
|
||
.placeholder-code .operator {
|
||
color: #cda869;
|
||
}
|
||
|
||
/* Uneditable code blocks are inverted, so use darker versions of the above */
|
||
|
||
.uneditable-code-block .comment {
|
||
font-style: italic;
|
||
color: #837B85;
|
||
}
|
||
.uneditable-code-block .class,
|
||
.uneditable-code-block .function,
|
||
.uneditable-code-block .keyword,
|
||
.uneditable-code-block .reserved,
|
||
.uneditable-code-block .title {
|
||
color: #534328;
|
||
}
|
||
.uneditable-code-block .string
|
||
.uneditable-code-block .value
|
||
.uneditable-code-block .inheritance
|
||
.uneditable-code-block .header {
|
||
color: #3A4029;
|
||
}
|
||
.uneditable-code-block .variable,
|
||
.uneditable-code-block .literal,
|
||
.uneditable-code-block .tag,
|
||
.uneditable-code-block .regexp,
|
||
.uneditable-code-block .subst,
|
||
.uneditable-code-block .property {
|
||
color: #474429;
|
||
}
|
||
.uneditable-code-block .number,
|
||
.uneditable-code-block .preprocessor,
|
||
.uneditable-code-block .built_in,
|
||
.uneditable-code-block .params,
|
||
.uneditable-code-block .constant {
|
||
color: #474429;
|
||
}
|