move styles to src (#2003)

2 files changed, 54 insertions, 1 deletions

diff --git a/examples/with-markdown-plugins/src/layouts/main.astro b/examples/with-markdown-plugins/src/layouts/main.astro
index e0a60c7ad..467f16951 100644
--- a/examples/with-markdown-plugins/src/layouts/main.astro
+++ b/examples/with-markdown-plugins/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')}>
     <style>
       .nav {
         border-bottom: 1px solid #ccc;
diff --git a/examples/with-markdown-plugins/src/styles/global.css b/examples/with-markdown-plugins/src/styles/global.css
new file mode 100644
index 000000000..ea585d269
--- /dev/null
+++ b/examples/with-markdown-plugins/src/styles/global.css
@@ -0,0 +1,53 @@
+body {
+  font-family: system-ui;
+}
+
+.content {
+  max-width: 640px;
+  margin: 40px auto;
+  padding: 0 20px;
+}
+
+.title {
+  position: relative;
+}
+.title a {
+  position: absolute;
+  display: block;
+  height: 100%;
+  width: 100%;
+  color: inherit;
+}
+
+.title a:before {
+  position: absolute;
+  right: 100%;
+  display: block;
+  content: '#';
+  margin-right: 0.2em;
+  visibility: hidden;
+  opacity: 0.5;
+}
+
+.title:hover a:before {
+  visibility: visible;
+}
+
+.remark-code-title,
+pre[class^='language-'] {
+  padding: 10px;
+  margin: 0;
+}
+
+.remark-code-title {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 4px 4px 0 0;
+  background: rgba(0, 0, 0, 0.08);
+  font-family: monospace;
+  font-weight: bold;
+}
+
+pre[class^='language-'] {
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 0 0 4px 4px;
+}