michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

move styles to src (#2003)

Browse source
This commit is contained in:
Fred K. Schott 2021-11-24 11:10:12 -08:00 committed by GitHub
parent ec2e5c9922
commit 8d934059f8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
27 changed files with 19 additions and 180 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/blog-multiple-authors/src/components/MainHead.astro
View file

@ -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 -->

0
examples/blog-multiple-authors/public/global.css → examples/blog-multiple-authors/src/styles/global.css
View file

99
examples/blog/public/global.css
View file

@ -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;
}

2
examples/blog/src/layouts/BlogPost.astro
View file

@ -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>

2
examples/blog/src/pages/index.astro
View file

@ -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 {

0
examples/blog/public/blog.css → examples/blog/src/styles/blog.css
View file

6
examples/docs/src/components/HeadCommon.astro
View file

@ -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">

0
examples/docs/public/code.css → examples/docs/src/styles/code.css
View file

0
examples/docs/public/index.css → examples/docs/src/styles/index.css
View file

0
examples/docs/public/theme.css → examples/docs/src/styles/theme.css
View file

5
examples/minimal/src/pages/index.astro
View file

@ -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>

2
examples/portfolio-svelte/src/components/MainHead.astro
View file

@ -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">

0
examples/portfolio-svelte/src/scss/global.scss → examples/portfolio-svelte/src/styles/global.scss
View file

2
examples/portfolio/src/components/MainHead.astro
View file

@ -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">

0
examples/portfolio/src/scss/global.scss → examples/portfolio/src/styles/global.scss
View file

4
examples/starter/src/pages/index.astro
View file

@ -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 {

0
examples/framework-lit/public/style/global.css → examples/starter/src/styles/global.css
View file

0
examples/starter/public/style/home.css → examples/starter/src/styles/home.css
View file

2
examples/with-markdown-plugins/src/layouts/main.astro
View file

@ -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;

0
examples/with-markdown-plugins/public/global.css → examples/with-markdown-plugins/src/styles/global.css
View file

2
examples/with-markdown/src/layouts/main.astro
View file

@ -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/>

0
examples/with-markdown/public/global.css → examples/with-markdown/src/styles/global.css
View file

28
examples/with-nanostores/public/style/global.css
View file

@ -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;
}
}

39
examples/with-nanostores/public/style/home.css
View file

@ -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);
}

4
examples/with-nanostores/src/pages/index.astro
View file

@ -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 {

0
examples/starter/public/style/global.css → examples/with-nanostores/src/styles/global.css
View file

0
examples/framework-lit/public/style/home.css → examples/with-nanostores/src/styles/home.css
View file