├── .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 |
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 |
31 |
32 |
{intro.heading}
33 |
34 | {
35 | products.map(p => (
36 |
37 |
{p.heading}
38 |
{p.text}
39 |
40 | ))
41 | }
42 |
43 |
48 |
49 |
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 |
26 |
27 |
{intro.heading}
28 |
29 | {
30 | products.map(p => (
31 |
32 |
{p.heading}
33 |
{p.text}
34 |
35 | ))
36 | }
37 |
38 |
39 |
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 |
4 |
5 |
{heading}
6 |
{description}
7 |
8 | {
9 | blurbs.map(p => (
10 |
11 |
12 |
13 |
14 |
{p.text}
15 |
16 | ))
17 | }
18 |
19 |
20 |
4 |
5 |
{name}
6 |
7 |
8 |
Latest stories
9 |
10 | {
11 | posts.map(p => (
12 |
20 | ))
21 | }
22 |
23 |
28 |
29 |
4 |
Drop us a line below
5 |
33 |
{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 |
38 | )
39 | }
40 |
--------------------------------------------------------------------------------
/components/header.js:
--------------------------------------------------------------------------------
1 | import Link from 'next/link'
2 |
3 | export default function Header() {
4 | return (
5 |
6 | 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 |
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 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
4 |
5 |
6 |
7 |
8 |
{heading}
9 |
{text}
10 |
11 |
12 |
13 |
15 |
16 | {
17 | metaData.menus.map(m => {
18 | const mcls = m.url.substr(1)
19 | return (
20 |
21 | {m.page}
23 |
24 |
25 | )
26 | })
27 | }
28 |
29 |
30 | )
31 | }
--------------------------------------------------------------------------------
/components/newsletter-form.js:
--------------------------------------------------------------------------------
1 | export default function NewsletterForm() {
2 | return (
3 |
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 |
8 | {title}
9 |
10 |
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 |
24 |
25 |
26 | {
27 | plans.map(p => (
28 |
36 | ))
37 | }
38 |
39 |
40 |
4 |
{plan}
5 |
6 | starting at {price}
7 |
8 |
{description}
9 |
10 | {
11 | items.map(it => (
12 |
13 | {it}
14 |
15 | ))
16 | }
17 |
18 |
24 |
25 |
{heading}
26 |
{description}
27 |
28 | {
29 | plans.map(p => (
30 |
38 | ))
39 | }
40 |
41 |
42 |
4 |
5 |
{heading}
6 |
{text}
7 |
8 |
4 |
5 |
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 |
6 |
7 |
8 |
9 |
{heading}
10 |
{text}
11 |
12 |
13 |
14 |
15 |
16 |
21 |
22 |
404 - Page Not Found
4 | }
--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import '../styles/main.css'
2 |
3 | export default function MyApp({ Component, pageProps }) {
4 | return
17 |
18 | Home | {CMS_NAME}
19 |
20 |
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 |
24 | {/*
Read in ? minutes
*/}
25 |
27 |
{post.description}
28 | {post.image &&
29 |
30 | }
31 |
32 |
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 |
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 |
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 | #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 |
24 |
26 |
31 |
32 |
54 | Created by potrace 1.11, written by Peter Selinger 2001-2013
55 |
56 |
59 |
70 |
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 |
6 |
10 |
--------------------------------------------------------------------------------
/public/img/icons-instagram.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
11 |
--------------------------------------------------------------------------------
/public/img/icons-twitter.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
12 |
--------------------------------------------------------------------------------
/public/img/icons-vimeo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
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 |
24 |
26 |
31 |
32 |
54 | Created by potrace 1.11, written by Peter Selinger 2001-2013
55 |
56 |
59 |
70 |
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 | }
--------------------------------------------------------------------------------
5 | 
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