mirror of
https://github.com/roc-lang/roc.git
synced 2024-09-20 07:17:50 +03:00
WIP initial scope for website update
This commit is contained in:
Luke Boswell
parent
5cafc50a50
commit
a6654c6e37
2
www/generate_website/.gitignore
vendored
Normal file
2
www/generate_website/.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
roc-website
|
||||
dist/
|
||||
9
www/generate_website/build.sh
Normal file
9
www/generate_website/build.sh
Normal file
@ -0,0 +1,9 @@
|
||||
rm -rf dist/
|
||||
|
||||
roc run main.roc -- content/ dist/
|
||||
|
||||
cp -r static/* dist/
|
||||
|
||||
cd dist
|
||||
|
||||
simple-http-server -p 8000
|
||||
23
www/generate_website/content/contributing_page.md
Normal file
23
www/generate_website/content/contributing_page.md
Normal file
@ -0,0 +1,23 @@
|
||||
# Contribute to Roc
|
||||
|
||||
## Sponsorship
|
||||
|
||||
- [Github Sponsorship](https://github.com/sponsors/roc-lang)
|
||||
|
||||
## Contributor Guidelines
|
||||
|
||||
- [CONTRIBUTING](https://github.com/roc-lang/roc/blob/main/CONTRIBUTING.md)
|
||||
|
||||
## Ideas & Proposals
|
||||
|
||||
- [Good First Issues](https://github.com/roc-lang/roc/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22)
|
||||
|
||||
## Community Values & Code of Conduct
|
||||
|
||||
## Package Development
|
||||
|
||||
## Platform Development
|
||||
|
||||
## Roc Jobs Board
|
||||
|
||||
## Contact the Team
|
||||
42
www/generate_website/content/discover_page.md
Normal file
42
www/generate_website/content/discover_page.md
Normal file
@ -0,0 +1,42 @@
|
||||
# Discover Roc
|
||||
|
||||
## Meet the Community
|
||||
|
||||
### Zulip Chat
|
||||
|
||||
- [roc.zulipchat.com](https://roc.zulipchat.com/)
|
||||
|
||||
### Github Project
|
||||
|
||||
- [roc-lang/roc](https://github.com/roc-lang/roc)
|
||||
|
||||
### Meetups & Events
|
||||
|
||||
### Socials
|
||||
|
||||
## Roc Applications
|
||||
|
||||
### Tools & Scripts
|
||||
|
||||
### Web (coming soon)
|
||||
|
||||
### Networking & Servers (coming soon)
|
||||
|
||||
### Graphical (coming soon)
|
||||
|
||||
### Scientific (coming soon)
|
||||
|
||||
### Embedded (coming soon)
|
||||
|
||||
## Roc Platforms
|
||||
|
||||
## Roc Packages
|
||||
|
||||
## Talks and Publications
|
||||
|
||||
- Roc at Handmade Seattle - November 12, 2021 (very low-level explanation of how Roc's compiler makes programs run fast)
|
||||
- Outperforming Imperative with Pure Functional Languages - October 1, 2021 (about Roc's runtime performance and optimizer)
|
||||
- A taste of Roc - September 23, 2021 (syntax, application examples)
|
||||
- Roc at the Philly ETE conference - May 6, 2021 (platforms and applications)
|
||||
- Roc on Zig Showtime - April 24, 2021 (making a platform)
|
||||
- Roc at the Berlin FP Meetup - September 1, 2020 (overall vision for the language)
|
||||
34
www/generate_website/content/getting_started_page.md
Normal file
34
www/generate_website/content/getting_started_page.md
Normal file
@ -0,0 +1,34 @@
|
||||
# Getting Started
|
||||
|
||||
## Installation
|
||||
|
||||
- [Linux x86-64 Getting Started Guide](https://github.com/roc-lang/roc/blob/main/getting_started/linux_x86_64.md)
|
||||
- [MacOS Apple Silicon Getting Started Guide](https://github.com/roc-lang/roc/blob/main/getting_started/macos_apple_silicon.md)
|
||||
- [MacOS x86-64 Getting Started Guide](https://github.com/roc-lang/roc/blob/main/getting_started/macos_x86_64.md)
|
||||
- [Windows Getting Started Guide](https://github.com/roc-lang/roc/blob/main/getting_started/windows.md)
|
||||
- [Other Systems Getting Started Guide](https://github.com/roc-lang/roc/blob/main/getting_started/other.md)
|
||||
|
||||
## Nightly Builds
|
||||
|
||||
## Roc CLI
|
||||
|
||||
- Develop `roc dev`
|
||||
|
||||
- Test `roc test`
|
||||
|
||||
- Run `roc run`
|
||||
|
||||
- Build `roc build`
|
||||
|
||||
- Format `roc format`
|
||||
|
||||
- Documentation `roc docs`
|
||||
|
||||
## Package Management
|
||||
|
||||
- URL Packages
|
||||
|
||||
## Editor Support
|
||||
|
||||
- Language Server
|
||||
- Neo(Vim)
|
||||
16
www/generate_website/content/home_page.md
Normal file
16
www/generate_website/content/home_page.md
Normal file
@ -0,0 +1,16 @@
|
||||
# Roc lang
|
||||
|
||||
- Fast
|
||||
- Functional
|
||||
- Friendly
|
||||
|
||||
## Try Roc
|
||||
<-- WebREPL goes here -->
|
||||
|
||||
## [Discover Roc](/discover_page.html)
|
||||
|
||||
## [Learn Roc](/learn_roc.html)
|
||||
|
||||
## [Contribute to Roc](contributing_page.html)
|
||||
|
||||
## [Getting Started](/getting_started_page.html)
|
||||
23
www/generate_website/content/learn_roc_page.md
Normal file
23
www/generate_website/content/learn_roc_page.md
Normal file
@ -0,0 +1,23 @@
|
||||
# Learn Roc
|
||||
|
||||
## Guides
|
||||
|
||||
### The Roc Tutorial
|
||||
|
||||
- [The Roc Tutorial](https://www.roc-lang.org/tutorial)
|
||||
|
||||
### Frequently Asked Questions
|
||||
|
||||
- [Link](https://github.com/roc-lang/roc/blob/main/FAQ.md)
|
||||
|
||||
### Roc for Elm Programmers
|
||||
|
||||
- [Roc for Elm Programmers](https://github.com/roc-lang/roc/blob/main/roc-for-elm-programmers.md)
|
||||
|
||||
## Documentation
|
||||
|
||||
### Builtin Package
|
||||
|
||||
### Basic-CLI Platform
|
||||
|
||||
### Language Reference
|
||||
88
www/generate_website/main.roc
Normal file
88
www/generate_website/main.roc
Normal file
@ -0,0 +1,88 @@
|
||||
app "roc-website"
|
||||
packages { pf: "../../examples/static-site-gen/platform/main.roc" }
|
||||
imports [
|
||||
pf.Html.{ html, head, body, footer, script, div, main, text, nav, a, link, meta },
|
||||
pf.Html.Attributes.{ content, name, id, href, rel, lang, class, title, charset, src },
|
||||
]
|
||||
provides [transformFileContent] to pf
|
||||
|
||||
pageData =
|
||||
Dict.empty {}
|
||||
|> Dict.insert "discover_page.html" { title: "Discover Roc", description: "Discover the Roc programming language" }
|
||||
|> Dict.insert "contributing_page.html" { title: "Contribute to Roc", description: "Contribute to the Roc programming language" }
|
||||
|> Dict.insert "learn_roc_page.html" { title: "Learn Roc", description: "Learn the Roc programming language" }
|
||||
|> Dict.insert "home_page.html" { title: "Roc Lang", description: "The Roc programming language" }
|
||||
|> Dict.insert "getting_started_page.html" { title: "Let's Roc", description: "Getting started with the Roc programming language" }
|
||||
|
||||
getPage : Str -> {title : Str, description : Str}
|
||||
getPage = \current ->
|
||||
Dict.get pageData current
|
||||
|> Result.onErr \_ -> crash "expected page to be in meta"
|
||||
|> Result.withDefault { title: "", description: ""}
|
||||
|
||||
getTitle : Str -> Str
|
||||
getTitle = \current ->
|
||||
getPage current |> .title
|
||||
|
||||
getDescription : Str -> Str
|
||||
getDescription = \current ->
|
||||
getPage current |> .description
|
||||
|
||||
transformFileContent : Str, Str -> Str
|
||||
transformFileContent = \page, htmlContent ->
|
||||
Html.render (view page htmlContent)
|
||||
|
||||
view : Str, Str -> Html.Node
|
||||
view = \page, htmlContent ->
|
||||
html [lang "en"] [
|
||||
head [] [
|
||||
meta [charset "utf-8"] [],
|
||||
Html.title [] [text (getTitle page)],
|
||||
meta [name "description", content (getDescription page)] [],
|
||||
meta [name "viewport", content "width=device-width"] [],
|
||||
link [rel "stylesheet", href "/site.css"] [],
|
||||
link [rel "icon", href "/favicon.svg"] [],
|
||||
],
|
||||
body [] [
|
||||
viewNavbar,
|
||||
main [] [
|
||||
text htmlContent,
|
||||
],
|
||||
footer [] [
|
||||
text "Made by people who like to make nice things. © 2022"
|
||||
]
|
||||
],
|
||||
script [src "/site.js"] [],
|
||||
]
|
||||
|
||||
viewNavbar : Html.Node
|
||||
viewNavbar =
|
||||
div [id "top-bar"] [
|
||||
nav [] [
|
||||
a [href "/home_page.html", title "The Roc Programming Language"] [
|
||||
rocLogo
|
||||
],
|
||||
div [id "top-bar-links"] [
|
||||
a [href "/discover_page.html"] [text "discover"],
|
||||
a [href "/learn_roc_page.html"] [text "learn"],
|
||||
a [href "/contributing_page.html"] [text "contribute"],
|
||||
a [href "/getting_started_page.html"] [text "getting started"],
|
||||
],
|
||||
],
|
||||
]
|
||||
|
||||
rocLogo =
|
||||
(Html.element "svg") [
|
||||
(Html.attribute "viewBox") "0 -6 51 58",
|
||||
(Html.attribute "fill") "#7c38f5",
|
||||
(Html.attribute "xmlns") "http://www.w3.org/2000/svg",
|
||||
(Html.attribute "aria-labelledby") "logo-link",
|
||||
(Html.attribute "role") "img",
|
||||
class "roc-logo"
|
||||
] [
|
||||
(Html.element "title") [id "logo-link"] [text "Return to Roc Home"],
|
||||
(Html.element "polygon") [
|
||||
(Html.attribute "role") "presentation",
|
||||
(Html.attribute "points") "0,0 23.8834,3.21052 37.2438,19.0101 45.9665,16.6324 50.5,22 45,22 44.0315,26.3689 26.4673,39.3424 27.4527,45.2132 17.655,53 23.6751,22.7086",
|
||||
] [],
|
||||
]
|
||||
547
www/generate_website/static/site.css
Normal file
547
www/generate_website/static/site.css
Normal file
@ -0,0 +1,547 @@
|
||||
:root {
|
||||
/* WCAG AAA Compliant colors */
|
||||
--code-bg: #f4f8f9;
|
||||
--gray: #717171;
|
||||
--orange: #bf5000;
|
||||
--green: #0b8400;
|
||||
--cyan: #067c94;
|
||||
--blue: #05006d;
|
||||
--violet: #7c38f5;
|
||||
--violet-bg: #ece2fd;
|
||||
--magenta: #a20031;
|
||||
|
||||
--link-color: var(--violet);
|
||||
--code-link-color: var(--violet);
|
||||
--text-color: #000;
|
||||
--text-hover-color: var(--violet);
|
||||
--body-bg-color: #ffffff;
|
||||
--border-color: #717171;
|
||||
--faded-color: #4c4c4c;
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial,
|
||||
sans-serif;
|
||||
--font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier,
|
||||
monospace;
|
||||
--top-header-height: 67px;
|
||||
--sidebar-width: 280px;
|
||||
}
|
||||
|
||||
html {
|
||||
line-height: 1.5rem;
|
||||
background: var(--body-bg);
|
||||
color: var(--text-color);
|
||||
font-family: "Lato", sans-serif;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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 {
|
||||
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,
|
||||
#top-bar-links label {
|
||||
box-sizing: border-box;
|
||||
color: var(--top-bar-fg);
|
||||
font-size: 1.1rem;
|
||||
display: block;
|
||||
height: 40px;
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@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 */
|
||||
/* WCAG AAA Compliant colors */
|
||||
--code-bg: #202746;
|
||||
--gray: #b6b6b6;
|
||||
--orange: #fd6e08;
|
||||
--green: #8ecc88;
|
||||
--cyan: #12c9be;
|
||||
--blue: #b1afdf;
|
||||
--violet: #caadfb;
|
||||
--violet-bg: #332944;
|
||||
--magenta: #f39bac;
|
||||
|
||||
--link-color: var(--violet);
|
||||
--code-link-color: var(--violet);
|
||||
--text-color: #eaeaea;
|
||||
--body-bg-color: #0e0e0f;
|
||||
--border-color: var(--gray);
|
||||
--code-color: #eeeeee;
|
||||
--logo-solid: #8f8f8f;
|
||||
--faded-color: #bbbbbb;
|
||||
--gray: #6e6e6e;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
.roc-logo {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user