move styles to src (#2003)

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
parent: ec2e5c9922560667a4f9959ab7c3c9ab5c3dacfe (diff)
download: astro-8d934059f8d56d3d304cb9575c907654bf03b3ea.tar.gz
astro-8d934059f8d56d3d304cb9575c907654bf03b3ea.tar.zst
astro-8d934059f8d56d3d304cb9575c907654bf03b3ea.zip
27 files changed, 19 insertions, 180 deletions
diff --git a/examples/blog-multiple-authors/src/components/MainHead.astro b/examples/blog-multiple-authors/src/components/MainHead.astro
index c780d24c3..0bf1ec4b0 100644
--- a/examples/blog-multiple-authors/src/components/MainHead.astro
+++ b/examples/blog-multiple-authors/src/components/MainHead.astro
@@ -18,7 +18,7 @@ const { title, description, image, type, next, prev, canonicalURL } = Astro.prop
 <meta name="description" content={description}>
 <link rel="preconnect" href="https://fonts.gstatic.com">
 <link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
-<link rel="stylesheet" href="/global.css">
+<link rel="stylesheet" href={Astro.resolve('../styles/global.css')} />
 <!-- Sitemap -->
 <link rel="sitemap" href="/sitemap.xml">
 <!-- RSS -->
diff --git a/examples/blog-multiple-authors/public/global.css b/examples/blog-multiple-authors/src/styles/global.css
index d5891f6b4..d5891f6b4 100644
--- a/examples/blog-multiple-authors/public/global.css
+++ b/examples/blog-multiple-authors/src/styles/global.css
diff --git a/examples/blog/public/global.css b/examples/blog/public/global.css
deleted file mode 100644
index e8498b58e..000000000
--- a/examples/blog/public/global.css
+++ /dev/null
@@ -1,99 +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;
-}
-
-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;
-}
diff --git a/examples/blog/src/layouts/BlogPost.astro b/examples/blog/src/layouts/BlogPost.astro
index 06bba074d..b227d5222 100644
--- a/examples/blog/src/layouts/BlogPost.astro
+++ b/examples/blog/src/layouts/BlogPost.astro
@@ -10,7 +10,7 @@ const {title, description, publishDate, author, heroImage, permalink, alt} = con
 <html lang={ content.lang || 'en' }>
   <head>
     <BaseHead title={title} description={description} permalink={permalink} />
-    <link rel="stylesheet" href="/blog.css" />
+    <link rel="stylesheet" href={Astro.resolve('../styles/blog.css')} />
   </head>
 
   <body>
diff --git a/examples/blog/src/pages/index.astro b/examples/blog/src/pages/index.astro
index f96f5e049..cd839d382 100644
--- a/examples/blog/src/pages/index.astro
+++ b/examples/blog/src/pages/index.astro
@@ -27,7 +27,7 @@ allPosts = allPosts.sort((a, b) => new Date(b.publishDate).valueOf() - new Date(
 <html lang="en">
   <head>
     <BaseHead title={title} description={description} permalink={permalink} />
-    <link rel="stylesheet" href="/blog.css" />
+    <link rel="stylesheet" href={Astro.resolve('../styles/blog.css')} />
 
     <style>
       header {
diff --git a/examples/blog/public/blog.css b/examples/blog/src/styles/blog.css
index 319cdbc6f..319cdbc6f 100644
--- a/examples/blog/public/blog.css
+++ b/examples/blog/src/styles/blog.css
diff --git a/examples/docs/src/components/HeadCommon.astro b/examples/docs/src/components/HeadCommon.astro
index fded99bd4..fd24a81d8 100644
--- a/examples/docs/src/components/HeadCommon.astro
+++ b/examples/docs/src/components/HeadCommon.astro
@@ -8,9 +8,9 @@
 <link rel="sitemap" href="/sitemap.xml"/>
 
 <!-- Global CSS -->
-<link rel="stylesheet" href="/theme.css" />
-<link rel="stylesheet" href="/code.css" />
-<link rel="stylesheet" href="/index.css" />
+<link rel="stylesheet" href={Astro.resolve('../styles/theme.css')} />
+<link rel="stylesheet" href={Astro.resolve('../styles/code.css')} />
+<link rel="stylesheet" href={Astro.resolve('../styles/index.css')} />
 
 <!-- Preload Fonts -->
 <link rel="preconnect" href="https://fonts.googleapis.com">
diff --git a/examples/docs/public/code.css b/examples/docs/src/styles/code.css
index 3fbb26626..3fbb26626 100644
--- a/examples/docs/public/code.css
+++ b/examples/docs/src/styles/code.css
diff --git a/examples/docs/public/index.css b/examples/docs/src/styles/index.css
index e1e2e96c6..e1e2e96c6 100644
--- a/examples/docs/public/index.css
+++ b/examples/docs/src/styles/index.css
diff --git a/examples/docs/public/theme.css b/examples/docs/src/styles/theme.css
index 1bd29c2f6..1bd29c2f6 100644
--- a/examples/docs/public/theme.css
+++ b/examples/docs/src/styles/theme.css
diff --git a/examples/minimal/src/pages/index.astro b/examples/minimal/src/pages/index.astro
index 9def0d248..3ce40a78a 100644
--- a/examples/minimal/src/pages/index.astro
+++ b/examples/minimal/src/pages/index.astro
@@ -1,4 +1,5 @@
 ---
+// Component imports and setup JavaScript go here!
 ---
 
 <html lang="en">
@@ -8,6 +9,10 @@
 	<link rel="icon" type="image/x-icon" href="/favicon.ico" />
 	<meta name="viewport" content="width=device-width" />
 	<title>Welcome to Astro</title>
+	<style>
+		/* scoped CSS styles go here: */
+		/* h1 { ... } */
+	</style>
 </head>
 
 <body>
diff --git a/examples/portfolio-svelte/src/components/MainHead.astro b/examples/portfolio-svelte/src/components/MainHead.astro
index 166065fa8..ae2eb1d1f 100644
--- a/examples/portfolio-svelte/src/components/MainHead.astro
+++ b/examples/portfolio-svelte/src/components/MainHead.astro
@@ -8,6 +8,6 @@ const { title = 'Jeanine White: Personal Site', description = 'The personal site
 <title>{title}</title>
 
 <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-<link rel="stylesheet" type="text/css" href="/src/scss/global.scss">
+<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/global.scss')}>
 <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-svelte/src/scss/global.scss b/examples/portfolio-svelte/src/styles/global.scss
index b5a95caf2..b5a95caf2 100644
--- a/examples/portfolio-svelte/src/scss/global.scss
+++ b/examples/portfolio-svelte/src/styles/global.scss
diff --git a/examples/portfolio/src/components/MainHead.astro b/examples/portfolio/src/components/MainHead.astro
index 166065fa8..ae2eb1d1f 100644
--- a/examples/portfolio/src/components/MainHead.astro
+++ b/examples/portfolio/src/components/MainHead.astro
@@ -8,6 +8,6 @@ const { title = 'Jeanine White: Personal Site', description = 'The personal site
 <title>{title}</title>
 
 <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-<link rel="stylesheet" type="text/css" href="/src/scss/global.scss">
+<link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/global.scss')}>
 <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/src/scss/global.scss b/examples/portfolio/src/styles/global.scss
index b5a95caf2..b5a95caf2 100644
--- a/examples/portfolio/src/scss/global.scss
+++ b/examples/portfolio/src/styles/global.scss
diff --git a/examples/starter/src/pages/index.astro b/examples/starter/src/pages/index.astro
index 8c7239cc7..20c2352c5 100644
--- a/examples/starter/src/pages/index.astro
+++ b/examples/starter/src/pages/index.astro
@@ -21,8 +21,8 @@ let title = 'My Astro Site';
 
         <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     
-    <link rel="stylesheet" href="/style/global.css">
-    <link rel="stylesheet" href="/style/home.css">
+    <link rel="stylesheet" href={Astro.resolve('../styles/global.scss')}>
+    <link rel="stylesheet" href={Astro.resolve('../styles/home.scss')}>
 
     <style>
         header {
diff --git a/examples/framework-lit/public/style/global.css b/examples/starter/src/styles/global.css
index e1a3a6bd1..e1a3a6bd1 100644
--- a/examples/framework-lit/public/style/global.css
+++ b/examples/starter/src/styles/global.css
diff --git a/examples/starter/public/style/home.css b/examples/starter/src/styles/home.css
index 39de76a44..39de76a44 100644
--- a/examples/starter/public/style/home.css
+++ b/examples/starter/src/styles/home.css
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/public/global.css b/examples/with-markdown-plugins/src/styles/global.css
index ea585d269..ea585d269 100644
--- a/examples/with-markdown-plugins/public/global.css
+++ b/examples/with-markdown-plugins/src/styles/global.css
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/public/global.css b/examples/with-markdown/src/styles/global.css
index 16cd4577e..16cd4577e 100644
--- a/examples/with-markdown/public/global.css
+++ b/examples/with-markdown/src/styles/global.css
diff --git a/examples/with-nanostores/public/style/global.css b/examples/with-nanostores/public/style/global.css
deleted file mode 100644
index e1a3a6bd1..000000000
--- a/examples/with-nanostores/public/style/global.css
+++ /dev/null
@@ -1,28 +0,0 @@
-* {
-  box-sizing: border-box;
-  margin: 0;
-}
-
-:root {
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
-  font-size: 1rem;
-  --user-font-scale: 1rem - 16px;
-  font-size: clamp(0.875rem, 0.4626rem + 1.0309vw + var(--user-font-scale), 1.125rem);
-}
-
-body {
-  padding: 4rem 2rem;
-  width: 100%;
-  min-height: 100vh;
-  display: grid;
-  justify-content: center;
-  background: #f9fafb;
-  color: #111827;
-}
-
-@media (prefers-color-scheme: dark) {
-  body {
-    background: #111827;
-    color: #fff;
-  }
-}
diff --git a/examples/with-nanostores/public/style/home.css b/examples/with-nanostores/public/style/home.css
deleted file mode 100644
index 280398c17..000000000
--- a/examples/with-nanostores/public/style/home.css
+++ /dev/null
@@ -1,39 +0,0 @@
-:root {
-  --font-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-light: #f3f4f6;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-light: #1f2937;
-  }
-}
-
-a {
-  color: inherit;
-}
-
-header > div {
-  font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem);
-}
-
-header > div {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-header h1 {
-  font-size: 1em;
-  font-weight: 500;
-}
-header img {
-  width: 2em;
-  height: 2.667em;
-}
-
-h2 {
-  font-weight: 500;
-  font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem);
-}
diff --git a/examples/with-nanostores/src/pages/index.astro b/examples/with-nanostores/src/pages/index.astro
index 9ec93816d..264aa4389 100644
--- a/examples/with-nanostores/src/pages/index.astro
+++ b/examples/with-nanostores/src/pages/index.astro
@@ -16,8 +16,8 @@ import AdminsPreact from '../components/AdminsPreact.jsx';
 
         <link rel="icon" type="image/x-icon" href="/favicon.ico" />
 
-    <link rel="stylesheet" href="/style/global.css">
-    <link rel="stylesheet" href="/style/home.css">
+    <link rel="stylesheet" href={Astro.resolve('../styles/global.css')}>
+    <link rel="stylesheet" href={Astro.resolve('../styles/home.css')}>
 
     <style>
         header {
diff --git a/examples/starter/public/style/global.css b/examples/with-nanostores/src/styles/global.css
index e1a3a6bd1..e1a3a6bd1 100644
--- a/examples/starter/public/style/global.css
+++ b/examples/with-nanostores/src/styles/global.css
diff --git a/examples/framework-lit/public/style/home.css b/examples/with-nanostores/src/styles/home.css
index 280398c17..280398c17 100644
--- a/examples/framework-lit/public/style/home.css
+++ b/examples/with-nanostores/src/styles/home.css
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
parent	ec2e5c9922560667a4f9959ab7c3c9ab5c3dacfe (diff)
download	astro-8d934059f8d56d3d304cb9575c907654bf03b3ea.tar.gz astro-8d934059f8d56d3d304cb9575c907654bf03b3ea.tar.zst astro-8d934059f8d56d3d304cb9575c907654bf03b3ea.zip