├── .eslintrc.json
├── .gitignore
├── LICENSE
├── README.md
├── components
├── 1-psn.js
├── 2-up-button.js
├── 2-up-no-button.js
├── 4-psn.js
├── 4-up.js
├── avatar.js
├── blog-4-home.js
├── contact-form.js
├── container.js
├── date-formatter.js
├── footer.js
├── header.js
├── jumbotron.js
├── layout.js
├── main-gallery.js
├── media-block.js
├── meta.js
├── nav.js
├── newsletter-form.js
├── post-block.js
├── pricing-block-only.js
├── pricing.js
├── section-separator.js
├── short-text.js
├── social-icon.js
├── testimonials.js
└── text-and-image.js
├── content
├── .keep
├── _index.md
├── post
│ └── brewing-chemex.md
├── services
│ └── _index.md
├── team
│ └── _index.md
└── tech.md
├── data
└── meta.json
├── lib
├── api.js
├── constants.js
└── markdownToHtml.js
├── package-lock.json
├── package.json
├── pages
├── 404.js
├── _app.js
├── _document.js
├── index.js
├── posts
│ └── [slug].js
├── services.js
└── team.js
├── postcss.config.js
├── public
├── favicon
│ ├── android-chrome-192x192.png
│ ├── android-chrome-512x512.png
│ ├── apple-touch-icon.png
│ ├── browserconfig.xml
│ ├── favicon-16x16.png
│ ├── favicon-32x32.png
│ ├── favicon.ico
│ ├── mstile-150x150.png
│ ├── safari-pinned-tab.svg
│ └── site.webmanifest
├── img
│ ├── android-chrome-192x192.png
│ ├── android-chrome-512x512.png
│ ├── apple-touch-icon.png
│ ├── diego.jpeg
│ ├── favicon-16x16.png
│ ├── favicon-32x32.png
│ ├── favicon.ico
│ ├── global-preloader.jpg
│ ├── home-jumbotron.jpg
│ ├── icon.svg
│ ├── icons-facebook.svg
│ ├── icons-instagram.svg
│ ├── icons-twitter.svg
│ ├── icons-vimeo.svg
│ ├── logo.svg
│ ├── mstile-144x144.png
│ ├── mstile-150x150.png
│ ├── mstile-310x150.png
│ ├── mstile-310x310.png
│ ├── mstile-70x70.png
│ ├── og-image.jpg
│ ├── safari-pinned-tab.svg
│ └── services-jumbotron.jpg
└── pimg
│ ├── progressive-image.css
│ ├── progressive-image.js
│ └── progressive-image.min.js
└── styles
├── imports
├── _background-position.css
├── _background-size.css
├── _border-colors.css
├── _border-radius.css
├── _border-style.css
├── _border-widths.css
├── _borders.css
├── _box-sizing.css
├── _buttons.css
├── _clears.css
├── _cms.css
├── _code.css
├── _colors.css
├── _coordinates.css
├── _debug-children.css
├── _debug-grid.css
├── _debug.css
├── _display.css
├── _flexbox.css
├── _floats.css
├── _font-style.css
├── _font-weight.css
├── _forms.css
├── _heights.css
├── _images.css
├── _line-height.css
├── _links.css
├── _lists.css
├── _max-widths.css
├── _media-queries.css
├── _opacity.css
├── _outlines.css
├── _overflow.css
├── _position.css
├── _reset.css
├── _spacing.css
├── _states.css
├── _styles.css
├── _svg.css
├── _tables.css
├── _text-align.css
├── _text-decoration.css
├── _text-transform.css
├── _type-scale.css
├── _typography.css
├── _utilities.css
├── _variables.css
├── _vertical-align.css
├── _visibility.css
├── _white-space.css
├── _widths.css
├── _word-break.css
└── _z-index.css
└── main.css
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals",
3 | "rules": {
4 | "@next/next/no-sync-scripts": "off",
5 | "@next/next/no-html-link-for-pages": "off",
6 | "@next/next/no-img-element": "off",
7 | "jsx-a11y/alt-text": "off",
8 | "@next/next/no-css-tags": "off"
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 |
33 | # vercel
34 | .vercel
35 |
36 | yarn.lock
37 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Gavin Johnson & Diego Lara
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # A small business website for Iron Detailing
2 | Iron Detailing is a mobile automotive detailing service based out or Los Angeles, CA. It serves Torrance, South Bay, and surrounding areas.
3 |
4 | You can preview this site at [irondetailing.netlify.app](https://irondetailing.netlify.app/).
5 |
6 |
7 | ## How to Use
8 | * Clone the repo and cd into its folder.
9 | * Run `npm install`.
10 | * To run rtdl's website locally in dev mode, run `npm run dev`. You can
11 | view the site at [http://localhost:3000/](http://localhost:3000/).
12 | * To build the website, run `npm run build` and it will output to the `.next` folder.
13 |
14 |
15 | ## License 🤝
16 | [MIT](./LICENSE)
17 |
18 |
19 | ## Appreciation 🙏
20 | * [next-dev-studio template](https://github.com/lwz7512/next-dev-studio) by [lwz7512](https://github.com/lwz7512)
--------------------------------------------------------------------------------
/components/1-psn.js:
--------------------------------------------------------------------------------
1 | export default function OnePerson({heading, description, blurbs}) {
2 | return (
3 |
4 |
5 |
{heading}
6 |
{description}
7 |
8 | {
9 | blurbs.map(p => (
10 |
11 |
12 |
13 |
14 |
15 |
16 | {p.name}
17 |
18 |
21 |
22 |
23 | ))
24 | }
25 |
26 |
27 |
28 | )
29 | }
--------------------------------------------------------------------------------
/components/2-up-button.js:
--------------------------------------------------------------------------------
1 | import Link from 'next/link'
2 |
3 | export default function TwoUpButton({ intro, products }) {
4 | if(intro.text != null && intro.text != "") {
5 | return (
6 |
7 |
8 |
{intro.heading}
9 |
{intro.text}
10 |
11 | {
12 | products.map(p => (
13 |
14 |
{p.heading}
15 |
{p.text}
16 |
17 | ))
18 | }
19 |
20 |
25 |
26 |
27 | )
28 | } else {
29 | return (
30 |
31 |
32 |
{intro.heading}
33 |
34 | {
35 | products.map(p => (
36 |
37 |
{p.heading}
38 |
{p.text}
39 |
40 | ))
41 | }
42 |
43 |
48 |
49 |
50 | )
51 | }
52 | }
--------------------------------------------------------------------------------
/components/2-up-no-button.js:
--------------------------------------------------------------------------------
1 | import Link from 'next/link'
2 |
3 | export default function TwoUpNoButton({ intro, products }) {
4 | if(intro.text != null && intro.text != "") {
5 | return (
6 |
7 |
8 |
{intro.heading}
9 |
{intro.text}
10 |
11 | {
12 | products.map(p => (
13 |
14 |
{p.heading}
15 |
{p.text}
16 |
17 | ))
18 | }
19 |
20 |
21 |
22 | )
23 | } else {
24 | return (
25 |
26 |
27 |
{intro.heading}
28 |
29 | {
30 | products.map(p => (
31 |
32 |
{p.heading}
33 |
{p.text}
34 |
35 | ))
36 | }
37 |
38 |
39 |
40 | )
41 | }
42 | }
--------------------------------------------------------------------------------
/components/4-psn.js:
--------------------------------------------------------------------------------
1 | export default function FourPerson({heading, description, blurbs}) {
2 | return (
3 |
4 |
5 |
{heading}
6 |
{description}
7 |
8 | {
9 | blurbs.map(p => (
10 |
11 |
12 |
13 |
14 |
15 |
16 | {p.name}
17 |
18 |
21 |
22 |
23 | ))
24 | }
25 |
26 |
27 |
28 | )
29 | }
--------------------------------------------------------------------------------
/components/4-up.js:
--------------------------------------------------------------------------------
1 | export default function FourUp({ heading, description, blurbs }) {
2 | return (
3 |
4 |
5 |
{heading}
6 |
{description}
7 |
8 | {
9 | blurbs.map(p => (
10 |
11 |
12 |
13 |
14 |
{p.text}
15 |
16 | ))
17 | }
18 |
19 |
20 |
21 | )
22 | }
--------------------------------------------------------------------------------
/components/avatar.js:
--------------------------------------------------------------------------------
1 | export default function Avatar({ name, picture }) {
2 | return (
3 |
4 |
5 |
{name}
6 |
7 | )
8 | }
9 |
--------------------------------------------------------------------------------
/components/blog-4-home.js:
--------------------------------------------------------------------------------
1 | import Link from 'next/link'
2 | import PostBlock from './post-block'
3 |
4 | export default function Blog4Home({ posts }) {
5 | return (
6 |
7 |
8 |
Latest stories
9 |
10 | {
11 | posts.map(p => (
12 |
20 | ))
21 | }
22 |
23 |
28 |
29 |
30 | )
31 | }
--------------------------------------------------------------------------------
/components/contact-form.js:
--------------------------------------------------------------------------------
1 | export default function ContactForm() {
2 | return (
3 |
4 |
Drop us a line below
5 |
33 |
34 | )
35 | }
--------------------------------------------------------------------------------
/components/container.js:
--------------------------------------------------------------------------------
1 | export default function Container({ children }) {
2 | return {children}
3 | }
4 |
--------------------------------------------------------------------------------
/components/date-formatter.js:
--------------------------------------------------------------------------------
1 | import { parseISO, format } from 'date-fns'
2 |
3 | export default function DateFormatter({ dateString }) {
4 | const date = parseISO(dateString)
5 | return {format(date, 'LLLL d, yyyy')}
6 | }
7 |
--------------------------------------------------------------------------------
/components/footer.js:
--------------------------------------------------------------------------------
1 | // import Link from 'next/link'
2 | import NewsletterForm from './newsletter-form'
3 | import SocialIcon from './social-icon'
4 |
5 | export default function Footer() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
Iron Detailing
15 |
20 |
21 |
22 |
Serving Torrance and South Bay
23 |
27 |
28 |
29 |
Social media
30 |
34 |
35 |
36 |
37 |
38 | )
39 | }
40 |
--------------------------------------------------------------------------------
/components/header.js:
--------------------------------------------------------------------------------
1 | import Link from 'next/link'
2 |
3 | export default function Header() {
4 | return (
5 |
6 |
7 | Blog
8 |
9 | .
10 |
11 | )
12 | }
13 |
--------------------------------------------------------------------------------
/components/jumbotron.js:
--------------------------------------------------------------------------------
1 | export default function Jumbotron({ title, subtitle, imageUrl }) {
2 | return (
3 |
4 |
5 |
6 |
7 |
8 |
9 | {title}
10 |
11 |
12 |
13 | { subtitle &&
14 |
15 | {subtitle}
16 |
17 | }
18 |
19 |
20 |
21 |
22 | )
23 | }
--------------------------------------------------------------------------------
/components/layout.js:
--------------------------------------------------------------------------------
1 | import Nav from '../components/nav'
2 | import Footer from '../components/footer'
3 | import Meta from '../components/meta'
4 | import metaData from '../data/meta.json'
5 |
6 | export default function Layout({ children }) {
7 | return (
8 | <>
9 |
10 |
11 |
12 | {children}
13 |
14 |
15 | >
16 | )
17 | }
18 |
--------------------------------------------------------------------------------
/components/main-gallery.js:
--------------------------------------------------------------------------------
1 | export default function MainGallery({ heading, description, image1, image2, image3 }) {
2 | return (
3 | <>
4 |
5 |
6 |
{heading}
7 |
{description}
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | >
24 | )
25 | }
--------------------------------------------------------------------------------
/components/media-block.js:
--------------------------------------------------------------------------------
1 | export default function MediaBlock({imageUrl, heading, text, reverse}) {
2 | return (
3 |
4 |
5 |
6 |
7 |
8 |
{heading}
9 |
{text}
10 |
11 |
12 | )
13 | }
--------------------------------------------------------------------------------
/components/meta.js:
--------------------------------------------------------------------------------
1 | import Head from 'next/head'
2 | import { CMS_NAME, HOME_OG_IMAGE_URL, HOME_OG_URL, HOME_OG_TITLE, HOME_OG_DESC } from '../lib/constants'
3 |
4 | export default function Meta() {
5 | return (
6 |
7 |
12 |
18 |
24 |
25 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | {/* Facebook Meta Tags */}
38 |
39 |
40 |
41 |
42 |
43 |
44 | {/* Twitter Meta Tags */}
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 | )
53 | }
54 |
--------------------------------------------------------------------------------
/components/nav.js:
--------------------------------------------------------------------------------
1 | import Link from 'next/link'
2 | import { useRouter } from 'next/router'
3 | import metaData from '../data/meta.json'
4 |
5 | export default function Nav({logo}) {
6 | const router = useRouter()
7 | const slug = router.pathname.substr(1)
8 | const navStyle = "overflow-x-scroll overflow-x-visible-ns flex justify-between items-center center bg-white divider-grey relative"
9 | return (
10 |
12 |
13 |
14 |
15 |
16 | {
17 | metaData.menus.map(m => {
18 | const mcls = m.url.substr(1)
19 | return (
20 |
21 |
22 | {m.page}
23 |
24 |
25 | )
26 | })
27 | }
28 |
29 |
30 | )
31 | }
--------------------------------------------------------------------------------
/components/newsletter-form.js:
--------------------------------------------------------------------------------
1 | export default function NewsletterForm() {
2 | return (
3 |
4 |
5 |
6 | Your email
7 |
8 | Submit
9 |
10 |
11 | )
12 | }
--------------------------------------------------------------------------------
/components/post-block.js:
--------------------------------------------------------------------------------
1 | import Link from 'next/link'
2 | import DateFormatter from './date-formatter'
3 |
4 | export default function PostBlock({ title, date, description, slug }) {
5 | return (
6 |
7 |
8 | {title}
9 |
10 |
13 |
14 | {description}
15 | Read more →
16 |
17 |
18 | )
19 | }
--------------------------------------------------------------------------------
/components/pricing-block-only.js:
--------------------------------------------------------------------------------
1 |
2 | const PriceItem = ({plan, price, description, items }) => (
3 |
4 |
{plan}
5 |
6 | starting at $ {price}
7 |
8 |
{description}
9 |
10 | {
11 | items.map(it => (
12 |
13 | {it}
14 |
15 | ))
16 | }
17 |
18 |
19 | )
20 |
21 | export default function PricingBlocksOnly({plans}) {
22 | return (
23 |
24 |
25 |
26 | {
27 | plans.map(p => (
28 |
36 | ))
37 | }
38 |
39 |
40 |
41 | )
42 | }
--------------------------------------------------------------------------------
/components/pricing.js:
--------------------------------------------------------------------------------
1 |
2 | const PriceItem = ({plan, price, description, items }) => (
3 |
4 |
{plan}
5 |
6 | starting at $ {price}
7 |
8 |
{description}
9 |
10 | {
11 | items.map(it => (
12 |
13 | {it}
14 |
15 | ))
16 | }
17 |
18 |
19 | )
20 |
21 | export default function Pricing({heading, description, plans}) {
22 | return (
23 |
24 |
25 |
{heading}
26 |
{description}
27 |
28 | {
29 | plans.map(p => (
30 |
38 | ))
39 | }
40 |
41 |
42 |
43 | )
44 | }
--------------------------------------------------------------------------------
/components/section-separator.js:
--------------------------------------------------------------------------------
1 | export default function SectionSeparator() {
2 | return
3 | }
4 |
--------------------------------------------------------------------------------
/components/short-text.js:
--------------------------------------------------------------------------------
1 | export default function ShortText({ heading, text }) {
2 | return (
3 |
4 |
5 |
{heading}
6 |
{text}
7 |
8 |
9 | )
10 | }
--------------------------------------------------------------------------------
/components/social-icon.js:
--------------------------------------------------------------------------------
1 | export default function SocialIcon({ link, iconPath }) {
2 | return (
3 |
4 |
5 |
6 |
7 |
8 | )
9 | }
--------------------------------------------------------------------------------
/components/testimonials.js:
--------------------------------------------------------------------------------
1 | export default function Testimonials({items}) {
2 | return (
3 |
4 | {
5 | items.map(it => (
6 |
7 |
8 | “{it.quote}”
9 | {it.author}
10 |
11 |
12 | ))
13 | }
14 |
15 | )
16 | }
--------------------------------------------------------------------------------
/components/text-and-image.js:
--------------------------------------------------------------------------------
1 | import Link from 'next/link'
2 |
3 | export default function TextAndImage({heading, text, image, buttonLink, buttonText}) {
4 | return (
5 |
6 |
7 |
8 |
9 |
{heading}
10 |
{text}
11 |
12 |
13 |
14 |
15 |
16 |
21 |
22 |
23 | )
24 | }
--------------------------------------------------------------------------------
/content/.keep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lwz7512/next-dev-studio/da224f0a29f9558215647285a455481ea54f9237/content/.keep
--------------------------------------------------------------------------------
/content/_index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Iron Detailing"
3 | subtitle: "Mobile automotive detailing serving Torrance, South Bay, and surrounding areas. Locally owned & operated."
4 | image: /img/home-jumbotron.jpg
5 | blurb:
6 | heading: "What does Iron Detailing do?"
7 | text: "We offer mobile automotive detailing. We'll bring our supplies and equipment to wherever you are to service your car, truck, van, bus, train, or whatever
8 | vehicle you have. All we need is electrical and hose outlets, and we can service your vehicle."
9 | intro:
10 | heading: "Services we offer"
11 | text: "We offer several high quality detailing packages to help you clean, decontaminate, and protect your vehicle."
12 | products1:
13 | - heading: "Steel Detail"
14 | text: "Full detail inside and out, 2-step paint decontamination, tire shine, plastic and vinyl recovery, and ceramic hand wax application. Optional up-charge for interior shampoo."
15 | - heading: "Iron Detail"
16 | text: "Full detail inside and out, paint decontamination, tire shine, plastic and vinyl recovery, and hand wax application. Optional up-charge for interior shampoo."
17 | products2:
18 | - heading: "Carbon Detail"
19 | text: "Full detail inside and out, paint decontamination, tire shine, plastic and vinyl recovery, and spray wax application. Optional up-charge for interior shampoo."
20 | - heading: "Express Detail"
21 | text: "Regular car wash, a QUICK vacuum, and a QUICK interior wipe down."
22 | products3:
23 | - heading: "Exterior Detail"
24 | text: "Full detail outside ONLY, paint decontamination, plastic and Vinyl recovery, and spray wax application. Optional up-charges for hand wax upgrade and paint decontamination upgrade."
25 | - heading: "Interior Detail"
26 | text: "Full detail inside ONLY! Optional up-charge for interior shampoo. "
27 | ---
28 |
29 |
--------------------------------------------------------------------------------
/content/post/brewing-chemex.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: A beginners’ guide to brewing with Chemex
3 | date: '2017-01-04T15:04:10.000Z'
4 | description: >-
5 | Brewing with a Chemex probably seems like a complicated, time-consuming
6 | ordeal, but once you get used to the process, it becomes a soothing ritual
7 | that's worth the effort every time.
8 | image: /img/blog-chemex.jpg
9 | ---
10 |
11 | This [week](/wdwdw) we’ll **take** a look at all the steps required to make astonishing coffee with a Chemex at home. The Chemex Coffeemaker is a manual, pour-over style glass-container coffeemaker that Peter Schlumbohm invented in 1941, and which continues to be manufactured by the Chemex Corporation in Chicopee, Massachusetts\*.
12 |
13 | In 1958, designers at the [Illinois Institute of Technology](https://www.spacefarm.digital) said that the Chemex Coffeemaker is *"one of the best-designed products of modern times"*, and so is included in the collection of the Museum of Modern Art in New York City.
14 |
15 | ## The little secrets of Chemex brewing
16 |
17 | The Chemex Coffeemaker consists of an hourglass-shaped glass flask with a conical funnel-like neck (rather than the cylindrical neck of an Erlenmeyer flask) and uses proprietary filters, made of bonded paper (thicker-gauge paper than the standard paper filters for a drip-method coffeemaker) that removes most of the coffee oils, brewing coffee with a taste that is different than coffee brewed in other coffee-making systems; also, the thicker paper of the Chemex coffee filters may assist in removing cafestol, a cholesterol-containing compound found in coffee oils. Here’s three important tips newbies forget about:
18 |
19 | 1. Always buy dedicated Chemex filters.
20 | 2. Use a scale, don’t try to eyeball it.
21 | 3. Never skip preheating the glass.
22 | 4. Timing is key, don’t forget the clock.
23 |
24 | The most visually distinctive feature of the Chemex is the heatproof wooden collar around the neck, allowing it to be handled and poured when full of hot water. This is turned, then split in two to allow it to fit around the glass neck. The two pieces are held loosely in place by a tied leather thong. The pieces are not tied tightly and can still move slightly, retained by the shape of the conical glass.
25 |
26 | For a design piece that became popular post-war at a time of Modernism and precision manufacture, this juxtaposition of natural wood and the organic nature of a hand-tied knot with the laboratory nature of glassware was a distinctive feature of its appearance.
--------------------------------------------------------------------------------
/content/services/_index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Iron Detailing Services
3 | subtitle: Mobile automotive detailing wherever you are for whatever vehicle you have
4 | type: products
5 | image: /img/services-jumbotron.jpg
6 | heading: Detailing Packages
7 | description: >-
8 | We offer several high quality detailing packages to help you clean, decontaminate, and protect your vehicle.
9 | pricing:
10 | heading: Detailing Packages
11 | description: >-
12 | We offer several high quality detailing packages to help you clean, decontaminate, and protect your vehicle.
13 | plans:
14 | - description: ""
15 | items:
16 | - Full detail inside and out
17 | - 2-step paint decontamination, including clay bar
18 | - Tire shine
19 | - Plastic and vinyl recovery
20 | - Ceramic hand wax
21 | - Additional cost for interior shampoo
22 | plan: Steel Detail
23 | price: '180'
24 | - description: ""
25 | items:
26 | - Full detail inside and out
27 | - Paint decontamination
28 | - Tire shine
29 | - Plastic and vinyl recovery
30 | - Hand wax
31 | - Additional cost for interior shampoo
32 | plan: Iron Detail
33 | price: '160'
34 | - description: ""
35 | items:
36 | - Full detail inside and out
37 | - Paint decontamination
38 | - Tire shine
39 | - Plastic and vinyl recovery
40 | - Spray wax
41 | - Additional cost for interior shampoo
42 | plan: Carbon Detail
43 | price: '140'
44 | pricing2:
45 | plans:
46 | - description: ""
47 | items:
48 | - Regular car wash
49 | - QUICK vacuum
50 | - QUICK interior wipe down.
51 | - Tire shine
52 | - Plastic and vinyl recovery
53 | - Spray wax
54 | plan: Express Detail
55 | price: '80'
56 | - description: ""
57 | items:
58 | - Full exterior detail
59 | - Paint decontamination
60 | - Tire shine
61 | - Plastic and vinyl recovery
62 | - Spray wax
63 | - Additional cost for hand wax and clay bar upgrades
64 | plan: Exterior Detail
65 | price: '60'
66 | - description: ""
67 | items:
68 | - Full interior detail
69 | - Additional cost for interior shampoo
70 | plan: Interior Detail
71 | price: '60'
72 | ---
73 |
74 |
75 |
--------------------------------------------------------------------------------
/content/team/_index.md:
--------------------------------------------------------------------------------
1 | ---
2 | type: team
3 | members:
4 | heading: Iron Detailing Team
5 | description:
6 | blurbs:
7 | - image: /img/diego.jpeg
8 | name: Diego Lara
9 | text: >
10 | Owner and operator of Iron Detailing. Raised in LA. Diego opened Iron Detailing in August 2021. His interest initially spawned from watching car detailing videos on TikTok and Youtube. Diego acted on that interest and built a business for himself. Detailing cars is intriguing and therapeutic for Diego. He finds purpose in running Iron Detailing and hopes to expand the business so that he can focus on car detailing full-time.
11 | ---
--------------------------------------------------------------------------------
/content/tech.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'tech'
3 | date: 2018-11-14T19:02:50-07:00
4 | draft: false
5 | ---
6 |
7 | # [Victor Hugo](https://github.com/netlify-templates/victor-hugo)
8 |
9 | ## A Hugo boilerplate for creating truly epic websites
10 |
11 |
12 |
13 | This is a boilerplate for using [Hugo](https://gohugo.io/) as a static site generator and [Webpack](https://webpack.js.org/) as your asset pipeline. Victor Hugo setup to use [PostCSS](http://postcss.org/) and [Babel](https://babeljs.io/) for CSS and JavaScript compiling/transpiling. This project is released under the [MIT license](LICENSE). Please make sure you understand its implications and guarantees.
14 |
15 | ## Enjoy!! 😸
16 |
--------------------------------------------------------------------------------
/data/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "logo": "/img/logo.svg",
3 | "menus": [
4 | {
5 | "page": "Call or Text to Book (323) 944-7238",
6 | "url": "tel:3239447238"
7 | },
8 | {
9 | "page": "Book Online",
10 | "target": "_blank",
11 | "url": "https://squareup.com/appointments/book/afwc68r654y6i1/L8VCJCD01JR06/services"
12 | },
13 | {
14 | "page": "Our Services",
15 | "url": "/services"
16 | },
17 | {
18 | "page": "Our Team",
19 | "url": "/team"
20 | }
21 | ]
22 | }
--------------------------------------------------------------------------------
/lib/api.js:
--------------------------------------------------------------------------------
1 | import fs from 'fs'
2 | import { join } from 'path'
3 | import matter from 'gray-matter'
4 |
5 | const contentDirectory = join(process.cwd(), 'content')
6 | const postsDirectory = join(process.cwd(), 'content/post')
7 |
8 | export function getHomePageData() {
9 | const indexMD = join(contentDirectory, '_index.md')
10 | const fileContents = fs.readFileSync(indexMD, 'utf8')
11 | const { data } = matter(fileContents)
12 | return data
13 | }
14 |
15 | export function getPosts4Home() {
16 | return getAllPosts().slice(0, 3)
17 | }
18 |
19 | export function getPageData(pageName, withContent = false) {
20 | const indexMD = join(contentDirectory, pageName, '_index.md')
21 | const fileContents = fs.readFileSync(indexMD, 'utf8')
22 | const { data, content } = matter(fileContents)
23 |
24 | if (withContent) return { data, content}
25 |
26 | return data
27 | }
28 |
29 | export function getPostSlugs() {
30 | return fs.readdirSync(postsDirectory)
31 | }
32 |
33 | export function getPostBySlug(slug) {
34 | const realSlug = slug.replace(/\.md$/, '')
35 | const fullPath = join(postsDirectory, `${realSlug}.md`)
36 | const fileContents = fs.readFileSync(fullPath, 'utf8')
37 | const { data, content } = matter(fileContents)
38 |
39 | return {...data, content, slug: realSlug}
40 | }
41 |
42 | export function getAllPosts() {
43 | const slugs = getPostSlugs()
44 | const posts = slugs
45 | .map((slug) => getPostBySlug(slug))
46 | // sort posts by date in descending order
47 | .sort((post1, post2) => (post1.date > post2.date ? -1 : 1))
48 | return posts
49 | }
50 |
--------------------------------------------------------------------------------
/lib/constants.js:
--------------------------------------------------------------------------------
1 | export const EXAMPLE_PATH = 'blog-starter'
2 | export const CMS_NAME = 'Iron Detailing'
3 | export const HOME_OG_IMAGE_URL = 'https://irondetailing.netlify.app/img/og-image.jpg'
4 | export const HOME_OG_URL = 'https://irondetailing.netlify.app/'
5 | export const HOME_OG_TITLE = "Iron Detailing"
6 | export const HOME_OG_DESC = 'Mobile automotive detailing serving Torrance, South Bay, and surrounding areas'
7 |
--------------------------------------------------------------------------------
/lib/markdownToHtml.js:
--------------------------------------------------------------------------------
1 | import remark from 'remark'
2 | import html from 'remark-html'
3 |
4 | export default async function markdownToHtml(markdown) {
5 | const result = await remark().use(html).process(markdown)
6 | return result.toString()
7 | }
8 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "next-dev-studio",
3 | "version": "1.0.0",
4 | "scripts": {
5 | "dev": "next",
6 | "build": "next build",
7 | "start": "next start",
8 | "lint": "next lint"
9 | },
10 | "dependencies": {
11 | "classnames": "2.2.6",
12 | "date-fns": "2.16.1",
13 | "gray-matter": "4.0.2",
14 | "next": "latest",
15 | "react": "^17.0.1",
16 | "react-dom": "^17.0.1",
17 | "remark": "13.0.0",
18 | "remark-html": "^13.0.2"
19 | },
20 | "devDependencies": {
21 | "@fullhuman/postcss-purgecss": "^4.0.3",
22 | "autoprefixer": "^10.2.1",
23 | "eslint": "^8.22.0",
24 | "eslint-config-next": "12.2.5",
25 | "postcss": "^8.2.4",
26 | "postcss-flexbugs-fixes": "^5.0.2",
27 | "postcss-import": "^12.0.1",
28 | "postcss-preset-env": "^6.7.0"
29 | },
30 | "license": "MIT"
31 | }
32 |
--------------------------------------------------------------------------------
/pages/404.js:
--------------------------------------------------------------------------------
1 | // pages/404.js
2 | export default function Custom404() {
3 | return 404 - Page Not Found
4 | }
--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import '../styles/main.css'
2 |
3 | export default function MyApp({ Component, pageProps }) {
4 | return
5 | }
6 |
--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
1 | import Document, { Html, Head, Main, NextScript } from 'next/document'
2 |
3 | export default class MyDocument extends Document {
4 | render() {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | )
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
1 | import Head from 'next/head'
2 |
3 | import Layout from '../components/layout'
4 | import Jumbotron from '../components/jumbotron'
5 | import ShortText from '../components/short-text'
6 | import TwoUpButton from '../components/2-up-button'
7 | import TwoUpNoButton from '../components/2-up-no-button'
8 |
9 | import { getHomePageData, getPosts4Home } from '../lib/api'
10 | import { CMS_NAME } from '../lib/constants'
11 |
12 | export default function Index({ homeData, posts }) {
13 |
14 | return (
15 | <>
16 |
17 |
18 | Home | {CMS_NAME}
19 |
20 |
25 |
29 |
33 |
37 |
41 |
42 | >
43 | )
44 | }
45 |
46 | export async function getStaticProps() {
47 | const homeData = getHomePageData()
48 | const posts = getPosts4Home()
49 | return {
50 | props: { homeData, posts },
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/pages/posts/[slug].js:
--------------------------------------------------------------------------------
1 | import Head from 'next/head'
2 | import Layout from '../../components/layout'
3 | import DateFormatter from '../../components/date-formatter'
4 |
5 | import { getPostBySlug, getAllPosts } from '../../lib/api'
6 | import { CMS_NAME } from '../../lib/constants'
7 | import markdownToHtml from '../../lib/markdownToHtml'
8 |
9 | export default function Post({ post }) {
10 |
11 | return (
12 |
13 |
14 | {post.title} | {CMS_NAME}
15 |
16 |
17 | {post.title}
18 |
19 |
20 |
23 |
24 | {/*
Read in ? minutes
*/}
25 |
26 |
27 |
{post.description}
28 | {post.image &&
29 |
30 | }
31 |
32 |
33 |
34 |
35 | )
36 | }
37 |
38 | export async function getStaticProps({ params }) {
39 | const post = getPostBySlug(params.slug)
40 | const content = await markdownToHtml(post.content || '')
41 |
42 | return {
43 | props: {
44 | post: {
45 | ...post,
46 | content,
47 | },
48 | },
49 | }
50 | }
51 |
52 | export async function getStaticPaths() {
53 | const posts = getAllPosts()
54 |
55 | return {
56 | paths: posts.map((post) => {
57 | return {
58 | params: {
59 | slug: post.slug,
60 | },
61 | }
62 | }),
63 | fallback: false,
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/pages/services.js:
--------------------------------------------------------------------------------
1 | import Head from 'next/head'
2 |
3 | import Layout from '../components/layout'
4 | import Jumbotron from '../components/jumbotron'
5 | import Pricing from '../components/pricing'
6 | import PricingBlocksOnly from '../components/pricing-block-only'
7 |
8 | import { getPageData } from '../lib/api'
9 | import { CMS_NAME } from '../lib/constants'
10 |
11 | export default function ProductsPage({page}) {
12 | return (
13 | <>
14 |
15 |
16 | Services | {CMS_NAME}
17 |
18 |
23 |
28 |
31 |
32 | >
33 | )
34 | }
35 |
36 | export async function getStaticProps() {
37 | const page = getPageData('services')
38 | return {
39 | props: { page },
40 | }
41 | }
--------------------------------------------------------------------------------
/pages/team.js:
--------------------------------------------------------------------------------
1 | import Head from 'next/head'
2 |
3 | import Layout from '../components/layout'
4 | import OnePerson from '../components/1-psn'
5 | import { getPageData, } from '../lib/api'
6 | import { CMS_NAME } from '../lib/constants'
7 |
8 | export default function ValuesPage({page}) {
9 |
10 | return (
11 | <>
12 |
13 |
14 | Team | {CMS_NAME}
15 |
16 |
21 |
22 | >
23 | )
24 | }
25 |
26 | export async function getStaticProps() {
27 | const page = getPageData('team')
28 |
29 | return {
30 | props: { page },
31 | }
32 | }
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | autoprefixer: {},
4 | "postcss-flexbugs-fixes": {},
5 | "postcss-import": {},
6 | "postcss-preset-env": {
7 | "browsers": "last 2 versions",
8 | "autoprefixer": {
9 | "flexbox": "no-2009"
10 | },
11 | "stage": 3,
12 | "features": {
13 | "custom-properties": false
14 | }
15 | },
16 | "postcss-custom-media": {},
17 | "@fullhuman/postcss-purgecss": {
18 | content: [
19 | './pages/**/*.{js,jsx,ts,tsx}',
20 | './components/**/*.{js,jsx,ts,tsx}'
21 | ],
22 | defaultExtractor: content => content.match(/[\w-/:]+(?
2 |
3 |
4 |
5 |
6 | #000000
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/public/favicon/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lwz7512/next-dev-studio/da224f0a29f9558215647285a455481ea54f9237/public/favicon/favicon-16x16.png
--------------------------------------------------------------------------------
/public/favicon/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lwz7512/next-dev-studio/da224f0a29f9558215647285a455481ea54f9237/public/favicon/favicon-32x32.png
--------------------------------------------------------------------------------
/public/favicon/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lwz7512/next-dev-studio/da224f0a29f9558215647285a455481ea54f9237/public/favicon/favicon.ico
--------------------------------------------------------------------------------
/public/favicon/mstile-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lwz7512/next-dev-studio/da224f0a29f9558215647285a455481ea54f9237/public/favicon/mstile-150x150.png
--------------------------------------------------------------------------------
/public/favicon/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 |
2 |
15 |
17 |
19 |
23 |
24 |
26 |
30 |
31 |
32 |
52 |
54 | Created by potrace 1.11, written by Peter Selinger 2001-2013
55 |
56 |
59 |
66 |
70 |
76 |
77 |
78 |
79 |
--------------------------------------------------------------------------------
/public/favicon/site.webmanifest:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Next.js",
3 | "short_name": "Next.js",
4 | "icons": [
5 | {
6 | "src": "/favicons/android-chrome-192x192.png",
7 | "sizes": "192x192",
8 | "type": "image/png"
9 | },
10 | {
11 | "src": "/favicons/android-chrome-512x512.png",
12 | "sizes": "512x512",
13 | "type": "image/png"
14 | }
15 | ],
16 | "theme_color": "#000000",
17 | "background_color": "#000000",
18 | "display": "standalone"
19 | }
20 |
--------------------------------------------------------------------------------
/public/img/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lwz7512/next-dev-studio/da224f0a29f9558215647285a455481ea54f9237/public/img/android-chrome-192x192.png
--------------------------------------------------------------------------------
/public/img/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lwz7512/next-dev-studio/da224f0a29f9558215647285a455481ea54f9237/public/img/android-chrome-512x512.png
--------------------------------------------------------------------------------
/public/img/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lwz7512/next-dev-studio/da224f0a29f9558215647285a455481ea54f9237/public/img/apple-touch-icon.png
--------------------------------------------------------------------------------
/public/img/diego.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lwz7512/next-dev-studio/da224f0a29f9558215647285a455481ea54f9237/public/img/diego.jpeg
--------------------------------------------------------------------------------
/public/img/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lwz7512/next-dev-studio/da224f0a29f9558215647285a455481ea54f9237/public/img/favicon-16x16.png
--------------------------------------------------------------------------------
/public/img/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lwz7512/next-dev-studio/da224f0a29f9558215647285a455481ea54f9237/public/img/favicon-32x32.png
--------------------------------------------------------------------------------
/public/img/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lwz7512/next-dev-studio/da224f0a29f9558215647285a455481ea54f9237/public/img/favicon.ico
--------------------------------------------------------------------------------
/public/img/global-preloader.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lwz7512/next-dev-studio/da224f0a29f9558215647285a455481ea54f9237/public/img/global-preloader.jpg
--------------------------------------------------------------------------------
/public/img/home-jumbotron.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lwz7512/next-dev-studio/da224f0a29f9558215647285a455481ea54f9237/public/img/home-jumbotron.jpg
--------------------------------------------------------------------------------
/public/img/icon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/img/icons-facebook.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
9 |
10 |
--------------------------------------------------------------------------------
/public/img/icons-instagram.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
10 |
11 |
--------------------------------------------------------------------------------
/public/img/icons-twitter.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
11 |
12 |
--------------------------------------------------------------------------------
/public/img/icons-vimeo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
10 |
11 |
--------------------------------------------------------------------------------
/public/img/mstile-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lwz7512/next-dev-studio/da224f0a29f9558215647285a455481ea54f9237/public/img/mstile-144x144.png
--------------------------------------------------------------------------------
/public/img/mstile-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lwz7512/next-dev-studio/da224f0a29f9558215647285a455481ea54f9237/public/img/mstile-150x150.png
--------------------------------------------------------------------------------
/public/img/mstile-310x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lwz7512/next-dev-studio/da224f0a29f9558215647285a455481ea54f9237/public/img/mstile-310x150.png
--------------------------------------------------------------------------------
/public/img/mstile-310x310.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lwz7512/next-dev-studio/da224f0a29f9558215647285a455481ea54f9237/public/img/mstile-310x310.png
--------------------------------------------------------------------------------
/public/img/mstile-70x70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lwz7512/next-dev-studio/da224f0a29f9558215647285a455481ea54f9237/public/img/mstile-70x70.png
--------------------------------------------------------------------------------
/public/img/og-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lwz7512/next-dev-studio/da224f0a29f9558215647285a455481ea54f9237/public/img/og-image.jpg
--------------------------------------------------------------------------------
/public/img/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 |
2 |
15 |
17 |
19 |
23 |
24 |
26 |
30 |
31 |
32 |
52 |
54 | Created by potrace 1.11, written by Peter Selinger 2001-2013
55 |
56 |
59 |
66 |
70 |
76 |
77 |
78 |
79 |
--------------------------------------------------------------------------------
/public/img/services-jumbotron.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lwz7512/next-dev-studio/da224f0a29f9558215647285a455481ea54f9237/public/img/services-jumbotron.jpg
--------------------------------------------------------------------------------
/public/pimg/progressive-image.css:
--------------------------------------------------------------------------------
1 | /* progressive image CSS */
2 | .progressive {
3 | position: relative;
4 | display: block;
5 | overflow: hidden;
6 | outline: none;
7 | }
8 |
9 | .progressive img {
10 | display: block;
11 | width: 100%;
12 | max-width: none;
13 | height: auto;
14 | border: 0 none;
15 | /* add blowing for this hubo template @2019/01/08 */
16 | position: absolute;
17 | top: 0;
18 | left: 0;
19 | border-radius: 0;
20 | }
21 |
22 | .progressive img.preview {
23 | filter: blur(2vw);
24 | transform: scale(1.05);
25 | }
26 |
27 | .progressive img.reveal {
28 | position: absolute;
29 | left: 0;
30 | top: 0;
31 | will-change: transform, opacity;
32 | animation: progressiveReveal 1s ease-out;
33 | }
34 |
35 | @keyframes progressiveReveal {
36 | 0% { transform: scale(1.05); opacity: 0; }
37 | 100% { transform: scale(1); opacity: 1; }
38 | }
39 |
--------------------------------------------------------------------------------
/public/pimg/progressive-image.js:
--------------------------------------------------------------------------------
1 | // progressive-image.js, v1.2.1
2 | // by Craig Buckler, @craigbuckler
3 | if (window.addEventListener && window.requestAnimationFrame && document.getElementsByClassName) window.addEventListener('load', function() {
4 |
5 | // start
6 | var pItem = document.getElementsByClassName('progressive replace'), pCount, timer;
7 |
8 | // scroll and resize events
9 | window.addEventListener('scroll', scroller, false);
10 | window.addEventListener('resize', scroller, false);
11 |
12 | // DOM mutation observer
13 | if (MutationObserver) {
14 |
15 | var observer = new MutationObserver(function() {
16 | if (pItem.length !== pCount) inView();
17 | });
18 | observer.observe(document.body, { subtree: true, childList: true, attributes: true, characterData: true });
19 |
20 | }
21 |
22 | // initial check
23 | inView();
24 |
25 |
26 | // throttled scroll/resize
27 | function scroller() {
28 |
29 | timer = timer || setTimeout(function() {
30 | timer = null;
31 | inView();
32 | }, 300);
33 |
34 | }
35 |
36 |
37 | // image in view?
38 | function inView() {
39 |
40 | if (pItem.length) requestAnimationFrame(function() {
41 |
42 | var wH = window.innerHeight, cRect, cT, cH, p = 0;
43 | while (p < pItem.length) {
44 |
45 | cRect = pItem[p].getBoundingClientRect();
46 | cT = cRect.top;
47 | cH = cRect.height;
48 |
49 | if (0 < cT + cH && wH > cT) {
50 | loadFullImage(pItem[p]);
51 | pItem[p].classList.remove('replace');
52 | }
53 | else p++;
54 |
55 | }
56 |
57 | pCount = pItem.length;
58 |
59 | });
60 |
61 | }
62 |
63 |
64 | // replace with full image
65 | function loadFullImage(item) {
66 | var href = item && (item.getAttribute('data-href') || item.href);
67 | if (!href) return;
68 |
69 | // load image
70 | var img = new Image();
71 | if (item.dataset) {
72 | img.srcset = item.dataset.srcset || '';
73 | img.sizes = item.dataset.sizes || '';
74 | }
75 | img.src = href;
76 | img.className = 'reveal';
77 | if (img.complete) addImg();
78 | else img.onload = addImg;
79 |
80 | // replace image
81 | function addImg() {
82 |
83 | requestAnimationFrame(function() {
84 |
85 | // disable click
86 | if (href === item.href) {
87 | item.style.cursor = 'default';
88 | item.addEventListener('click', function(e) { e.preventDefault(); }, false);
89 | }
90 |
91 | // preview image
92 | var pImg = item.querySelector && item.querySelector('img.preview');
93 |
94 | // add full image
95 | item.insertBefore(img, pImg && pImg.nextSibling).addEventListener('animationend', function() {
96 |
97 | // remove preview image
98 | if (pImg) {
99 | img.alt = pImg.alt || '';
100 | item.removeChild(pImg);
101 | }
102 |
103 | img.classList.remove('reveal');
104 |
105 | });
106 |
107 | });
108 |
109 | }
110 |
111 | }
112 |
113 | }, false);
114 |
--------------------------------------------------------------------------------
/public/pimg/progressive-image.min.js:
--------------------------------------------------------------------------------
1 | window.addEventListener&&window.requestAnimationFrame&&document.getElementsByClassName&&window.addEventListener("load",function(){var r,e,a=document.getElementsByClassName("progressive replace");(window.addEventListener("scroll",t,!1),window.addEventListener("resize",t,!1),MutationObserver)&&new MutationObserver(function(){a.length!==r&&n()}).observe(document.body,{subtree:!0,childList:!0,attributes:!0,characterData:!0});function t(){e=e||setTimeout(function(){e=null,n()},300)}function n(){a.length&&requestAnimationFrame(function(){for(var e,t,n=window.innerHeight,i=0;i li:before {
66 | content: '✱';
67 | left: -1.33rem;
68 | position: absolute;
69 | color: var(--primary);
70 | }
71 |
72 | .cms ol {
73 | list-style: none;
74 | margin-left: var(--spacing-medium);
75 | counter-reset: i 0;
76 | }
77 |
78 | .cms ol > li:before {
79 | font-weight: 800;
80 | left: var(--spacing-medium);
81 | margin-right: 1.33rem;
82 | position: relative;
83 | height: 100%;
84 | content: counter(i);
85 | counter-increment: i;
86 | color: var(--primary);
87 | }
88 |
89 | /* Blockquotes */
90 | .cms blockquote {
91 | background-color: var(--grey-1);
92 | display: block;
93 | border-radius: var(--border-radius);
94 | padding: var(--spacing-medium);
95 | color: var(--primary);
96 | font-weight: 700;
97 | font-size: 1.25rem;;
98 | margin-bottom: var(--spacing-medium);
99 | }
100 |
101 | .cms blockquote p {
102 | margin: 0;
103 | }
--------------------------------------------------------------------------------
/styles/imports/_code.css:
--------------------------------------------------------------------------------
1 | pre {
2 | overflow-x: auto;
3 | overflow-y: hidden;
4 | overflow: scroll;
5 | margin-bottom: var(--spacing-medium);
6 | background-color: var(--grey-1);
7 | padding: var(--spacing-small);
8 | }
9 |
--------------------------------------------------------------------------------
/styles/imports/_colors.css:
--------------------------------------------------------------------------------
1 | /* Text colors */
2 |
3 | .primary {
4 | color: var(--primary);
5 | }
6 |
7 | .highlight {
8 | color: var(--highlight);
9 | }
10 |
11 | .white {
12 | color: var(--white);
13 | }
14 |
15 | .off-white {
16 | color: var(--off-white);
17 | }
18 |
19 | .grey-1 {
20 | color: var(--grey-1);
21 | }
22 |
23 | .grey-2 {
24 | color: var(--grey-2);
25 | }
26 |
27 | .grey-3 {
28 | color: var(--grey-3);
29 | }
30 |
31 | .grey-4 {
32 | color: var(--grey-4);
33 | }
34 |
35 | .black {
36 | color: var(--black);
37 | }
38 |
39 | .bg-primary {
40 | background-color: var(--primary);
41 | }
42 |
43 | .bg-highlight {
44 | background-color: var(--highlight);
45 | }
46 |
47 | .bg-white {
48 | background-color: var(--white);
49 | }
50 |
51 | .bg-off-white {
52 | background-color: var(--off-white);
53 | }
54 |
55 | .bg-grey-1 {
56 | background-color: var(--grey-1);
57 | }
58 |
59 | .bg-grey-2 {
60 | background-color: var(--grey-2);
61 | }
62 |
63 | .bg-grey-3 {
64 | background-color: var(--grey-4);
65 | }
66 |
67 | .bg-grey-4 {
68 | background-color: var(--grey-4);
69 | }
70 |
71 | .bg-black {
72 | background-color: var(--black);
73 | }
74 |
75 | .bg-fix-primary {
76 | padding: 0 var(--spacing-small);
77 | & :first-child {
78 | box-shadow: var(--spacing-small) 0 0 var(--primary), -var(--spacing-small) 0 0 var(--primary);
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/styles/imports/_coordinates.css:
--------------------------------------------------------------------------------
1 | .top-0 { top: 0; }
2 | .right-0 { right: 0; }
3 | .bottom-0 { bottom: 0; }
4 | .left-0 { left: 0; }
5 |
6 | .top-1 { top: var(--spacing-medium); }
7 | .right-1 { right: var(--spacing-medium); }
8 | .bottom-1 { bottom: var(--spacing-medium); }
9 | .left-1 { left: var(--spacing-medium); }
10 |
11 | .top-2 { top: 2rem; }
12 | .right-2 { right: 2rem; }
13 | .bottom-2 { bottom: 2rem; }
14 | .left-2 { left: 2rem; }
15 |
16 | .top--1 { top: -var(--spacing-medium); }
17 | .right--1 { right: -var(--spacing-medium); }
18 | .bottom--1 { bottom: -var(--spacing-medium); }
19 | .left--1 { left: -var(--spacing-medium); }
20 |
21 | .top--2 { top: -2rem; }
22 | .right--2 { right: -2rem; }
23 | .bottom--2 { bottom: -2rem; }
24 | .left--2 { left: -2rem; }
25 |
26 |
27 | .absolute--fill {
28 | top: 0;
29 | right: 0;
30 | bottom: 0;
31 | left: 0;
32 | }
33 |
34 | @media (--breakpoint-not-small) {
35 | .top-0-ns { top: 0; }
36 | .left-0-ns { left: 0; }
37 | .right-0-ns { right: 0; }
38 | .bottom-0-ns { bottom: 0; }
39 | .top-1-ns { top: var(--spacing-medium); }
40 | .left-1-ns { left: var(--spacing-medium); }
41 | .right-1-ns { right: var(--spacing-medium); }
42 | .bottom-1-ns { bottom: var(--spacing-medium); }
43 | .top-2-ns { top: 2rem; }
44 | .left-2-ns { left: 2rem; }
45 | .right-2-ns { right: 2rem; }
46 | .bottom-2-ns { bottom: 2rem; }
47 | .top--1-ns { top: -var(--spacing-medium); }
48 | .right--1-ns { right: -var(--spacing-medium); }
49 | .bottom--1-ns { bottom: -var(--spacing-medium); }
50 | .left--1-ns { left: -var(--spacing-medium); }
51 | .top--2-ns { top: -2rem; }
52 | .right--2-ns { right: -2rem; }
53 | .bottom--2-ns { bottom: -2rem; }
54 | .left--2-ns { left: -2rem; }
55 | .absolute--fill-ns {
56 | top: 0;
57 | right: 0;
58 | bottom: 0;
59 | left: 0;
60 | }
61 | }
62 |
63 | @media (--breakpoint-medium) {
64 | .top-0-m { top: 0; }
65 | .left-0-m { left: 0; }
66 | .right-0-m { right: 0; }
67 | .bottom-0-m { bottom: 0; }
68 | .top-1-m { top: var(--spacing-medium); }
69 | .left-1-m { left: var(--spacing-medium); }
70 | .right-1-m { right: var(--spacing-medium); }
71 | .bottom-1-m { bottom: var(--spacing-medium); }
72 | .top-2-m { top: 2rem; }
73 | .left-2-m { left: 2rem; }
74 | .right-2-m { right: 2rem; }
75 | .bottom-2-m { bottom: 2rem; }
76 | .top--1-m { top: -var(--spacing-medium); }
77 | .right--1-m { right: -var(--spacing-medium); }
78 | .bottom--1-m { bottom: -var(--spacing-medium); }
79 | .left--1-m { left: -var(--spacing-medium); }
80 | .top--2-m { top: -2rem; }
81 | .right--2-m { right: -2rem; }
82 | .bottom--2-m { bottom: -2rem; }
83 | .left--2-m { left: -2rem; }
84 | .absolute--fill-m {
85 | top: 0;
86 | right: 0;
87 | bottom: 0;
88 | left: 0;
89 | }
90 | }
91 |
92 | @media (--breakpoint-large) {
93 | .top-0-l { top: 0; }
94 | .left-0-l { left: 0; }
95 | .right-0-l { right: 0; }
96 | .bottom-0-l { bottom: 0; }
97 | .top-1-l { top: var(--spacing-medium); }
98 | .left-1-l { left: var(--spacing-medium); }
99 | .right-1-l { right: var(--spacing-medium); }
100 | .bottom-1-l { bottom: var(--spacing-medium); }
101 | .top-2-l { top: 2rem; }
102 | .left-2-l { left: 2rem; }
103 | .right-2-l { right: 2rem; }
104 | .bottom-2-l { bottom: 2rem; }
105 | .top--1-l { top: -var(--spacing-medium); }
106 | .right--1-l { right: -var(--spacing-medium); }
107 | .bottom--1-l { bottom: -var(--spacing-medium); }
108 | .left--1-l { left: -var(--spacing-medium); }
109 | .top--2-l { top: -2rem; }
110 | .right--2-l { right: -2rem; }
111 | .bottom--2-l { bottom: -2rem; }
112 | .left--2-l { left: -2rem; }
113 | .absolute--fill-l {
114 | top: 0;
115 | right: 0;
116 | bottom: 0;
117 | left: 0;
118 | }
119 | }
120 |
--------------------------------------------------------------------------------
/styles/imports/_debug-children.css:
--------------------------------------------------------------------------------
1 | .debug * { outline: 1px solid gold; }
2 | .debug-white * { outline: 1px solid white; }
3 | .debug-black * { outline: 1px solid black; }
4 |
--------------------------------------------------------------------------------
/styles/imports/_debug-grid.css:
--------------------------------------------------------------------------------
1 | .debug-grid {
2 | background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTRDOTY4N0U2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTRDOTY4N0Q2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3NjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3NzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsBS+GMAAAAjSURBVHjaYvz//z8DLsD4gcGXiYEAGBIKGBne//fFpwAgwAB98AaF2pjlUQAAAABJRU5ErkJggg==) repeat top left;
3 | }
4 |
5 | .debug-grid-16 {
6 | background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODYyRjhERDU2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODYyRjhERDQ2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QTY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3QjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvCS01IAAABMSURBVHjaYmR4/5+BFPBfAMFm/MBgx8RAGWCn1AAmSg34Q6kBDKMGMDCwICeMIemF/5QawEipAWwUhwEjMDvbAWlWkvVBwu8vQIABAEwBCph8U6c0AAAAAElFTkSuQmCC) repeat top left;
7 | }
8 |
9 | .debug-grid-8-solid {
10 | background:white url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAAAAD/4QMxaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzExMSA3OS4xNTgzMjUsIDIwMTUvMDkvMTAtMDE6MTA6MjAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIxMjI0OTczNjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIxMjI0OTc0NjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjEyMjQ5NzE2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjEyMjQ5NzI2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAbGhopHSlBJiZBQi8vL0JHPz4+P0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHAR0pKTQmND8oKD9HPzU/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0f/wAARCAAIAAgDASIAAhEBAxEB/8QAWQABAQAAAAAAAAAAAAAAAAAAAAYBAQEAAAAAAAAAAAAAAAAAAAIEEAEBAAMBAAAAAAAAAAAAAAABADECA0ERAAEDBQAAAAAAAAAAAAAAAAARITFBUWESIv/aAAwDAQACEQMRAD8AoOnTV1QTD7JJshP3vSM3P//Z) repeat top left;
11 | }
12 |
13 | .debug-grid-16-solid {
14 | background:white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzY3MkJEN0U2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzY3MkJEN0Y2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3RDY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pve6J3kAAAAzSURBVHjaYvz//z8D0UDsMwMjSRoYP5Gq4SPNbRjVMEQ1fCRDg+in/6+J1AJUxsgAEGAA31BAJMS0GYEAAAAASUVORK5CYII=) repeat top left;
15 | }
16 |
--------------------------------------------------------------------------------
/styles/imports/_debug.css:
--------------------------------------------------------------------------------
1 | body { outline: 1px solid #2980B9!important; }
2 | article { outline: 1px solid #3498DB!important; }
3 | nav { outline: 1px solid #0088C3!important; }
4 | aside { outline: 1px solid #33A0CE!important; }
5 | section { outline: 1px solid #66B8DA!important; }
6 | header { outline: 1px solid #99CFE7!important; }
7 | footer { outline: 1px solid #CCE7F3!important; }
8 | h1 { outline: 1px solid #162544!important; }
9 | h2 { outline: 1px solid #314E6E!important; }
10 | h3 { outline: 1px solid #3E5E85!important; }
11 | h4 { outline: 1px solid #449BAF!important; }
12 | h5 { outline: 1px solid #C7D1CB!important; }
13 | h6 { outline: 1px solid #4371D0!important; }
14 | main { outline: 1px solid #2F4F90!important; }
15 | address { outline: 1px solid #1A2C51!important; }
16 | div { outline: 1px solid #036CDB!important; }
17 |
18 |
19 | p { outline: 1px solid #AC050B!important; }
20 | hr { outline: 1px solid #FF063F!important; }
21 | pre { outline: 1px solid #850440!important; }
22 | blockquote { outline: 1px solid #F1B8E7!important; }
23 | ol { outline: 1px solid #FF050C!important; }
24 | ul { outline: 1px solid #D90416!important; }
25 | li { outline: 1px solid #D90416!important; }
26 | dl { outline: 1px solid #FD3427!important; }
27 | dt { outline: 1px solid #FF0043!important; }
28 | dd { outline: 1px solid #E80174!important; }
29 | figure { outline: 1px solid #FF00BB!important; }
30 | figcaption { outline: 1px solid #BF0032!important; }
31 |
32 |
33 |
34 | table { outline: 1px solid #00CC99!important; }
35 | caption { outline: 1px solid #37FFC4!important; }
36 | thead { outline: 1px solid #98DACA!important; }
37 | tbody { outline: 1px solid #64A7A0!important; }
38 | tfoot { outline: 1px solid #22746B!important; }
39 | tr { outline: 1px solid #86C0B2!important; }
40 | th { outline: 1px solid #A1E7D6!important; }
41 | td { outline: 1px solid #3F5A54!important; }
42 | col { outline: 1px solid #6C9A8F!important; }
43 | colgroup { outline: 1px solid #6C9A9D!important; }
44 |
45 |
46 | button { outline: 1px solid #DA8301!important; }
47 | datalist { outline: 1px solid #C06000!important; }
48 | fieldset { outline: 1px solid #D95100!important; }
49 | form { outline: 1px solid #D23600!important; }
50 | input { outline: 1px solid #FCA600!important; }
51 | keygen { outline: 1px solid #B31E00!important; }
52 | label { outline: 1px solid #EE8900!important; }
53 | legend { outline: 1px solid #DE6D00!important; }
54 | meter { outline: 1px solid #E8630C!important; }
55 | optgroup { outline: 1px solid #B33600!important; }
56 | option { outline: 1px solid #FF8A00!important; }
57 | output { outline: 1px solid #FF9619!important; }
58 | progress { outline: 1px solid #E57C00!important; }
59 | select { outline: 1px solid #E26E0F!important; }
60 | textarea { outline: 1px solid #CC5400!important; }
61 |
62 |
63 |
64 | details { outline: 1px solid #33848F!important; }
65 | summary { outline: 1px solid #60A1A6!important; }
66 | command { outline: 1px solid #438DA1!important; }
67 | menu { outline: 1px solid #449DA6!important; }
68 |
69 |
70 |
71 | del { outline: 1px solid #BF0000!important; }
72 | ins { outline: 1px solid #400000!important; }
73 |
74 |
75 |
76 | img { outline: 1px solid #22746B!important; }
77 | iframe { outline: 1px solid #64A7A0!important; }
78 | embed { outline: 1px solid #98DACA!important; }
79 | object { outline: 1px solid #00CC99!important; }
80 | param { outline: 1px solid #37FFC4!important; }
81 | video { outline: 1px solid #6EE866!important; }
82 | audio { outline: 1px solid #027353!important; }
83 | source { outline: 1px solid #012426!important; }
84 | canvas { outline: 1px solid #A2F570!important; }
85 | track { outline: 1px solid #59A600!important; }
86 | map { outline: 1px solid #7BE500!important; }
87 | area { outline: 1px solid #305900!important; }
88 |
89 |
90 |
91 | a { outline: 1px solid #FF62AB!important; }
92 | em { outline: 1px solid #800B41!important; }
93 | strong { outline: 1px solid #FF1583!important; }
94 | i { outline: 1px solid #803156!important; }
95 | b { outline: 1px solid #CC1169!important; }
96 | u { outline: 1px solid #FF0430!important; }
97 | s { outline: 1px solid #F805E3!important; }
98 | small { outline: 1px solid #D107B2!important; }
99 | abbr { outline: 1px solid #4A0263!important; }
100 | q { outline: 1px solid #240018!important; }
101 | cite { outline: 1px solid #64003C!important; }
102 | dfn { outline: 1px solid #B4005A!important; }
103 | sub { outline: 1px solid #DBA0C8!important; }
104 | sup { outline: 1px solid #CC0256!important; }
105 | time { outline: 1px solid #D6606D!important; }
106 | code { outline: 1px solid #E04251!important; }
107 | kbd { outline: 1px solid #5E001F!important; }
108 | samp { outline: 1px solid #9C0033!important; }
109 | var { outline: 1px solid #D90047!important; }
110 | mark { outline: 1px solid #FF0053!important; }
111 | bdi { outline: 1px solid #BF3668!important; }
112 | bdo { outline: 1px solid #6F1400!important; }
113 | ruby { outline: 1px solid #FF7B93!important; }
114 | rt { outline: 1px solid #FF2F54!important; }
115 | rp { outline: 1px solid #803E49!important; }
116 | span { outline: 1px solid #CC2643!important; }
117 | br { outline: 1px solid #DB687D!important; }
118 | wbr { outline: 1px solid #DB175B!important; }
119 |
--------------------------------------------------------------------------------
/styles/imports/_display.css:
--------------------------------------------------------------------------------
1 | .dn { display: none; }
2 | .di { display: inline; }
3 | .db { display: block; }
4 | .dib { display: inline-block; }
5 | .dit { display: inline-table; }
6 | .dt { display: table; }
7 | .dtc { display: table-cell; }
8 | .dt-row { display: table-row; }
9 | .dt-row-group { display: table-row-group; }
10 | .dt-column { display: table-column; }
11 | .dt-column-group { display: table-column-group; }
12 |
13 | /*
14 | This will set table to full width and then
15 | all cells will be equal width
16 | */
17 | .dt--fixed {
18 | table-layout: fixed;
19 | width: 100%;
20 | }
21 |
22 | @media (--breakpoint-not-small) {
23 | .dn-ns { display: none; }
24 | .di-ns { display: inline; }
25 | .db-ns { display: block; }
26 | .dib-ns { display: inline-block; }
27 | .dit-ns { display: inline-table; }
28 | .dt-ns { display: table; }
29 | .dtc-ns { display: table-cell; }
30 | .dt-row-ns { display: table-row; }
31 | .dt-row-group-ns { display: table-row-group; }
32 | .dt-column-ns { display: table-column; }
33 | .dt-column-group-ns { display: table-column-group; }
34 |
35 | .dt--fixed-ns {
36 | table-layout: fixed;
37 | width: 100%;
38 | }
39 | }
40 |
41 | @media (--breakpoint-medium) {
42 | .dn-m { display: none; }
43 | .di-m { display: inline; }
44 | .db-m { display: block; }
45 | .dib-m { display: inline-block; }
46 | .dit-m { display: inline-table; }
47 | .dt-m { display: table; }
48 | .dtc-m { display: table-cell; }
49 | .dt-row-m { display: table-row; }
50 | .dt-row-group-m { display: table-row-group; }
51 | .dt-column-m { display: table-column; }
52 | .dt-column-group-m { display: table-column-group; }
53 |
54 | .dt--fixed-m {
55 | table-layout: fixed;
56 | width: 100%;
57 | }
58 | }
59 |
60 | @media (--breakpoint-large) {
61 | .dn-l { display: none; }
62 | .di-l { display: inline; }
63 | .db-l { display: block; }
64 | .dib-l { display: inline-block; }
65 | .dit-l { display: inline-table; }
66 | .dt-l { display: table; }
67 | .dtc-l { display: table-cell; }
68 | .dt-row-l { display: table-row; }
69 | .dt-row-group-l { display: table-row-group; }
70 | .dt-column-l { display: table-column; }
71 | .dt-column-group-l { display: table-column-group; }
72 |
73 | .dt--fixed-l {
74 | table-layout: fixed;
75 | width: 100%;
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/styles/imports/_flexbox.css:
--------------------------------------------------------------------------------
1 | .flex { display: flex; }
2 | .inline-flex { display: inline-flex; }
3 |
4 | /* 1. Fix for Chrome 44 bug.
5 | * https://code.google.com/p/chromium/issues/detail?id=506893 */
6 | .flex-auto {
7 | flex: 1 1 auto;
8 | min-width: 0; /* 1 */
9 | min-height: 0; /* 1 */
10 | }
11 |
12 | .flex-none { flex: none; }
13 |
14 | .flex-column { flex-direction: column; }
15 | .flex-row { flex-direction: row; }
16 | .flex-wrap { flex-wrap: wrap; }
17 |
18 | .items-start { align-items: flex-start; }
19 | .items-end { align-items: flex-end; }
20 | .items-center { align-items: center; }
21 | .items-baseline { align-items: baseline; }
22 | .items-stretch { align-items: stretch; }
23 |
24 | .self-start { align-self: flex-start; }
25 | .self-end { align-self: flex-end; }
26 | .self-center { align-self: center; }
27 | .self-baseline { align-self: baseline; }
28 | .self-stretch { align-self: stretch; }
29 |
30 | .justify-start { justify-content: flex-start; }
31 | .justify-end { justify-content: flex-end; }
32 | .justify-center { justify-content: center; }
33 | .justify-between { justify-content: space-between; }
34 | .justify-around { justify-content: space-around; }
35 |
36 | .content-start { align-content: flex-start; }
37 | .content-end { align-content: flex-end; }
38 | .content-center { align-content: center; }
39 | .content-between { align-content: space-between; }
40 | .content-around { align-content: space-around; }
41 | .content-stretch { align-content: stretch; }
42 |
43 | .order-0 { order: 0; }
44 | .order-1 { order: 1; }
45 | .order-2 { order: 2; }
46 | .order-3 { order: 3; }
47 | .order-4 { order: 4; }
48 | .order-5 { order: 5; }
49 | .order-6 { order: 6; }
50 | .order-7 { order: 7; }
51 | .order-8 { order: 8; }
52 | .order-last { order: 99999; }
53 |
54 | @media (--breakpoint-not-small) {
55 | .flex-ns { display: flex; }
56 | .inline-flex-ns { display: inline-flex; }
57 | .flex-auto-ns {
58 | flex: 1 1 auto;
59 | min-width: 0; /* 1 */
60 | min-height: 0; /* 1 */
61 | }
62 | .flex-none-ns { flex: none; }
63 | .flex-column-ns { flex-direction: column; }
64 | .flex-row-ns { flex-direction: row; }
65 | .flex-wrap-ns { flex-wrap: wrap; }
66 | .items-start-ns { align-items: flex-start; }
67 | .items-end-ns { align-items: flex-end; }
68 | .items-center-ns { align-items: center; }
69 | .items-baseline-ns { align-items: baseline; }
70 | .items-stretch-ns { align-items: stretch; }
71 |
72 | .self-start-ns { align-self: flex-start; }
73 | .self-end-ns { align-self: flex-end; }
74 | .self-center-ns { align-self: center; }
75 | .self-baseline-ns { align-self: baseline; }
76 | .self-stretch-ns { align-self: stretch; }
77 |
78 | .justify-start-ns { justify-content: flex-start; }
79 | .justify-end-ns { justify-content: flex-end; }
80 | .justify-center-ns { justify-content: center; }
81 | .justify-between-ns { justify-content: space-between; }
82 | .justify-around-ns { justify-content: space-around; }
83 |
84 | .content-start-ns { align-content: flex-start; }
85 | .content-end-ns { align-content: flex-end; }
86 | .content-center-ns { align-content: center; }
87 | .content-between-ns { align-content: space-between; }
88 | .content-around-ns { align-content: space-around; }
89 | .content-stretch-ns { align-content: stretch; }
90 |
91 | .order-0-ns { order: 0; }
92 | .order-1-ns { order: 1; }
93 | .order-2-ns { order: 2; }
94 | .order-3-ns { order: 3; }
95 | .order-4-ns { order: 4; }
96 | .order-5-ns { order: 5; }
97 | .order-6-ns { order: 6; }
98 | .order-7-ns { order: 7; }
99 | .order-8-ns { order: 8; }
100 | .order-last-ns { order: 99999; }
101 | }
102 | @media (--breakpoint-medium) {
103 | .flex-m { display: flex; }
104 | .inline-flex-m { display: inline-flex; }
105 | .flex-auto-m {
106 | flex: 1 1 auto;
107 | min-width: 0; /* 1 */
108 | min-height: 0; /* 1 */
109 | }
110 | .flex-none-m { flex: none; }
111 | .flex-column-m { flex-direction: column; }
112 | .flex-row-m { flex-direction: row; }
113 | .flex-wrap-m { flex-wrap: wrap; }
114 | .items-start-m { align-items: flex-start; }
115 | .items-end-m { align-items: flex-end; }
116 | .items-center-m { align-items: center; }
117 | .items-baseline-m { align-items: baseline; }
118 | .items-stretch-m { align-items: stretch; }
119 |
120 | .self-start-m { align-self: flex-start; }
121 | .self-end-m { align-self: flex-end; }
122 | .self-center-m { align-self: center; }
123 | .self-baseline-m { align-self: baseline; }
124 | .self-stretch-m { align-self: stretch; }
125 |
126 | .justify-start-m { justify-content: flex-start; }
127 | .justify-end-m { justify-content: flex-end; }
128 | .justify-center-m { justify-content: center; }
129 | .justify-between-m { justify-content: space-between; }
130 | .justify-around-m { justify-content: space-around; }
131 |
132 | .content-start-m { align-content: flex-start; }
133 | .content-end-m { align-content: flex-end; }
134 | .content-center-m { align-content: center; }
135 | .content-between-m { align-content: space-between; }
136 | .content-around-m { align-content: space-around; }
137 | .content-stretch-m { align-content: stretch; }
138 |
139 | .order-0-m { order: 0; }
140 | .order-1-m { order: 1; }
141 | .order-2-m { order: 2; }
142 | .order-3-m { order: 3; }
143 | .order-4-m { order: 4; }
144 | .order-5-m { order: 5; }
145 | .order-6-m { order: 6; }
146 | .order-7-m { order: 7; }
147 | .order-8-m { order: 8; }
148 | .order-last-m { order: 99999; }
149 | }
150 |
151 | @media (--breakpoint-large) {
152 | .flex-l { display: flex; }
153 | .inline-flex-l { display: inline-flex; }
154 | .flex-auto-l {
155 | flex: 1 1 auto;
156 | min-width: 0; /* 1 */
157 | min-height: 0; /* 1 */
158 | }
159 | .flex-none-l { flex: none; }
160 | .flex-column-l { flex-direction: column; }
161 | .flex-row-l { flex-direction: row; }
162 | .flex-wrap-l { flex-wrap: wrap; }
163 | .items-start-l { align-items: flex-start; }
164 | .items-end-l { align-items: flex-end; }
165 | .items-center-l { align-items: center; }
166 | .items-baseline-l { align-items: baseline; }
167 | .items-stretch-l { align-items: stretch; }
168 |
169 | .self-start-l { align-self: flex-start; }
170 | .self-end-l { align-self: flex-end; }
171 | .self-center-l { align-self: center; }
172 | .self-baseline-l { align-self: baseline; }
173 | .self-stretch-l { align-self: stretch; }
174 |
175 | .justify-start-l { justify-content: flex-start; }
176 | .justify-end-l { justify-content: flex-end; }
177 | .justify-center-l { justify-content: center; }
178 | .justify-between-l { justify-content: space-between; }
179 | .justify-around-l { justify-content: space-around; }
180 |
181 | .content-start-l { align-content: flex-start; }
182 | .content-end-l { align-content: flex-end; }
183 | .content-center-l { align-content: center; }
184 | .content-between-l { align-content: space-between; }
185 | .content-around-l { align-content: space-around; }
186 | .content-stretch-l { align-content: stretch; }
187 |
188 | .order-0-l { order: 0; }
189 | .order-1-l { order: 1; }
190 | .order-2-l { order: 2; }
191 | .order-3-l { order: 3; }
192 | .order-4-l { order: 4; }
193 | .order-5-l { order: 5; }
194 | .order-6-l { order: 6; }
195 | .order-7-l { order: 7; }
196 | .order-8-l { order: 8; }
197 | .order-last-l { order: 99999; }
198 | }
199 |
--------------------------------------------------------------------------------
/styles/imports/_floats.css:
--------------------------------------------------------------------------------
1 | .fl { float: left; _display: inline; }
2 | .fr { float: right; _display: inline; }
3 | .fn { float: none; }
4 |
5 | @media (--breakpoint-not-small) {
6 | .fl-ns { float: left; _display: inline; }
7 | .fr-ns { float: right; _display: inline; }
8 | .fn-ns { float: none; }
9 | }
10 |
11 | @media (--breakpoint-medium) {
12 | .fl-m { float: left; _display: inline; }
13 | .fr-m { float: right; _display: inline; }
14 | .fn-m { float: none; }
15 | }
16 |
17 | @media (--breakpoint-large) {
18 | .fl-l { float: left; _display: inline; }
19 | .fr-l { float: right; _display: inline; }
20 | .fn-l { float: none; }
21 | }
22 |
--------------------------------------------------------------------------------
/styles/imports/_font-style.css:
--------------------------------------------------------------------------------
1 | .i { font-style: italic; }
2 | .fs-normal { font-style: normal; }
3 |
4 | @media (--breakpoint-not-small) {
5 | .i-ns { font-style: italic; }
6 | .fs-normal-ns { font-style: normal; }
7 | }
8 |
9 | @media (--breakpoint-medium) {
10 | .i-m { font-style: italic; }
11 | .fs-normal-m { font-style: normal; }
12 | }
13 |
14 | @media (--breakpoint-large) {
15 | .i-l { font-style: italic; }
16 | .fs-normal-l { font-style: normal; }
17 | }
18 |
--------------------------------------------------------------------------------
/styles/imports/_font-weight.css:
--------------------------------------------------------------------------------
1 | .normal { font-weight: normal; }
2 | .b { font-weight: var(--bold-font-weight); }
3 | .fw1 { font-weight: 100; }
4 | .fw2 { font-weight: 200; }
5 | .fw3 { font-weight: 300; }
6 | .fw4 { font-weight: 400; }
7 | .fw5 { font-weight: 500; }
8 | .fw6 { font-weight: 600; }
9 | .fw7 { font-weight: 700; }
10 | .fw8 { font-weight: 800; }
11 | .fw9 { font-weight: 900; }
12 |
13 |
14 | @media (--breakpoint-not-small) {
15 | .normal-ns { font-weight: normal; }
16 | .b-ns { font-weight: var(--bold-font-weight); }
17 | .fw1-ns { font-weight: 100; }
18 | .fw2-ns { font-weight: 200; }
19 | .fw3-ns { font-weight: 300; }
20 | .fw4-ns { font-weight: 400; }
21 | .fw5-ns { font-weight: 500; }
22 | .fw6-ns { font-weight: 600; }
23 | .fw7-ns { font-weight: 700; }
24 | .fw8-ns { font-weight: 800; }
25 | .fw9-ns { font-weight: 900; }
26 | }
27 |
28 | @media (--breakpoint-medium) {
29 | .normal-m { font-weight: normal; }
30 | .b-m { font-weight: var(--bold-font-weight); }
31 | .fw1-m { font-weight: 100; }
32 | .fw2-m { font-weight: 200; }
33 | .fw3-m { font-weight: 300; }
34 | .fw4-m { font-weight: 400; }
35 | .fw5-m { font-weight: 500; }
36 | .fw6-m { font-weight: 600; }
37 | .fw7-m { font-weight: 700; }
38 | .fw8-m { font-weight: 800; }
39 | .fw9-m { font-weight: 900; }
40 | }
41 |
42 | @media (--breakpoint-large) {
43 | .normal-l { font-weight: normal; }
44 | .b-l { font-weight: var(--bold-font-weight); }
45 | .fw1-l { font-weight: 100; }
46 | .fw2-l { font-weight: 200; }
47 | .fw3-l { font-weight: 300; }
48 | .fw4-l { font-weight: 400; }
49 | .fw5-l { font-weight: 500; }
50 | .fw6-l { font-weight: 600; }
51 | .fw7-l { font-weight: 700; }
52 | .fw8-l { font-weight: 800; }
53 | .fw9-l { font-weight: 900; }
54 | }
55 |
--------------------------------------------------------------------------------
/styles/imports/_forms.css:
--------------------------------------------------------------------------------
1 | fieldset
2 | {
3 | position: relative;
4 | }
5 |
6 | .input-reset {
7 | -webkit-appearance: none;
8 | -moz-appearance: none;
9 | }
10 |
11 | .button-reset::-moz-focus-inner,
12 | .input-reset::-moz-focus-inner {
13 | border: 0;
14 | padding: 0;
15 | }
16 |
17 | input, textarea {
18 | background-color: var(--grey-2);
19 | border-radius: var(--border-radius);
20 | padding: 12px 16px 10px;
21 | font-size: var(--spacing-medium);
22 | line-height: 1.25;
23 | position: relative;
24 | transition: var(--hover-transition);
25 | z-index: 2;
26 | &:focus {
27 | background-color: var(--white);
28 | }
29 | &:focus + label {
30 | opacity: 1;
31 | pointer-events: auto;
32 | transform: translateY(-120%);
33 | }
34 | }
35 |
36 | ::-webkit-input-placeholder {
37 | color: var(--black);
38 | font-size: var(--spacing-medium);
39 | line-height: normal;
40 | }
41 |
42 | :-moz-placeholder {
43 | color: var(--black);
44 | font-size: var(--spacing-medium);
45 | line-height: normal;
46 | }
47 |
48 | ::-moz-placeholder {
49 | color: var(--black);
50 | font-size: var(--spacing-medium);
51 | line-height: normal;
52 | }
53 |
54 | :-ms-input-placeholder {
55 | color: var(--black);
56 | font-size: var(--spacing-medium);
57 | line-height: normal;
58 | }
59 |
60 | label
61 | {
62 | font-size: .875rem;
63 | font-weight: 800;
64 | color: var(--white);
65 | background-color: var(--primary);
66 | border-radius: var(--border-radius);
67 | padding: var(--spacing-extra-small) var(--spacing-small);
68 | position: absolute;
69 | left: 0;
70 | top: 0;
71 | pointer-events: none;
72 | opacity: 0;
73 | line-height: 1;
74 | transition: var(--hover-transition);
75 | z-index: 2;
76 | }
77 |
--------------------------------------------------------------------------------
/styles/imports/_heights.css:
--------------------------------------------------------------------------------
1 | .h1 { height: var(--spacing-medium); }
2 | .h2 { height: 2rem; }
3 | .h3 { height: 4rem; }
4 | .h4 { height: 8rem; }
5 | .h5 { height: 16rem; }
6 |
7 | /* Height Percentages - Based off of height of parent */
8 |
9 | .h-25 { height: 25%; }
10 | .h-50 { height: 50%; }
11 | .h-75 { height: 75%; }
12 | .h-100 { height: 100%; }
13 |
14 | .min-h-100 { min-height: 100%; }
15 |
16 | /* Screen Height Percentage */
17 |
18 | .vh-25 { height: 25vh; }
19 | .vh-50 { height: 50vh; }
20 | .vh-75 { height: 75vh; }
21 | .vh-100 { height: 100vh; }
22 |
23 | .min-vh-100 { min-height: 100vh; }
24 |
25 |
26 | /* String Properties */
27 |
28 | .h-auto { height: auto; }
29 | .h-inherit { height: inherit; }
30 |
31 | @media (--breakpoint-not-small) {
32 | .h1-ns { height: var(--spacing-medium); }
33 | .h2-ns { height: 2rem; }
34 | .h3-ns { height: 4rem; }
35 | .h4-ns { height: 8rem; }
36 | .h5-ns { height: 16rem; }
37 | .h-25-ns { height: 25%; }
38 | .h-50-ns { height: 50%; }
39 | .h-75-ns { height: 75%; }
40 | .h-100-ns { height: 100%; }
41 | .min-h-100-ns { min-height: 100%; }
42 | .vh-25-ns { height: 25vh; }
43 | .vh-50-ns { height: 50vh; }
44 | .vh-75-ns { height: 75vh; }
45 | .vh-100-ns { height: 100vh; }
46 | .min-vh-100-ns { min-height: 100vh; }
47 | .h-auto-ns { height: auto; }
48 | .h-inherit-ns { height: inherit; }
49 | }
50 |
51 | @media (--breakpoint-medium) {
52 | .h1-m { height: var(--spacing-medium); }
53 | .h2-m { height: 2rem; }
54 | .h3-m { height: 4rem; }
55 | .h4-m { height: 8rem; }
56 | .h5-m { height: 16rem; }
57 | .h-25-m { height: 25%; }
58 | .h-50-m { height: 50%; }
59 | .h-75-m { height: 75%; }
60 | .h-100-m { height: 100%; }
61 | .min-h-100-ns { min-height: 100%; }
62 | .vh-25-m { height: 25vh; }
63 | .vh-50-m { height: 50vh; }
64 | .vh-75-m { height: 75vh; }
65 | .vh-100-m { height: 100vh; }
66 | .min-vh-100-m { min-height: 100vh; }
67 | .h-auto-m { height: auto; }
68 | .h-inherit-m { height: inherit; }
69 | }
70 |
71 | @media (--breakpoint-large) {
72 | .h1-l { height: var(--spacing-medium); }
73 | .h2-l { height: 2rem; }
74 | .h3-l { height: 4rem; }
75 | .h4-l { height: 8rem; }
76 | .h5-l { height: 16rem; }
77 | .h-25-l { height: 25%; }
78 | .h-50-l { height: 50%; }
79 | .h-75-l { height: 75%; }
80 | .h-100-l { height: 100%; }
81 | .min-h-100-l { min-height: 100%; }
82 | .vh-25-l { height: 25vh; }
83 | .vh-50-l { height: 50vh; }
84 | .vh-75-l { height: 75vh; }
85 | .vh-100-l { height: 100vh; }
86 | .min-vh-100-l { min-height: 100vh; }
87 | .h-auto-l { height: auto; }
88 | .h-inherit-l { height: inherit; }
89 | }
90 |
--------------------------------------------------------------------------------
/styles/imports/_images.css:
--------------------------------------------------------------------------------
1 | img {
2 | max-width: 100%;
3 | }
4 |
5 | /* Remove border-radiius from full-width images */
6 | img:not(.w-100) {
7 | border-radius: var(--border-radius);
8 | }
9 |
--------------------------------------------------------------------------------
/styles/imports/_line-height.css:
--------------------------------------------------------------------------------
1 | .lh-solid { line-height: 1; }
2 | .lh-title { line-height: 1.25; }
3 | .lh-copy { line-height: 1.5; }
4 |
5 | @media (--breakpoint-not-small) {
6 | .lh-solid-ns { line-height: 1; }
7 | .lh-title-ns { line-height: 1.25; }
8 | .lh-copy-ns { line-height: 1.5; }
9 | }
10 |
11 | @media (--breakpoint-medium) {
12 | .lh-solid-m { line-height: 1; }
13 | .lh-title-m { line-height: 1.25; }
14 | .lh-copy-m { line-height: 1.5; }
15 | }
16 |
17 | @media (--breakpoint-large) {
18 | .lh-solid-l { line-height: 1; }
19 | .lh-title-l { line-height: 1.25; }
20 | .lh-copy-l { line-height: 1.5; }
21 | }
22 |
--------------------------------------------------------------------------------
/styles/imports/_links.css:
--------------------------------------------------------------------------------
1 | .link {
2 | text-decoration: none;
3 | transition: var(--hover-transition);
4 | color: inherit;
5 | }
6 |
7 | .link:link,
8 | .link:visited {
9 | transition: color .15s ease-in;
10 | }
11 | .link:hover {
12 | transition: color .15s ease-in;
13 | text-decoration: underline;
14 | }
15 | .link:active {
16 | transition: color .15s ease-in;
17 | }
18 | .link:focus {
19 | transition: color .15s ease-in;
20 | outline: 1px dotted currentColor;
21 | }
22 |
--------------------------------------------------------------------------------
/styles/imports/_lists.css:
--------------------------------------------------------------------------------
1 | .list { list-style-type: none; }
2 |
--------------------------------------------------------------------------------
/styles/imports/_max-widths.css:
--------------------------------------------------------------------------------
1 | .mw-100 { max-width: 100%; }
2 |
3 | /* Max Width Scale */
4 |
5 | .mw1 { max-width: 1rem; }
6 | .mw2 { max-width: 2rem; }
7 | .mw3 { max-width: 4rem; }
8 | .mw4 { max-width: 8rem; }
9 | .mw5 { max-width: 16rem; }
10 | .mw6 { max-width: 32rem; }
11 | .mw7 { max-width: 48rem; }
12 | .mw8 { max-width: 64rem; }
13 | .mw9 { max-width: 96rem; }
14 |
15 | /* Max Width String Properties */
16 |
17 | .mw-none { max-width: none; }
18 |
19 | @media (--breakpoint-not-small) {
20 | .mw-100-ns { max-width: 100%; }
21 |
22 | .mw1-ns { max-width: 1rem; }
23 | .mw2-ns { max-width: 2rem; }
24 | .mw3-ns { max-width: 4rem; }
25 | .mw4-ns { max-width: 8rem; }
26 | .mw5-ns { max-width: 16rem; }
27 | .mw6-ns { max-width: 32rem; }
28 | .mw7-ns { max-width: 48rem; }
29 | .mw8-ns { max-width: 64rem; }
30 | .mw9-ns { max-width: 96rem; }
31 |
32 | .mw-none-ns { max-width: none; }
33 | }
34 |
35 | @media (--breakpoint-medium) {
36 | .mw-100-m { max-width: 100%; }
37 |
38 | .mw1-m { max-width: 1rem; }
39 | .mw2-m { max-width: 2rem; }
40 | .mw3-m { max-width: 4rem; }
41 | .mw4-m { max-width: 8rem; }
42 | .mw5-m { max-width: 16rem; }
43 | .mw6-m { max-width: 32rem; }
44 | .mw7-m { max-width: 48rem; }
45 | .mw8-m { max-width: 64rem; }
46 | .mw9-m { max-width: 96rem; }
47 |
48 | .mw-none-m { max-width: none; }
49 | }
50 |
51 | @media (--breakpoint-large) {
52 | .mw-100-l { max-width: 100%; }
53 |
54 | .mw1-l { max-width: 1rem; }
55 | .mw2-l { max-width: 2rem; }
56 | .mw3-l { max-width: 4rem; }
57 | .mw4-l { max-width: 8rem; }
58 | .mw5-l { max-width: 16rem; }
59 | .mw6-l { max-width: 32rem; }
60 | .mw7-l { max-width: 48rem; }
61 | .mw8-l { max-width: 64rem; }
62 | .mw9-l { max-width: 96rem; }
63 |
64 | .mw-none-l { max-width: none; }
65 | }
66 |
--------------------------------------------------------------------------------
/styles/imports/_media-queries.css:
--------------------------------------------------------------------------------
1 | @custom-media --breakpoint-not-small screen and (min-width: 40em);
2 |
3 | @custom-media --breakpoint-medium screen and (min-width: 50em);
4 |
5 | @custom-media --breakpoint-large screen and (min-width: 60em);
6 |
--------------------------------------------------------------------------------
/styles/imports/_opacity.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | OPACITY
4 | Docs: http://tachyons.io/docs/themes/opacity/
5 |
6 | */
7 |
8 | .o-100 { opacity: 1; }
9 | .o-90 { opacity: .9; }
10 | .o-80 { opacity: .8; }
11 | .o-70 { opacity: .7; }
12 | .o-60 { opacity: .6; }
13 | .o-50 { opacity: .5; }
14 | .o-40 { opacity: .4; }
15 | .o-30 { opacity: .3; }
16 | .o-20 { opacity: .2; }
17 | .o-10 { opacity: .1; }
18 | .o-05 { opacity: .05; }
19 | .o-025 { opacity: .025; }
20 | .o-0 { opacity: 0; }
21 |
--------------------------------------------------------------------------------
/styles/imports/_outlines.css:
--------------------------------------------------------------------------------
1 | .outline { outline: 1px solid; }
2 | .outline-transparent { outline: 1px solid transparent; }
3 | .outline-0 { outline: 0; }
4 |
5 | @media (--breakpoint-not-small) {
6 | .outline-ns { outline: 1px solid; }
7 | .outline-transparent-ns { outline: 1px solid transparent; }
8 | .outline-0-ns { outline: 0; }
9 | }
10 |
11 | @media (--breakpoint-medium) {
12 | .outline-m { outline: 1px solid; }
13 | .outline-transparent-m { outline: 1px solid transparent; }
14 | .outline-0-m { outline: 0; }
15 | }
16 |
17 | @media (--breakpoint-medium) {
18 | .outline-l { outline: 1px solid; }
19 | .outline-transparent-l { outline: 1px solid transparent; }
20 | .outline-0-l { outline: 0; }
21 | }
22 |
--------------------------------------------------------------------------------
/styles/imports/_overflow.css:
--------------------------------------------------------------------------------
1 | .overflow-visible { overflow: visible; }
2 | .overflow-hidden { overflow: hidden; }
3 | .overflow-scroll { overflow: scroll; }
4 | .overflow-auto { overflow: auto; }
5 |
6 | .overflow-x-visible { overflow-x: visible; }
7 | .overflow-x-hidden { overflow-x: hidden; }
8 | .overflow-x-scroll { overflow-x: scroll; -webkit-overflow-scrolling: touch; }
9 | .overflow-x-auto { overflow-x: auto; }
10 |
11 | .overflow-y-visible { overflow-y: visible; }
12 | .overflow-y-hidden { overflow-y: hidden; }
13 | .overflow-y-scroll { overflow-y: scroll; }
14 | .overflow-y-auto { overflow-y: auto; }
15 |
16 | @media (--breakpoint-not-small) {
17 | .overflow-visible-ns { overflow: visible; }
18 | .overflow-hidden-ns { overflow: hidden; }
19 | .overflow-scroll-ns { overflow: scroll; }
20 | .overflow-auto-ns { overflow: auto; }
21 | .overflow-x-visible-ns { overflow-x: visible; }
22 | .overflow-x-hidden-ns { overflow-x: hidden; }
23 | .overflow-x-scroll-ns { overflow-x: scroll; -webkit-overflow-scrolling: touch; }
24 | .overflow-x-auto-ns { overflow-x: auto; }
25 |
26 | .overflow-y-visible-ns { overflow-y: visible; }
27 | .overflow-y-hidden-ns { overflow-y: hidden; }
28 | .overflow-y-scroll-ns { overflow-y: scroll; }
29 | .overflow-y-auto-ns { overflow-y: auto; }
30 | }
31 |
32 | @media (--breakpoint-medium) {
33 | .overflow-visible-m { overflow: visible; }
34 | .overflow-hidden-m { overflow: hidden; }
35 | .overflow-scroll-m { overflow: scroll; }
36 | .overflow-auto-m { overflow: auto; }
37 |
38 | .overflow-x-visible-m { overflow-x: visible; }
39 | .overflow-x-hidden-m { overflow-x: hidden; }
40 | .overflow-x-scroll-m { overflow-x: scroll; -webkit-overflow-scrolling: touch; }
41 | .overflow-x-auto-m { overflow-x: auto; }
42 |
43 | .overflow-y-visible-m { overflow-y: visible; }
44 | .overflow-y-hidden-m { overflow-y: hidden; }
45 | .overflow-y-scroll-m { overflow-y: scroll; }
46 | .overflow-y-auto-m { overflow-y: auto; }
47 | }
48 |
49 | @media (--breakpoint-large) {
50 | .overflow-visible-l { overflow: visible; }
51 | .overflow-hidden-l { overflow: hidden; }
52 | .overflow-scroll-l { overflow: scroll; }
53 | .overflow-auto-l { overflow: auto; }
54 |
55 | .overflow-x-visible-l { overflow-x: visible; }
56 | .overflow-x-hidden-l { overflow-x: hidden; }
57 | .overflow-x-scroll-l { overflow-x: scroll; -webkit-overflow-scrolling: touch; }
58 | .overflow-x-auto-l { overflow-x: auto; }
59 |
60 | .overflow-y-visible-l { overflow-y: visible; }
61 | .overflow-y-hidden-l { overflow-y: hidden; }
62 | .overflow-y-scroll-l { overflow-y: scroll; }
63 | .overflow-y-auto-l { overflow-y: auto; }
64 | }
65 |
--------------------------------------------------------------------------------
/styles/imports/_position.css:
--------------------------------------------------------------------------------
1 | .static { position: static; }
2 | .relative { position: relative; }
3 | .absolute { position: absolute; }
4 | .fixed { position: fixed; }
5 |
6 | @media (--breakpoint-not-small) {
7 | .static-ns { position: static; }
8 | .relative-ns { position: relative; }
9 | .absolute-ns { position: absolute; }
10 | .fixed-ns { position: fixed; }
11 | }
12 |
13 | @media (--breakpoint-medium) {
14 | .static-m { position: static; }
15 | .relative-m { position: relative; }
16 | .absolute-m { position: absolute; }
17 | .fixed-m { position: fixed; }
18 | }
19 |
20 | @media (--breakpoint-large) {
21 | .static-l { position: static; }
22 | .relative-l { position: relative; }
23 | .absolute-l { position: absolute; }
24 | .fixed-l { position: fixed; }
25 | }
26 |
--------------------------------------------------------------------------------
/styles/imports/_reset.css:
--------------------------------------------------------------------------------
1 | /* http://meyerweb.com/eric/tools/css/reset/
2 | v2.0 | 20110126
3 | License: none (public domain)
4 | */
5 |
6 | html, body, div, span, applet, object, iframe,
7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8 | a, abbr, acronym, address, big, cite, code,
9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed,
16 | figure, figcaption, footer, header, hgroup,
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 | margin: 0;
20 | padding: 0;
21 | border: 0;
22 | font-size: 100%;
23 | font: inherit;
24 | vertical-align: baseline;
25 | }
26 | /* HTML5 display-role reset for older browsers */
27 | article, aside, details, figcaption, figure,
28 | footer, header, hgroup, menu, nav, section {
29 | display: block;
30 | }
31 | body {
32 | line-height: 1;
33 | }
34 | ol, ul {
35 | list-style: none;
36 | }
37 | blockquote, q {
38 | quotes: none;
39 | }
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 | content: '';
43 | content: none;
44 | }
45 | table {
46 | border-collapse: collapse;
47 | border-spacing: 0;
48 | }
49 |
50 | input, textarea {
51 | font-size: var(--spacing-medium);
52 | border: none;
53 | font-family: inherit;
54 | border: 0;
55 | margin: 0;
56 | }
57 |
58 | button {
59 | font-family: inherit;
60 | border: 0;
61 | margin: 0;
62 | cursor: pointer;
63 | }
64 |
65 | a {
66 | color: inherit;
67 | }
68 |
--------------------------------------------------------------------------------
/styles/imports/_states.css:
--------------------------------------------------------------------------------
1 | /* Focus states */
2 | input:focus, textarea:focus, a:focus, button:focus {
3 | box-shadow: inset 0 0 0 2px var(--primary);
4 | outline: 0!important;
5 | }
6 |
7 | .raise {
8 | transition: var(--hover-transition);
9 | transform: translateY(0) translateZ(0);
10 | }
11 |
12 | .raise:hover,
13 | .raise:focus {
14 | transition: var(--hover-transition);
15 | transform: translateY(-.12rem) translateZ(0);
16 | }
17 |
18 | .raise:active {
19 | transition: var(--hover-transition);
20 | opacity: .5;
21 | }
22 |
23 | .hide-child .child {
24 | opacity: 0;
25 | transition: opacity .15s ease-in;
26 | }
27 | .hide-child:hover .child,
28 | .hide-child:focus .child,
29 | .hide-child:active .child {
30 | opacity: 1;
31 | transition: opacity .15s ease-in;
32 | }
33 |
34 | .underline-hover:hover,
35 | .underline-hover:focus {
36 | text-decoration: underline;
37 | }
38 |
39 | .pointer:hover {
40 | cursor: pointer;
41 | }
42 |
--------------------------------------------------------------------------------
/styles/imports/_styles.css:
--------------------------------------------------------------------------------
1 | ::selection {
2 | background-color: var(--highlight);
3 | }
4 |
5 | /* Used in the navbar */
6 | .divider-grey {
7 | box-shadow: inset 0 -4px 0 var(--grey-1);
8 | }
9 |
10 | .divider-grey a {
11 | transition: var(--hover-transition);
12 | }
13 |
14 | .divider-grey ul a:hover,
15 | .divider-grey ul a:focus {
16 | box-shadow: inset 0 -4px 0 var(--primary);
17 | }
18 |
--------------------------------------------------------------------------------
/styles/imports/_svg.css:
--------------------------------------------------------------------------------
1 | svg {
2 | fill: currentColor;
3 | fill-rule:evenodd;
4 | clip-rule:evenodd;
5 | max-width: 100%;
6 | max-height: 100%;
7 | }
8 |
--------------------------------------------------------------------------------
/styles/imports/_tables.css:
--------------------------------------------------------------------------------
1 | table
2 | {
3 | border-radius: var(--border-radius);
4 | overflow: hidden;
5 | }
6 |
7 | td, th {
8 | padding: $spacing-medium;
9 | }
10 |
11 | th:not(:first-child), td:not(:first-child) {
12 | text-align: right;
13 | }
14 |
15 | th {
16 | color: var(--grey-3);
17 | font-weight: 700;
18 | white-space: nowrap;
19 | {
20 | white-space: wrap;
21 | }
22 | }
23 |
24 | tr th {
25 | text-align: center;
26 | }
27 |
28 | tbody tr:nth-child(even) {
29 | background-color: var(--grey-1);
30 | }
31 |
--------------------------------------------------------------------------------
/styles/imports/_text-align.css:
--------------------------------------------------------------------------------
1 | .tl { text-align: left; }
2 | .tr { text-align: right; }
3 | .tc { text-align: center; }
4 |
5 | @media (--breakpoint-not-small) {
6 | .tl-ns { text-align: left; }
7 | .tr-ns { text-align: right; }
8 | .tc-ns { text-align: center; }
9 | }
10 |
11 | @media (--breakpoint-medium) {
12 | .tl-m { text-align: left; }
13 | .tr-m { text-align: right; }
14 | .tc-m { text-align: center; }
15 | }
16 |
17 | @media (--breakpoint-large) {
18 | .tl-l { text-align: left; }
19 | .tr-l { text-align: right; }
20 | .tc-l { text-align: center; }
21 | }
22 |
--------------------------------------------------------------------------------
/styles/imports/_text-decoration.css:
--------------------------------------------------------------------------------
1 | .strike { text-decoration: line-through; }
2 | .underline { text-decoration: underline; }
3 | .no-underline { text-decoration: none; }
4 |
5 |
6 | @media (--breakpoint-not-small) {
7 | .strike-ns { text-decoration: line-through; }
8 | .underline-ns { text-decoration: underline; }
9 | .no-underline-ns { text-decoration: none; }
10 | }
11 |
12 | @media (--breakpoint-medium) {
13 | .strike-m { text-decoration: line-through; }
14 | .underline-m { text-decoration: underline; }
15 | .no-underline-m { text-decoration: none; }
16 | }
17 |
18 | @media (--breakpoint-large) {
19 | .strike-l { text-decoration: line-through; }
20 | .underline-l { text-decoration: underline; }
21 | .no-underline-l { text-decoration: none; }
22 | }
23 |
--------------------------------------------------------------------------------
/styles/imports/_text-transform.css:
--------------------------------------------------------------------------------
1 | .ttc { text-transform: capitalize; }
2 | .ttl { text-transform: lowercase; }
3 | .ttu { text-transform: uppercase; }
4 | .ttn { text-transform: none; }
5 |
6 | @media (--breakpoint-not-small) {
7 | .ttc-ns { text-transform: capitalize; }
8 | .ttl-ns { text-transform: lowercase; }
9 | .ttu-ns { text-transform: uppercase; }
10 | .ttn-ns { text-transform: none; }
11 | }
12 |
13 | @media (--breakpoint-medium) {
14 | .ttc-m { text-transform: capitalize; }
15 | .ttl-m { text-transform: lowercase; }
16 | .ttu-m { text-transform: uppercase; }
17 | .ttn-m { text-transform: none; }
18 | }
19 |
20 | @media (--breakpoint-large) {
21 | .ttc-l { text-transform: capitalize; }
22 | .ttl-l { text-transform: lowercase; }
23 | .ttu-l { text-transform: uppercase; }
24 | .ttn-l { text-transform: none; }
25 | }
26 |
--------------------------------------------------------------------------------
/styles/imports/_type-scale.css:
--------------------------------------------------------------------------------
1 | .f1 { font-size: 3rem; }
2 | .f2 { font-size: 2.25rem; }
3 | .f3 { font-size: 1.5rem; }
4 | .f4 { font-size: 1.25rem;; }
5 | .f5 { font-size: var(--spacing-medium); }
6 | .f6 { font-size: .875rem; }
7 |
8 | @media (--breakpoint-not-small) {
9 | .f-6-ns,
10 | .f-headline-ns { font-size: 6rem; }
11 | .f-5-ns,
12 | .f-subheadline-ns { font-size: 5rem; }
13 | .f1-ns { font-size: 3rem; }
14 | .f2-ns { font-size: 2.25rem; }
15 | .f3-ns { font-size: 1.5rem; }
16 | .f4-ns { font-size: 1.25rem;; }
17 | .f5-ns { font-size: var(--spacing-medium); }
18 | .f6-ns { font-size: .875rem; }
19 | }
20 |
21 | @media (--breakpoint-medium) {
22 | .f-6-m,
23 | .f-headline-m { font-size: 6rem; }
24 | .f-5-m,
25 | .f-subheadline-m { font-size: 5rem; }
26 | .f1-m { font-size: 3rem; }
27 | .f2-m { font-size: 2.25rem; }
28 | .f3-m { font-size: 1.5rem; }
29 | .f4-m { font-size: 1.25rem;; }
30 | .f5-m { font-size: var(--spacing-medium); }
31 | .f6-m { font-size: .875rem; }
32 | }
33 |
34 | @media (--breakpoint-large) {
35 | .f-6-l,
36 | .f-headline-l {
37 | font-size: 6rem;
38 | }
39 | .f-5-l,
40 | .f-subheadline-l {
41 | font-size: 5rem;
42 | }
43 | .f1-l { font-size: 3rem; }
44 | .f2-l { font-size: 2.25rem; }
45 | .f3-l { font-size: 1.5rem; }
46 | .f4-l { font-size: 1.25rem;; }
47 | .f5-l { font-size: var(--spacing-medium); }
48 | .f6-l { font-size: .875rem; }
49 | }
50 |
--------------------------------------------------------------------------------
/styles/imports/_typography.css:
--------------------------------------------------------------------------------
1 | html {
2 | font-size: var(--font-size);
3 | background-color: var(--black);
4 | }
5 |
6 | @media (--breakpoint-medium) {
7 | html {
8 | font-size: var(--font-size-m);
9 | }
10 | }
11 |
12 | @media (--breakpoint-large) {
13 | html {
14 | font-size: var(--font-size-l);
15 | }
16 | }
17 |
18 |
19 | body {
20 | font-family: var(--font-family);
21 | font-size: var(--spacing-medium);
22 | line-height: var(--line-height);
23 | font-weight: var(--body-font-weight);
24 | -webkit-font-smoothing: antialiased;
25 | -moz-osx-font-smoothing: grayscale;
26 | background-color: var(--off-white);
27 | }
28 |
29 | p {
30 | margin-bottom: var(--spacing-medium);
31 | max-width: 32rem;
32 | }
33 |
34 | strong {
35 | font-weight: var(--bold-font-weight);
36 | }
37 |
38 | .bold {
39 | font-weight: var(--bold-font-weight);
40 | }
41 |
42 | em {
43 | font-style: italic;
44 | }
45 |
46 | sup {
47 | font-size: .6rem;
48 | font-weight: 700;
49 | vertical-align: super;
50 | }
51 |
52 | /* Measure is limited to ~66 characters */
53 | .measure {
54 | max-width: 30em;
55 | }
56 |
57 | /* Measure is limited to ~80 characters */
58 | .measure-wide {
59 | max-width: 34em;
60 | }
61 |
62 | /* Measure is limited to ~45 characters */
63 | .measure-narrow {
64 | max-width: 25em;
65 | }
66 |
67 | /* Book paragraph style - paragraphs are indented with no vertical spacing. */
68 | .indent {
69 | text-indent: 1em;
70 | margin-top: 0;
71 | margin-bottom: 0;
72 | }
73 |
74 | .small-caps {
75 | font-variant: small-caps;
76 | }
77 |
78 | /* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */
79 |
80 | .truncate {
81 | white-space: nowrap;
82 | overflow: hidden;
83 | text-overflow: ellipsis;
84 | }
85 |
86 | @media (--breakpoint-not-small) {
87 | .measure-ns {
88 | max-width: 30em;
89 | }
90 | .measure-wide-ns {
91 | max-width: 34em;
92 | }
93 | .measure-narrow-ns {
94 | max-width: 20em;
95 | }
96 | .indent-ns {
97 | text-indent: 1em;
98 | margin-top: 0;
99 | margin-bottom: 0;
100 | }
101 | .small-caps-ns {
102 | font-variant: small-caps;
103 | }
104 | .truncate-ns {
105 | white-space: nowrap;
106 | overflow: hidden;
107 | text-overflow: ellipsis;
108 | }
109 | }
110 |
111 | @media (--breakpoint-medium) {
112 | .measure-m {
113 | max-width: 30em;
114 | }
115 | .measure-wide-m {
116 | max-width: 34em;
117 | }
118 | .measure-narrow-m {
119 | max-width: 20em;
120 | }
121 | .indent-m {
122 | text-indent: 1em;
123 | margin-top: 0;
124 | margin-bottom: 0;
125 | }
126 | .small-caps-m {
127 | font-variant: small-caps;
128 | }
129 | .truncate-m {
130 | white-space: nowrap;
131 | overflow: hidden;
132 | text-overflow: ellipsis;
133 | }
134 | }
135 |
136 | @media (--breakpoint-large) {
137 | .measure-l {
138 | max-width: 30em;
139 | }
140 | .measure-wide-l {
141 | max-width: 34em;
142 | }
143 | .measure-narrow-l {
144 | max-width: 20em;
145 | }
146 | .indent-l {
147 | text-indent: 1em;
148 | margin-top: 0;
149 | margin-bottom: 0;
150 | }
151 | .small-caps-l {
152 | font-variant: small-caps;
153 | }
154 | .truncate-l {
155 | white-space: nowrap;
156 | overflow: hidden;
157 | text-overflow: ellipsis;
158 | }
159 | }
160 |
--------------------------------------------------------------------------------
/styles/imports/_utilities.css:
--------------------------------------------------------------------------------
1 | .aspect-ratio {
2 | height: 0;
3 | position: relative;
4 | }
5 |
6 | .aspect-ratio--16x9 { padding-bottom: 56.25%; }
7 | .aspect-ratio--9x16 { padding-bottom: 177.77%; }
8 |
9 | .aspect-ratio--4x3 { padding-bottom: 75%; }
10 | .aspect-ratio--3x4 { padding-bottom: 133.33%; }
11 |
12 | .aspect-ratio--6x4 { padding-bottom: 66.6%; }
13 | .aspect-ratio--4x6 { padding-bottom: 150%; }
14 |
15 | .aspect-ratio--8x5 { padding-bottom: 62.5%; }
16 | .aspect-ratio--5x8 { padding-bottom: 160%; }
17 |
18 | .aspect-ratio--7x5 { padding-bottom: 71.42%; }
19 | .aspect-ratio--5x7 { padding-bottom: 140%; }
20 |
21 | .aspect-ratio--1x1 { padding-bottom: 100%; }
22 |
23 | .aspect-ratio--object {
24 | position: absolute;
25 | top: 0;
26 | right: 0;
27 | bottom: 0;
28 | left: 0;
29 | width: 100%;
30 | height: 100%;
31 | z-index: 100;
32 | }
33 |
34 | .center {
35 | margin-right: auto;
36 | margin-left: auto;
37 | }
38 |
--------------------------------------------------------------------------------
/styles/imports/_variables.css:
--------------------------------------------------------------------------------
1 | :root {
2 | /* Colors */
3 | --primary: rgb(255, 0, 0);
4 | --highlight: rgb(254, 198, 198);
5 | --white: rgba(255, 255, 255, 1);
6 | --off-white: rgba(255, 253, 252, 1);
7 | --grey-1: rgba(245, 243, 242, 1);
8 | --grey-2: rgba(235, 231, 230, 1);
9 | --grey-3: rgba(89, 87, 86, 1);
10 | --grey-4: rgba(66, 64, 64, 1);
11 | --black: rgba(43, 37, 35, 1);
12 |
13 | /* Typography */
14 | --font-family: Nunito Sans, -apple-system, BlinkMacSystemFont, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
15 | --line-height: 1.5;
16 |
17 | --font-size: 18px;
18 | --font-size-m: 20px;
19 | --font-size-l: 22px;
20 |
21 | --body-font-weight: 400;
22 | --bold-font-weight: 700;
23 |
24 | /* Sizing */
25 | --spacing-none: 0;
26 | --spacing-extra-small: .25rem;
27 | --spacing-small: .5rem;
28 | --spacing-medium: 1rem;
29 | --spacing-large: 2rem;
30 | --spacing-extra-large: 4rem;
31 | --spacing-extra-extra-large: 8rem;
32 | --spacing-extra-extra-extra-large: 16rem;
33 |
34 | /* Miscelaneous */
35 | --border-radius: .25rem;
36 | --hover-transition: all 150ms ease;
37 | }
38 |
--------------------------------------------------------------------------------
/styles/imports/_vertical-align.css:
--------------------------------------------------------------------------------
1 | .v-base { vertical-align: baseline; }
2 | .v-mid { vertical-align: middle; }
3 | .v-top { vertical-align: top; }
4 | .v-btm { vertical-align: bottom; }
5 |
6 | @media (--breakpoint-not-small) {
7 | .v-base-ns { vertical-align: baseline; }
8 | .v-mid-ns { vertical-align: middle; }
9 | .v-top-ns { vertical-align: top; }
10 | .v-btm-ns { vertical-align: bottom; }
11 | }
12 |
13 | @media (--breakpoint-medium) {
14 | .v-base-m { vertical-align: baseline; }
15 | .v-mid-m { vertical-align: middle; }
16 | .v-top-m { vertical-align: top; }
17 | .v-btm-m { vertical-align: bottom; }
18 | }
19 |
20 | @media (--breakpoint-large) {
21 | .v-base-l { vertical-align: baseline; }
22 | .v-mid-l { vertical-align: middle; }
23 | .v-top-l { vertical-align: top; }
24 | .v-btm-l { vertical-align: bottom; }
25 | }
26 |
--------------------------------------------------------------------------------
/styles/imports/_visibility.css:
--------------------------------------------------------------------------------
1 | .clip {
2 | position: fixed !important;
3 | _position: absolute !important;
4 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
5 | clip: rect(1px, 1px, 1px, 1px);
6 | }
7 |
8 | @media (--breakpoint-not-small) {
9 | .clip-ns {
10 | position: fixed !important;
11 | _position: absolute !important;
12 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
13 | clip: rect(1px, 1px, 1px, 1px);
14 | }
15 | }
16 |
17 | @media (--breakpoint-medium) {
18 | .clip-m {
19 | position: fixed !important;
20 | _position: absolute !important;
21 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
22 | clip: rect(1px, 1px, 1px, 1px);
23 | }
24 | }
25 |
26 | @media (--breakpoint-large) {
27 | .clip-l {
28 | position: fixed !important;
29 | _position: absolute !important;
30 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
31 | clip: rect(1px, 1px, 1px, 1px);
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/styles/imports/_white-space.css:
--------------------------------------------------------------------------------
1 | .ws-normal { white-space: normal; }
2 | .nowrap { white-space: nowrap; }
3 | .pre { white-space: pre; }
4 |
5 | @media (--breakpoint-not-small) {
6 | .ws-normal-ns { white-space: normal; }
7 | .nowrap-ns { white-space: nowrap; }
8 | .pre-ns { white-space: pre; }
9 | }
10 |
11 | @media (--breakpoint-medium) {
12 | .ws-normal-m { white-space: normal; }
13 | .nowrap-m { white-space: nowrap; }
14 | .pre-m { white-space: pre; }
15 | }
16 |
17 | @media (--breakpoint-large) {
18 | .ws-normal-l { white-space: normal; }
19 | .nowrap-l { white-space: nowrap; }
20 | .pre-l { white-space: pre; }
21 | }
22 |
--------------------------------------------------------------------------------
/styles/imports/_widths.css:
--------------------------------------------------------------------------------
1 | .w1 { width: var(--spacing-medium); }
2 | .w2 { width: 2rem; }
3 | .w3 { width: 4rem; }
4 | .w4 { width: 8rem; }
5 | .w5 { width: 16rem; }
6 |
7 | .w-10 { width: 10%; }
8 | .w-20 { width: 20%; }
9 | .w-25 { width: 25%; }
10 | .w-30 { width: 30%; }
11 | .w-33 { width: 33%; }
12 | .w-34 { width: 34%; }
13 | .w-40 { width: 40%; }
14 | .w-50 { width: 50%; }
15 | .w-60 { width: 60%; }
16 | .w-70 { width: 70%; }
17 | .w-75 { width: 75%; }
18 | .w-80 { width: 80%; }
19 | .w-90 { width: 90%; }
20 | .w-100 { width: 100%; }
21 |
22 | .w-third { width: calc(100% / 3); }
23 | .w-two-thirds { width: calc(100% / 1.5); }
24 | .w-auto { width: auto; }
25 |
26 | @media (--breakpoint-not-small) {
27 | .w1-ns { width: var(--spacing-medium); }
28 | .w2-ns { width: 2rem; }
29 | .w3-ns { width: 4rem; }
30 | .w4-ns { width: 8rem; }
31 | .w5-ns { width: 16rem; }
32 | .w-10-ns { width: 10%; }
33 | .w-20-ns { width: 20%; }
34 | .w-25-ns { width: 25%; }
35 | .w-30-ns { width: 30%; }
36 | .w-33-ns { width: 33%; }
37 | .w-34-ns { width: 34%; }
38 | .w-40-ns { width: 40%; }
39 | .w-50-ns { width: 50%; }
40 | .w-60-ns { width: 60%; }
41 | .w-70-ns { width: 70%; }
42 | .w-75-ns { width: 75%; }
43 | .w-80-ns { width: 80%; }
44 | .w-90-ns { width: 90%; }
45 | .w-100-ns { width: 100%; }
46 | .w-third-ns { width: calc(100% / 3); }
47 | .w-two-thirds-ns { width: calc(100% / 1.5); }
48 | .w-auto-ns { width: auto; }
49 | }
50 |
51 | @media (--breakpoint-medium) {
52 | .w1-m { width: var(--spacing-medium); }
53 | .w2-m { width: 2rem; }
54 | .w3-m { width: 4rem; }
55 | .w4-m { width: 8rem; }
56 | .w5-m { width: 16rem; }
57 | .w-10-m { width: 10%; }
58 | .w-20-m { width: 20%; }
59 | .w-25-m { width: 25%; }
60 | .w-30-m { width: 30%; }
61 | .w-33-m { width: 33%; }
62 | .w-34-m { width: 34%; }
63 | .w-40-m { width: 40%; }
64 | .w-50-m { width: 50%; }
65 | .w-60-m { width: 60%; }
66 | .w-70-m { width: 70%; }
67 | .w-75-m { width: 75%; }
68 | .w-80-m { width: 80%; }
69 | .w-90-m { width: 90%; }
70 | .w-100-m { width: 100%; }
71 | .w-third-m { width: calc(100% / 3); }
72 | .w-two-thirds-m { width: calc(100% / 1.5); }
73 | .w-auto-m { width: auto; }
74 | }
75 |
76 | @media (--breakpoint-large) {
77 | .w1-l { width: var(--spacing-medium); }
78 | .w2-l { width: 2rem; }
79 | .w3-l { width: 4rem; }
80 | .w4-l { width: 8rem; }
81 | .w5-l { width: 16rem; }
82 | .w-10-l { width: 10%; }
83 | .w-20-l { width: 20%; }
84 | .w-25-l { width: 25%; }
85 | .w-30-l { width: 30%; }
86 | .w-33-l { width: 33%; }
87 | .w-34-l { width: 34%; }
88 | .w-40-l { width: 40%; }
89 | .w-50-l { width: 50%; }
90 | .w-60-l { width: 60%; }
91 | .w-70-l { width: 70%; }
92 | .w-75-l { width: 75%; }
93 | .w-80-l { width: 80%; }
94 | .w-90-l { width: 90%; }
95 | .w-100-l { width: 100%; }
96 | .w-third-l { width: calc(100% / 3); }
97 | .w-two-thirds-l { width: calc(100% / 1.5); }
98 | .w-auto-l { width: auto; }
99 | }
100 |
--------------------------------------------------------------------------------
/styles/imports/_word-break.css:
--------------------------------------------------------------------------------
1 | .word-normal { word-break: normal; }
2 | .word-wrap { word-break: break-all; }
3 | .word-nowrap { word-break: keep-all; }
4 |
5 | @media (--breakpoint-not-small) {
6 | .word-normal-ns { word-break: normal; }
7 | .word-wrap-ns { word-break: break-all; }
8 | .word-nowrap-ns { word-break: keep-all; }
9 | }
10 |
11 | @media (--breakpoint-medium) {
12 | .word-normal-m { word-break: normal; }
13 | .word-wrap-m { word-break: break-all; }
14 | .word-nowrap-m { word-break: keep-all; }
15 | }
16 |
17 | @media (--breakpoint-large) {
18 | .word-normal-l { word-break: normal; }
19 | .word-wrap-l { word-break: break-all; }
20 | .word-nowrap-l { word-break: keep-all; }
21 | }
22 |
--------------------------------------------------------------------------------
/styles/imports/_z-index.css:
--------------------------------------------------------------------------------
1 | .z-0 { z-index: 0; }
2 | .z-1 { z-index: 1; }
3 | .z-2 { z-index: 2; }
4 | .z-3 { z-index: 3; }
5 | .z-4 { z-index: 4; }
6 | .z-5 { z-index: 5; }
7 |
8 | .z-999 { z-index: 999; }
9 | .z-9999 { z-index: 9999; }
10 |
11 | .z-max {
12 | z-index: 2147483647;
13 | }
14 |
15 | .z-inherit { z-index: inherit; }
16 | .z-initial { z-index: initial; }
17 | .z-unset { z-index: unset; }
18 |
--------------------------------------------------------------------------------
/styles/main.css:
--------------------------------------------------------------------------------
1 | /*! TACHYONS v4.5.5 | http://tachyons.io */
2 |
3 | /*
4 | *
5 | * ________ ______
6 | * ___ __/_____ _________ /______ ______________________
7 | * __ / _ __ `/ ___/_ __ \_ / / / __ \_ __ \_ ___/
8 | * _ / / /_/ // /__ _ / / / /_/ // /_/ / / / /(__ )
9 | * /_/ \__,_/ \___/ /_/ /_/_\__, / \____//_/ /_//____/
10 | * /____/
11 | *
12 | * TABLE OF CONTENTS
13 | *
14 | * 1. External Library Includes
15 | * - Reset.css | http://meyerweb.com/eric/tools/css/reset/
16 | * 2. Tachyons Modules
17 | * 3. Variables
18 | * - Media Queries
19 | * - Colors
20 | * 4. Debugging
21 | * - Debug all
22 | * - Debug children
23 | *
24 | */
25 |
26 |
27 | /* External Library Includes */
28 | @import './imports/_reset';
29 |
30 | /* Modules */
31 | @import './imports/_box-sizing';
32 | @import './imports/_images';
33 | @import './imports/_background-size';
34 | @import './imports/_background-position';
35 | @import './imports/_outlines';
36 | @import './imports/_borders';
37 | @import './imports/_border-radius';
38 | @import './imports/_border-style';
39 | @import './imports/_border-widths';
40 | @import './imports/_border-colors';
41 | @import './imports/_code';
42 | @import './imports/_coordinates';
43 | @import './imports/_clears';
44 | @import './imports/_display';
45 | @import './imports/_flexbox';
46 | @import './imports/_floats';
47 | @import './imports/_font-style';
48 | @import './imports/_font-weight';
49 | @import './imports/_forms';
50 | @import './imports/_heights';
51 | @import './imports/_line-height';
52 | @import './imports/_links';
53 | @import './imports/_lists';
54 | @import './imports/_max-widths';
55 | @import './imports/_widths';
56 | @import './imports/_overflow';
57 | @import './imports/_position';
58 | @import './imports/_opacity';
59 | @import './imports/_spacing';
60 | @import './imports/_text-decoration';
61 | @import './imports/_text-align';
62 | @import './imports/_text-transform';
63 | @import './imports/_type-scale';
64 | @import './imports/_typography';
65 | @import './imports/_utilities';
66 | @import './imports/_visibility';
67 | @import './imports/_white-space';
68 | @import './imports/_vertical-align';
69 | @import './imports/_states';
70 | @import './imports/_z-index';
71 | @import './imports/_buttons';
72 | @import './imports/_svg';
73 | @import './imports/_styles';
74 | @import './imports/_cms';
75 |
76 | /* Variables */
77 | /* Importing here will allow you to override any variables in the modules */
78 | @import './imports/_colors';
79 | @import './imports/_media-queries';
80 | @import './imports/_variables';
81 |
82 | /* Debugging */
83 | @import './imports/_debug-children';
84 | @import './imports/_debug-grid';
85 |
86 | /* Uncomment out the line below to help debug layout issues */
87 | /*@import './imports/_debug';*/
88 |
89 | .w-240 {
90 | width: 240px;
91 | }
92 |
93 | nav.on-products li.products a,
94 | nav.on-values li.values a,
95 | nav.on-team li.team a,
96 | nav.on-post li.post a,
97 | nav.on-contact li.contact a {
98 | box-shadow: inset 0 -4px 0 var(--primary);
99 | }
--------------------------------------------------------------------------------