summaryrefslogtreecommitdiff
path: root/examples/portfolio/src
diff options
context:
space:
mode:
Diffstat (limited to 'examples/portfolio/src')
-rw-r--r--examples/portfolio/src/components/Button/index.jsx2
-rw-r--r--examples/portfolio/src/components/Button/styles.module.scss10
-rw-r--r--examples/portfolio/src/components/Footer/index.jsx12
-rw-r--r--examples/portfolio/src/components/Footer/styles.module.scss20
-rw-r--r--examples/portfolio/src/components/MainHead.astro12
-rw-r--r--examples/portfolio/src/components/Nav/index.jsx58
-rw-r--r--examples/portfolio/src/components/Nav/styles.module.scss90
-rw-r--r--examples/portfolio/src/components/PortfolioPreview/index.jsx42
-rw-r--r--examples/portfolio/src/components/PortfolioPreview/styles.module.scss146
-rw-r--r--examples/portfolio/src/layouts/project.astro153
-rw-r--r--examples/portfolio/src/pages/404.astro23
-rw-r--r--examples/portfolio/src/pages/about.astro101
-rw-r--r--examples/portfolio/src/pages/index.astro442
-rw-r--r--examples/portfolio/src/pages/projects.astro46
-rw-r--r--examples/portfolio/src/styles/global.scss224
15 files changed, 688 insertions, 693 deletions
diff --git a/examples/portfolio/src/components/Button/index.jsx b/examples/portfolio/src/components/Button/index.jsx
index 0e1b6a4c8..d8e04aa71 100644
--- a/examples/portfolio/src/components/Button/index.jsx
+++ b/examples/portfolio/src/components/Button/index.jsx
@@ -2,7 +2,7 @@ import { h } from 'preact';
import Styles from './styles.module.scss';
function Button({ children }) {
- return <span className={Styles.button}>{children}</span>;
+ return <span className={Styles.button}>{children}</span>;
}
export default Button;
diff --git a/examples/portfolio/src/components/Button/styles.module.scss b/examples/portfolio/src/components/Button/styles.module.scss
index 67a343bdf..f0e39df3f 100644
--- a/examples/portfolio/src/components/Button/styles.module.scss
+++ b/examples/portfolio/src/components/Button/styles.module.scss
@@ -1,7 +1,7 @@
.button {
- display: inline-block;
- border: 3px solid currentColor;
- padding: 0.5em 1em;
- font-weight: 700;
- text-transform: uppercase;
+ display: inline-block;
+ border: 3px solid currentColor;
+ padding: 0.5em 1em;
+ font-weight: 700;
+ text-transform: uppercase;
}
diff --git a/examples/portfolio/src/components/Footer/index.jsx b/examples/portfolio/src/components/Footer/index.jsx
index 8e15a2d8e..42953c367 100644
--- a/examples/portfolio/src/components/Footer/index.jsx
+++ b/examples/portfolio/src/components/Footer/index.jsx
@@ -2,11 +2,11 @@ import { h } from 'preact';
import Styles from './styles.module.scss';
function Footer() {
- return (
- <footer className={Styles.footer}>
- &copy; {new Date().getFullYear()} Jeanine White
- <small className={Styles.byline}>šŸš€ Built by Astro</small>
- </footer>
- );
+ return (
+ <footer className={Styles.footer}>
+ &copy; {new Date().getFullYear()} Jeanine White
+ <small className={Styles.byline}>šŸš€ Built by Astro</small>
+ </footer>
+ );
}
export default Footer;
diff --git a/examples/portfolio/src/components/Footer/styles.module.scss b/examples/portfolio/src/components/Footer/styles.module.scss
index 0e77ee206..9e76a6a2f 100644
--- a/examples/portfolio/src/components/Footer/styles.module.scss
+++ b/examples/portfolio/src/components/Footer/styles.module.scss
@@ -1,15 +1,15 @@
.footer {
- text-align: center;
- padding-top: 8rem;
- padding-right: 2rem;
- padding-bottom: 4rem;
- padding-left: 2rem;
+ text-align: center;
+ padding-top: 8rem;
+ padding-right: 2rem;
+ padding-bottom: 4rem;
+ padding-left: 2rem;
}
.byline {
- display: block;
- margin-top: 1rem;
- color: var(--t-subdue);
- font-size: var(--f-d2);
- text-transform: uppercase;
+ display: block;
+ margin-top: 1rem;
+ color: var(--t-subdue);
+ font-size: var(--f-d2);
+ text-transform: uppercase;
}
diff --git a/examples/portfolio/src/components/MainHead.astro b/examples/portfolio/src/components/MainHead.astro
index ae2eb1d1f..0597b178f 100644
--- a/examples/portfolio/src/components/MainHead.astro
+++ b/examples/portfolio/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/src/components/Nav/index.jsx b/examples/portfolio/src/components/Nav/index.jsx
index da0914fd1..d74961d6d 100644
--- a/examples/portfolio/src/components/Nav/index.jsx
+++ b/examples/portfolio/src/components/Nav/index.jsx
@@ -2,34 +2,34 @@ import { h } from 'preact';
import Styles from './styles.module.scss';
function Nav() {
- return (
- <nav className={Styles.nav}>
- <a className={Styles.logolink} href="/">
- <div className={Styles.monogram}>JW</div>
- </a>
- <a className={Styles.link} href="/projects">
- Portfolio
- </a>
- <a className={Styles.link} href="/about">
- About
- </a>
- <a className={Styles.social} href="https://twitter.com/me">
- <svg className={Styles.socialicon} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
- <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
- </svg>
- </a>
- <a className={Styles.social} href="https://github.com/me">
- <svg className={Styles.socialicon} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
- <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
- </svg>
- </a>
- <a className={Styles.social} href="https://dev.to/me">
- <svg className={Styles.socialicon} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 40" style="enable-background:new 0 0 50 40" xmlSpace="preserve">
- <path d="M15.7 15.5c-.4-.3-.7-.4-1.1-.4h-1.7v10.1h1.7c.4 0 .8-.1 1.1-.4.4-.3.6-.7.6-1.3v-6.7c0-.6-.2-1-.6-1.3z" />
- <path d="M47 0H3C1.3 0 0 1.3 0 3v34c0 1.7 1.3 3 3 3h44c1.7 0 3-1.3 3-3V3c0-1.7-1.3-3-3-3zM19.1 23.5c0 1.3-.4 2.4-1.3 3.2-.8.9-1.9 1.3-3.3 1.3h-4.4V12.3h4.5c1.3 0 2.4.4 3.2 1.3.8.8 1.3 1.9 1.3 3.2v6.7zm9.1-8.4h-5.1v3.6h3.1v2.8h-3.1v3.7h5.1V28h-5.9c-.6 0-1-.2-1.4-.6-.4-.4-.6-.8-.6-1.4V14.2c0-.6.2-1 .6-1.4.4-.4.8-.6 1.4-.6h5.9v2.9zM37.5 26c-.6 1.3-1.3 2-2.2 2-.9 0-1.7-.7-2.2-2l-3.7-13.8h3.1L35.3 23l2.8-10.8h3.1L37.5 26z" />
- </svg>
- </a>
- </nav>
- );
+ return (
+ <nav className={Styles.nav}>
+ <a className={Styles.logolink} href="/">
+ <div className={Styles.monogram}>JW</div>
+ </a>
+ <a className={Styles.link} href="/projects">
+ Portfolio
+ </a>
+ <a className={Styles.link} href="/about">
+ About
+ </a>
+ <a className={Styles.social} href="https://twitter.com/me">
+ <svg className={Styles.socialicon} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+ <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
+ </svg>
+ </a>
+ <a className={Styles.social} href="https://github.com/me">
+ <svg className={Styles.socialicon} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+ <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
+ </svg>
+ </a>
+ <a className={Styles.social} href="https://dev.to/me">
+ <svg className={Styles.socialicon} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 40" style="enable-background:new 0 0 50 40" xmlSpace="preserve">
+ <path d="M15.7 15.5c-.4-.3-.7-.4-1.1-.4h-1.7v10.1h1.7c.4 0 .8-.1 1.1-.4.4-.3.6-.7.6-1.3v-6.7c0-.6-.2-1-.6-1.3z" />
+ <path d="M47 0H3C1.3 0 0 1.3 0 3v34c0 1.7 1.3 3 3 3h44c1.7 0 3-1.3 3-3V3c0-1.7-1.3-3-3-3zM19.1 23.5c0 1.3-.4 2.4-1.3 3.2-.8.9-1.9 1.3-3.3 1.3h-4.4V12.3h4.5c1.3 0 2.4.4 3.2 1.3.8.8 1.3 1.9 1.3 3.2v6.7zm9.1-8.4h-5.1v3.6h3.1v2.8h-3.1v3.7h5.1V28h-5.9c-.6 0-1-.2-1.4-.6-.4-.4-.6-.8-.6-1.4V14.2c0-.6.2-1 .6-1.4.4-.4.8-.6 1.4-.6h5.9v2.9zM37.5 26c-.6 1.3-1.3 2-2.2 2-.9 0-1.7-.7-2.2-2l-3.7-13.8h3.1L35.3 23l2.8-10.8h3.1L37.5 26z" />
+ </svg>
+ </a>
+ </nav>
+ );
}
export default Nav;
diff --git a/examples/portfolio/src/components/Nav/styles.module.scss b/examples/portfolio/src/components/Nav/styles.module.scss
index d39a65a5b..ecbe5585e 100644
--- a/examples/portfolio/src/components/Nav/styles.module.scss
+++ b/examples/portfolio/src/components/Nav/styles.module.scss
@@ -1,65 +1,65 @@
.nav {
- display: flex;
- align-items: center;
- padding-top: 1rem;
- padding-right: 2rem;
- padding-bottom: 1rem;
- padding-left: 2rem;
+ display: flex;
+ align-items: center;
+ padding-top: 1rem;
+ padding-right: 2rem;
+ padding-bottom: 1rem;
+ padding-left: 2rem;
}
.logolink {
- display: block;
- color: var(--t-fg);
- text-decoration: none;
+ display: block;
+ color: var(--t-fg);
+ text-decoration: none;
}
.link {
- color: var(--t-subdue);
- display: block;
- margin-left: 1rem;
- text-decoration: none;
- font-size: var(--f-d1);
- text-transform: uppercase;
- padding-top: 0.75em;
- padding-bottom: 0.75em;
+ color: var(--t-subdue);
+ display: block;
+ margin-left: 1rem;
+ text-decoration: none;
+ font-size: var(--f-d1);
+ text-transform: uppercase;
+ padding-top: 0.75em;
+ padding-bottom: 0.75em;
- &:focus,
- &:hover {
- color: var(--t-active);
- }
+ &:focus,
+ &:hover {
+ color: var(--t-active);
+ }
}
.monogram {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 2em;
- height: 2em;
- margin-right: 0.5rem;
- color: var(--c-black);
- font-weight: 900;
- letter-spacing: -0.125rem;
- border: 3px solid currentColor;
- border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2em;
+ height: 2em;
+ margin-right: 0.5rem;
+ color: var(--c-black);
+ font-weight: 900;
+ letter-spacing: -0.125rem;
+ border: 3px solid currentColor;
+ border-radius: 50%;
}
.social {
- display: block;
- margin-left: auto;
+ display: block;
+ margin-left: auto;
- + .social {
- margin-left: 0.75rem;
- }
+ + .social {
+ margin-left: 0.75rem;
+ }
}
.socialicon {
- display: block;
- width: 1.25rem;
- height: 1.25rem;
- fill: var(--t-subdue);
- transition: fill linear 150ms;
+ display: block;
+ width: 1.25rem;
+ height: 1.25rem;
+ fill: var(--t-subdue);
+ transition: fill linear 150ms;
- &:hover {
- fill: var(--t-active);
- }
+ &:hover {
+ fill: var(--t-active);
+ }
}
diff --git a/examples/portfolio/src/components/PortfolioPreview/index.jsx b/examples/portfolio/src/components/PortfolioPreview/index.jsx
index 7918008c6..6957e5884 100644
--- a/examples/portfolio/src/components/PortfolioPreview/index.jsx
+++ b/examples/portfolio/src/components/PortfolioPreview/index.jsx
@@ -2,27 +2,27 @@ import { h } from 'preact';
import Styles from './styles.module.scss';
function PortfolioPreview({ project }) {
- return (
- <div className={Styles.card}>
- <div className={Styles.titleCard} style={`background-image:url(${project.img})`}>
- <h1 className={Styles.title}>{project.title}</h1>
- </div>
- <div className="pa3">
- <p className={`${Styles.desc} mt0 mb2`}>{project.description}</p>
- <div className={Styles.tags}>
- Tagged:
- {project.tags.map((t) => (
- <div className={Styles.tag} data-tag={t}>
- {t}
- </div>
- ))}
- </div>
- <a className={Styles.link} href={project.url}>
- <span className={Styles.linkInner}>View</span>
- </a>
- </div>
- </div>
- );
+ return (
+ <div className={Styles.card}>
+ <div className={Styles.titleCard} style={`background-image:url(${project.img})`}>
+ <h1 className={Styles.title}>{project.title}</h1>
+ </div>
+ <div className="pa3">
+ <p className={`${Styles.desc} mt0 mb2`}>{project.description}</p>
+ <div className={Styles.tags}>
+ Tagged:
+ {project.tags.map((t) => (
+ <div className={Styles.tag} data-tag={t}>
+ {t}
+ </div>
+ ))}
+ </div>
+ <a className={Styles.link} href={project.url}>
+ <span className={Styles.linkInner}>View</span>
+ </a>
+ </div>
+ </div>
+ );
}
export default PortfolioPreview;
diff --git a/examples/portfolio/src/components/PortfolioPreview/styles.module.scss b/examples/portfolio/src/components/PortfolioPreview/styles.module.scss
index ce169c2fc..bded61547 100644
--- a/examples/portfolio/src/components/PortfolioPreview/styles.module.scss
+++ b/examples/portfolio/src/components/PortfolioPreview/styles.module.scss
@@ -1,102 +1,102 @@
.card {
- position: relative;
- color: var(--t-bg);
- background: var(--t-fg);
- border: 1px solid #f0f0f0;
+ position: relative;
+ color: var(--t-bg);
+ background: var(--t-fg);
+ border: 1px solid #f0f0f0;
}
.title {
- position: absolute;
- top: 0;
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- margin: 0;
- color: white;
- flex-direction: column;
- font-size: var(--f-u4);
- font-weight: 900;
- text-transform: uppercase;
- letter-spacing: 0.0625em;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0;
+ color: white;
+ flex-direction: column;
+ font-size: var(--f-u4);
+ font-weight: 900;
+ text-transform: uppercase;
+ letter-spacing: 0.0625em;
}
.titleCard {
- position: relative;
- background-size: cover;
- background-position: 50% 100%;
- padding-top: 37.5%;
+ position: relative;
+ background-size: cover;
+ background-position: 50% 100%;
+ padding-top: 37.5%;
}
.desc {
- font-size: var(--f-u1);
- line-height: 1.4;
+ font-size: var(--f-u1);
+ line-height: 1.4;
}
.link {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- color: var(--t-bg);
- font-size: var(--f-u2);
- font-weight: 700;
- background: rgba(0, 0, 0, 0.25);
- opacity: 0;
- text-decoration: none;
- text-transform: uppercase;
- transition: opacity 150ms linear;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ color: var(--t-bg);
+ font-size: var(--f-u2);
+ font-weight: 700;
+ background: rgba(0, 0, 0, 0.25);
+ opacity: 0;
+ text-decoration: none;
+ text-transform: uppercase;
+ transition: opacity 150ms linear;
- &:focus,
- &:hover {
- opacity: 1;
+ &:focus,
+ &:hover {
+ opacity: 1;
- .linkInner {
- transform: translateY(0);
- border-color: rgba(255, 255, 255, 0.625);
- }
- }
+ .linkInner {
+ transform: translateY(0);
+ border-color: rgba(255, 255, 255, 0.625);
+ }
+ }
}
.linkInner {
- padding: 0.375em 1em;
- border: 2px solid rgba(255, 255, 255, 0);
- transition: transform 300ms cubic-bezier(0, 0.4, 0.6, 1), border-color 1s linear;
- transform: translateY(25%);
+ padding: 0.375em 1em;
+ border: 2px solid rgba(255, 255, 255, 0);
+ transition: transform 300ms cubic-bezier(0, 0.4, 0.6, 1), border-color 1s linear;
+ transform: translateY(25%);
}
.nav {
- display: flex;
- justify-content: flex-end;
+ display: flex;
+ justify-content: flex-end;
}
.tags {
- font-size: var(--f-d2);
- text-transform: uppercase;
+ font-size: var(--f-d2);
+ text-transform: uppercase;
}
.tag {
- display: inline-block;
- color: var(--c-yellow);
- text-transform: uppercase;
- margin-left: 0.5em;
+ display: inline-block;
+ color: var(--c-yellow);
+ text-transform: uppercase;
+ margin-left: 0.5em;
- &: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);
- }
+ &: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);
+ }
}
diff --git a/examples/portfolio/src/layouts/project.astro b/examples/portfolio/src/layouts/project.astro
index 6ad043a4e..aba14a5ac 100644
--- a/examples/portfolio/src/layouts/project.astro
+++ b/examples/portfolio/src/layouts/project.astro
@@ -6,87 +6,86 @@ import Nav from '../components/Nav/index.jsx';
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/src/pages/404.astro b/examples/portfolio/src/pages/404.astro
index 48ec8d310..39f5994ae 100644
--- a/examples/portfolio/src/pages/404.astro
+++ b/examples/portfolio/src/pages/404.astro
@@ -2,19 +2,18 @@
import MainHead from '../components/MainHead.astro';
import Footer from '../components/Footer/index.jsx';
import Nav from '../components/Nav/index.jsx';
-
---
<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/src/pages/about.astro b/examples/portfolio/src/pages/about.astro
index 36f4fe942..fad3d6ad3 100644
--- a/examples/portfolio/src/pages/about.astro
+++ b/examples/portfolio/src/pages/about.astro
@@ -2,60 +2,59 @@
import MainHead from '../components/MainHead.astro';
import Footer from '../components/Footer/index.jsx';
import Nav from '../components/Nav/index.jsx';
-
---
<html lang="en">
- <head>
- <MainHead title="About | Jeanine White" description="About Jeanine White Lorem Ipsum" />
- <style lang="scss">
- .heroImg {
- max-height: 24rem;
- object-fit: cover;
- overflow: hidden;
+ <head>
+ <MainHead title="About | Jeanine White" description="About Jeanine White Lorem Ipsum" />
+ <style lang="scss">
+ .heroImg {
+ max-height: 24rem;
+ object-fit: cover;
+ overflow: hidden;
- img {
- width: 100%;
- }
- }
+ img {
+ width: 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/src/pages/index.astro b/examples/portfolio/src/pages/index.astro
index 9388834ab..ce11119b5 100644
--- a/examples/portfolio/src/pages/index.astro
+++ b/examples/portfolio/src/pages/index.astro
@@ -7,231 +7,231 @@ import Footer from '../components/Footer/index.jsx';
import PortfolioPreview from '../components/PortfolioPreview/index.jsx';
// Data Fetching: List all Markdown posts in the repo.
-const projects = Astro.fetchContent("./project/**/*.md");
+const projects = Astro.fetchContent('./project/**/*.md');
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,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>
- <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>&nbsp;
- <span class="role">šŸŽ¤ Speaker <span class="invert">šŸŽ¤ Speaker</span></span>&nbsp;
- <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>
+ <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>
+ <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>&nbsp;
+ <span class="role">šŸŽ¤ Speaker <span class="invert">šŸŽ¤ Speaker</span></span>&nbsp;
+ <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/src/pages/projects.astro b/examples/portfolio/src/pages/projects.astro
index 44047117a..991c254bc 100644
--- a/examples/portfolio/src/pages/projects.astro
+++ b/examples/portfolio/src/pages/projects.astro
@@ -5,34 +5,32 @@ import Nav from '../components/Nav/index.jsx';
import PortfolioPreview from '../components/PortfolioPreview/index.jsx';
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/src/styles/global.scss b/examples/portfolio/src/styles/global.scss
index b5a95caf2..453adadbe 100644
--- a/examples/portfolio/src/styles/global.scss
+++ b/examples/portfolio/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;
}
generated by cgit v1.2.3 (git 2.46.0) at 2025-08-10 05:52:09 +0000