{text}
7 |{text}
10 |8 |11 |“{it.quote}”
9 | {it.author} 10 |
10 |
{description}
15 |Read more →
16 | 17 | 18 | ) 19 | } -------------------------------------------------------------------------------- /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/_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 | -------------------------------------------------------------------------------- /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 | 10 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 |{description}
7 |{p.text}
15 |{text}
11 |
12 |
13 | This is a boilerplate for using [Hugo](https://gohugo.io/) as a static site generator and [Webpack](https://webpack.js.org/) as your asset pipeline. Victor Hugo setup to use [PostCSS](http://postcss.org/) and [Babel](https://babeljs.io/) for CSS and JavaScript compiling/transpiling. This project is released under the [MIT license](LICENSE). Please make sure you understand its implications and guarantees.
14 |
15 | ## Enjoy!! 😸
16 |
--------------------------------------------------------------------------------
/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)
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/styles/imports/_border-style.css:
--------------------------------------------------------------------------------
1 | .b--dotted { border-style: dotted; }
2 | .b--dashed { border-style: dashed; }
3 | .b--solid { border-style: solid; }
4 | .b--none { border-style: none; }
5 |
6 | @media (--breakpoint-not-small) {
7 | .b--dotted-ns { border-style: dotted; }
8 | .b--dashed-ns { border-style: dashed; }
9 | .b--solid-ns { border-style: solid; }
10 | .b--none-ns { border-style: none; }
11 | }
12 |
13 | @media (--breakpoint-medium) {
14 | .b--dotted-m { border-style: dotted; }
15 | .b--dashed-m { border-style: dashed; }
16 | .b--solid-m { border-style: solid; }
17 | .b--none-m { border-style: none; }
18 | }
19 |
20 | @media (--breakpoint-large) {
21 | .b--dotted-l { border-style: dotted; }
22 | .b--dashed-l { border-style: dashed; }
23 | .b--solid-l { border-style: solid; }
24 | .b--none-l { border-style: none; }
25 | }
26 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/components/main-gallery.js:
--------------------------------------------------------------------------------
1 | export default function MainGallery({ heading, description, image1, image2, image3 }) {
2 | return (
3 | <>
4 | {description}
8 |
5 | 15 | {subtitle} 16 |
17 | } 18 |{description}
7 |16 | {p.name} 17 |
18 |{p.text}
20 |{description}
7 |16 | {p.name} 17 |
18 |{p.text}
20 |
6 | starting at
${price}
7 |
{description}
9 |{it}
14 |
6 | starting at
${price}
7 |
{description}
9 |{it}
14 |{description}
27 |{intro.text}
10 |{p.heading}
15 |{p.text}
16 |{p.heading}
33 |{p.text}
34 |{intro.text}
10 |{p.heading}
15 |{p.text}
16 |{p.heading}
38 |{p.text}
39 |
20 |
Read in ? minutes
*/} 25 |{post.description}
28 | {post.image && 29 |