mirror of
https://github.com/roc-lang/roc.git
synced 2024-11-13 09:49:11 +03:00
495 lines
11 KiB
CSS
495 lines
11 KiB
CSS
:root {
|
|
--body-max-width: 900px;
|
|
--text-color: #121212;
|
|
--top-bar-bg: #222;
|
|
--top-bar-fg: #eee;
|
|
--top-bar-logo-hover: hsl(258, 73%, 70%);
|
|
--header-link-color: #17b9b0;
|
|
--header-link-hover: #222;
|
|
--link-color: hsl(258, 73%, 58%);
|
|
--h1-color: hsl(258, 73%, 70%);
|
|
--repl-prompt: #0ff4f4;
|
|
--body-bg: #fff;
|
|
--code-bg: #e7e7e7;
|
|
--snippet-bg: #fcfcfc;
|
|
--snippet-border: #bbb;
|
|
--code-color: #303030;
|
|
--toc-background: #f3f3f3;
|
|
--toc-border: #ddd;
|
|
--toc-search-bg: #fcfcfc;
|
|
--toc-search-border: #bbb;
|
|
}
|
|
|
|
html {
|
|
font-family: 'Lato', sans-serif;
|
|
line-height: 1.5rem;
|
|
background: var(--body-bg);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
footer {
|
|
max-width: 1024px;
|
|
margin: 0 auto;
|
|
font-size: 14px;
|
|
padding: 16px;
|
|
}
|
|
|
|
section p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
p, aside, li, footer {
|
|
font-size: 1.2rem;
|
|
line-height: 1.85rem;
|
|
}
|
|
|
|
aside {
|
|
margin-left: 4rem;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--link-color);
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
li {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
#top-bar {
|
|
background-color: var(--top-bar-bg);
|
|
width: 100%;
|
|
height: 50px;
|
|
}
|
|
|
|
#top-bar nav {
|
|
min-width: var(--body-max-width);
|
|
max-width: 1024px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#top-bar .home-link {
|
|
display: flex;
|
|
color: var(--top-bar-fg);
|
|
font-size: 1.8rem;
|
|
padding: 10px;
|
|
}
|
|
|
|
#top-bar-links {
|
|
display: flex;
|
|
}
|
|
|
|
#top-bar-links a {
|
|
color: var(--top-bar-fg);
|
|
font-size: 1.1rem;
|
|
display: block;
|
|
height: 100%;
|
|
padding: 12px 16px;
|
|
margin: 0 2px;
|
|
}
|
|
|
|
@media only screen and (min-device-width: 900px) {
|
|
main {
|
|
width: var(--body-max-width);
|
|
margin: 36px auto;
|
|
}
|
|
}
|
|
|
|
code {
|
|
margin: 0 0.2rem;
|
|
white-space: nowrap;
|
|
background: var(--code-bg);
|
|
padding: 0.1rem 0.5rem;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
code, samp {
|
|
font-family: 'Source Code Pro', monospace;
|
|
color: var(--code-color);
|
|
}
|
|
|
|
code.snippet, samp {
|
|
display: block;
|
|
overflow: auto;
|
|
white-space: pre;
|
|
padding: 10px 16px;
|
|
background-color: var(--snippet-bg);
|
|
margin-bottom: 16px;
|
|
font-size: 1.2rem;
|
|
line-height: 1.76rem;
|
|
border: 1px solid var(--snippet-border);
|
|
}
|
|
|
|
.repl-prompt:before {
|
|
/* Add this using CSS so it isn't selectable, which would be annoying when trying to copy/paste! */
|
|
color: var(--repl-prompt);
|
|
content: "» ";
|
|
}
|
|
|
|
.repl-err {
|
|
color: #ff5f5f;
|
|
}
|
|
|
|
samp .ann {
|
|
/* type annotation - purple in the repl */
|
|
color: #f384fd;
|
|
}
|
|
|
|
samp .autovar {
|
|
/* automatic variable names in the repl, e.g. # val1 */
|
|
color: #3dbd0f;
|
|
}
|
|
|
|
samp .kw, samp .op {
|
|
/* language keywords, e.g. `if`, or operators, e.g. `+` */
|
|
color: #3474db;
|
|
}
|
|
|
|
samp .paren, samp .brace, samp .comma {
|
|
/* square braces, parens, commas */
|
|
color: #3474db;
|
|
}
|
|
|
|
samp .str, samp .number {
|
|
/* string literals */
|
|
color: #158086;
|
|
}
|
|
|
|
samp .str-esc {
|
|
/* escapes inside string literals, e.g. \t */
|
|
color: #3474db;
|
|
}
|
|
|
|
samp .str-interp {
|
|
/* interpolated variables inside string literals */
|
|
color: var(--text-color);
|
|
}
|
|
|
|
samp .dim {
|
|
opacity: 0.55;
|
|
}
|
|
|
|
samp .comment {
|
|
color: green;
|
|
}
|
|
samp .comment .kw,
|
|
samp .comment .str,
|
|
samp .comment .number {
|
|
color: inherit;
|
|
}
|
|
|
|
/* Tables */
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
overflow-x: auto;
|
|
border: 2px solid #f0f0f0;
|
|
}
|
|
thead {
|
|
border: none;
|
|
}
|
|
tbody {
|
|
border: none;
|
|
}
|
|
tr {
|
|
border: none;
|
|
border-top: 2px solid #f0f0f0;
|
|
}
|
|
th,
|
|
td {
|
|
border: none;
|
|
border-right: 2px solid #f0f0f0;
|
|
padding: 12px;
|
|
}
|
|
th:last-child,
|
|
td:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
#integer-types {
|
|
width: 100%;
|
|
}
|
|
|
|
#integer-types th:first-of-type, #integer-types td:first-of-type {
|
|
text-align: right;
|
|
}
|
|
|
|
#integer-types td:first-of-type code {
|
|
background-color: inherit;
|
|
}
|
|
|
|
#integer-types th:last-of-type, #integer-types td:last-of-type {
|
|
text-align: left;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
table, tr, th, td {
|
|
border-color: #3b3f47;
|
|
}
|
|
}
|
|
|
|
/* Tutorial Specific */
|
|
|
|
#tutorial-start {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
#tutorial-intro {
|
|
flex: 1;
|
|
}
|
|
|
|
#tutorial-toc {
|
|
margin-top: 18px;
|
|
background: var(--toc-background);
|
|
border: 1px solid var(--toc-border);
|
|
padding: 12px 24px;
|
|
margin-left: 64px;
|
|
}
|
|
|
|
#tutorial-toc code {
|
|
background: none;
|
|
color: inherit;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#tutorial-toc ol {
|
|
padding: 3px;
|
|
margin: 8px 0;
|
|
list-style: none;
|
|
padding-bottom: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#tutorial-toc h2 {
|
|
color: #686868;
|
|
font-family: inherit;
|
|
font-size: 2em;
|
|
text-shadow: none;
|
|
margin: 0;
|
|
padding: 16px 0;
|
|
}
|
|
|
|
#toc-search {
|
|
background-color: var(--toc-search-bg);
|
|
border: 1px solid var(--toc-search-border);
|
|
color: inherit;
|
|
padding: 6px 8px;
|
|
margin-top: 16px;
|
|
margin-bottom: 4px;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
font-size: inherit;
|
|
}
|
|
|
|
/* Used on on the different-names page. */
|
|
|
|
th, td {
|
|
text-align: left;
|
|
padding-right: 24px;
|
|
}
|
|
|
|
#different-names-body a, #different-names-body li {
|
|
font-family: monospace;
|
|
font-size: 16px;
|
|
}
|
|
|
|
#different-names-body li {
|
|
display: inline;
|
|
}
|
|
|
|
#different-names-body li:not(:last-of-type)::after {
|
|
/* This is injected via CSS for accessibility, so to a screen reader it's a normal <li> */
|
|
content: ",";
|
|
}
|
|
|
|
#different-names-body ul {
|
|
padding: 0;
|
|
list-style-type: none;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5 {
|
|
font-family: 'Permanent Marker';
|
|
line-height: 1rem;
|
|
margin-top: 1.75rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
h1 a, h2 a, h3 a, h4 a, h5 a {
|
|
color: var(--header-link-color);
|
|
}
|
|
|
|
|
|
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover {
|
|
text-decoration: none;
|
|
color: var(--header-link-hover);
|
|
}
|
|
|
|
h1 {
|
|
font-size: 7rem;
|
|
line-height: 7rem;
|
|
color: var(--h1-color);
|
|
margin-top: 0;
|
|
margin-bottom: 1.75rem;
|
|
text-shadow: 2px 2px 2px #010101;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 4rem;
|
|
line-height: 4rem;
|
|
text-shadow: 2px 2px 2px #010101;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 3rem;
|
|
line-height: 3rem;
|
|
text-shadow: 2px 2px 1px #010101;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 2rem;
|
|
text-shadow: 1px 1px 1px #010101;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Permanent Marker';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url('/fonts/permanent-marker-v16-latin/permanent-marker-v16-latin-regular.woff2') format('woff2'),
|
|
url('/fonts/permanent-marker-v16-latin/permanent-marker-v16-latin-regular.woff') format('woff');
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
}
|
|
|
|
/* latin-ext */
|
|
@font-face {
|
|
font-family: 'Merriweather';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url('/fonts/merriweather-v30-latin-ext_latin/merriweather-v30-latin-ext_latin-regular.woff2') format('woff2'),
|
|
url('/fonts/merriweather-v30-latin-ext_latin/merriweather-v30-latin-ext_latin-regular.woff') format('woff');
|
|
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
|
}
|
|
|
|
/* latin */
|
|
@font-face {
|
|
font-family: 'Merriweather';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url('/fonts/merriweather-v30-latin/merriweather-v30-latin-regular.woff2') format('woff2'),
|
|
url('/fonts/merriweather-v30-latin/merriweather-v30-latin-regular.woff') format('woff');
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
}
|
|
|
|
/* latin-ext */
|
|
@font-face {
|
|
font-family: 'Merriweather Sans';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url('/fonts/merriweather-sans-v22-latin-ext_latin/merriweather-sans-v22-latin-ext_latin-regular.woff2') format('woff2'),
|
|
url('/fonts/merriweather-sans-v22-latin-ext_latin/merriweather-sans-v22-latin-ext_latin-regular.woff') format('woff');
|
|
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
|
}
|
|
/* latin */
|
|
@font-face {
|
|
font-family: 'Merriweather Sans';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url('/fonts/merriweather-sans-v22-latin/merriweather-sans-v22-latin-regular.woff2') format('woff2'),
|
|
url('/fonts/merriweather-sans-v22-latin/merriweather-sans-v22-latin-regular.woff') format('woff');
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
}
|
|
|
|
/* latin-ext */
|
|
@font-face {
|
|
font-family: 'Lato';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url('/fonts/lato-v23-latin-ext_latin/lato-v23-latin-ext_latin-regular.woff2') format('woff2'),
|
|
url('/fonts/lato-v23-latin-ext_latin/lato-v23-latin-ext_latin-regular.woff') format('woff');
|
|
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
|
}
|
|
/* latin */
|
|
@font-face {
|
|
font-family: 'Lato';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url('/fonts/lato-v23-latin/lato-v23-latin-regular.woff2') format('woff2'),
|
|
url('/fonts/lato-v23-latin/lato-v23-latin-regular.woff') format('woff');
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
}
|
|
|
|
/* latin-ext */
|
|
@font-face {
|
|
font-family: 'Source Code Pro';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url('/fonts/source-code-pro-v22-latin-ext_latin/source-code-pro-v22-latin-ext_latin-regular.woff2') format('woff2'),
|
|
url('/fonts/source-code-pro-v22-latin-ext_latin/source-code-pro-v22-latin-ext_latin-regular.woff') format('woff');
|
|
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
|
}
|
|
/* latin */
|
|
@font-face {
|
|
font-family: 'Source Code Pro';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url('/fonts/source-code-pro-v22-latin/source-code-pro-v22-latin-regular.woff2') format('woff2'),
|
|
url('/fonts/source-code-pro-v22-latin/source-code-pro-v22-latin-regular.woff') format('woff');
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--text-color: #cdcdcd;
|
|
--top-bar-bg: #2a2a2a;
|
|
--header-link-color: hsl(258, 73%, 70%);
|
|
--header-link-hover: #ddd;
|
|
--h1-color: #1bc6bd;
|
|
--link-color: #1bc6bd;
|
|
--repl-prompt: #0ff4f4;
|
|
--body-bg: #0e0e0f;
|
|
--code-bg: #303030;
|
|
--snippet-bg: #1a1a1a;
|
|
--snippet-border: #444;
|
|
--code-color: #cdcdcd;
|
|
--toc-background: var(--snippet-bg);
|
|
--toc-border: var(--snippet-border);
|
|
--toc-search-bg: #333;
|
|
--toc-search-border: #555;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5 {
|
|
text-shadow: none;
|
|
}
|
|
|
|
html {
|
|
scrollbar-color: #444444 #2f2f2f;
|
|
}
|
|
|
|
samp .paren, samp .brace, samp .comma {
|
|
/* square braces, parens, commas */
|
|
color: #67a0fb;
|
|
}
|
|
|
|
samp .kw, samp .op {
|
|
/* language keywords, e.g. `if`, or operators, e.g. `+` */
|
|
color: #67a0fb;
|
|
}
|
|
|
|
samp .str {
|
|
/* string literals */
|
|
color: #26b2b9;
|
|
}
|
|
}
|