summaryrefslogtreecommitdiff
path: root/examples
diff options
context:
space:
mode:
Diffstat (limited to 'examples')
-rw-r--r--examples/blog-multiple-authors/public/global.css (renamed from examples/blog-multiple-authors/public/global.scss)0
-rw-r--r--examples/blog/public/blog.css (renamed from examples/blog/public/blog.scss)0
-rw-r--r--examples/blog/public/global.css95
-rw-r--r--examples/blog/public/global.scss93
-rw-r--r--examples/portfolio/src/components/MainHead.astro3
-rw-r--r--examples/portfolio/src/scss/global.scss (renamed from examples/portfolio/public/global.scss)0
-rw-r--r--examples/with-markdown/public/global.css (renamed from examples/with-markdown/public/styles/prism.scss)163
-rw-r--r--examples/with-markdown/public/styles/global.scss6
-rw-r--r--examples/with-markdown/src/layouts/main.astro2
9 files changed, 182 insertions, 180 deletions
diff --git a/examples/blog-multiple-authors/public/global.scss b/examples/blog-multiple-authors/public/global.css
index d5891f6b4..d5891f6b4 100644
--- a/examples/blog-multiple-authors/public/global.scss
+++ b/examples/blog-multiple-authors/public/global.css
diff --git a/examples/blog/public/blog.scss b/examples/blog/public/blog.css
index 2cee5a81a..2cee5a81a 100644
--- a/examples/blog/public/blog.scss
+++ b/examples/blog/public/blog.css
diff --git a/examples/blog/public/global.css b/examples/blog/public/global.css
new file mode 100644
index 000000000..3566fce27
--- /dev/null
+++ b/examples/blog/public/global.css
@@ -0,0 +1,95 @@
+:root {
+ --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
+ --color-green: #17c083;
+}
+
+* {
+ box-sizing: border-box;
+ margin: 0;
+}
+
+html {
+ display: grid;
+ width: 100%;
+ max-width: 100vw;
+ overflow: hidden;
+ height: 100%;
+ background-color: #000014;
+}
+
+html,
+body {
+ padding: 0;
+ font-size: clamp(14px, calc(1rem + (3vw - 1.2rem)), 20px);
+ font-family: var(--font-sans);
+ font-weight: 400;
+ background-image: radial-gradient(87.7% 87.7% at 85.6% 18.14%, #111827 0%, #000014 100%);
+ background-repeat: no-repeat;
+ color: #f3f4f6;
+}
+
+body {
+ position: relative;
+ display: grid;
+ place-items: center;
+ min-width: 100%;
+ max-width: 100vw;
+ min-height: 100vh;
+ overflow-x: hidden;
+}
+
+.visually-hidden {
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ height: 1px;
+ overflow: hidden;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+}
+
+a {
+ position: relative;
+ text-decoration: none;
+ color: var(--color-green);
+ padding: 0.05em 0.125em;
+ margin: -0.05em -0.125em;
+ transition: color 120ms cubic-bezier(0.23, 1, 0.32, 1);
+ z-index: 0;
+ display: inline-block;
+}
+
+a:hover, a:focus {
+ color: black;
+}
+
+a:hover::before, a:focus::before {
+ transform: scaleY(1);
+ background: var(--color-green);
+}
+
+a:visited {
+ color: var(--color-green);
+}
+
+a:visited:hover, a:visited:focus {
+ color: black;
+}
+
+a::before {
+ transform-origin: bottom center;
+ content: '';
+ display: block;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ inset: 0;
+ background: var(--color-green);
+ pointer-events: none;
+ transform: scaleY(0.05);
+ transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 120ms cubic-bezier(0.23, 1, 0.32, 1);
+ z-index: -1;
+} \ No newline at end of file
diff --git a/examples/blog/public/global.scss b/examples/blog/public/global.scss
deleted file mode 100644
index 5aea52933..000000000
--- a/examples/blog/public/global.scss
+++ /dev/null
@@ -1,93 +0,0 @@
-:root {
- --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
- --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
- 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
- --color-green: #17c083;
-}
-
-* {
- box-sizing: border-box;
- margin: 0;
-}
-html {
- display: grid;
- width: 100%;
- max-width: 100vw;
- overflow: hidden;
- height: 100%;
- background-color: #000014;
-}
-html,
-body {
- padding: 0;
- font-size: clamp(14px, calc(1rem + (3vw - 1.2rem)), 20px);
- font-family: var(--font-sans);
- font-weight: 400;
- background-image: radial-gradient(87.7% 87.7% at 85.6% 18.14%, #111827 0%, #000014 100%);
- background-repeat: no-repeat;
- color: #f3f4f6;
-}
-body {
- position: relative;
- display: grid;
- place-items: center;
- min-width: 100%;
- max-width: 100vw;
- min-height: 100vh;
- overflow-x: hidden;
-}
-.visually-hidden {
- clip: rect(0 0 0 0);
- clip-path: inset(50%);
- height: 1px;
- overflow: hidden;
- position: absolute;
- white-space: nowrap;
- width: 1px;
-}
-a {
- position: relative;
- text-decoration: none;
- color: var(--color-green);
- padding: 0.05em 0.125em;
- margin: -0.05em -0.125em;
- transition: color 120ms cubic-bezier(0.23, 1, 0.32, 1);
- z-index: 0;
- display: inline-block;
-
- &:hover,
- &:focus {
- color: rgba(0, 0, 0, 1);
-
- &::before {
- transform: scaleY(1);
- background: var(--color-green);
- }
- }
-
- &:visited {
- // color: var(--color-green);
- color: var(--color-green);
- &:hover,
- &:focus {
- color: rgba(0, 0, 0, 1);
- }
- }
-
- &::before {
- transform-origin: bottom center;
- content: '';
- display: block;
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- inset: 0;
- background: var(--color-green);
- pointer-events: none;
- transform: scaleY(0.05);
- transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 120ms cubic-bezier(0.23, 1, 0.32, 1);
- z-index: -1;
- }
-}
diff --git a/examples/portfolio/src/components/MainHead.astro b/examples/portfolio/src/components/MainHead.astro
index 3a542edc5..df3c4f7a3 100644
--- a/examples/portfolio/src/components/MainHead.astro
+++ b/examples/portfolio/src/components/MainHead.astro
@@ -6,7 +6,6 @@ const { title = 'Jeanine White: Personal Site' } = Astro.props;
<title>{title}</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
-
-<link rel="stylesheet" type="text/css" href="/global.css">
+<link rel="stylesheet" type="text/css" href="/_astro/src/scss/global.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;700;900&display=swap" rel="stylesheet">
diff --git a/examples/portfolio/public/global.scss b/examples/portfolio/src/scss/global.scss
index b5a95caf2..b5a95caf2 100644
--- a/examples/portfolio/public/global.scss
+++ b/examples/portfolio/src/scss/global.scss
diff --git a/examples/with-markdown/public/styles/prism.scss b/examples/with-markdown/public/global.css
index 29a3cf5d8..7cb613d30 100644
--- a/examples/with-markdown/public/styles/prism.scss
+++ b/examples/with-markdown/public/global.css
@@ -1,69 +1,69 @@
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;
+ 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;
+ text-shadow: none;
+ background: #b3d4fc;
}
@media print {
- pre,
+ pre,
code {
- text-shadow: none;
- }
+ text-shadow: none;
+ }
}
pre {
- margin: 0.5rem 0 16px;
- padding: 0.8rem 1rem 0.9rem;
- overflow: auto;
- background: #282a36;
- border-radius: 4px;
+ 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;
+ padding: 0.1em 0.3em;
+ color: #db4c69;
+ background: #f9f2f4;
+ border-radius: 0.3em;
+ white-space: pre-wrap;
}
/*********************************************************
* Tokens
*/
.namespace {
- opacity: 0.7;
+ opacity: 0.7;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
- color: #6a9955;
+ color: #6a9955;
}
.token.punctuation {
- color: #d4d4d4;
+ color: #d4d4d4;
}
.token.property,
@@ -73,7 +73,7 @@ pre {
.token.constant,
.token.symbol,
.token.deleted {
- color: #b5cea8;
+ color: #b5cea8;
}
.token.selector,
@@ -82,7 +82,7 @@ pre {
.token.char,
.token.builtin,
.token.inserted {
- color: #ce9178;
+ color: #ce9178;
}
.token.operator,
@@ -90,86 +90,86 @@ pre {
.token.url,
.language-css .token.string,
.style .token.string {
- color: #d4d4d4;
- background: rgb(45, 55, 72);
+ color: #d4d4d4;
+ background: #2d3748;
}
.token.atrule,
.token.attr-value,
.token.keyword {
- color: #c586c0;
+ color: #c586c0;
}
.token.function {
- color: #dcdcaa;
+ color: #dcdcaa;
}
.token.regex,
.token.important,
.token.variable {
- color: #d16969;
+ color: #d16969;
}
.token.important,
.token.bold {
- font-weight: bold;
+ font-weight: bold;
}
.token.italic {
- font-style: italic;
+ font-style: italic;
}
.token.constant {
- color: #9cdcfe;
+ color: #9cdcfe;
}
.token.class-name {
- color: #4ec9b0;
+ color: #4ec9b0;
}
.token.parameter {
- color: #9cdcfe;
+ color: #9cdcfe;
}
.token.interpolation {
- color: #9cdcfe;
+ color: #9cdcfe;
}
.token.punctuation.interpolation-punctuation {
- color: #569cd6;
+ color: #569cd6;
}
.token.boolean {
- color: #569cd6;
+ color: #569cd6;
}
.token.property {
- color: #9cdcfe;
+ color: #9cdcfe;
}
.token.selector {
- color: #d7ba7d;
+ color: #d7ba7d;
}
.token.tag {
- color: #569cd6;
+ color: #569cd6;
}
.token.attr-name {
- color: #9cdcfe;
+ color: #9cdcfe;
}
.token.attr-value {
- color: #ce9178;
+ color: #ce9178;
}
.token.entity {
- color: #4ec9b0;
- cursor: unset;
+ color: #4ec9b0;
+ cursor: unset;
}
.token.namespace {
- color: #4ec9b0;
+ color: #4ec9b0;
}
/*********************************************************
@@ -177,52 +177,59 @@ pre {
*/
pre[class*='language-javascript'],
code[class*='language-javascript'] {
- color: #4ec9b0;
+ color: #4ec9b0;
}
pre[class*='language-css'],
code[class*='language-css'] {
- color: #ce9178;
+ color: #ce9178;
}
pre[class*='language-html'],
code[class*='language-html'] {
- color: #d4d4d4;
+ color: #d4d4d4;
}
.language-html .token.punctuation {
- color: #808080;
+ color: #808080;
}
/*********************************************************
* Line highlighting
*/
pre[data-line] {
- position: relative;
+ position: relative;
}
pre > code {
- position: relative;
- z-index: 1;
+ 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;
+ 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;
+ color: #d4d4d4;
}
+
.token.comment {
- color: #fff7;
+ color: #fff7;
+}
+
+body {
+ max-width: 900px;
+ margin: auto;
}
+
diff --git a/examples/with-markdown/public/styles/global.scss b/examples/with-markdown/public/styles/global.scss
deleted file mode 100644
index 5d758a003..000000000
--- a/examples/with-markdown/public/styles/global.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@use "./prism.scss";
-
-body {
- max-width: 900px;
- margin: auto;
-}
diff --git a/examples/with-markdown/src/layouts/main.astro b/examples/with-markdown/src/layouts/main.astro
index c0e71dd45..548cbd2ca 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="/styles/global.css">
+ <link rel="stylesheet" href="/global.css">
</head>
<body>
<slot/>
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-09 20:35:17 +0000