diff options
| author |  Fred K. Schott <fkschott@gmail.com>
| 2021-11-24 11:10:12 -0800 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-11-24 11:10:12 -0800 |
| commit | 8d934059f8d56d3d304cb9575c907654bf03b3ea (patch) | |
| tree | 35654e8f6907dc1f39b5bf62afdb1647da59ef38 /examples/with-markdown/src | |
| parent | ec2e5c9922560667a4f9959ab7c3c9ab5c3dacfe (diff) | |
| download | astro-8d934059f8d56d3d304cb9575c907654bf03b3ea.tar.gz astro-8d934059f8d56d3d304cb9575c907654bf03b3ea.tar.zst astro-8d934059f8d56d3d304cb9575c907654bf03b3ea.zip | |
move styles to src (#2003)
Diffstat (limited to 'examples/with-markdown/src')
| -rw-r--r-- | examples/with-markdown/src/layouts/main.astro | 2 | ||||
| -rw-r--r-- | examples/with-markdown/src/styles/global.css | 234 |
2 files changed, 235 insertions, 1 deletions
diff --git a/examples/with-markdown/src/layouts/main.astro b/examples/with-markdown/src/layouts/main.astro index 548cbd2ca..ae7f04565 100644 --- a/examples/with-markdown/src/layouts/main.astro +++ b/examples/with-markdown/src/layouts/main.astro @@ -9,7 +9,7 @@ const { content } = Astro.props; <link rel="icon" type="image/x-icon" href="/favicon.ico" /> <title>{content.title}</title> - <link rel="stylesheet" href="/global.css"> + <link rel="stylesheet" href={Astro.resolve('../styles/global.css')}> </head> <body> <slot/> diff --git a/examples/with-markdown/src/styles/global.css b/examples/with-markdown/src/styles/global.css new file mode 100644 index 000000000..16cd4577e --- /dev/null +++ b/examples/with-markdown/src/styles/global.css @@ -0,0 +1,234 @@ +pre, +code { + color: #d4d4d4; + font-size: 14px; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + line-height: 1.5; + direction: ltr; + white-space: pre; + text-align: left; + text-shadow: none; + word-break: normal; + word-spacing: normal; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre::selection, +code::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + pre, + code { + text-shadow: none; + } +} + +pre { + margin: 0.5rem 0 16px; + padding: 0.8rem 1rem 0.9rem; + overflow: auto; + background: #282a36; + border-radius: 4px; +} + +:not(pre) > code { + padding: 0.1em 0.3em; + color: #db4c69; + background: #f9f2f4; + border-radius: 0.3em; + white-space: pre-wrap; +} + +/********************************************************* +* Tokens +*/ +.namespace { + opacity: 0.7; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #6a9955; +} + +.token.punctuation { + color: #d4d4d4; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #b5cea8; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #ce9178; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #d4d4d4; + background: #2d3748; +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #c586c0; +} + +.token.function { + color: #dcdcaa; +} + +.token.regex, +.token.important, +.token.variable { + color: #d16969; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.constant { + color: #9cdcfe; +} + +.token.class-name { + color: #4ec9b0; +} + +.token.parameter { + color: #9cdcfe; +} + +.token.interpolation { + color: #9cdcfe; +} + +.token.punctuation.interpolation-punctuation { + color: #569cd6; +} + +.token.boolean { + color: #569cd6; +} + +.token.property { + color: #9cdcfe; +} + +.token.selector { + color: #d7ba7d; +} + +.token.tag { + color: #569cd6; +} + +.token.attr-name { + color: #9cdcfe; +} + +.token.attr-value { + color: #ce9178; +} + +.token.entity { + color: #4ec9b0; + cursor: unset; +} + +.token.namespace { + color: #4ec9b0; +} + +/********************************************************* +* Language Specific +*/ +pre[class*='language-javascript'], +code[class*='language-javascript'] { + color: #4ec9b0; +} + +pre[class*='language-css'], +code[class*='language-css'] { + color: #ce9178; +} + +pre[class*='language-html'], +code[class*='language-html'] { + color: #d4d4d4; +} + +.language-html .token.punctuation { + color: #808080; +} + +/********************************************************* +* Line highlighting +*/ +pre[data-line] { + position: relative; +} + +pre > code { + position: relative; + z-index: 1; +} + +.line-highlight { + position: absolute; + right: 0; + left: 0; + z-index: 0; + margin-top: 1em; + padding: inherit 0; + line-height: inherit; + white-space: pre; + background: #f7ebc6; + box-shadow: inset 5px 0 0 #f7d87c; + pointer-events: none; +} + +pre[class*='language-bash'] .token.function { + color: #d4d4d4; +} + +.token.comment { + color: #fff7; +} + +body { + max-width: 900px; + margin: auto; +} |