diff options
Diffstat (limited to 'examples/portfolio/src')
18 files changed, 398 insertions, 449 deletions
diff --git a/examples/portfolio/src/components/Button/index.jsx b/examples/portfolio/src/components/Button/index.jsx deleted file mode 100644 index d8e04aa71..000000000 --- a/examples/portfolio/src/components/Button/index.jsx +++ /dev/null @@ -1,8 +0,0 @@ -import { h } from 'preact'; -import Styles from './styles.module.scss'; - -function Button({ children }) { - 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 deleted file mode 100644 index f0e39df3f..000000000 --- a/examples/portfolio/src/components/Button/styles.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -.button { - 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.astro b/examples/portfolio/src/components/Footer.astro new file mode 100644 index 000000000..f238d6b6f --- /dev/null +++ b/examples/portfolio/src/components/Footer.astro @@ -0,0 +1,25 @@ +--- +const currentYear = new Date().getFullYear(); +--- + +<footer> + © {currentYear} Jeanine White + <small class="byline">🚀 Built by Astro</small> +</footer> +<style> + footer { + 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; + } +</style> diff --git a/examples/portfolio/src/components/Footer/index.jsx b/examples/portfolio/src/components/Footer/index.jsx deleted file mode 100644 index 42953c367..000000000 --- a/examples/portfolio/src/components/Footer/index.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import { h } from 'preact'; -import Styles from './styles.module.scss'; - -function Footer() { - return ( - <footer className={Styles.footer}> - © {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 deleted file mode 100644 index 9e76a6a2f..000000000 --- a/examples/portfolio/src/components/Footer/styles.module.scss +++ /dev/null @@ -1,15 +0,0 @@ -.footer { - 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; -} diff --git a/examples/portfolio/src/components/MainHead.astro b/examples/portfolio/src/components/MainHead.astro index 5e4e49b97..d7757af2a 100644 --- a/examples/portfolio/src/components/MainHead.astro +++ b/examples/portfolio/src/components/MainHead.astro @@ -1,5 +1,5 @@ --- -import '../styles/global.scss'; +import '../styles/global.css'; const { title = 'Jeanine White: Personal Site', description = 'The personal site of Jeanine White', diff --git a/examples/portfolio/src/components/Nav.astro b/examples/portfolio/src/components/Nav.astro new file mode 100644 index 000000000..ea7562571 --- /dev/null +++ b/examples/portfolio/src/components/Nav.astro @@ -0,0 +1,99 @@ +<nav> + <a class="link" href="/"> + <div class="monogram">JW</div> + </a> + <a class="link" href="/projects/"> Portfolio</a> + <a class="link" href="/about/"> About</a> + <div class="socials"> + <a class="social" href="https://twitter.com/me"> + <svg class="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" + ></path> + </svg> + </a> + <a class="social" href="https://github.com/me"> + <svg class="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" + ></path> + </svg> + </a> + <a class="social" href="https://dev.to/me"> + <svg + class="socialIcon" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 50 40" + style="enable-background:new 0 0 50 40" + xml:space="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> + <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" + ></path> + </svg> + </a> + </div> +</nav> + +<style> + nav { + display: flex; + gap: 1rem; + align-items: center; + padding: 1rem; + } + + .link { + color: var(--t-subdue); + display: block; + text-decoration: none; + font-size: var(--f-d1); + text-transform: uppercase; + padding-top: 0.75em; + padding-bottom: 0.75em; + } + + .link:hover, + .link:focus { + 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%; + } + + .socials { + display: flex; + gap: 0.75em; + margin-left: auto; + } + + .social { + display: block; + } + + .socialIcon { + display: block; + width: 1.25rem; + height: 1.25rem; + fill: var(--t-subdue); + transition: fill linear 150ms; + } + + .socialIcon:hover { + fill: var(--t-active); + } +</style> diff --git a/examples/portfolio/src/components/Nav/index.jsx b/examples/portfolio/src/components/Nav/index.jsx deleted file mode 100644 index b7cd28f36..000000000 --- a/examples/portfolio/src/components/Nav/index.jsx +++ /dev/null @@ -1,41 +0,0 @@ -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> - ); -} -export default Nav; diff --git a/examples/portfolio/src/components/Nav/styles.module.scss b/examples/portfolio/src/components/Nav/styles.module.scss deleted file mode 100644 index ecbe5585e..000000000 --- a/examples/portfolio/src/components/Nav/styles.module.scss +++ /dev/null @@ -1,65 +0,0 @@ -.nav { - 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; -} - -.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; - - &: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%; -} - -.social { - display: block; - margin-left: auto; - - + .social { - margin-left: 0.75rem; - } -} - -.socialicon { - display: block; - width: 1.25rem; - height: 1.25rem; - fill: var(--t-subdue); - transition: fill linear 150ms; - - &:hover { - fill: var(--t-active); - } -} diff --git a/examples/portfolio/src/components/PortfolioPreview.astro b/examples/portfolio/src/components/PortfolioPreview.astro new file mode 100644 index 000000000..3d0a91522 --- /dev/null +++ b/examples/portfolio/src/components/PortfolioPreview.astro @@ -0,0 +1,135 @@ +--- +const { frontmatter, url } = Astro.props.project; +--- + +<div class="card"> + <div class="titleCard" style={`background-image:url(${frontmatter.img})`}> + <h1 class="title">{frontmatter.title}</h1> + </div> + <div class="descCard"> + <p class="desc">{frontmatter.description}</p> + <div class="tags"> + Tagged: + {frontmatter.tags.map((t) => ( + <div class="tag" data-tag={t}> + {t} + </div> + ))} + </div> + <a class="link" href={url}> + <span class="linkInner">View</span> + </a> + </div> +</div> + +<style> + .card { + 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; + } + + .titleCard { + position: relative; + background-size: cover; + background-position: 50% 100%; + padding-top: 37.5%; + } + + .descCard { + padding: 1.5em; + } + + .desc { + font-size: var(--f-u1); + line-height: 1.4; + margin-top: 0em; + margin-bottom: 1em; + } + + .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; + } + + .link:focus, + .link:hover { + opacity: 1; + } + + .link:focus, + .link:hover .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%); + } + + .nav { + display: flex; + justify-content: flex-end; + } + + .tags { + font-size: var(--f-d2); + text-transform: uppercase; + } + + .tag { + display: inline-block; + color: var(--c-yellow); + text-transform: uppercase; + margin-left: 0.5em; + } + + .tag:nth-of-type(1n) { + color: var(--c-green); + } + .tag:nth-of-type(2n) { + color: var(--c-orange); + } + .tag:nth-of-type(3n) { + color: var(--c-blue); + } + .tag:nth-of-type(4n) { + color: var(--c-pink); + } +</style> diff --git a/examples/portfolio/src/components/PortfolioPreview/index.jsx b/examples/portfolio/src/components/PortfolioPreview/index.jsx deleted file mode 100644 index 4f1627604..000000000 --- a/examples/portfolio/src/components/PortfolioPreview/index.jsx +++ /dev/null @@ -1,29 +0,0 @@ -import { h } from 'preact'; -import Styles from './styles.module.scss'; - -function PortfolioPreview({ project }) { - const { frontmatter } = project; - return ( - <div className={Styles.card}> - <div className={Styles.titleCard} style={`background-image:url(${frontmatter.img})`}> - <h1 className={Styles.title}>{frontmatter.title}</h1> - </div> - <div className="pa3"> - <p className={`${Styles.desc} mt0 mb2`}>{frontmatter.description}</p> - <div className={Styles.tags}> - Tagged: - {frontmatter.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 deleted file mode 100644 index bded61547..000000000 --- a/examples/portfolio/src/components/PortfolioPreview/styles.module.scss +++ /dev/null @@ -1,102 +0,0 @@ -.card { - 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; -} - -.titleCard { - position: relative; - background-size: cover; - background-position: 50% 100%; - padding-top: 37.5%; -} - -.desc { - 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; - - &:focus, - &:hover { - opacity: 1; - - .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%); -} - -.nav { - display: flex; - justify-content: flex-end; -} - -.tags { - font-size: var(--f-d2); - text-transform: uppercase; -} - -.tag { - 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); - } -} diff --git a/examples/portfolio/src/layouts/project.astro b/examples/portfolio/src/layouts/project.astro index aba14a5ac..f02f89c74 100644 --- a/examples/portfolio/src/layouts/project.astro +++ b/examples/portfolio/src/layouts/project.astro @@ -1,8 +1,7 @@ --- import MainHead from '../components/MainHead.astro'; -import Button from '../components/Button/index.jsx'; -import Footer from '../components/Footer/index.jsx'; -import Nav from '../components/Nav/index.jsx'; +import Footer from '../components/Footer.astro'; +import Nav from '../components/Nav.astro'; const { content } = Astro.props; --- @@ -10,7 +9,7 @@ const { content } = Astro.props; <html lang={content.lang || 'en'}> <head> <MainHead title={content.title} description={content.description} /> - <style lang="scss"> + <style> .hero { padding: 8rem; display: flex; @@ -28,19 +27,19 @@ const { content } = Astro.props; margin-left: 0.5em; margin-right: 0.5em; text-transform: uppercase; + } - &: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:nth-of-type(1n) { + color: var(--c-green); + } + .tag:nth-of-type(2n) { + color: var(--c-orange); + } + .tag:nth-of-type(3n) { + color: var(--c-blue); + } + .tag:nth-of-type(4n) { + color: var(--c-pink); } .title { @@ -51,8 +50,10 @@ const { content } = Astro.props; } .leadIn { + padding-top: 4em; color: var(--t-bg); background-color: var(--t-fg); + text-align: center; } .tagline { @@ -64,6 +65,18 @@ const { content } = Astro.props; .content { font-size: var(--f-u1); line-height: 2.2; + max-width: 50em; + margin: auto; + } + + .wrapper { + padding-bottom: 4em; + margin-bottom: 4em; + } + + footer { + text-align: center; + margin-top: 3rem; } </style> </head> @@ -73,18 +86,16 @@ const { content } = Astro.props; <h1 class="title">{content.title}</h1> </header> <div class="leadIn"> - <div class="wrapper pt8 pb8 mb8 tac"> + <div class="wrapper"> {content.tags.map((t) => <span class="tag">{t}</span>)} <h3 class="tagline">{content.description}</h3> </div> </div> - <div class="wrapper wrapper__readable"> + <div class="wrapper"> <div class="content"><slot /></div> </div> - <footer class="tac mt6"> - <a href="/projects"> - <Button>View More</Button> - </a> + <footer> + <a href="/projects" class="button">View More</a> </footer> <Footer /> </body> diff --git a/examples/portfolio/src/pages/404.astro b/examples/portfolio/src/pages/404.astro index a2feb4158..f776936af 100644 --- a/examples/portfolio/src/pages/404.astro +++ b/examples/portfolio/src/pages/404.astro @@ -1,19 +1,25 @@ --- import MainHead from '../components/MainHead.astro'; -import Footer from '../components/Footer/index.jsx'; -import Nav from '../components/Nav/index.jsx'; +import Footer from '../components/Footer.astro'; +import Nav from '../components/Nav.astro'; --- <html lang="en"> <head> <MainHead title="Not Found" /> + <style> + .wrapper { + margin-top: 2em; + margin-bottom: 2em; + } + </style> </head> <body> - <nav></nav> - <div class="wrapper mt4 mb4"> + <Nav /> + <div class="wrapper"> <h1>Page Not Found</h1> <p>Not found</p> </div> - <footer></footer> + <Footer /> </body> </html> diff --git a/examples/portfolio/src/pages/about.astro b/examples/portfolio/src/pages/about.astro index a4205bb00..8772b3a1c 100644 --- a/examples/portfolio/src/pages/about.astro +++ b/examples/portfolio/src/pages/about.astro @@ -1,26 +1,31 @@ --- import MainHead from '../components/MainHead.astro'; -import Footer from '../components/Footer/index.jsx'; -import Nav from '../components/Nav/index.jsx'; +import Footer from '../components/Footer.astro'; +import Nav from '../components/Nav.astro'; --- <html lang="en"> <head> <MainHead title="About | Jeanine White" description="About Jeanine White Lorem Ipsum" /> - <style lang="scss"> + <style> .heroImg { max-height: 24rem; object-fit: cover; overflow: hidden; + } - img { - width: 100%; - } + .heroImg img { + width: 100%; } .bio { font-size: var(--f-u1); line-height: 2; + margin-top: 4em; + } + + .wrapper.bio { + max-width: 50em; } </style> </head> @@ -35,7 +40,7 @@ import Nav from '../components/Nav/index.jsx'; 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"> + <div class="bio wrapper"> <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 diff --git a/examples/portfolio/src/pages/index.astro b/examples/portfolio/src/pages/index.astro index 174bd1896..2d636de51 100644 --- a/examples/portfolio/src/pages/index.astro +++ b/examples/portfolio/src/pages/index.astro @@ -1,10 +1,9 @@ --- // Component Imports import MainHead from '../components/MainHead.astro'; -import Button from '../components/Button/index.jsx'; -import Nav from '../components/Nav/index.jsx'; -import Footer from '../components/Footer/index.jsx'; -import PortfolioPreview from '../components/PortfolioPreview/index.jsx'; +import Nav from '../components/Nav.astro'; +import Footer from '../components/Footer.astro'; +import PortfolioPreview from '../components/PortfolioPreview.astro'; // Data Fetching: List all Markdown posts in the repo. const projects = await Astro.glob('./project/**/*.md'); @@ -20,14 +19,19 @@ const featuredProject = projects[0]; title="Jeanine White: Personal Site" description="Jeanine White: Developer, Speaker, and Writer..." /> - <style lang="scss"> - $w-s: 750px; + <style> + .wrapper { + margin-top: 2em; + margin-bottom: 2em; + } .hero { position: relative; overflow: hidden; + } - @media (min-width: $w-s) { + @media (min-width: 750px) { + .hero { height: 45vw; } } @@ -69,19 +73,23 @@ const featuredProject = projects[0]; align-items: flex-start; justify-content: center; padding-left: 2rem; + } - @media (min-width: $w-s) { + @media (min-width: 750px) { + .overlay { padding-left: 4rem; } } .title { font-weight: 900; - font-size: var(--f-u8); + font-size: var(--f-u6); margin-bottom: 0.5rem; margin-top: 0; + } - @media (min-width: $w-s) { + @media (min-width: 750px) { + .title { font-size: var(--f-u12); } } @@ -89,8 +97,10 @@ const featuredProject = projects[0]; .grid { display: grid; grid-gap: 2rem; + } - @media (min-width: 1200px) { + @media (min-width: 1200px) { + .grid { grid-template-columns: 2fr 1fr; } } @@ -102,46 +112,44 @@ const featuredProject = projects[0]; margin-bottom: 2rem; } + .roles { + display: flex; + flex-wrap: wrap; + gap: 0.5em; + font-size: var(--f-d1); + } + .role { position: relative; display: inline-block; + white-space: nowrap; 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) { + @media (min-width: 750px) { + .role { font-size: var(--f-u3); } + } - + .role { - margin-left: 1em; - } - - &:nth-of-type(1) { - .invert { - background-color: var(--c-pink); - } - } + .role:nth-of-type(1) .invert { + background-color: var(--c-pink); + } - &:nth-of-type(2) { - .invert { - background-color: var(--c-blue); - } - } + .role:nth-of-type(2) .invert { + background-color: var(--c-blue); + } - &:nth-of-type(3) { - .invert { - background-color: var(--c-green); - } - } + .role:nth-of-type(3) .invert { + background-color: var(--c-green); + } - &:hover { - .invert { - clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); - } - } + .role:hover .invert { + clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } .invert { @@ -160,7 +168,7 @@ const featuredProject = projects[0]; } .desc { - font-size: var(--f-u2); + font-size: var(--f-u1); margin-top: 1.5rem; margin-bottom: 0; } @@ -175,14 +183,19 @@ const featuredProject = projects[0]; .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); - } + .bio > span:first-of-type { + line-height: 1; + margin-bottom: 0.5em; + display: block; + font-weight: 700; + font-size: var(--f-u4); + } + + .buttonContainer { + text-align: center; + margin-top: 2em; } </style> </head> @@ -203,23 +216,21 @@ const featuredProject = projects[0]; <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> + <div class="roles"> + <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"> + <main class="wrapper"> <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 class="buttonContainer"> + <a href="/products/" class="button">View All</a> </div> </div> <div class="section"> diff --git a/examples/portfolio/src/pages/projects.astro b/examples/portfolio/src/pages/projects.astro index a52f7e203..415e7aeeb 100644 --- a/examples/portfolio/src/pages/projects.astro +++ b/examples/portfolio/src/pages/projects.astro @@ -1,8 +1,8 @@ --- import MainHead from '../components/MainHead.astro'; -import Footer from '../components/Footer/index.jsx'; -import Nav from '../components/Nav/index.jsx'; -import PortfolioPreview from '../components/PortfolioPreview/index.jsx'; +import Footer from '../components/Footer.astro'; +import Nav from '../components/Nav.astro'; +import PortfolioPreview from '../components/PortfolioPreview.astro'; const projects = (await Astro.glob('./project/**/*.md')) .filter(({ frontmatter }) => !!frontmatter.publishDate) @@ -18,17 +18,21 @@ const projects = (await Astro.glob('./project/**/*.md')) title="All Projects | Jeanine White" description="Learn about Jeanine White's most recent projects" /> - <style lang="scss"> + <style> .grid { display: grid; grid-gap: 3rem; } + .title { + margin-top: 2rem; + margin-bottom: 2rem; + } </style> </head> <body> <Nav /> <div class="wrapper"> - <h1 class="title mt4 mb4">All Projects</h1> + <h1 class="title">All Projects</h1> <div class="grid"> {projects.map((project) => <PortfolioPreview project={project} />)} </div> diff --git a/examples/portfolio/src/styles/global.scss b/examples/portfolio/src/styles/global.css index 453adadbe..f1eceb91b 100644 --- a/examples/portfolio/src/styles/global.scss +++ b/examples/portfolio/src/styles/global.css @@ -1,6 +1,6 @@ -// Tokens +/* Global variables */ :root { - // (c)olor + /* Colors */ --c-black: #05091e; --c-blue: #46b4ff; --c-gray: #90aab7; @@ -10,7 +10,7 @@ --c-yellow: #ffdace; --c-white: #fff; - // (f)ont + /* Fonts */ --f-u18: 11.390625em; --f-u17: 9.950627481136905em; --f-u16: 8.692673779389363em; @@ -48,15 +48,12 @@ --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); } -// Base - body { margin: 0; color: var(--t-fg); @@ -80,77 +77,14 @@ h1 { font-size: var(--f-u8); } -// Utils - -// 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}); - } -} - -// 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}); - } -} - -// 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; - } +.button { + display: inline-block; + border: 3px solid currentColor; + padding: 0.5em 1em; + font-weight: 700; + text-transform: uppercase; } -// text align -.tac { - text-align: center; -} -.tal { - text-align: left; -} -.tar { - text-align: right; -} - -// wrapper .wrapper { max-width: 80em; margin-left: auto; @@ -158,6 +92,4 @@ $colors: 'black', 'blue', 'white'; padding-left: 2rem; padding-right: 2rem; } -.wrapper__readable { - max-width: 50em; -} + |