diff --git a/site/src/styles/copy-snippet.css b/site/src/styles/copy-snippet.css index d1f6963c..0f334089 100644 --- a/site/src/styles/copy-snippet.css +++ b/site/src/styles/copy-snippet.css @@ -8,9 +8,9 @@ } .snippet-for-copy { - border: 1px solid hsla(0, 0%, 0%, .15); + /* border: 1px solid hsla(0, 0%, 0%, .15); */ border-radius: 1px; - background: hsla(0, 0%, 0%, .075); + /* background: hsla(0, 0%, 0%, .075); */ margin: 10px 0; font-size: .95em; } diff --git a/site/src/styles/github-markdown.css b/site/src/styles/github-markdown.css index 872efc08..1de6600b 100644 --- a/site/src/styles/github-markdown.css +++ b/site/src/styles/github-markdown.css @@ -10,6 +10,11 @@ color: hsl(226, 52%, 27%) !important; } +.markdown-body h1, h2, h3, h4, h5 { + /* Google Sans is for headlines only per Google guidelines*/ + font-family: Arial, Helvetica, sans-serif !important; +} + @media (max-width: 767px) { .markdown-body { padding: 15px; diff --git a/site/src/styles/main.css b/site/src/styles/main.css index 1130b603..3aee3fa9 100644 --- a/site/src/styles/main.css +++ b/site/src/styles/main.css @@ -99,7 +99,7 @@ p, ul { .page-header__navigation li { display: inline; - margin-right: 0.6rem; + margin: 6px 0px 0px 15px; } .page-header__navigation li:last-child { @@ -223,11 +223,15 @@ main.page-main { } .secondary-font-color { - /* TODO: opt for font color */ - color: hsl(330, 73%, 49%); + color: #fe8ec6; +} + +.tertiary-font-color { + color: #d74b91; } main.page-main .heading { + letter-spacing: -1px; font-size: 1.5em; font-weight: 900; margin: 0; @@ -258,7 +262,7 @@ main.page-main .heading em { @media (min-width: 600px) { main.page-main .heading { - font-size: 2em; + font-size: 2.1em; margin: 24px 0 18px 0; } @@ -268,7 +272,7 @@ main.page-main .heading em { } .page-header__subtitle { - margin: 1em 0; + margin: 1.7em 0; } .page-header__logo-image { diff --git a/site/src/styles/prism.css b/site/src/styles/prism.css new file mode 100644 index 00000000..e0e177a6 --- /dev/null +++ b/site/src/styles/prism.css @@ -0,0 +1,206 @@ +/** + * Shades of Purple Theme for Prism.js + * + * @author Ahmad Awais + * @support Follow/tweet at https://twitter.com/MrAhmadAwais/ + */ + +code[class*='language-'], +pre[class*='language-'] { + color: #9efeff; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; + + font-family: 'Operator Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + font-weight: 400; + font-size: 17px; + line-height: 25px; + letter-spacing: 0.5px; + text-shadow: 0 1px #222245; +} + +pre[class*='language-']::-moz-selection, +pre[class*='language-'] ::-moz-selection, +code[class*='language-']::-moz-selection, +code[class*='language-'] ::-moz-selection, +pre[class*='language-']::selection, +pre[class*='language-'] ::selection, +code[class*='language-']::selection, +code[class*='language-'] ::selection { + color: inherit; + background: #a599e9; +} + +/* Code blocks. */ +pre[class*='language-'] { + padding: 2em; + margin: 0.5em 0; + overflow: auto; +} + +:not(pre) > code[class*='language-'], +pre[class*='language-'] { + background: #1e1e3f; +} + +/* Inline code */ +:not(pre) > code[class*='language-'] { + padding: 0.1em; + border-radius: 0.3em; +} + +.token { + font-weight: 400; +} + +.token.comment, +.token.prolog, +.token.cdata { + color: #b362ff; +} + +.token.delimiter, +.token.keyword, +.token.selector, +.token.important, +.token.atrule { + color: #ff9d00; +} + +.token.operator, +.token.attr-name { + color: rgb(255, 180, 84); +} + +.token.punctuation { + color: #ffffff; +} + +.token.boolean { + color: rgb(255, 98, 140); +} + +.token.tag, +.token.tag .punctuation, +.token.doctype, +.token.builtin { + color: rgb(255, 157, 0); +} + +.token.entity, +.token.symbol { + color: #6897bb; +} + +.token.number { + color: #ff628c; +} + +.token.property, +.token.constant, +.token.variable { + color: #ff628c; +} + +.token.string, +.token.char { + color: #a5ff90; +} + +.token.attr-value, +.token.attr-value .punctuation { + color: #a5c261; +} + +.token.attr-value .punctuation:first-child { + color: #a9b7c6; +} + +.token.url { + color: #287bde; + text-decoration: underline; +} + +.token.function { + color: rgb(250, 208, 0); +} + +.token.regex { + background: #364135; +} + +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.inserted { + background: #00ff00; +} + +.token.deleted { + background: #ff000d; +} + +code.language-css .token.property, +code.language-css .token.property + .token.punctuation { + color: #a9b7c6; +} + +code.language-css .token.id { + color: #ffc66d; +} + +code.language-css .token.selector > .token.class, +code.language-css .token.selector > .token.attribute, +code.language-css .token.selector > .token.pseudo-class, +code.language-css .token.selector > .token.pseudo-element { + color: #ffc66d; +} + +.token.class-name { + color: #fb94ff; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + background: none; +} + +pre .line-highlight, +pre .line-highlight.line-highlight, +pre > code.line-highlight { + margin-top: 36px; + background: linear-gradient(to right, rgba(179, 98, 255, 0.17), transparent); +} + +pre .line-highlight:before, +pre > code.line-highlight:before, +pre .line-highlight[data-end]:after, +pre > code.line-highlight[data-end]:after { + content: ''; +} + +/* edits */ + +pre.language-html, pre.language-js, pre.language-bash, pre.language-css { + font-size: 15px; +} \ No newline at end of file diff --git a/site/yarn.lock b/site/yarn.lock index 48f70c53..2b3506a4 100644 --- a/site/yarn.lock +++ b/site/yarn.lock @@ -2,6 +2,13 @@ # yarn lockfile v1 +"@11ty/eleventy-plugin-syntaxhighlight@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-3.0.1.tgz#24fb872d1bb8f8dee8d6df22d3614aaff6b45306" + integrity sha512-+cXc5oyFagCat+JgIh+4cI1otQMVYSsXjxj2/8J78I+p6ICvCfObzvi7PTXvDPbwXOQP8RkcB4DYOP+MKkcPAw== + dependencies: + prismjs "^1.17.1" + "@11ty/eleventy@^0.8.3": version "0.8.3" resolved "https://registry.yarnpkg.com/@11ty/eleventy/-/eleventy-0.8.3.tgz#94c417f7b658e78ab5f9ce64b91ff32b4ae5de31" @@ -508,6 +515,15 @@ clean-css@^4.1.11, clean-css@^4.2.1: dependencies: source-map "~0.6.0" +clipboard@^2.0.0: + version "2.0.6" + resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.6.tgz#52921296eec0fdf77ead1749421b21c968647376" + integrity sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg== + dependencies: + good-listener "^1.2.2" + select "^1.1.2" + tiny-emitter "^2.0.0" + cliui@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1" @@ -707,6 +723,11 @@ del@^2.2.0: pinkie-promise "^2.0.0" rimraf "^2.2.8" +delegate@^3.1.2: + version "3.2.0" + resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166" + integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw== + delegates@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a" @@ -1219,6 +1240,13 @@ gonzales-pe@^4.2.3: dependencies: minimist "1.1.x" +good-listener@^1.2.2: + version "1.2.2" + resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50" + integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA= + dependencies: + delegate "^3.1.2" + graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6: version "4.2.3" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423" @@ -2328,6 +2356,13 @@ pretty@^2.0.0: extend-shallow "^2.0.1" js-beautify "^1.6.12" +prismjs@^1.17.1: + version "1.20.0" + resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.20.0.tgz#9b685fc480a3514ee7198eac6a3bf5024319ff03" + integrity sha512-AEDjSrVNkynnw6A+B1DsFkd6AVdTnp+/WoUixFRULlCLZVRZlVQMVWio/16jv7G1FscUxQxOQhWwApgbnxr6kQ== + optionalDependencies: + clipboard "^2.0.0" + process-nextick-args@~2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2" @@ -2652,6 +2687,11 @@ section-matter@^1.0.0: extend-shallow "^2.0.1" kind-of "^6.0.0" +select@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d" + integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0= + semver-compare@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc" @@ -3046,6 +3086,11 @@ time-require@^0.1.2: pretty-ms "^0.2.1" text-table "^0.2.0" +tiny-emitter@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423" + integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q== + to-array@0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890"