roc-lang/roc
1
1
Fork 0
mirror of https://github.com/roc-lang/roc.git synced 2024-11-10 10:02:38 +03:00
Code Issues Packages Projects Releases Wiki Activity
20670c2490
roc/www/public/site.css
Richard Feldman 49274476fd
Improve homepage CSS a bunch
2023-10-21 11:01:57 -04:00

733 lines
14 KiB
CSS
Raw Blame History

:root {
/* WCAG AAA Compliant colors */
--code-bg: #f4f8f9;
--gray: #717171;
--orange: #BF5000;
--green: #0B8400;
--cyan: #067C94;
--blue: #05006d;
--magenta: #a20031;
--body-max-width: 900px;
--text-color: #121212;
--top-bar-bg: #222;
--top-bar-fg: #eee;
--top-bar-logo-hover: #8055E4;
--top-bar-height: 50px;
--header-link-color: #107F79;
--header-link-hover: #222;
--link-color: #7546e2;
--h1-color: #8055E4;
--repl-prompt: #0064ff;
--body-bg: #fff;
--code-color: #303030;
--toc-background: var(--code-bg);
--toc-border: var(--gray);
--toc-search-bg: #fcfcfc;
--toc-search-border: var(--gray);
--font-mono: "Source Code Pro", monospace;
}
html {
line-height: 1.5rem;
background: var(--body-bg);
color: var(--text-color);
}
html,
#tutorial-toc-toggle-label {
font-family: "Lato", sans-serif;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
footer {
max-width: 1024px;
margin: 0 auto;
font-size: 14px;
padding: 16px;
}
section p:last-child {
margin-bottom: 0;
}
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: var(--top-bar-height);
}
#top-bar nav {
max-width: 1024px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
#nav-home-link {
display: flex;
color: var(--top-bar-fg);
font-size: 1.8rem;
padding: 10px;
}
#top-bar-links {
display: flex;
}
#top-bar-links a,
#top-bar-links label {
box-sizing: border-box;
color: var(--top-bar-fg);
font-size: 1.1rem;
display: block;
height: 100%;
padding: 12px 16px;
margin: 0 2px;
}
main {
max-width: var(--body-max-width);
margin: 36px auto;
padding: 0 12px;
}
code,
samp {
font-family: var(--font-mono);
color: var(--code-color);
background-color: var(--code-bg);
display: inline-block;
}
p code,
td code,
li code,
th code,
samp {
padding: 0 8px;
}
code a,
a code {
text-decoration: none;
color: var(--code-link-color);
background: none;
padding: 0;
}
code a:visited,
a:visited code {
color: var(--code-link-color);
}
pre {
position: relative;
margin-bottom: 16px;
padding: 8px 16px;
box-sizing: border-box;
background-color: var(--code-bg);
overflow-x: hidden;
word-wrap: normal;
font-size: 1.2rem;
line-height: 1.76em;
white-space: pre;
}
pre>samp {
overflow-x: auto;
display: block;
}
.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: var(--magenta);
}
/* 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;
}
/* Tutorial Specific */
#tutorial-start {
display: flex;
flex-direction: row-reverse;
}
#tutorial-intro {
flex: 1;
}
#tutorial-toc {
margin-top: 18px;
background: var(--code-bg);
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 {
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;
}
#tutorial-toc-toggle,
#tutorial-toc-toggle-label,
#close-tutorial-toc {
display: none;
/* This may be overridden on mobile-friendly screen widths */
}
#tutorial-toc-toggle,
#tutorial-toc-toggle-label {
font-size: 1.1rem;
float: right;
}
#close-tutorial-toc {
position: absolute;
top: 20px;
right: 8px;
font-size: 18px;
padding: 12px 24px;
}
p,
aside,
li,
footer {
font-size: 1.2rem;
line-height: 1.85rem;
}
/* Mobile-friendly screen width */
@media only screen and (max-device-width: 480px) and (orientation: portrait) {
p,
aside,
li,
footer,
code,
samp,
.code-snippet {
font-size: 16px;
}
h1 code,
h2 code,
h3 code,
h4 code,
h5 code {
font-size: inherit;
}
code {
white-space: normal;
}
#tutorial-toc-toggle-label,
#close-tutorial-toc {
display: block;
}
#tutorial-toc-toggle:checked+#tutorial-toc {
display: block;
}
#tutorial-toc {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
margin: 0;
padding-right: 120px;
border: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
code {
word-break: break-word !important;
}
h1,
h2,
h3,
h4,
h5 {
line-height: 1.2em !important;
font-size: 2rem !important;
}
#top-bar-links a,
#top-bar-links label {
padding: 12px 8px;
margin: 0;
}
}
/* 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;
}
#tutorial-toc-toggle-label,
#close-tutorial-toc {
color: var(--header-link-color);
}
#tutorial-toc-toggle-label:hover,
#close-tutorial-toc:hover {
color: var(--header-link-hover);
cursor: pointer;
}
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 code,
h2 code,
h3 code,
h4 code,
h5 code {
color: inherit;
background-color: inherit;
padding: 0;
margin: 0;
}
h1 {
font-size: 7rem;
line-height: 7rem;
color: var(--h1-color);
margin-top: 0;
margin-bottom: 1.75rem;
text-shadow: 1px 1px 1px #010101;
}
h2 {
font-size: 4rem;
line-height: 4rem;
text-shadow: 1px 1px 1px #010101;
}
h3 {
font-size: 3rem;
line-height: 3rem;
text-shadow: 1px 1px 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 {
/* WCAG AAA Compliant colors */
--code-bg: #202746;
--gray: #b6b6b6;
--orange: #fd6e08;
--green: #8ecc88;
--cyan: #12c9be;
--blue: #b1afdf;
--magenta: #f39bac;
--text-color: #cdcdcd;
--top-bar-bg: #2a2a2a;
--header-link-color: #9C7CEA;
--header-link-hover: #ddd;
--h1-color: #1bc6bd;
--link-color: #1bc6bd;
--repl-prompt: #1bc6bd;
--body-bg: #0e0e0f;
--code-snippet-border: #444;
--code-color: #cdcdcd;
--toc-background: var(--code-bg);
--toc-border: var(--code-snippet-border);
--toc-search-bg: #333;
--toc-search-border: var(--gray);
}
h1,
h2,
h3,
h4,
h5 {
text-shadow: none;
}
html {
scrollbar-color: #444444 #2f2f2f;
}
table,
tr,
th,
td {
border-color: var(--gray);
}
}
/* Comments `#` and Documentation comments `##` */
samp .comment,
code .comment {
color: var(--green);
}
/* Number, String, Tag literals */
samp .storage.type,
code .storage.type,
samp .string,
code .string,
samp .string.begin,
code .string.begin,
samp .string.end,
code .string.end,
samp .constant,
code .constant,
samp .literal,
code .literal {
color: var(--cyan);
}
/* Keywords and punctuation */
samp .keyword,
code .keyword,
samp .punctuation.section,
code .punctuation.section,
samp .punctuation.separator,
code .punctuation.separator,
samp .punctuation.terminator,
code .punctuation.terminator,
samp .kw,
code .kw {
color: var(--magenta);
}
/* Operators */
samp .op,
code .op,
samp .keyword.operator,
code .keyword.operator {
color: var(--orange);
}
/* Delimieters */
samp .delimeter,
code .delimeter {
color: var(--gray);
}
/* Variables modules and field names */
samp .function,
code .function,
samp .meta.group,
code .meta.group,
samp .meta.block,
code .meta.block,
samp .lowerident,
code .lowerident {
color: var(--blue);
}
/* Types, Tags, and Modules */
samp .type,
code .type,
samp .meta.path,
code .meta.path,
samp .upperident,
code .upperident {
color: var(--green);
}
samp .dim,
code .dim {
opacity: 0.55;
}
.button-container {
position: absolute;
top: 0;
right: 0;
}
.copy-button {
background: var(--code-bg);
border: 1px solid var(--magenta);
color: var(--magenta);
display: inline-block;
cursor: pointer;
margin: 8px;
}
.copy-button:hover {
border-color: var(--green);
color: var(--green);
}
Reference in New Issue View Git Blame Copy Permalink