mirror of
https://github.com/jambonz/next-static-site.git
synced 2026-10-30 07:14:35 +00:00
Initial refactor of jambonz-ui package library (#39)
* Initial refactor of jambonz-ui package library * Delete public/fonts directory * Jambonz UI test-app and some refinements * next lint * working on jambonz ui docs * Update package.json * Update package.json * Update package.json * Create package.json * typescript * Update components.tsx * Update components.tsx * Update utils.ts * Update icons.ts * Update components.tsx * Update components.tsx * Update icons.ts * Update components.tsx * Update _icons.scss * Update components.tsx * Update components.tsx * fix some thangs and compile all * wrap up the docs * Update tsconfig.json * icons refactor * refine docs * update readmes * update readme * fix props interfaces and test in TS app * Update components.tsx * button up some things * change package name... * include readme in pkg dist * use published package
This commit is contained in:
Brandon Lee Kitajchuk authored and GitHub committed
1 parent
e783a1d6a3
commit
e3cd0edeb6
61 files changed
+1613
-2112
No files matched your search
@@ -1,9 +1,10 @@
|
||||
import { nanoid } from 'nanoid';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import Link from 'next/link';
|
||||
|
||||
import { Button, useActiveNavi, rSlash } from './jambonz-ui';
|
||||
import { nanoid } from 'nanoid';
|
||||
import { Button, classNames } from 'jambonz-ui';
|
||||
|
||||
import { rSlash } from './utils';
|
||||
import { useActiveNavi } from './hooks';
|
||||
|
||||
function FooterItem({ obj }) {
|
||||
const activeNavi = useActiveNavi();
|
||||
@@ -42,7 +43,7 @@ export default function Footer({ siteData }) {
|
||||
</ul>
|
||||
</div>
|
||||
<div className="foot__support">
|
||||
<Button href={`mailto:${siteData.footer.email}?subject=Jambonz Support`} target="_blank" subStyle="light">
|
||||
<Button as={Link} href={`mailto:${siteData.footer.email}?subject=Jambonz Support`} target="_blank" subStyle="light">
|
||||
{siteData.footer.email}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
import { useRouter } from 'next/router';
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
|
||||
import { rSlash } from './utils';
|
||||
|
||||
|
||||
export function useActiveNavi() {
|
||||
const router = useRouter();
|
||||
const cleanPath = router.asPath.replace(rSlash, '').split('/')[0];
|
||||
return cleanPath;
|
||||
}
|
||||
|
||||
export function useMobileMedia() {
|
||||
const [mobile, setMobile] = useState(false);
|
||||
|
||||
const handleMedia = useCallback((e) => {
|
||||
setMobile(e.matches);
|
||||
}, [setMobile]);
|
||||
|
||||
useEffect(() => {
|
||||
const str = window.getComputedStyle(document.documentElement);
|
||||
const qry = str.getPropertyValue('--mobile-media');
|
||||
const mql = window.matchMedia(`(max-width: ${qry})`);
|
||||
|
||||
mql.addEventListener('change', handleMedia);
|
||||
|
||||
setMobile(mql.matches);
|
||||
|
||||
return function cleanup() {
|
||||
mql.removeEventListener('change', handleMedia);
|
||||
};
|
||||
}, [handleMedia, setMobile]);
|
||||
|
||||
return mobile;
|
||||
}
|
||||
@@ -1,4 +1,3 @@
|
||||
// Icons dictionary of just what we're using
|
||||
import {
|
||||
X,
|
||||
Lock,
|
||||
|
||||
@@ -1,220 +0,0 @@
|
||||
import classNames from 'classnames';
|
||||
import { nanoid } from 'nanoid';
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import Icons from './icons';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router';
|
||||
|
||||
export const rSlash = /^\/|\/$/g;
|
||||
|
||||
// Normalize how we work with the subtext as an array[]
|
||||
export function normalizeSubtext(subtext) {
|
||||
if (!Array.isArray(subtext)) {
|
||||
subtext = [subtext];
|
||||
}
|
||||
|
||||
return subtext;
|
||||
}
|
||||
|
||||
// Simple method to normalize string as slug
|
||||
export function normalizeSlug(key) {
|
||||
return String(key.toLowerCase()).split(' ').join('-');
|
||||
}
|
||||
|
||||
export function useActiveNavi() {
|
||||
const router = useRouter();
|
||||
const cleanPath = router.asPath.replace(rSlash, '').split('/')[0];
|
||||
return cleanPath;
|
||||
}
|
||||
|
||||
// Normalize for our mobile media query
|
||||
export function useMobileMedia() {
|
||||
const [mobile, setMobile] = useState(false);
|
||||
|
||||
const handleMedia = useCallback((e) => {
|
||||
setMobile(e.matches);
|
||||
}, [setMobile]);
|
||||
|
||||
useEffect(() => {
|
||||
const str = window.getComputedStyle(document.documentElement);
|
||||
const qry = str.getPropertyValue('--mobile-media');
|
||||
const mql = window.matchMedia(`(max-width: ${qry})`);
|
||||
|
||||
mql.addEventListener('change', handleMedia);
|
||||
|
||||
setMobile(mql.matches);
|
||||
|
||||
return function cleanup() {
|
||||
mql.removeEventListener('change', handleMedia);
|
||||
};
|
||||
}, [handleMedia, setMobile]);
|
||||
|
||||
return mobile;
|
||||
}
|
||||
|
||||
export function H1({ children, ...rest }) {
|
||||
return <h1 {...rest}>{children}</h1>;
|
||||
}
|
||||
|
||||
export function H2({ children, ...rest }) {
|
||||
return <h2 {...rest}>{children}</h2>;
|
||||
}
|
||||
|
||||
export function H3({ children, ...rest }) {
|
||||
return <h3 {...rest}>{children}</h3>;
|
||||
}
|
||||
|
||||
export function H4({ children, ...rest }) {
|
||||
return <h4 {...rest}>{children}</h4>;
|
||||
}
|
||||
|
||||
export function H5({ children, ...rest }) {
|
||||
return <h5 {...rest}>{children}</h5>;
|
||||
}
|
||||
|
||||
export function H6({ children, ...rest }) {
|
||||
return <h6 {...rest}>{children}</h6>;
|
||||
}
|
||||
|
||||
export function P({ children, ...rest }) {
|
||||
return <p {...rest}>{children}</p>;
|
||||
}
|
||||
|
||||
export function M({ children }) {
|
||||
return <div className="m">{children}</div>;
|
||||
}
|
||||
|
||||
export function MS({ children }) {
|
||||
return <div className="ms">{children}</div>;
|
||||
}
|
||||
|
||||
export function MXS({ children }) {
|
||||
return <div className="mxs">{children}</div>;
|
||||
}
|
||||
|
||||
export function Latest({ data }) {
|
||||
const classes = {
|
||||
'latest': true,
|
||||
[`latest--${data.label}`]: true,
|
||||
'pad': true,
|
||||
'bg--pink': true,
|
||||
};
|
||||
|
||||
return (
|
||||
<section className={classNames(classes)}>
|
||||
<div className="wrap latest__wrap">
|
||||
<div className="latest__headline">
|
||||
<H2>{data.headline}</H2>
|
||||
</div>
|
||||
<div className="latest__subtext">
|
||||
<H3 className="h5">
|
||||
{/* Use dangerouslySetInnerHTML to render inline links from YAML data */}
|
||||
{normalizeSubtext(data.subtext).map((subtext) => {
|
||||
return <div key={nanoid()} dangerouslySetInnerHTML={{ __html: subtext }} />;
|
||||
})}
|
||||
</H3>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function Hero({ data = {}, subStyle, altStyle, children }) {
|
||||
const classes = {
|
||||
'hero': true,
|
||||
'pad': true,
|
||||
};
|
||||
|
||||
if (subStyle) {
|
||||
classes[`hero--${subStyle}`] = true;
|
||||
}
|
||||
|
||||
if (altStyle) {
|
||||
classes[`hero--${altStyle}`] = true;
|
||||
}
|
||||
|
||||
return (
|
||||
<section className={classNames(classes)}>
|
||||
<div className="wrap hero__wrap">
|
||||
{data.headline && (
|
||||
<div className="hero__headline">
|
||||
<H1>{data.headline}</H1>
|
||||
</div>
|
||||
)}
|
||||
{data.subtext && (
|
||||
<div className="hero__subtext">
|
||||
<H2 className="h5">
|
||||
{normalizeSubtext(data.subtext).map((subtext) => {
|
||||
return <div key={nanoid()}>{subtext}</div>;
|
||||
})}
|
||||
</H2>
|
||||
</div>
|
||||
)}
|
||||
{data.cta && (
|
||||
<div className="hero__cta">
|
||||
<Button href={data.url}>{data.cta}</Button>
|
||||
</div>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// Extra {props} get passed to the <a> element
|
||||
export function Button({ children, href, mainStyle = 'fill', subStyle = null, ...props }) {
|
||||
const classes = {
|
||||
'btn': true,
|
||||
[`btn--${mainStyle}`]: true,
|
||||
};
|
||||
|
||||
if (subStyle) {
|
||||
classes[`btn--${mainStyle}--${subStyle}`] = true;
|
||||
}
|
||||
|
||||
return (
|
||||
<Link href={href}>
|
||||
<a {...props} className={classNames(classes)}>{children}</a>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
// Extra {props} get passed to the feather Component
|
||||
// See react-feather for all 286 icons available
|
||||
// https://github.com/feathericons/react-feather
|
||||
export function Icon({ name, mainStyle = 'inline', subStyle = null, ...props }) {
|
||||
const Component = Icons[name];
|
||||
const classes = {
|
||||
'icon': true,
|
||||
[`icon--${mainStyle}`]: true,
|
||||
};
|
||||
|
||||
if (subStyle) {
|
||||
classes[`icon--${mainStyle}--${subStyle}`] = true;
|
||||
}
|
||||
|
||||
if (!Component) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Stylized icon
|
||||
if (mainStyle !== 'inline') {
|
||||
return (
|
||||
<div className={classNames(classes)}>
|
||||
<Component {...props} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Inline icon
|
||||
return <Component {...props} />;
|
||||
}
|
||||
|
||||
export function TextLayout({ data, name }) {
|
||||
return (
|
||||
<div className={`text-layout text-layout--${name}`}>
|
||||
<div className="text-layout__wrap" dangerouslySetInnerHTML={{ __html: data.contentHtml }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,10 +1,14 @@
|
||||
import Head from 'next/head';
|
||||
import Link from 'next/link';
|
||||
|
||||
import { nanoid } from 'nanoid';
|
||||
import { classNames, H1, H2, H3, Button } from 'jambonz-ui';
|
||||
|
||||
import Navi from './navi';
|
||||
import Footer from './footer';
|
||||
import { normalizeSubtext } from './utils';
|
||||
|
||||
function Banner({ data }) {
|
||||
export function Banner({ data }) {
|
||||
return (
|
||||
<div className="banner">
|
||||
<Link href={data.link}>
|
||||
@@ -14,6 +18,83 @@ function Banner({ data }) {
|
||||
);
|
||||
}
|
||||
|
||||
export function Latest({ data }) {
|
||||
const classes = {
|
||||
'latest': true,
|
||||
[`latest--${data.label}`]: true,
|
||||
'pad': true,
|
||||
'bg--pink': true,
|
||||
};
|
||||
|
||||
return (
|
||||
<section className={classNames(classes)}>
|
||||
<div className="wrap latest__wrap">
|
||||
<div className="latest__headline">
|
||||
<H2>{data.headline}</H2>
|
||||
</div>
|
||||
<div className="latest__subtext">
|
||||
<H3 className="h5">
|
||||
{/* Use dangerouslySetInnerHTML to render inline links from YAML data */}
|
||||
{normalizeSubtext(data.subtext).map((subtext) => {
|
||||
return <div key={nanoid()} dangerouslySetInnerHTML={{ __html: subtext }} />;
|
||||
})}
|
||||
</H3>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function Hero({ data = {}, subStyle, altStyle, children }) {
|
||||
const classes = {
|
||||
'hero': true,
|
||||
'pad': true,
|
||||
};
|
||||
|
||||
if (subStyle) {
|
||||
classes[`hero--${subStyle}`] = true;
|
||||
}
|
||||
|
||||
if (altStyle) {
|
||||
classes[`hero--${altStyle}`] = true;
|
||||
}
|
||||
|
||||
return (
|
||||
<section className={classNames(classes)}>
|
||||
<div className="wrap hero__wrap">
|
||||
{data.headline && (
|
||||
<div className="hero__headline">
|
||||
<H1>{data.headline}</H1>
|
||||
</div>
|
||||
)}
|
||||
{data.subtext && (
|
||||
<div className="hero__subtext">
|
||||
<H2 className="h5">
|
||||
{normalizeSubtext(data.subtext).map((subtext) => {
|
||||
return <div key={nanoid()}>{subtext}</div>;
|
||||
})}
|
||||
</H2>
|
||||
</div>
|
||||
)}
|
||||
{data.cta && (
|
||||
<div className="hero__cta">
|
||||
<Button as={Link} href={data.url}>{data.cta}</Button>
|
||||
</div>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function TextLayout({ data, name }) {
|
||||
return (
|
||||
<div className={`text-layout text-layout--${name}`}>
|
||||
<div className="text-layout__wrap" dangerouslySetInnerHTML={{ __html: data.contentHtml }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Layout({ children, siteData, title = 'jambonz' }) {
|
||||
return (
|
||||
<>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
import { nanoid } from 'nanoid';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router';
|
||||
|
||||
import { Icon, TextLayout } from './jambonz-ui';
|
||||
import { useState } from 'react';
|
||||
import { nanoid } from 'nanoid';
|
||||
import { classNames, Icon } from 'jambonz-ui';
|
||||
|
||||
import { Icons } from './icons';
|
||||
import { TextLayout } from './layout';
|
||||
|
||||
function MarkdownSidebar({scope, data}) {
|
||||
const router = useRouter();
|
||||
@@ -51,7 +51,7 @@ function MarkdownSidebar({scope, data}) {
|
||||
return (
|
||||
<li key={nanoid()} className="markdown__item">
|
||||
<div className="m markdown__label" onClick={() => handleToggle(item.path)}>
|
||||
{isActiveToggle ? <Icon name="ChevronDown" /> : <Icon name="ChevronRight" />}
|
||||
{isActiveToggle ? <Icons.ChevronDown /> : <Icons.ChevronRight />}
|
||||
<strong>{item.title}</strong>
|
||||
</div>
|
||||
<ul className={classNames(subClasses)}>
|
||||
|
||||
+16
-10
@@ -1,10 +1,12 @@
|
||||
import { useState } from 'react';
|
||||
import { nanoid } from 'nanoid';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import Link from 'next/link';
|
||||
|
||||
import { Button, Icon, useMobileMedia, useActiveNavi, rSlash } from './jambonz-ui';
|
||||
import { nanoid } from 'nanoid';
|
||||
import { useState } from 'react';
|
||||
import { Button, Icon, classNames } from 'jambonz-ui';
|
||||
|
||||
import { Icons } from './icons';
|
||||
import { rSlash } from './utils';
|
||||
import { useMobileMedia, useActiveNavi } from './hooks';
|
||||
|
||||
function NaviItem({obj}) {
|
||||
const activeNavi = useActiveNavi();
|
||||
@@ -37,12 +39,14 @@ function NaviMobile({ active, handler, siteData }) {
|
||||
<div className={classNames(classes)}>
|
||||
<div className="navi__mobile__head">
|
||||
<div className="navi__mobile__login">
|
||||
<Button href={siteData.navi.login.link} mainStyle="login" subStyle="white" onClick={handler}>
|
||||
<Button as={Link} href={siteData.navi.login.link} mainStyle="login" subStyle="white" onClick={handler}>
|
||||
{siteData.navi.login.label}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="navi__mobile__icon" onClick={handler}>
|
||||
<Icon mainStyle="fill" subStyle="white" name="X" />
|
||||
<Icon mainStyle="fill" subStyle="white">
|
||||
<Icons.X />
|
||||
</Icon>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="navi__mobile__links">
|
||||
@@ -57,7 +61,7 @@ function NaviMobile({ active, handler, siteData }) {
|
||||
})}
|
||||
</ul>
|
||||
<div className="navi__mobile__support">
|
||||
<Button href={`mailto:${siteData.footer.email}`} target="_blank" subStyle="light">
|
||||
<Button as={Link} href={`mailto:${siteData.footer.email}`} target="_blank" subStyle="light">
|
||||
{siteData.footer.email}
|
||||
</Button>
|
||||
</div>
|
||||
@@ -97,10 +101,12 @@ export default function Navi({ siteData }) {
|
||||
})}
|
||||
</ul>
|
||||
<div className="navi__icon" onClick={handleNavi}>
|
||||
<Icon mainStyle="fill" name="Menu" />
|
||||
<Icon mainStyle="fill">
|
||||
<Icons.Menu />
|
||||
</Icon>
|
||||
</div>
|
||||
<div className="navi__login">
|
||||
<Button href={siteData.navi.login.link} mainStyle="login">
|
||||
<Button as={Link} href={siteData.navi.login.link} mainStyle="login">
|
||||
{siteData.navi.login.label}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
export const rSlash = /^\/|\/$/g;
|
||||
|
||||
// Normalize how we work with the subtext as an array[]
|
||||
export function normalizeSubtext(subtext) {
|
||||
if (!Array.isArray(subtext)) {
|
||||
subtext = [subtext];
|
||||
}
|
||||
|
||||
return subtext;
|
||||
}
|
||||
|
||||
// Simple method to normalize string as slug
|
||||
export function normalizeSlug(key) {
|
||||
return String(key.toLowerCase()).split(' ').join('-');
|
||||
}
|
||||
+20
-5
@@ -1,3 +1,9 @@
|
||||
/**
|
||||
* These utils are for Next.js Static Generation (SSG) at build time
|
||||
* They are used with Next.js `getStaticProps` and `getStaticPaths`
|
||||
* https://nextjs.org/docs/basic-features/pages#static-generation-recommended
|
||||
*/
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const yamljs = require('yamljs');
|
||||
@@ -8,6 +14,18 @@ const remarkGfm = require('remark-gfm');
|
||||
const dataDir = path.join(process.cwd(), 'data');
|
||||
const markdownDir = path.join(process.cwd(), 'markdown');
|
||||
|
||||
function _slugify(str) {
|
||||
return str.toString().toLowerCase().trim()
|
||||
// Replace & with "and"
|
||||
.replace( /&/g, "-and-" )
|
||||
|
||||
// Replace spaces, non-word characters and dashes with a single dash (-)
|
||||
.replace( /[\s\W-]+/g, "-" )
|
||||
|
||||
// Replace leading trailing slashes with an empty string - nothing
|
||||
.replace( /^[-]+|[-]+$/g, "" );
|
||||
}
|
||||
|
||||
/**
|
||||
* For accessibility issues we can "fix" our limitations with markdown and remark-html
|
||||
* The ideal solution would be to comb over every markdown file and fix our headings...
|
||||
@@ -17,11 +35,8 @@ const markdownDir = path.join(process.cwd(), 'markdown');
|
||||
*/
|
||||
function _normalizeHTML(html) {
|
||||
return html
|
||||
.replace(/<(h[1-6])>/g, (m, p1) => {
|
||||
return `<div class="${p1}">`;
|
||||
})
|
||||
.replace(/<\/(h[1-6])>/g, (m, p1) => {
|
||||
return '</div>';
|
||||
.replace(/<(h[1-6])>(.*?)(<\/(h[1-6])>)/g, (m, p1, p2, p3) => {
|
||||
return `<div class="${p1}" id="${p1}-${_slugify(p2)}">${p2}</div>`;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
.bg--jambonz {
|
||||
background-color: $jambonz;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.bg--black {
|
||||
background-color: $black;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.bg--charcoal {
|
||||
background-color: $charcoal;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.bg--grey {
|
||||
background-color: $grey;
|
||||
}
|
||||
|
||||
.bg--pink {
|
||||
background-color: $pink;
|
||||
}
|
||||
|
||||
.bg--blue {
|
||||
background-color: $blue;
|
||||
}
|
||||
|
||||
.bg--purple {
|
||||
background-color: $purple;
|
||||
}
|
||||
|
||||
.bg--teal {
|
||||
background-color: $teal;
|
||||
}
|
||||
@@ -1,187 +0,0 @@
|
||||
.btn {
|
||||
font-size: $m-size;
|
||||
line-height: 1;
|
||||
padding: 23px 64px 21px;
|
||||
background-color: $jambonz;
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
border-radius: 30px;
|
||||
display: inline-block;
|
||||
transition: background-color $base-dur $base-ease,
|
||||
border-color $base-dur $base-ease,
|
||||
color $base-dur $base-ease;
|
||||
@include font-bold();
|
||||
|
||||
&:hover {
|
||||
background-color: mix($pink, $jambonz, $mix-amount);
|
||||
}
|
||||
|
||||
@media (max-width: $width-tablet-2) {
|
||||
font-size: $ms-size;
|
||||
}
|
||||
|
||||
// @note: Consideration on stopping type reduction here
|
||||
// @media (max-width: $width-mobile) {
|
||||
// font-size: $mxs-size;
|
||||
// }
|
||||
|
||||
&--login {
|
||||
font-family: $font-medium;
|
||||
font-size: $ms-size;
|
||||
background-color: transparent;
|
||||
border: 2px solid $jambonz;
|
||||
color: $jambonz;
|
||||
padding: 10px 26px;
|
||||
|
||||
&:hover {
|
||||
background-color: $jambonz;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&--white {
|
||||
color: $white;
|
||||
border-color: $white;
|
||||
|
||||
&:hover {
|
||||
background-color: $white;
|
||||
color: $charcoal;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $width-tablet-2) {
|
||||
font-size: $mxs-size;
|
||||
}
|
||||
}
|
||||
|
||||
&--fill {
|
||||
&--dark {
|
||||
background-color: $charcoal;
|
||||
|
||||
&:hover {
|
||||
background-color: mix($white, $charcoal, $mix-amount);
|
||||
}
|
||||
}
|
||||
|
||||
&--purple {
|
||||
background-color: $purple;
|
||||
|
||||
&:hover {
|
||||
background-color: mix($white, $purple, $mix-amount);
|
||||
}
|
||||
}
|
||||
|
||||
&--teal {
|
||||
background-color: $teal;
|
||||
|
||||
&:hover {
|
||||
background-color: mix($white, $teal, $mix-amount);
|
||||
}
|
||||
}
|
||||
|
||||
&--blue {
|
||||
background-color: $blue;
|
||||
|
||||
&:hover {
|
||||
background-color: mix($white, $blue, $mix-amount);
|
||||
}
|
||||
}
|
||||
|
||||
&--light {
|
||||
background-color: $white;
|
||||
color: $jambonz;
|
||||
|
||||
&:hover {
|
||||
background-color: mix($grey-light, $white, $mix-amount);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--pill {
|
||||
font-family: $font-regular;
|
||||
background-color: transparent;
|
||||
border: 2px solid $charcoal;
|
||||
color: $charcoal;
|
||||
padding: 18px 32px 17px;
|
||||
|
||||
&:hover {
|
||||
background-color: $charcoal;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
@media (max-width: $width-mobile) {
|
||||
padding: 15px 32px 16px;
|
||||
}
|
||||
|
||||
svg, span {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-right: 16px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
||||
@media (max-width: $width-tablet-2) {
|
||||
margin-right: 12px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: $width-mobile) {
|
||||
margin-right: 10px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&--jambonz {
|
||||
border-color: $jambonz;
|
||||
color: $jambonz;
|
||||
|
||||
&:hover {
|
||||
background-color: $jambonz;
|
||||
color: $white;
|
||||
|
||||
svg {
|
||||
stroke: $white;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
stroke: $jambonz;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn:not(.btn--pill, .btn--login) {
|
||||
@media (max-width: $width-tablet-2) {
|
||||
padding: 18px 46px;
|
||||
}
|
||||
}
|
||||
|
||||
.btns {
|
||||
margin: 0 -2.2222222222vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@media (max-width: $width-mobile) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 0 2.2222222222vw;
|
||||
|
||||
&:not(:first-child) {
|
||||
@media (max-width: $width-mobile) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $width-mobile) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
@font-face {
|
||||
font-family: $font-regular;
|
||||
src: url('/fonts/objectivity-regular-webfont.woff2') format('woff2'),
|
||||
url('/fonts/objectivity-regular-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: $font-regular-italic;
|
||||
src: url('/fonts/objectivity-regularslanted-webfont.woff2') format('woff2'),
|
||||
url('/fonts/objectivity-regularslanted-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: $font-medium;
|
||||
src: url('/fonts/objectivity-medium-webfont.woff2') format('woff2'),
|
||||
url('/fonts/objectivity-medium-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: $font-medium-italic;
|
||||
src: url('/fonts/objectivity-mediumslanted-webfont.woff2') format('woff2'),
|
||||
url('/fonts/objectivity-mediumslanted-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: $font-bold;
|
||||
src: url('/fonts/objectivity-bold-webfont.woff2') format('woff2'),
|
||||
url('/fonts/objectivity-bold-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: $font-bold-italic;
|
||||
src: url('/fonts/objectivity-boldslanted-webfont.woff2') format('woff2'),
|
||||
url('/fonts/objectivity-boldslanted-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@@ -1,125 +0,0 @@
|
||||
svg {
|
||||
transition: stroke $base-dur $base-ease;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
background-color: $jambonz;
|
||||
width: $icon-size-1;
|
||||
height: $icon-size-1;
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: $width-mobile) {
|
||||
width: $icon-size-2;
|
||||
height: $icon-size-2;
|
||||
}
|
||||
|
||||
svg {
|
||||
stroke: $white;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
|
||||
@media (max-width: $width-mobile) {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&--pill {
|
||||
background-color: transparent;
|
||||
border: 2px solid $jambonz;
|
||||
|
||||
svg {
|
||||
stroke: $jambonz;
|
||||
}
|
||||
|
||||
&--dark {
|
||||
border: 2px solid $charcoal;
|
||||
|
||||
svg {
|
||||
stroke: $charcoal;
|
||||
}
|
||||
}
|
||||
|
||||
&--blue {
|
||||
border: 2px solid $blue;
|
||||
|
||||
svg {
|
||||
stroke: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
&--teal {
|
||||
border: 2px solid $teal;
|
||||
|
||||
svg {
|
||||
stroke: $teal;
|
||||
}
|
||||
}
|
||||
|
||||
&--purple {
|
||||
border: 2px solid $purple;
|
||||
|
||||
svg {
|
||||
stroke: $purple;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--fill {
|
||||
&--purple {
|
||||
background-color: $purple;
|
||||
}
|
||||
|
||||
&--blue {
|
||||
background-color: $blue;
|
||||
}
|
||||
|
||||
&--teal {
|
||||
background-color: $teal;
|
||||
}
|
||||
|
||||
&--dark {
|
||||
background-color: $charcoal;
|
||||
}
|
||||
|
||||
&--white {
|
||||
background-color: $white;
|
||||
|
||||
svg {
|
||||
stroke: $charcoal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icons {
|
||||
margin: 0 -16px;
|
||||
|
||||
@media (max-width: $width-mobile) {
|
||||
margin: 0 -8px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin: 0 16px;
|
||||
|
||||
@media (max-width: $width-mobile) {
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&--set {
|
||||
.icon {
|
||||
margin: 16px;
|
||||
|
||||
@media (max-width: $width-mobile) {
|
||||
margin: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,36 +1,3 @@
|
||||
/******************************************************************************
|
||||
* Main container wrap
|
||||
*******************************************************************************/
|
||||
.wrap {
|
||||
max-width: calc(#{$width-max} + #{$width-padding} * 2);
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding-left: $width-padding;
|
||||
padding-right: $width-padding;
|
||||
}
|
||||
|
||||
.pad {
|
||||
padding-top: 96px;
|
||||
padding-bottom: 96px;
|
||||
|
||||
@media (max-width: $width-tablet-1) {
|
||||
padding-top: 64px;
|
||||
padding-bottom: 64px;
|
||||
}
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.pad-b {
|
||||
padding-bottom: 96px;
|
||||
|
||||
@media (max-width: $width-tablet-1) {
|
||||
padding-bottom: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
/******************************************************************************
|
||||
* Above the fold
|
||||
*******************************************************************************/
|
||||
|
||||
@@ -1,182 +1,3 @@
|
||||
/******************************************************************************
|
||||
* Mixins
|
||||
*******************************************************************************/
|
||||
@mixin font-bold() {
|
||||
font-family: $font-bold;
|
||||
font-weight: normal;
|
||||
|
||||
em {
|
||||
font-family: $font-bold-italic;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin font-medium() {
|
||||
font-family: $font-medium;
|
||||
|
||||
em {
|
||||
font-family: $font-medium-italic;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin h1() {
|
||||
font-size: $h1-size;
|
||||
line-height: 1.33;
|
||||
letter-spacing: -0.06px;
|
||||
@include font-bold();
|
||||
|
||||
@media (max-width: $width-tablet-1) {
|
||||
font-size: $h2-size;
|
||||
}
|
||||
|
||||
@media (max-width: $width-tablet-2) {
|
||||
font-size: $h3-size;
|
||||
}
|
||||
|
||||
@media (max-width: $width-mobile) {
|
||||
font-size: $h4-size;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin h2() {
|
||||
font-size: $h2-size;
|
||||
line-height: 1.35;
|
||||
letter-spacing: -0.05px;
|
||||
@include font-bold();
|
||||
|
||||
@media (max-width: $width-tablet-1) {
|
||||
font-size: $h3-size;
|
||||
}
|
||||
|
||||
@media (max-width: $width-tablet-2) {
|
||||
font-size: $h4-size;
|
||||
}
|
||||
|
||||
@media (max-width: $width-mobile) {
|
||||
font-size: $h5-size;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin h3() {
|
||||
font-size: $h3-size;
|
||||
line-height: 1.33;
|
||||
letter-spacing: -0.05px;
|
||||
@include font-bold();
|
||||
|
||||
@media (max-width: $width-tablet-1) {
|
||||
font-size: $h4-size;
|
||||
}
|
||||
|
||||
@media (max-width: $width-tablet-2) {
|
||||
font-size: $h5-size;
|
||||
}
|
||||
|
||||
@media (max-width: $width-mobile) {
|
||||
font-size: $h6-size;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin h4 () {
|
||||
font-size: $h4-size;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.04px;
|
||||
@include font-medium();
|
||||
|
||||
@media (max-width: $width-tablet-1) {
|
||||
font-size: $h5-size;
|
||||
}
|
||||
|
||||
@media (max-width: $width-tablet-2) {
|
||||
font-size: $h6-size;
|
||||
}
|
||||
|
||||
@media (max-width: $width-mobile) {
|
||||
font-size: $p-size;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin h5() {
|
||||
font-size: $h5-size;
|
||||
line-height: 1.67;
|
||||
letter-spacing: -0.03px;
|
||||
@include font-medium();
|
||||
|
||||
span {
|
||||
color: $jambonz;
|
||||
}
|
||||
|
||||
@media (max-width: $width-tablet-1) {
|
||||
font-size: $h6-size;
|
||||
}
|
||||
|
||||
@media (max-width: $width-tablet-2) {
|
||||
font-size: $p-size;
|
||||
}
|
||||
|
||||
// @note: Consideration on stopping type reduction here
|
||||
// @media (max-width: $width-mobile) {
|
||||
// font-size: $m-size;
|
||||
// }
|
||||
}
|
||||
|
||||
@mixin h6() {
|
||||
font-size: $h6-size;
|
||||
line-height: 1.8;
|
||||
letter-spacing: -0.03px;
|
||||
@include font-medium();
|
||||
|
||||
@media (max-width: $width-tablet-1) {
|
||||
font-size: $p-size;
|
||||
}
|
||||
|
||||
@media (max-width: $width-tablet-2) {
|
||||
font-size: $m-size;
|
||||
}
|
||||
|
||||
// @note: Consideration on stopping type reduction here
|
||||
// @media (max-width: $width-mobile) {
|
||||
// font-size: $ms-size;
|
||||
// }
|
||||
}
|
||||
|
||||
@mixin p() {
|
||||
font-size: $p-size;
|
||||
line-height: 1.9;
|
||||
|
||||
@media (max-width: $width-tablet-2) {
|
||||
font-size: $m-size;
|
||||
}
|
||||
|
||||
// @note: Consideration on stopping type reduction here
|
||||
@media (max-width: $width-mobile) {
|
||||
font-size: $ms-size;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin m() {
|
||||
font-size: $m-size;
|
||||
line-height: 1.9;
|
||||
|
||||
// @note: Consideration on stopping type reduction here?
|
||||
@media (max-width: $width-tablet-1) {
|
||||
font-size: $ms-size;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ms () {
|
||||
font-size: $ms-size;
|
||||
line-height: 2;
|
||||
|
||||
// @note: Consideration on stopping type reduction here
|
||||
// @media (max-width: $width-tablet-1) {
|
||||
// font-size: $mxs-size;
|
||||
// }
|
||||
}
|
||||
|
||||
@mixin mxs() {
|
||||
font-size: $mxs-size;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
@mixin cta() {
|
||||
margin-top: 96px;
|
||||
|
||||
|
||||
@@ -1,82 +0,0 @@
|
||||
/******************************************************************************
|
||||
* CSS Reset
|
||||
* Add / Remove / Tweak this for your project.
|
||||
* The philosophy behind the CSS Reset is personal application customization.
|
||||
*
|
||||
* This approach is preferred over options like Normalize, which make way
|
||||
* too many assumptions and apply styles on top of the basic property resets.
|
||||
*
|
||||
* Though this CSS Reset is very basic and has not been updated in quite some
|
||||
* time, since 2011, it serves as a great starting point.
|
||||
*
|
||||
* Know what you are resetting and have piloted conrtol of your web app ;-)
|
||||
*
|
||||
*
|
||||
* http://meyerweb.com/eric/tools/css/reset/
|
||||
* v2.0 | 20110126
|
||||
* License: none (public domain)
|
||||
*******************************************************************************/
|
||||
/**
|
||||
* Intentionally removed elements
|
||||
* sup
|
||||
*/
|
||||
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
html {
|
||||
line-height: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
caption, th, td {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
q, blockquote {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
q:before, q:after, blockquote:before, blockquote:after {
|
||||
content: "";
|
||||
content: none;
|
||||
}
|
||||
|
||||
a img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
@@ -96,6 +96,7 @@
|
||||
code:not([class*="language-"]) {
|
||||
font-family: $font-mono;
|
||||
font-size: 13px;
|
||||
color: $jambonz;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,125 +0,0 @@
|
||||
html,
|
||||
body {
|
||||
font-family: $font-regular;
|
||||
letter-spacing: -0.02px;
|
||||
color: $charcoal;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $jambonz;
|
||||
text-decoration: none;
|
||||
transition: color $base-dur $base-ease;
|
||||
}
|
||||
|
||||
/*
|
||||
* Buttons have their own inline svg/span styles
|
||||
* This className lets us inline a flat icon with text
|
||||
*/
|
||||
.i {
|
||||
svg, span, strong {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
svg:last-child {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
svg:first-child {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Using React Feather
|
||||
* https://github.com/feathericons/react-feather
|
||||
* Default size is 24x24 for SVG icons
|
||||
* Sizing can be passed in component JS as in:
|
||||
* <Icon size={18} name="GitHub" />
|
||||
* However the inline, in-text SVG icons need to be
|
||||
* responsive with the text scaling so some CSS
|
||||
* can achieve the desired result in this case:
|
||||
* e.g. <span>text</span><Icon name="ExternalLink" />
|
||||
*
|
||||
*/
|
||||
svg {
|
||||
@media (max-width: $width-tablet-1) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: $width-tablet-2) {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
// @note: Consideration on stopping type reduction here
|
||||
// @media (max-width: $width-mobile) {
|
||||
// width: 16px;
|
||||
// height: 16px;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
@include font-bold();
|
||||
}
|
||||
|
||||
em {
|
||||
font-family: $font-regular-italic;
|
||||
}
|
||||
|
||||
.h1, h1 {
|
||||
@include h1();
|
||||
}
|
||||
|
||||
.h2, h2 {
|
||||
@include h2();
|
||||
}
|
||||
|
||||
.h3, h3 {
|
||||
@include h3();
|
||||
}
|
||||
|
||||
.h4, h4 {
|
||||
@include h4();
|
||||
}
|
||||
|
||||
.h5, h5 {
|
||||
@include h5();
|
||||
}
|
||||
|
||||
.h6, h6 {
|
||||
@include h6();
|
||||
}
|
||||
|
||||
.p, p {
|
||||
@include p();
|
||||
}
|
||||
|
||||
.m {
|
||||
@include m();
|
||||
}
|
||||
|
||||
.ms {
|
||||
@include ms();
|
||||
}
|
||||
|
||||
.mxs {
|
||||
@include mxs();
|
||||
}
|
||||
|
||||
.med {
|
||||
@include font-medium();
|
||||
}
|
||||
|
||||
.color--teal {
|
||||
color: $teal;
|
||||
}
|
||||
|
||||
.color--blue {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
.color--purple {
|
||||
color: $purple;
|
||||
}
|
||||
+2
-63
@@ -1,6 +1,6 @@
|
||||
/******************************************************************************
|
||||
* Special mobile layout width
|
||||
* Utilized in src/components/jambonz-ui: useMobileMedia
|
||||
* Utilized in src/components/hooks: useMobileMedia
|
||||
*******************************************************************************/
|
||||
:root {
|
||||
--mobile-media: 896px;
|
||||
@@ -8,69 +8,8 @@
|
||||
|
||||
$mobile-width: 896px;
|
||||
|
||||
/******************************************************************************
|
||||
* Colors
|
||||
*******************************************************************************/
|
||||
$black: #000;
|
||||
$white: #fff;
|
||||
$charcoal: #231f20;
|
||||
$grey: #f8f8f8;
|
||||
$grey-light: mix($white, $charcoal, 75%);
|
||||
$jambonz: #da1c5c;
|
||||
$pink: #fff3f6;
|
||||
$purple: #9662b2;
|
||||
$teal: #30beb0;
|
||||
$blue: #006dff;
|
||||
$green: #008a1a;
|
||||
$red: #e10e22;
|
||||
$mix-amount: 25%;
|
||||
|
||||
/******************************************************************************
|
||||
* Font family
|
||||
*******************************************************************************/
|
||||
$font-regular: 'objectivityregular';
|
||||
$font-regular-italic: 'objectivityregular_slanted';
|
||||
$font-medium: 'objectivitymedium';
|
||||
$font-medium-italic: 'objectivitymedium_slanted';
|
||||
$font-bold: 'objectivitybold';
|
||||
$font-bold-italic: 'objectivitybold_slanted';
|
||||
$font-mono: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
|
||||
/******************************************************************************
|
||||
* Font sizes
|
||||
*******************************************************************************/
|
||||
$h1-size: 3rem;
|
||||
$h2-size: 2.5rem;
|
||||
$h3-size: 2.25rem;
|
||||
$h4-size: 2rem;
|
||||
$h5-size: 1.5rem;
|
||||
$h6-size: 1.25rem;
|
||||
$p-size: 1.125rem;
|
||||
$m-size: 1rem;
|
||||
$ms-size: 0.875rem;
|
||||
$mxs-size: 0.75rem;
|
||||
|
||||
/******************************************************************************
|
||||
* Icon sizes
|
||||
*******************************************************************************/
|
||||
$icon-size-1: $h1-size;
|
||||
$icon-size-2: $h2-size;
|
||||
$icon-size-3: $h3-size;
|
||||
|
||||
/******************************************************************************
|
||||
* Sizes
|
||||
*******************************************************************************/
|
||||
$navi-index: 999;
|
||||
$navi-height: 76px;
|
||||
$width-max: 1440px;
|
||||
$width-tablet-1: 1024px;
|
||||
$width-tablet-2: 768px;
|
||||
$width-mobile: 640px;
|
||||
$width-small: 480px;
|
||||
$width-padding: 4.4444444444vw;
|
||||
|
||||
/******************************************************************************
|
||||
* Animation / transitions
|
||||
*******************************************************************************/
|
||||
$base-dur: 200ms;
|
||||
$base-ease: ease;
|
||||
$navi-height: 76px;
|
||||
+8
-33
@@ -1,39 +1,14 @@
|
||||
/******************************************************************************
|
||||
* Variables / Mixins
|
||||
* jambonz-ui
|
||||
*******************************************************************************/
|
||||
@import 'jambonz-ui/src/styles/index.scss';
|
||||
|
||||
/******************************************************************************
|
||||
* Local Vars / Mixins
|
||||
*******************************************************************************/
|
||||
@import 'vars.scss';
|
||||
@import 'mixins.scss';
|
||||
|
||||
/******************************************************************************
|
||||
* Reset
|
||||
*******************************************************************************/
|
||||
@import 'reset.scss';
|
||||
|
||||
/******************************************************************************
|
||||
* Fonts
|
||||
*******************************************************************************/
|
||||
@import 'fonts.scss';
|
||||
|
||||
/******************************************************************************
|
||||
* Typography
|
||||
*******************************************************************************/
|
||||
@import 'typography.scss';
|
||||
|
||||
/******************************************************************************
|
||||
* Buttons
|
||||
*******************************************************************************/
|
||||
@import 'buttons.scss';
|
||||
|
||||
/******************************************************************************
|
||||
* Icons
|
||||
*******************************************************************************/
|
||||
@import 'icons.scss';
|
||||
|
||||
/******************************************************************************
|
||||
* Backgrounds
|
||||
*******************************************************************************/
|
||||
@import 'backgrounds.scss';
|
||||
|
||||
/******************************************************************************
|
||||
* Layout
|
||||
*******************************************************************************/
|
||||
@@ -57,5 +32,5 @@
|
||||
@import 'pages/home.scss';
|
||||
@import 'pages/why.scss';
|
||||
@import 'pages/pricing.scss';
|
||||
@import 'pages/jambonz-ui.scss';
|
||||
@import 'pages/regions.scss'
|
||||
@import 'pages/regions.scss';
|
||||
@import 'pages/kit-of-parts.scss';
|
||||
@@ -1,46 +1,44 @@
|
||||
.jambonz-ui {
|
||||
.kit-of-parts {
|
||||
text-align: center;
|
||||
|
||||
.wrap-text {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
h1 {
|
||||
max-width: 1024px;
|
||||
}
|
||||
|
||||
|
||||
h2 {
|
||||
max-width: 950px;
|
||||
}
|
||||
|
||||
|
||||
h3 {
|
||||
max-width: 860px;
|
||||
}
|
||||
|
||||
|
||||
h4 {
|
||||
max-width: 875px;
|
||||
}
|
||||
|
||||
|
||||
h5 {
|
||||
max-width: 768px;
|
||||
}
|
||||
|
||||
|
||||
h6 {
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.m, .ms {
|
||||
|
||||
.m,
|
||||
.ms {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
|
||||
.mxs {
|
||||
max-width: 380px;
|
||||
}
|
||||
|
||||
|
||||
> div {
|
||||
margin: 0 auto;
|
||||
}
|
||||
Reference in new issue
Block a user