diff options
Diffstat (limited to 'examples/portfolio-svelte/src')
| -rw-r--r-- | examples/portfolio-svelte/src/components/MainHead.astro | 12 | ||||
| -rw-r--r-- | examples/portfolio-svelte/src/layouts/project.astro | 153 | ||||
| -rw-r--r-- | examples/portfolio-svelte/src/pages/404.astro | 23 | ||||
| -rw-r--r-- | examples/portfolio-svelte/src/pages/about.astro | 99 | ||||
| -rw-r--r-- | examples/portfolio-svelte/src/pages/index.astro | 453 | ||||
| -rw-r--r-- | examples/portfolio-svelte/src/pages/projects.astro | 46 | ||||
| -rw-r--r-- | examples/portfolio-svelte/src/styles/global.scss | 224 |
7 files changed, 502 insertions, 508 deletions
diff --git a/examples/portfolio-svelte/src/components/MainHead.astro b/examples/portfolio-svelte/src/components/MainHead.astro index ae2eb1d1f..0597b178f 100644 --- a/examples/portfolio-svelte/src/components/MainHead.astro +++ b/examples/portfolio-svelte/src/components/MainHead.astro @@ -2,12 +2,12 @@ const { title = 'Jeanine White: Personal Site', description = 'The personal site of Jeanine White' } = Astro.props; --- -<meta charset="UTF-8"> -<meta name="description" property="og:description" content={description}> -<meta name="viewport" content="width=device-width"> +<meta charset="UTF-8" /> +<meta name="description" property="og:description" content={description} /> +<meta name="viewport" content="width=device-width" /> <title>{title}</title> <link rel="icon" type="image/x-icon" href="/favicon.ico" /> -<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"> +<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/layouts/project.astro b/examples/portfolio-svelte/src/layouts/project.astro index da2a4741b..e60be99ae 100644 --- a/examples/portfolio-svelte/src/layouts/project.astro +++ b/examples/portfolio-svelte/src/layouts/project.astro @@ -6,87 +6,86 @@ import Nav from '../components/Nav.svelte'; const { content } = Astro.props; --- -<html lang={ content.lang || 'en' }> - <head> - <MainHead title={content.title} description={content.description} /> - <style lang="scss"> - .hero { - padding: 8rem; - display: flex; - background-color: var(--t-fg); - background-repeat: no-repeat; - background-size: cover; - min-height: 25vw; - color: white; - flex-direction: column; - align-items: center; - justify-content: center; - } - .tag { - margin-left: 0.5em; - margin-right: 0.5em; - text-transform: uppercase; +<html lang={content.lang || 'en'}> + <head> + <MainHead title={content.title} description={content.description} /> + <style lang="scss"> + .hero { + padding: 8rem; + display: flex; + background-color: var(--t-fg); + background-repeat: no-repeat; + background-size: cover; + min-height: 25vw; + color: white; + flex-direction: column; + align-items: center; + justify-content: center; + } - &:nth-of-type(1n) { - color: var(--c-green); - } - &:nth-of-type(2n) { - color: var(--c-orange); - } - &:nth-of-type(3n) { - color: var(--c-blue); - } - &:nth-of-type(4n) { - color: var(--c-pink); - } - } + .tag { + margin-left: 0.5em; + margin-right: 0.5em; + text-transform: uppercase; - .title { - font-size: var(--f-u10); - font-weight: 900; - text-transform: uppercase; - letter-spacing: 0.0625em; - } + &:nth-of-type(1n) { + color: var(--c-green); + } + &:nth-of-type(2n) { + color: var(--c-orange); + } + &:nth-of-type(3n) { + color: var(--c-blue); + } + &:nth-of-type(4n) { + color: var(--c-pink); + } + } - .leadIn { - color: var(--t-bg); - background-color: var(--t-fg); - } + .title { + font-size: var(--f-u10); + font-weight: 900; + text-transform: uppercase; + letter-spacing: 0.0625em; + } - .tagline { - font-weight: 300; - font-size: var(--f-u3); - line-height: 1.5; - } + .leadIn { + color: var(--t-bg); + background-color: var(--t-fg); + } - .content { - font-size: var(--f-u1); - line-height: 2.2; - } - </style> - </head> - <body> - <Nav /> - <header style={`background-image:url(${content.img})`} class="hero"> - <h1 class="title">{content.title}</h1> - </header> - <div class="leadIn"> - <div class="wrapper pt8 pb8 mb8 tac"> - {content.tags.map((t) => ( - <span class="tag">{t}</span> - ))} - <h3 class="tagline">{content.description}</h3> - </div> - </div> - <div class="wrapper wrapper__readable"> - <div class="content"><slot></slot></div> - </div> - <footer class="tac mt6"> - <a href="/projects"> - <Button>View More</Button> - </a> - </footer> - <Footer /> - </body> + .tagline { + font-weight: 300; + font-size: var(--f-u3); + line-height: 1.5; + } + + .content { + font-size: var(--f-u1); + line-height: 2.2; + } + </style> + </head> + <body> + <Nav /> + <header style={`background-image:url(${content.img})`} class="hero"> + <h1 class="title">{content.title}</h1> + </header> + <div class="leadIn"> + <div class="wrapper pt8 pb8 mb8 tac"> + {content.tags.map((t) => <span class="tag">{t}</span>)} + <h3 class="tagline">{content.description}</h3> + </div> + </div> + <div class="wrapper wrapper__readable"> + <div class="content"><slot /></div> + </div> + <footer class="tac mt6"> + <a href="/projects"> + <Button>View More</Button> + </a> + </footer> + <Footer /> + </body> </html> diff --git a/examples/portfolio-svelte/src/pages/404.astro b/examples/portfolio-svelte/src/pages/404.astro index e886c2514..b379c181b 100644 --- a/examples/portfolio-svelte/src/pages/404.astro +++ b/examples/portfolio-svelte/src/pages/404.astro @@ -2,19 +2,18 @@ import MainHead from '../components/MainHead.astro'; import Footer from '../components/Footer.svelte'; import Nav from '../components/Nav.svelte'; - --- <html lang="en"> - <head> - <MainHead title="Not Found" /> - </head> - <body> - <Nav /> - <div class="wrapper mt4 mb4"> - <h1>Page Not Found</h1> - <p>Not found</p> - </div> - <Footer /> - </body> + <head> + <MainHead title="Not Found" /> + </head> + <body> + <nav /> + <div class="wrapper mt4 mb4"> + <h1>Page Not Found</h1> + <p>Not found</p> + </div> + <footer /> + </body> </html> diff --git a/examples/portfolio-svelte/src/pages/about.astro b/examples/portfolio-svelte/src/pages/about.astro index 0d1375040..6ecb645d9 100644 --- a/examples/portfolio-svelte/src/pages/about.astro +++ b/examples/portfolio-svelte/src/pages/about.astro @@ -2,59 +2,58 @@ import MainHead from '../components/MainHead.astro'; import Footer from '../components/Footer.svelte'; import Nav from '../components/Nav.svelte'; - --- <html lang="en"> - <head> - <MainHead title="About | Jeanine White" description="About Jeanine White Lorem Ipsum" /> - <style lang="scss"> - .heroImg { - object-fit: cover; + <head> + <MainHead title="About | Jeanine White" description="About Jeanine White Lorem Ipsum" /> + <style lang="scss"> + .heroImg { + object-fit: cover; - img { - width: 100%; - height: 100%; - } - } + img { + width: 100%; + height: 100%; + } + } - .bio { - font-size: var(--f-u1); - line-height: 2; - } - </style> - </head> - <body> - <Nav /> - <div class="wrapper"> - <h1>About Jeanine</h1> - <div class="heroImg"> - <img width="1400" height="350" src="https://images.unsplash.com/photo-1581977012607-4091712d36f9?auto=format&fit=crop&w=1400&h=350&q=75" /> - </div> - <div class="bio wrapper wrapper__readable mt8"> - <p> - Cream cheese say cheese stinking bishop. Brie fondue hard cheese bocconcini feta camembert de normandie babybel airedale. Red leicester swiss manchego mascarpone pepper - jack airedale fromage frais ricotta. Cheese and biscuits cauliflower cheese boursin. - </p> - <p> - Pepper jack cheesy feet cheese slices. Halloumi port-salut queso caerphilly roquefort cheese slices cheesy feet rubber cheese. Cheese slices smelly cheese pecorino - macaroni cheese feta blue castello roquefort edam. Babybel pepper jack airedale cheddar fromage frais manchego. - </p> - <p> - Cauliflower cheese lancashire macaroni cheese. Cheeseburger babybel cheese on toast airedale cauliflower cheese who moved my cheese roquefort paneer. Stinking bishop - cheddar taleggio port-salut port-salut stinking bishop cheesy grin babybel. Blue castello feta everyone loves brie. - </p> - <p> - Goat squirty cheese cut the cheese. Cheese and wine cheddar fondue airedale cottage cheese camembert de normandie feta babybel. Rubber cheese melted cheese pecorino - port-salut fondue gouda cheese on toast cheesy feet. Feta edam everyone loves cheese strings camembert de normandie. - </p> - <p> - Caerphilly monterey jack goat. Squirty cheese cheesy grin hard cheese cheese strings cheese and biscuits croque monsieur smelly cheese danish fontina. Swiss cheese - triangles everyone loves mascarpone cheese on toast who moved my cheese lancashire cheeseburger. Fromage frais fromage frais cheese and biscuits stinking bishop - cauliflower cheese. - </p> - </div> - </div> - <Footer /> -</body> + .bio { + font-size: var(--f-u1); + line-height: 2; + } + </style> + </head> + <body> + <Nav /> + <div class="wrapper"> + <h1>About Jeanine</h1> + <div class="heroImg"> + <img width="1400" height="350" src="https://images.unsplash.com/photo-1581977012607-4091712d36f9?auto=format&fit=crop&w=1400&h=350&q=75" /> + </div> + <div class="bio wrapper wrapper__readable mt8"> + <p> + Cream cheese say cheese stinking bishop. Brie fondue hard cheese bocconcini feta camembert de normandie babybel airedale. Red leicester swiss manchego mascarpone pepper + jack airedale fromage frais ricotta. Cheese and biscuits cauliflower cheese boursin. + </p> + <p> + Pepper jack cheesy feet cheese slices. Halloumi port-salut queso caerphilly roquefort cheese slices cheesy feet rubber cheese. Cheese slices smelly cheese pecorino + macaroni cheese feta blue castello roquefort edam. Babybel pepper jack airedale cheddar fromage frais manchego. + </p> + <p> + Cauliflower cheese lancashire macaroni cheese. Cheeseburger babybel cheese on toast airedale cauliflower cheese who moved my cheese roquefort paneer. Stinking bishop + cheddar taleggio port-salut port-salut stinking bishop cheesy grin babybel. Blue castello feta everyone loves brie. + </p> + <p> + Goat squirty cheese cut the cheese. Cheese and wine cheddar fondue airedale cottage cheese camembert de normandie feta babybel. Rubber cheese melted cheese pecorino + port-salut fondue gouda cheese on toast cheesy feet. Feta edam everyone loves cheese strings camembert de normandie. + </p> + <p> + Caerphilly monterey jack goat. Squirty cheese cheesy grin hard cheese cheese strings cheese and biscuits croque monsieur smelly cheese danish fontina. Swiss cheese + triangles everyone loves mascarpone cheese on toast who moved my cheese lancashire cheeseburger. Fromage frais fromage frais cheese and biscuits stinking bishop + cauliflower cheese. + </p> + </div> + </div> + <Footer /> + </body> </html> diff --git a/examples/portfolio-svelte/src/pages/index.astro b/examples/portfolio-svelte/src/pages/index.astro index 60e8dc411..f2b76224e 100644 --- a/examples/portfolio-svelte/src/pages/index.astro +++ b/examples/portfolio-svelte/src/pages/index.astro @@ -13,235 +13,234 @@ const featuredProject = projects[0]; // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ --- + <html lang="en"> - <head> - <MainHead title="Jeanine White: Personal Site" description="Jeanine White: Developer, Speaker, and Writer..." /> - <style lang="scss"> - $w-s: 750px; - - .hero { - position: relative; - overflow: hidden; - - @media (min-width: $w-s) { - height: 45vw; - } - } - - .img { - display: block; - width: 100%; - height: auto; - } - - .gradient, - .gradient2 { - background-image: url('/assets/mesh-gradient.jpg'); - background-size: cover; - pointer-events: none; - mix-blend-mode: screen; - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - z-index: 2; - } - - .gradient2 { - mix-blend-mode: multiply; - background-size: cover; - } - - .overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 10; - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - padding-left: 2rem; - - @media (min-width: $w-s) { - padding-left: 4rem; - } - } - - .title { - font-weight: 900; - font-size: var(--f-u8); - margin-bottom: 0.5rem; - margin-top: 0; - - @media (min-width: $w-s) { - font-size: var(--f-u12); - } - } - - .grid { - display: grid; - grid-gap: 2rem; - - @media (min-width: 1200px) { - grid-template-columns: 2fr 1fr; - } - } - - .sectionTitle { - font-weight: 700; - font-size: var(--f-u8); - margin-top: 4rem; - margin-bottom: 2rem; - } - - .role { - position: relative; - display: inline-block; - font-weight: 900; - color: var(--t-bg); - background-color: var(--t-fg); - padding: 0.25em 0.5em; - z-index: 2; - - @media (min-width: $w-s) { - font-size: var(--f-u3); - } - - + .role { - margin-left: 1em; - } - - &:nth-of-type(1) { - .invert { - background-color: var(--c-pink); - } - } - - &:nth-of-type(2) { - .invert { - background-color: var(--c-blue); - } - } - - &:nth-of-type(3) { - .invert { - background-color: var(--c-green); - } - } - - &:hover { - .invert { - clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); - } - } - } - - .invert { - position: absolute; - color: var(--t-fg); - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - top: 0; - left: 0; - pointer-events: none; - clip-path: polygon(0% 100%, 100% 100%, 100% 200%, 0% 200%); - transition: clip-path cubic-bezier(0.4, 0, 0.5, 1) 150ms; - } - - .desc { - font-size: var(--f-u2); - margin-top: 1.5rem; - margin-bottom: 0; - } - - .subtitle { - display: block; - font-weight: 400; - font-size: var(--f-d6); - letter-spacing: -0.0625em; - } - - .bio { - line-height: 2; - margin-bottom: 2rem; - - > span:first-of-type { - line-height: 1; - margin-bottom: 0.5em; - display: block; - font-weight: 700; - font-size: var(--f-u4); - } - } - </style> - </head> - <body> - <Nav /> - <header class="hero"> - <img - width="1600" - height="1131" - class="img" - src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75" - srcSet="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75 800w, + <head> + <MainHead title="Jeanine White: Personal Site" description="Jeanine White: Developer, Speaker, and Writer..." /> + <style lang="scss"> + $w-s: 750px; + + .hero { + position: relative; + overflow: hidden; + + @media (min-width: $w-s) { + height: 45vw; + } + } + + .img { + display: block; + width: 100%; + height: auto; + } + + .gradient, + .gradient2 { + background-image: url('/assets/mesh-gradient.jpg'); + background-size: cover; + pointer-events: none; + mix-blend-mode: screen; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 2; + } + + .gradient2 { + mix-blend-mode: multiply; + background-size: cover; + } + + .overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 10; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + padding-left: 2rem; + + @media (min-width: $w-s) { + padding-left: 4rem; + } + } + + .title { + font-weight: 900; + font-size: var(--f-u8); + margin-bottom: 0.5rem; + margin-top: 0; + + @media (min-width: $w-s) { + font-size: var(--f-u12); + } + } + + .grid { + display: grid; + grid-gap: 2rem; + + @media (min-width: 1200px) { + grid-template-columns: 2fr 1fr; + } + } + + .sectionTitle { + font-weight: 700; + font-size: var(--f-u8); + margin-top: 4rem; + margin-bottom: 2rem; + } + + .role { + position: relative; + display: inline-block; + font-weight: 900; + color: var(--t-bg); + background-color: var(--t-fg); + padding: 0.25em 0.5em; + z-index: 2; + + @media (min-width: $w-s) { + font-size: var(--f-u3); + } + + + .role { + margin-left: 1em; + } + + &:nth-of-type(1) { + .invert { + background-color: var(--c-pink); + } + } + + &:nth-of-type(2) { + .invert { + background-color: var(--c-blue); + } + } + + &:nth-of-type(3) { + .invert { + background-color: var(--c-green); + } + } + + &:hover { + .invert { + clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); + } + } + } + + .invert { + position: absolute; + color: var(--t-fg); + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + top: 0; + left: 0; + pointer-events: none; + clip-path: polygon(0% 100%, 100% 100%, 100% 200%, 0% 200%); + transition: clip-path cubic-bezier(0.4, 0, 0.5, 1) 150ms; + } + + .desc { + font-size: var(--f-u2); + margin-top: 1.5rem; + margin-bottom: 0; + } + + .subtitle { + display: block; + font-weight: 400; + font-size: var(--f-d6); + letter-spacing: -0.0625em; + } + + .bio { + line-height: 2; + margin-bottom: 2rem; + + > span:first-of-type { + line-height: 1; + margin-bottom: 0.5em; + display: block; + font-weight: 700; + font-size: var(--f-u4); + } + } + </style> + </head> + <body> + <Nav /> + <header class="hero"> + <img + width="1600" + height="1131" + class="img" + src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75" + srcSet="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75 800w, https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75 1200w, https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1600&q=75 1600w, https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=2400&q=75 2400w," - sizes="(max-width: 800px) 800px, (max-width: 1200px) 1200px, (max-width: 1600px) 1600px, (max-width: 2400px) 2400px, 1200px" - /> - <div class="gradient" /> - <div class="gradient2" /> - <div class="overlay"> - <h1 class="title"> - <small class="subtitle">The personal site of </small>Jeanine White - </h1> - <div> - <span class="role"> - š©āš» Developer <span class="invert">š©āš» Developer</span> - </span> - <span class="role"> - š¤ Speaker <span class="invert">š¤ Speaker</span> - </span> - <span class="role"> - āļø Writer <span class="invert">āļø Writer</span> - </span> - </div> - <p class="desc">Lover of dogs, roadtrips, and poetry.</p> - </div> - </header> - <main class="wrapper mt4 mb4"> - <div class="grid"> - <div class="section"> - <h3 class="sectionTitle">Selected Work</h3> - <PortfolioPreview project={featuredProject} /> - <div class="tac mt4"> - <a href="/projects"> - <Button>View All</Button> - </a> - </div> - </div> - <div class="section"> - <h3 class="sectionTitle">About me</h3> - <p class="bio"> - <span>Hello!</span> Iām Jeanine, and this is my website. It was made using{' '} - <a href="https://github.com/withastro/astro" target="_blank" rel="nofollow"> - Astro - </a> - , a new way to build static sites. This is just an example template for you to modify. - </p> - <p> - <a href="/about">Read more</a> - </p> - </div> - </div> - </main> - <Footer /> - </body> + sizes="(max-width: 800px) 800px, (max-width: 1200px) 1200px, (max-width: 1600px) 1600px, (max-width: 2400px) 2400px, 1200px" + /> + <div class="gradient"></div> + <div class="gradient2"></div> + <div class="overlay"> + <h1 class="title"> + <small class="subtitle">The personal site of </small>Jeanine White + </h1> + <div> + <span class="role"> + š©āš» Developer <span class="invert">š©āš» Developer</span> + </span> + <span class="role"> + š¤ Speaker <span class="invert">š¤ Speaker</span> + </span> + <span class="role"> + āļø Writer <span class="invert">āļø Writer</span> + </span> + </div> + <p class="desc">Lover of dogs, roadtrips, and poetry.</p> + </div> + </header> + <main class="wrapper mt4 mb4"> + <div class="grid"> + <div class="section"> + <h3 class="sectionTitle">Selected Work</h3> + <PortfolioPreview project={featuredProject} /> + <div class="tac mt4"> + <a href="/projects"> + <Button>View All</Button> + </a> + </div> + </div> + <div class="section"> + <h3 class="sectionTitle">About me</h3> + <p class="bio"> + <span>Hello!</span> Iām Jeanine, and this is my website. It was made using{' '} + <a href="https://github.com/withastro/astro" target="_blank" rel="nofollow"> Astro </a> + , a new way to build static sites. This is just an example template for you to modify. + </p> + <p> + <a href="/about">Read more</a> + </p> + </div> + </div> + </main> + <Footer /> + </body> </html> diff --git a/examples/portfolio-svelte/src/pages/projects.astro b/examples/portfolio-svelte/src/pages/projects.astro index 0c639a13d..dea004128 100644 --- a/examples/portfolio-svelte/src/pages/projects.astro +++ b/examples/portfolio-svelte/src/pages/projects.astro @@ -5,34 +5,32 @@ import Nav from '../components/Nav.svelte'; import PortfolioPreview from '../components/PortfolioPreview.svelte'; interface MarkdownFrontmatter { - publishDate: number; + publishDate: number; } const projects = Astro.fetchContent<MarkdownFrontmatter>('./project/**/*.md') - .filter(({ publishDate }) => !!publishDate) - .sort((a, b) => new Date(b.publishDate).valueOf() - new Date(a.publishDate).valueOf()); + .filter(({ publishDate }) => !!publishDate) + .sort((a, b) => new Date(b.publishDate).valueOf() - new Date(a.publishDate).valueOf()); --- <html lang="en"> - <head> - <MainHead title="All Projects | Jeanine White" description="Learn about Jenine White's most recent projects" /> - <style lang="scss"> - .grid { - display: grid; - grid-gap: 3rem; - } - </style> - </head> - <body> - <Nav /> - <div class="wrapper"> - <h1 class="title mt4 mb4">All Projects</h1> - <div class="grid"> - {projects.map((project) => ( - <PortfolioPreview project={project} /> - ))} - </div> - </div> - <Footer /> - </body> + <head> + <MainHead title="All Projects | Jeanine White" description="Learn about Jenine White's most recent projects" /> + <style lang="scss"> + .grid { + display: grid; + grid-gap: 3rem; + } + </style> + </head> + <body> + <Nav /> + <div class="wrapper"> + <h1 class="title mt4 mb4">All Projects</h1> + <div class="grid"> + {projects.map((project) => <PortfolioPreview project={project} />)} + </div> + </div> + <Footer /> + </body> </html> diff --git a/examples/portfolio-svelte/src/styles/global.scss b/examples/portfolio-svelte/src/styles/global.scss index b5a95caf2..453adadbe 100644 --- a/examples/portfolio-svelte/src/styles/global.scss +++ b/examples/portfolio-svelte/src/styles/global.scss @@ -1,83 +1,83 @@ // Tokens :root { - // (c)olor - --c-black: #05091e; - --c-blue: #46b4ff; - --c-gray: #90aab7; - --c-green: #9ef2cb; - --c-pink: #ffb8d9; - --c-orange: #ffb7a3; - --c-yellow: #ffdace; - --c-white: #fff; + // (c)olor + --c-black: #05091e; + --c-blue: #46b4ff; + --c-gray: #90aab7; + --c-green: #9ef2cb; + --c-pink: #ffb8d9; + --c-orange: #ffb7a3; + --c-yellow: #ffdace; + --c-white: #fff; - // (f)ont - --f-u18: 11.390625em; - --f-u17: 9.950627481136905em; - --f-u16: 8.692673779389363em; - --f-u15: 7.59375em; - --f-u14: 6.63375165409127em; - --f-u13: 5.795115852926242em; - --f-u12: 5.0625em; - --f-u11: 4.422501102727513em; - --f-u10: 3.8634105686174953em; - --f-u9: 3.375em; - --f-u8: 2.9483340684850083em; - --f-u7: 2.575607045744997em; - --f-u6: 2.25em; - --f-u5: 1.9655560456566725em; - --f-u4: 1.7170713638299977em; - --f-u3: 1.5em; - --f-u2: 1.3103706971044482em; - --f-u1: 1.1447142425533319em; - --f-d1: 0.8735804647362989em; - --f-d2: 0.7631428283688879em; - --f-d3: 0.6666666666666666em; - --f-d4: 0.5823869764908659em; - --f-d5: 0.5087618855792586em; - --f-d6: 0.4444444444444444em; - --f-d7: 0.3882579843272439em; - --f-d8: 0.3391745903861724em; - --f-d9: 0.2962962962962963em; - --f-d10: 0.2588386562181626em; - --f-d11: 0.22611639359078162em; - --f-d12: 0.19753086419753085em; - --f-d13: 0.17255910414544176em; - --f-d14: 0.15074426239385438em; - --f-d15: 0.13168724279835392em; - --f-d16: 0.11503940276362785em; - --f-d17: 0.10049617492923625em; - --f-d18: 0.0877914951989026em; + // (f)ont + --f-u18: 11.390625em; + --f-u17: 9.950627481136905em; + --f-u16: 8.692673779389363em; + --f-u15: 7.59375em; + --f-u14: 6.63375165409127em; + --f-u13: 5.795115852926242em; + --f-u12: 5.0625em; + --f-u11: 4.422501102727513em; + --f-u10: 3.8634105686174953em; + --f-u9: 3.375em; + --f-u8: 2.9483340684850083em; + --f-u7: 2.575607045744997em; + --f-u6: 2.25em; + --f-u5: 1.9655560456566725em; + --f-u4: 1.7170713638299977em; + --f-u3: 1.5em; + --f-u2: 1.3103706971044482em; + --f-u1: 1.1447142425533319em; + --f-d1: 0.8735804647362989em; + --f-d2: 0.7631428283688879em; + --f-d3: 0.6666666666666666em; + --f-d4: 0.5823869764908659em; + --f-d5: 0.5087618855792586em; + --f-d6: 0.4444444444444444em; + --f-d7: 0.3882579843272439em; + --f-d8: 0.3391745903861724em; + --f-d9: 0.2962962962962963em; + --f-d10: 0.2588386562181626em; + --f-d11: 0.22611639359078162em; + --f-d12: 0.19753086419753085em; + --f-d13: 0.17255910414544176em; + --f-d14: 0.15074426239385438em; + --f-d15: 0.13168724279835392em; + --f-d16: 0.11503940276362785em; + --f-d17: 0.10049617492923625em; + --f-d18: 0.0877914951989026em; - // (t)heme - --t-fg: var(--c-black); - --t-bg: var(--c-white); - --t-subdue: var(--c-gray); - --t-active: var(--c-blue); + // (t)heme + --t-fg: var(--c-black); + --t-bg: var(--c-white); + --t-subdue: var(--c-gray); + --t-active: var(--c-blue); } // Base body { - margin: 0; - color: var(--t-fg); - font-family: 'Inter', 'system-ui', sans-serif; + margin: 0; + color: var(--t-fg); + font-family: 'Inter', 'system-ui', sans-serif; } * { - box-sizing: content-box; + box-sizing: content-box; } img { - max-width: 100%; - height: auto; + max-width: 100%; + height: auto; } a { - color: var(--t-active); + color: var(--t-active); } h1 { - font-size: var(--f-u8); + font-size: var(--f-u8); } // Utils @@ -85,79 +85,79 @@ h1 { // color $colors: 'black', 'blue', 'white'; @each $color in $colors { - // text color - .tc-#{$color} { - color: var(--c-#{color}); - } - // background color - .bg-#{$color} { - background-color: var(--c-#{color}); - } + // text color + .tc-#{$color} { + color: var(--c-#{color}); + } + // background color + .bg-#{$color} { + background-color: var(--c-#{color}); + } } // font size @for $i from 0 through 18 { - .f-u#{$i} { - font-size: var(--f-u#{$i}); - } - .f-d#{$i} { - font-size: var(--f-d#{$i}); - } + .f-u#{$i} { + font-size: var(--f-u#{$i}); + } + .f-d#{$i} { + font-size: var(--f-d#{$i}); + } } // margin & padding @for $i from 0 through 36 { - .ma#{$i} { - margin: #{0.5 * $i}rem; - } - .mt#{$i} { - margin-top: #{0.5 * $i}rem; - } - .mr#{$i} { - margin-right: #{0.5 * $i}rem; - } - .mb#{$i} { - margin-bottom: #{0.5 * $i}rem; - } - .ml#{$i} { - margin-left: #{0.5 * $i}rem; - } - .pa#{$i} { - padding: #{0.5 * $i}rem; - } - .pt#{$i} { - padding-top: #{0.5 * $i}rem; - } - .pr#{$i} { - padding-right: #{0.5 * $i}rem; - } - .pb#{$i} { - padding-bottom: #{0.5 * $i}rem; - } - .pl#{$i} { - padding-left: #{0.5 * $i}rem; - } + .ma#{$i} { + margin: #{0.5 * $i}rem; + } + .mt#{$i} { + margin-top: #{0.5 * $i}rem; + } + .mr#{$i} { + margin-right: #{0.5 * $i}rem; + } + .mb#{$i} { + margin-bottom: #{0.5 * $i}rem; + } + .ml#{$i} { + margin-left: #{0.5 * $i}rem; + } + .pa#{$i} { + padding: #{0.5 * $i}rem; + } + .pt#{$i} { + padding-top: #{0.5 * $i}rem; + } + .pr#{$i} { + padding-right: #{0.5 * $i}rem; + } + .pb#{$i} { + padding-bottom: #{0.5 * $i}rem; + } + .pl#{$i} { + padding-left: #{0.5 * $i}rem; + } } // text align .tac { - text-align: center; + text-align: center; } .tal { - text-align: left; + text-align: left; } .tar { - text-align: right; + text-align: right; } // wrapper .wrapper { - max-width: 80em; - margin-left: auto; - margin-right: auto; - padding-left: 2rem; - padding-right: 2rem; + max-width: 80em; + margin-left: auto; + margin-right: auto; + padding-left: 2rem; + padding-right: 2rem; } .wrapper__readable { - max-width: 50em; + max-width: 50em; } |