ben.carrasco/next-static-site
1
0
Fork 0
mirror of https://github.com/jambonz/next-static-site.git synced 2025-12-19 04:47:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

implement issue #40

Browse Source
This commit is contained in:
kitajchuk
2022-07-04 15:36:36 -07:00
parent ab623f5b07
commit 0511e0a7f4
22 changed files with 444 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
data/docs.yml
View File

@@ -111,22 +111,6 @@ navi:
-
path: nodejs-sdk
title: Introduction to the Node.js SDK
-
path: jambonz-ui
title: Jambonz UI
pages:
-
path: getting-started
title: Getting started
-
path: fonts-and-icons
title: Fonts and icons
-
path: styles
title: Styles
-
path: components
title: Components
-
path: release-notes
title: Release Notes
@@ -161,3 +145,19 @@ navi:
-
path: lead-dev
title: Lead Opensource Developer
-
path: jambonz-ui
title: Jambonz UI
pages:
-
path: getting-started
title: Getting started
-
path: fonts-and-icons
title: Fonts and icons
-
path: styles
title: Styles
-
path: components
title: Components

2
data/jambonz-ui.yml
View File

@@ -1 +1 @@
text: jambonz is a self-hosted, “bring your own everything” open source CPaaS platform, developed by the creator of the drachtio open source sip server.
text: jambonz is the communications platform that brings your ideas to life. So you can bring your best to your customers every day.

20
markdown/docs/jambonz-ui/components.md
View File

@@ -2,12 +2,14 @@
The UI library would not be complete without some atomic components for use in your jambonz apps. Currently there are components for normalized typography, iconography and buttons. As jambonz frontend development continues to mature new use cases will become viable candidates to incorporate into this UI kit—form elements being the most notable upcoming candidates. To see all the components in action, visually in one place you can go [here](/jambonz-ui/).
The component library requires that some JS peer dependencies are met in your jambonz app. The component library itself is also written in [TypeScript](https://www.typescriptlang.org/) so it supports jambonz apps also using TypeScript.
The component library itself is written in [TypeScript](https://www.typescriptlang.org/) so it supports jambonz apps also using TypeScript. More documentation on jambonz UI type definitions will be coming soon.
The component library requires that some JS peer dependencies are met in your jambonz app. These are likely the most common, however it's worth noting that you can also use the library with [preact](https://preactjs.com/). In fact, this site is a `Next.js` app using `preact/compat` in place of the `React` packages.
```json
"peerDependencies": {
"react": ">=18.2.0",
"react-dom": ">=18.2.0",
"react": ">=17.0.2",
"react-dom": ">=17.0.2",
"react-feather": ">=2.0.9"
}
```
@@ -50,8 +52,9 @@ function MyComponent() {
<Button
as={Link}
to="/someurl/"
subStyle="dark">
Some text
subStyle="dark"
>
Some text
</Button>
);
}
@@ -68,8 +71,9 @@ function MyComponent() {
<Button
as={Link}
href="/someurl/"
subStyle="dark">
Some text
subStyle="dark"
>
Some text
</Button>
);
}
@@ -112,7 +116,7 @@ export default Icons;
Then we can use these icons both `inline` and with the `Icon` component for stylized designer icons.
```jsx
import { Icons, Heart } from './my-icons';
import { Icons } from './my-icons';
import { Icon } from 'jambonz-ui';
function MyComponent() {

6
markdown/docs/jambonz-ui/getting-started.md
View File

@@ -8,9 +8,9 @@ A primary goal of the library is to have a small footprint. Current sizes:
| Output format | CSS size | JS size |
|---------------|----------|---------|
| Minified and Gzipped | `2 KB` | `614 bytes` |
| Minified | `10 KB` | `2 KB` |
| Compiled | `14 KB` | `4 KB` |
| Minified and Gzipped | `2 KB` | `631 bytes` |
| Minified | `11 KB` | `2 KB` |
| Compiled | `15 KB` | `4 KB` |
##### Installation

18
markdown/docs/jambonz-ui/styles.md
View File

@@ -1,6 +1,6 @@
# Styles
Jambonz UI styles are provided a couple of ways. The raw source for the styles is [SASS]() so if you're also using SASS you have the beneficial ability to directly import either all the UI SASS or just the variables and mixins for use extending the UI kit in your jambonz app. If you import all the SASS you don't need to use the raw CSS anywhere in your app. The imported SASS will compile into your final CSS output.
Jambonz UI styles are provided a couple of ways. The raw source for the styles is [SASS](https://sass-lang.com/) so if you're also using SASS you have the beneficial ability to directly use either all the UI SASS or just the variables and mixins for use extending the UI kit in your jambonz app. If you use all the SASS you don't need to use the raw CSS anywhere in your app. The utilized SASS modules will compile into your final CSS output.
##### Loading the CSS
@@ -56,15 +56,19 @@ That `i` class is pretty useful. Here's an example of how it's used on this site
##### Loading in SASS
As mentioned you can import either the whole kit or just the variables and mixins. If you're already using SASS for your jambonz app the recommendation would be to just import the whole thing and not worry about managing another CSS import target anywhere in your frontend stack.
As mentioned you can use either the whole kit or just the variables and mixins. If you're already using SASS for your jambonz app the recommendation would be to just load the whole thing and not worry about managing another CSS import target anywhere in your frontend stack.
```scss
// This imports the entire SASS lib
@import 'jambonz-ui/src/styles/index.scss';
// This loads the entire SASS lib
// You should use this in your root SASS entry point
@use 'jambonz-ui/src/styles/index.scss';
// This imports just the mixins and variables
@import 'jambonz-ui/src/styles/_vars.scss';
@import 'jambonz-ui/src/styles/_mixins.scss';
// In your local SASS modules you can use the vars and mixins from the UI library
@use 'jambonz-ui/src/styles/vars' as ui-vars;
.some-thing {
color: ui-vars.$jambonz;
}
```
##### Available SASS variables

2
package.json
View File

@@ -24,7 +24,7 @@
],
"license": "MIT",
"dependencies": {
"jambonz-ui": "^0.0.2",
"jambonz-ui": "^0.0.6",
"nanoid": "^3.1.22",
"next": "^12.1.4",
"next-plugin-preact": "^3.0.6",

366
pages/jambonz-ui.js
View File

@@ -6,6 +6,211 @@ import { getData } from '../src/lib/data';
import { Icons } from '../src/components/icons';
import Layout, { Hero } from '../src/components/layout';
function KitOfParts({ textString }) {
return (
<div className="kop" style={{ textAlign: 'center' }}>
{/** Typography */}
<div className="kop__typography">
<div className="pad bg--black">
<div className="wrap">
<div className="wrap-text">
<H1 style={{ maxWidth: '1024px' }}>H1: {textString}</H1>
</div>
</div>
</div>
<div className="wrap">
<div className="wrap-text pad">
<H2 style={{ maxWidth: '850px' }}>H2: {textString}</H2>
</div>
</div>
<div className="pad bg--pink">
<div className="wrap">
<div className="wrap-text">
<H3 style={{ maxWidth: '760px' }}>H3: {textString}</H3>
</div>
</div>
</div>
<div className="wrap">
<div className="wrap-text pad">
<H4 style={{ maxWidth: '760px' }}>H4: {textString}</H4>
</div>
</div>
<div className="pad bg--grey">
<div className="wrap">
<div className="wrap-text">
<H5 style={{ maxWidth: '660px' }}>H5: {textString}</H5>
</div>
</div>
</div>
<div className="wrap">
<div className="wrap-text pad">
<H6 style={{ maxWidth: '620px' }}>H6: {textString}</H6>
</div>
<div className="wrap-text pad">
<P style={{ maxWidth: '600px' }}>P: {textString}</P>
</div>
<div className="wrap-text pad">
<P>P: With a <strong>strong</strong> element</P>
</div>
<div className="wrap-text pad">
<P>P: With a <strong className="med">medium</strong> element</P>
</div>
<div className="wrap-text pad">
<P>P: With an <em>emphasized</em> element</P>
</div>
<div className="wrap-text pad">
<P>P: <span className="color--blue">With</span> <span className="color--teal">colored</span> <span className="color--purple">text</span></P>
</div>
<div className="wrap-text pad">
<M style={{ maxWidth: '480px' }}>M: {textString}</M>
</div>
<div className="wrap-text pad">
<MS style={{ maxWidth: '480px' }}>MS: {textString}</MS>
</div>
<div className="wrap-text pad">
<MXS style={{ maxWidth: '480px' }}>MXS: {textString}</MXS>
</div>
</div>
</div>
{/** Icons */}
<div className="kop__icons">
<div className="pad wrap">
<IconGroup set>
{Object.keys(Icons).map((icon) => {
const SvgIcon = Icons[icon];
return (
<Icon key={icon} mainStyle="fill">
<SvgIcon />
</Icon>
);
})}
</IconGroup>
</div>
<div className="pad wrap">
<IconGroup set>
<Icon mainStyle="fill" subStyle="dark">
<Icons.MapPin />
</Icon>
<Icon mainStyle="fill" subStyle="purple">
<Icons.MapPin />
</Icon>
<Icon mainStyle="fill" subStyle="teal">
<Icons.MapPin />
</Icon>
<Icon mainStyle="fill" subStyle="blue">
<Icons.MapPin />
</Icon>
</IconGroup>
</div>
<div className="pad wrap">
<IconGroup set>
<Icon mainStyle="pill" subStyle="dark">
<Icons.Heart />
</Icon>
<Icon mainStyle="pill" subStyle="purple">
<Icons.Heart />
</Icon>
<Icon mainStyle="pill" subStyle="teal">
<Icons.Heart />
</Icon>
<Icon mainStyle="pill" subStyle="blue">
<Icons.Heart />
</Icon>
<Icon mainStyle="pill">
<Icons.Heart />
</Icon>
</IconGroup>
</div>
<div className="bg--charcoal">
<div className="pad wrap">
<Icon mainStyle="pill" subStyle="white">
<Icons.Heart />
</Icon>
</div>
</div>
</div>
{/** Buttons */}
<div className="kop__buttons">
<div className="wrap">
<div className="pad">
<ButtonGroup>
<Button mainStyle="login">Log In</Button>
<Button mainStyle="login" subStyle="purple">Log In</Button>
<Button mainStyle="login" subStyle="teal">Log In</Button>
<Button mainStyle="login" subStyle="blue">Log In</Button>
</ButtonGroup>
</div>
</div>
<div className="bg--charcoal">
<div className="wrap pad">
<ButtonGroup>
<Button mainStyle="login" subStyle="white">Log In</Button>
<Button mainStyle="login" subStyle="purple">Log In</Button>
<Button mainStyle="login" subStyle="teal">Log In</Button>
<Button mainStyle="login" subStyle="blue">Log In</Button>
</ButtonGroup>
</div>
</div>
<div className="wrap">
<ButtonGroup className="pad">
<Button>Sign up for free</Button>
<Button subStyle="dark">Get started for free</Button>
</ButtonGroup>
<ButtonGroup className="pad">
<Button subStyle="purple">Do it</Button>
<Button subStyle="teal">Do it</Button>
<Button subStyle="blue">Do it</Button>
</ButtonGroup>
</div>
<div className="bg--charcoal">
<div className="wrap pad">
<ButtonGroup>
<Button mainStyle="pill" subStyle="white">styles</Button>
<Button mainStyle="pill" subStyle="purple">styles</Button>
<Button mainStyle="pill" subStyle="teal">styles</Button>
<Button mainStyle="pill" subStyle="blue">styles</Button>
</ButtonGroup>
</div>
</div>
<div className="wrap">
<ButtonGroup className="pad">
<Button mainStyle="pill">
<Icons.GitHub />
<span>github.com/jambonz</span>
</Button>
<Button mainStyle="pill">
<Icons.GitHub />
<span>github.com/drachtio</span>
</Button>
</ButtonGroup>
<ButtonGroup className="pad">
<Button mainStyle="pill" subStyle="purple">
<span>colors</span>
</Button>
<Button mainStyle="pill" subStyle="teal">
<span>colors</span>
</Button>
<Button mainStyle="pill" subStyle="blue">
<span>colors</span>
</Button>
</ButtonGroup>
<div className="pad">
<Button mainStyle="pill" subStyle="jambonz">
<Icons.Send />
<span>Contact us</span>
</Button>
</div>
</div>
<div className="bg--jambonz">
<div className="wrap pad">
<Button subStyle="white">support@jambonz.org</Button>
</div>
</div>
</div>
</div>
);
}
export default function JambonzUI({ data }) {
return (
<Layout siteData={data.site}>
@@ -57,166 +262,7 @@ export default function JambonzUI({ data }) {
</H2>
</div>
</Hero>
<div className="kit-of-parts">
<div className="pad bg--black">
<div className="wrap">
<div className="wrap-text">
<H1>H1: {data['jambonz-ui'].text}</H1>
</div>
</div>
</div>
<div className="wrap">
<div className="wrap-text pad">
<H2>H2: {data['jambonz-ui'].text}</H2>
</div>
</div>
<div className="pad bg--pink">
<div className="wrap">
<div className="wrap-text">
<H3>H3: {data['jambonz-ui'].text}</H3>
</div>
</div>
</div>
<div className="wrap">
<div className="wrap-text pad">
<H4>H4: {data['jambonz-ui'].text}</H4>
</div>
</div>
<div className="pad bg--grey">
<div className="wrap">
<div className="wrap-text">
<H5>H5: {data['jambonz-ui'].text}</H5>
</div>
</div>
</div>
<div className="wrap">
<div className="wrap-text pad">
<H6>H6: {data['jambonz-ui'].text}</H6>
</div>
<div className="wrap-text pad">
<P>P: {data['jambonz-ui'].text}</P>
</div>
<div className="wrap-text pad">
<P>P: With a <strong>strong</strong> element</P>
</div>
<div className="wrap-text pad">
<P>P: With a <strong className="med">medium</strong> element</P>
</div>
<div className="wrap-text pad">
<P>P: With an <em>emphasized</em> element</P>
</div>
<div className="wrap-text pad">
<P>P: <span className="color--blue">With</span> <span className="color--teal">colored</span> <span className="color--purple">text</span></P>
</div>
<div className="wrap-text pad">
<M>M: {data['jambonz-ui'].text}</M>
</div>
<div className="wrap-text pad">
<MS>MS: {data['jambonz-ui'].text}</MS>
</div>
<div className="wrap-text pad">
<MXS>MXS: {data['jambonz-ui'].text}</MXS>
</div>
</div>
<div className="wrap">
<div className="pad">
<IconGroup set>
{Object.keys(Icons).map((icon) => {
const SvgIcon = Icons[icon];
return (
<Icon key={icon} mainStyle="fill">
<SvgIcon />
</Icon>
);
})}
</IconGroup>
</div>
<div className="pad">
<IconGroup set>
<Icon mainStyle="fill" subStyle="dark">
<Icons.MapPin />
</Icon>
<Icon mainStyle="fill" subStyle="purple">
<Icons.MapPin />
</Icon>
<Icon mainStyle="fill" subStyle="teal">
<Icons.MapPin />
</Icon>
<Icon mainStyle="fill" subStyle="blue">
<Icons.MapPin />
</Icon>
</IconGroup>
</div>
<div className="pad">
<IconGroup set>
<Icon mainStyle="pill" subStyle="dark">
<Icons.Heart />
</Icon>
<Icon mainStyle="pill" subStyle="purple">
<Icons.Heart />
</Icon>
<Icon mainStyle="pill" subStyle="teal">
<Icons.Heart />
</Icon>
<Icon mainStyle="pill" subStyle="blue">
<Icons.Heart />
</Icon>
<Icon mainStyle="pill">
<Icons.Heart />
</Icon>
</IconGroup>
</div>
<div className="pad">
<Button mainStyle="login">Log In</Button>
</div>
</div>
<div className="bg--charcoal">
<div className="pad">
<Icon mainStyle="pill" subStyle="white">
<Icons.Heart />
</Icon>
</div>
</div>
<div className="bg--charcoal">
<div className="pad">
<Button mainStyle="login" subStyle="white">Log In</Button>
</div>
</div>
<div className="wrap">
<ButtonGroup className="pad">
<Button>Sign up for free</Button>
<Button subStyle="dark">Get started for free</Button>
</ButtonGroup>
<ButtonGroup className="pad">
<Button subStyle="purple">Do it</Button>
<Button subStyle="teal">Do it</Button>
<Button subStyle="blue">Do it</Button>
</ButtonGroup>
</div>
<div className="bg--jambonz">
<div className="pad">
<Button subStyle="light">support@jambonz.org</Button>
</div>
</div>
<div className="wrap">
<ButtonGroup className="pad">
<Button mainStyle="pill">
<Icons.GitHub />
<span>github.com/jambonz</span>
</Button>
<Button mainStyle="pill">
<Icons.GitHub />
<span>github.com/drachtio</span>
</Button>
</ButtonGroup>
<div className="pad">
<Button mainStyle="pill" subStyle="jambonz">
<Icons.Send />
<span>Contact us</span>
</Button>
</div>
</div>
</div>
<KitOfParts textString={data['jambonz-ui'].text} />
</Layout>
);
}

2
src/components/footer.js
View File

@@ -43,7 +43,7 @@ export default function Footer({ siteData }) {
</ul>
</div>
<div className="foot__support">
<Button as={Link} 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="white">
{siteData.footer.email}
</Button>
</div>

2
src/components/navi.js
View File

@@ -61,7 +61,7 @@ function NaviMobile({ active, handler, siteData }) {
})}
</ul>
<div className="navi__mobile__support">
<Button as={Link} href={`mailto:${siteData.footer.email}`} target="_blank" subStyle="light">
<Button as={Link} href={`mailto:${siteData.footer.email}`} target="_blank" subStyle="white">
{siteData.footer.email}
</Button>
</div>

18
src/styles/_footer.scss
View File

@@ -1,3 +1,5 @@
@use 'jambonz-ui/src/styles/vars' as ui-vars;
.foot {
padding: 96px 0;
@@ -14,7 +16,7 @@
margin-bottom: 16px;
}
@media (max-width: $width-mobile) {
@media (max-width: ui-vars.$width-mobile) {
margin: 0;
width: 100%;
}
@@ -23,7 +25,7 @@
&__links:first-child {
text-align: right;
@media (max-width: $width-mobile) {
@media (max-width: ui-vars.$width-mobile) {
text-align: center;
}
}
@@ -31,23 +33,23 @@
&__links:last-child {
text-align: left;
@media (max-width: $width-mobile) {
@media (max-width: ui-vars.$width-mobile) {
text-align: center;
margin-top: 32px;
}
}
&__link {
color: $white;
color: ui-vars.$white;
text-decoration: none;
&:hover {
color: $jambonz;
color: ui-vars.$jambonz;
}
&.active {
color: $jambonz;
border-bottom: 1px solid $jambonz;
color: ui-vars.$jambonz;
border-bottom: 1px solid ui-vars.$jambonz;
}
}
@@ -55,7 +57,7 @@
text-align: center;
padding-top: 64px;
@media (max-width: $width-mobile) {
@media (max-width: ui-vars.$width-mobile) {
padding-top: 48px;
}
}

46
src/styles/_layout.scss
View File

@@ -1,27 +1,33 @@
@use 'vars';
@use 'mixins';
@use 'jambonz-ui/src/styles/vars' as ui-vars;
@use 'jambonz-ui/src/styles/mixins' as ui-mixins;
/******************************************************************************
* Above the fold
*******************************************************************************/
.banner {
@include flex-cols();
@include mixins.flex-cols();
justify-content: center;
width: 100%;
height: 32px;
background: $jambonz;
background: ui-vars.$jambonz;
position: sticky;
top: 0;
z-index: $navi-index + 2;
z-index: vars.$navi-index + 2;
text-align: center;
a {
@include ms();
color: $white;
font-family: $font-medium;
@include ui-mixins.ms();
color: ui-vars.$white;
font-family: ui-vars.$font-medium;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@media (max-width: $width-mobile) {
@include mxs();
@media (max-width: ui-vars.$width-mobile) {
@include ui-mixins.mxs();
}
}
@@ -40,7 +46,7 @@
.latest__headline {
max-width: 840px;
@media (max-width: $width-tablet-1) {
@media (max-width: ui-vars.$width-tablet-1) {
max-width: 760px;
}
@@ -57,13 +63,13 @@
}
div {
@media (max-width: $width-small) {
@media (max-width: ui-vars.$width-small) {
display: inline;
}
}
div:last-child {
@media (max-width: $width-small) {
@media (max-width: ui-vars.$width-small) {
padding-left: 6px;
}
}
@@ -71,18 +77,18 @@
}
&__wrap {
@include flex-cols();
@include mixins.flex-cols();
}
&__headline {
color: $jambonz;
color: ui-vars.$jambonz;
}
&__subtext {
margin-top: 16px;
a {
border-bottom: 1px solid $jambonz;
border-bottom: 1px solid ui-vars.$jambonz;
}
}
}
@@ -98,7 +104,7 @@
.hero__subtext {
max-width: 870px;
@media (max-width: $width-tablet-1) {
@media (max-width: ui-vars.$width-tablet-1) {
max-width: 740px;
}
}
@@ -122,10 +128,10 @@
&:before {
content: '';
background-color: $pink;
background-color: ui-vars.$pink;
width: 100%;
height: calc(100% + #{$navi-height});
transform: translateY(-#{$navi-height});
height: calc(100% + #{vars.$navi-height});
transform: translateY(-#{vars.$navi-height});
z-index: 1;
display: block;
position: absolute;
@@ -134,12 +140,12 @@
}
h1 {
color: $jambonz;
color: ui-vars.$jambonz;
}
}
&__wrap {
@include flex-cols();
@include mixins.flex-cols();
}
&__subtext {

13
src/styles/_markdown.scss
View File

@@ -1,8 +1,11 @@
@use 'jambonz-ui/src/styles/vars' as ui-vars;
@use 'jambonz-ui/src/styles/mixins' as ui-mixins;
.markdown {
padding-top: 64px;
padding-bottom: 96px;
@media (max-width: $width-tablet-1) {
@media (max-width: ui-vars.$width-tablet-1) {
padding-top: 16px;
padding-bottom: 64px;
}
@@ -10,7 +13,7 @@
&__wrap {
display: flex;
@media (max-width: $width-tablet-1) {
@media (max-width: ui-vars.$width-tablet-1) {
flex-wrap: wrap;
}
}
@@ -20,7 +23,7 @@
width: 100%;
margin-right: 16px;
@media (max-width: $width-tablet-1) {
@media (max-width: ui-vars.$width-tablet-1) {
max-width: 100%;
margin: 0 0 48px;
}
@@ -38,7 +41,7 @@
svg {
width: 20px;
height: 20px;
stroke: $jambonz;
stroke: ui-vars.$jambonz;
margin-right: 8px;
transform: translateY(-2px) translateX(-2px);
}
@@ -64,7 +67,7 @@
line-height: 1.5;
&.active {
@include font-bold();
@include ui-mixins.font-bold();
}
}
}

4
src/styles/_mixins.scss
View File

@@ -1,7 +1,9 @@
@use 'jambonz-ui/src/styles/vars' as ui-vars;
@mixin cta() {
margin-top: 96px;
@media (max-width: $width-tablet-1) {
@media (max-width: ui-vars.$width-tablet-1) {
margin-top: 64px;
}
}

52
src/styles/_navi.scss
View File

@@ -1,19 +1,23 @@
@use 'vars';
@use 'jambonz-ui/src/styles/vars' as ui-vars;
.navi {
height: $navi-height;
height: vars.$navi-height;
display: flex;
position: relative;
z-index: $navi-index;
z-index: vars.$navi-index;
&.active {
@media ( max-width: $mobile-width ) {
z-index: $navi-index + 1;
@media ( max-width: vars.$mobile-width ) {
z-index: vars.$navi-index + 1;
}
}
// Menu / X icons for mobile nav interactions
.icon {
width: $icon-size-3;
height: $icon-size-3;
width: ui-vars.$icon-size-3;
height: ui-vars.$icon-size-3;
svg {
width: 20px;
@@ -30,21 +34,21 @@
&__links {
transform: translateY(-4px);
font-family: $font-medium;
font-family: ui-vars.$font-medium;
}
&__link {
text-decoration: none;
color: $charcoal;
color: ui-vars.$charcoal;
margin-left: 32px;
&:hover {
color: $jambonz;
color: ui-vars.$jambonz;
}
&.active {
color: $jambonz;
border-bottom: 1px solid $jambonz;
color: ui-vars.$jambonz;
border-bottom: 1px solid ui-vars.$jambonz;
}
}
@@ -55,7 +59,7 @@
&__links,
&__login {
@media ( max-width: $mobile-width ) {
@media ( max-width: vars.$mobile-width ) {
display: none;
}
}
@@ -69,7 +73,7 @@
transform: translateY(-5px);
}
@media ( max-width: $mobile-width ) {
@media ( max-width: vars.$mobile-width ) {
display: block;
}
}
@@ -84,29 +88,29 @@
width: 100%;
height: 100%;
overflow-y: auto;
transition: opacity $base-dur $base-ease,
z-index $base-dur $base-ease;
transition: opacity ui-vars.$base-dur ui-vars.$base-ease,
z-index ui-vars.$base-dur ui-vars.$base-ease;
&.active {
pointer-events: auto;
opacity: 1;
z-index: $navi-index;
z-index: vars.$navi-index;
}
// Overrides for mobile navi links
.navi__link {
color: $white;
font-size: $h6-size;
font-family: $font-medium;
color: ui-vars.$white;
font-size: ui-vars.$h6-size;
font-family: ui-vars.$font-medium;
margin: 0;
&:hover {
color: $jambonz;
color: ui-vars.$jambonz;
}
&.active {
color: $jambonz;
border-bottom: 1px solid $jambonz;
color: ui-vars.$jambonz;
border-bottom: 1px solid ui-vars.$jambonz;
}
}
@@ -144,8 +148,8 @@
}
.navi__link {
font-size: $m-size;
font-family: $font-regular;
font-size: ui-vars.$m-size;
font-family: ui-vars.$font-regular;
}
}

35
src/styles/_text-layout.scss
View File

@@ -1,9 +1,12 @@
@use 'jambonz-ui/src/styles/vars' as ui-vars;
@use 'jambonz-ui/src/styles/mixins' as ui-mixins;
.text-layout {
max-width: $width-tablet-2;
max-width: ui-vars.$width-tablet-2;
width: 100%;
margin: 0 auto;
@media (max-width: $width-tablet-1) {
@media (max-width: ui-vars.$width-tablet-1) {
max-width: 100%;
}
@@ -15,23 +18,23 @@
}
a {
border-bottom: 1px solid $jambonz;
border-bottom: 1px solid ui-vars.$jambonz;
}
sup {
color: $jambonz;
color: ui-vars.$jambonz;
}
p {
@include ms();
@include ui-mixins.ms();
}
blockquote {
padding-left: 16px;
p {
font-family: $font-regular-italic;
border-left: 3px solid $jambonz;
font-family: ui-vars.$font-regular-italic;
border-left: 3px solid ui-vars.$jambonz;
padding-left: 10px;
}
}
@@ -45,7 +48,7 @@
p,
&::marker {
@include p();
@include ui-mixins.p();
font-size: 14px;
}
}
@@ -56,26 +59,26 @@
li {
list-style-type: disc;
@include ms();
@include ui-mixins.ms();
}
}
table {
@include ms();
@include ui-mixins.ms();
width: 100%;
td, th {
padding: 8px 12px;
border: 1px solid $grey-light;
border: 1px solid ui-vars.$grey-light;
}
th {
@include font-bold();
@include ui-mixins.font-bold();
}
tbody {
tr:nth-child(odd) {
background-color: $grey;
background-color: ui-vars.$grey;
}
}
}
@@ -88,15 +91,15 @@
pre[class*="language-"] {
font-size: 0.82em;
@media (max-width: $width-tablet-1) {
@media (max-width: ui-vars.$width-tablet-1) {
font-size: 13px;
}
}
code:not([class*="language-"]) {
font-family: $font-mono;
font-family: ui-vars.$font-mono;
font-size: 13px;
color: $jambonz;
color: ui-vars.$jambonz;
}
}
}

45
src/styles/global.scss
View File

@@ -1,36 +1,11 @@
/******************************************************************************
* jambonz-ui
*******************************************************************************/
@import 'jambonz-ui/src/styles/index.scss';
@use 'jambonz-ui/src/styles/index';
/******************************************************************************
* Local Vars / Mixins
*******************************************************************************/
@import 'vars.scss';
@import 'mixins.scss';
/******************************************************************************
* Layout
*******************************************************************************/
@import 'layout.scss';
@import 'text-layout.scss';
@import 'markdown.scss';
/******************************************************************************
* Navi
*******************************************************************************/
@import 'navi.scss';
/******************************************************************************
* Footer
*******************************************************************************/
@import 'footer.scss';
/******************************************************************************
* Pages
*******************************************************************************/
@import 'pages/home.scss';
@import 'pages/why.scss';
@import 'pages/pricing.scss';
@import 'pages/regions.scss';
@import 'pages/kit-of-parts.scss';
@use 'layout';
@use 'text-layout';
@use 'markdown';
@use 'navi';
@use 'footer';
@use 'pages/home';
@use 'pages/why';
@use 'pages/pricing';
@use 'pages/regions';

68
src/styles/pages/_home.scss
View File

@@ -1,3 +1,7 @@
@use '../mixins';
@use 'jambonz-ui/src/styles/vars' as ui-vars;
/******************************************************************************
* App screenshot
*******************************************************************************/
@@ -5,7 +9,7 @@
display: flex;
padding-bottom: 96px;
@media (max-width: $width-tablet-1) {
@media (max-width: ui-vars.$width-tablet-1) {
flex-wrap: wrap;
padding-bottom: 64px;
}
@@ -14,7 +18,7 @@
max-width: 66.6666666667vw;
width: 1120px; // Largest render size per max-width of site container
@media (max-width: $width-tablet-1) {
@media (max-width: ui-vars.$width-tablet-1) {
max-width: 100%;
width: 100%;
}
@@ -25,7 +29,7 @@
padding-left: 16px;
padding-top: 16px;
@media (max-width: $width-tablet-1) {
@media (max-width: ui-vars.$width-tablet-1) {
max-width: 100%;
width: 100%;
display: flex;
@@ -33,7 +37,7 @@
padding: 0;
}
@media (max-width: $width-mobile) {
@media (max-width: ui-vars.$width-mobile) {
max-width: 320px;
margin: 0 auto;
}
@@ -42,13 +46,13 @@
&__note {
margin-top: 16px;
@media (max-width: $width-tablet-1) {
@media (max-width: ui-vars.$width-tablet-1) {
width: 50%;
margin: 0;
padding: 32px 16px;
}
@media (max-width: $width-mobile) {
@media (max-width: ui-vars.$width-mobile) {
padding: 16px;
text-align: center;
width: 100%;
@@ -63,11 +67,11 @@
text-align: center;
&__wrap {
@include flex-cols();
@include mixins.flex-cols();
}
&__headline {
@media (max-width: $width-small) {
@media (max-width: ui-vars.$width-small) {
max-width: 320px;
}
}
@@ -76,17 +80,17 @@
margin-top: 16px;
margin-bottom: 64px;
@media (max-width: $width-mobile) {
@media (max-width: ui-vars.$width-mobile) {
margin-bottom: 48px;
}
div {
@media (max-width: $width-small) {
@media (max-width: ui-vars.$width-small) {
max-width: 270px;
}
& + div {
@media (max-width: $width-small) {
@media (max-width: ui-vars.$width-small) {
margin-top: 8px;
}
}
@@ -97,7 +101,7 @@
display: flex;
justify-content: center;
@media (max-width: $width-tablet-2) {
@media (max-width: ui-vars.$width-tablet-2) {
flex-wrap: wrap;
width: 100%;
}
@@ -107,31 +111,31 @@
width: 100%;
max-width: 320px;
margin: 0 16px;
background-color: $white;
border: 2px solid $charcoal;
background-color: ui-vars.$white;
border: 2px solid ui-vars.$charcoal;
border-radius: 8px;
padding: 16px 32px;
@media (max-width: $width-tablet-1) {
@media (max-width: ui-vars.$width-tablet-1) {
margin: 0 8px;
padding: 16px;
}
@media (max-width: $width-tablet-2) {
@media (max-width: ui-vars.$width-tablet-2) {
margin: 0;
max-width: 100%;
}
& + & {
@media (max-width: $width-tablet-2) {
@media (max-width: ui-vars.$width-tablet-2) {
margin-top: 32px;
}
}
&--jambonz {
border-width: 4px;
border-color: $jambonz;
background-color: $pink;
border-color: ui-vars.$jambonz;
background-color: ui-vars.$pink;
}
&__title {
@@ -148,7 +152,7 @@
img {
width: 50%;
@media (max-width: $width-tablet-2) {
@media (max-width: ui-vars.$width-tablet-2) {
width: 96px;
}
}
@@ -158,7 +162,7 @@
margin-left: auto;
display: none;
@media (max-width: $width-tablet-2) {
@media (max-width: ui-vars.$width-tablet-2) {
display: block;
}
}
@@ -166,12 +170,12 @@
&__points {
margin-top: 16px;
@media (max-width: $width-tablet-2) {
@media (max-width: ui-vars.$width-tablet-2) {
display: none;
}
&.active {
@media (max-width: $width-tablet-2) {
@media (max-width: ui-vars.$width-tablet-2) {
display: block;
}
}
@@ -196,13 +200,13 @@
&.xcircle {
svg {
stroke: $red;
stroke: ui-vars.$red;
}
}
&.checkcircle {
svg {
stroke: $green;
stroke: ui-vars.$green;
}
}
}
@@ -216,11 +220,11 @@
text-align: center;
&__wrap {
@include flex-cols();
@include mixins.flex-cols();
}
&__headline {
@media (max-width: $width-small) {
@media (max-width: ui-vars.$width-small) {
max-width: 320px;
}
}
@@ -228,7 +232,7 @@
&__subtext {
margin-top: 16px;
@media (max-width: $width-mobile) {
@media (max-width: ui-vars.$width-mobile) {
max-width: 320px;
}
}
@@ -236,7 +240,7 @@
&__icons {
margin: 64px 0;
@media (max-width: $width-tablet-1) {
@media (max-width: ui-vars.$width-tablet-1) {
margin: 48px 0;
}
}
@@ -244,16 +248,16 @@
&__comment {
max-width: 800px;
@media (max-width: $width-small) {
@media (max-width: ui-vars.$width-small) {
max-width: 340px;
}
a {
border-bottom: 1px solid $jambonz;
border-bottom: 1px solid ui-vars.$jambonz;
}
}
&__cta {
@include cta();
@include mixins.cta();
}
}

46
src/styles/pages/_kit-of-parts.scss
View File

@@ -1,46 +0,0 @@
.kit-of-parts {
text-align: center;
.wrap-text {
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 {
max-width: 500px;
}
.mxs {
max-width: 380px;
}
> div {
margin: 0 auto;
}
}
}

26
src/styles/pages/_pricing.scss
View File

@@ -1,3 +1,7 @@
@use '../mixins';
@use 'jambonz-ui/src/styles/vars' as ui-vars;
/******************************************************************************
* Pricing structure
*******************************************************************************/
@@ -5,25 +9,25 @@
padding-bottom: 96px;
text-align: center;
@media (max-width: $width-tablet-1) {
@media (max-width: ui-vars.$width-tablet-1) {
padding-bottom: 64px;
}
&__text {
max-width: 960px;
@include flex-cols();
@include mixins.flex-cols();
p + p {
margin-top: 32px;
@media (max-width: $width-mobile) {
@media (max-width: ui-vars.$width-mobile) {
margin-top: 16px;
}
}
}
&__cta {
@include cta();
@include mixins.cta();
> :first-child {
margin-bottom: 32px;
@@ -42,20 +46,20 @@
justify-content: center;
flex-wrap: wrap;
@media (max-width: $width-tablet-1) {
@media (max-width: ui-vars.$width-tablet-1) {
margin: 0 -32px;
}
@media (max-width: $width-tablet-2) {
@media (max-width: ui-vars.$width-tablet-2) {
margin: 0;
}
svg {
stroke: $jambonz;
stroke: ui-vars.$jambonz;
}
strong {
color: $jambonz;
color: ui-vars.$jambonz;
}
}
@@ -66,12 +70,12 @@
padding-top: 64px;
margin: 0 50px;
@media (max-width: $width-tablet-1) {
@media (max-width: ui-vars.$width-tablet-1) {
width: calc(50% - 64px);
margin: 0 32px;
}
@media (max-width: $width-tablet-2) {
@media (max-width: ui-vars.$width-tablet-2) {
width: 100%;
margin: 0;
padding-top: 32px;
@@ -79,6 +83,6 @@
}
&__cta {
@include cta();
@include mixins.cta();
}
}

18
src/styles/pages/_regions.scss
View File

@@ -1,3 +1,7 @@
@use '../mixins';
@use 'jambonz-ui/src/styles/vars' as ui-vars;
/******************************************************************************
* Regions
*******************************************************************************/
@@ -5,15 +9,15 @@
text-align: center;
margin-top: 64px;
@media (max-width: $width-tablet-1) {
@media (max-width: ui-vars.$width-tablet-1) {
margin-top: 32px;
}
&__wrap {
@include flex-cols();
@include mixins.flex-cols();
padding-bottom: 64px;
@media (max-width: $width-mobile) {
@media (max-width: ui-vars.$width-mobile) {
padding-bottom: 32px;
}
}
@@ -21,17 +25,17 @@
&__icon {
padding-bottom: 24px;
@media (max-width: $width-mobile) {
@media (max-width: ui-vars.$width-mobile) {
padding-bottom: 16px;
}
}
&__text {
color: $black;
transition: color $base-dur $base-ease;
color: ui-vars.$black;
transition: color ui-vars.$base-dur ui-vars.$base-ease;
&:hover {
color: $jambonz;
color: ui-vars.$jambonz;
}
}
}

40
src/styles/pages/_why.scss
View File

@@ -1,3 +1,7 @@
@use '../mixins';
@use 'jambonz-ui/src/styles/vars' as ui-vars;
/******************************************************************************
* Jambonz Facts
*******************************************************************************/
@@ -5,26 +9,26 @@
padding-bottom: 96px;
padding-top: 32px;
@media (max-width: $width-tablet-1) {
@media (max-width: ui-vars.$width-tablet-1) {
padding-bottom: 64px;
}
@media (max-width: $width-tablet-2) {
@media (max-width: ui-vars.$width-tablet-2) {
padding-top: 0;
}
.icon {
transform: translateY(-4px);
@media (max-width: $width-tablet-1) {
@media (max-width: ui-vars.$width-tablet-1) {
transform: translateY(-8px);
}
@media (max-width: $width-tablet-2) {
@media (max-width: ui-vars.$width-tablet-2) {
transform: translateY(-10px);
}
@media (max-width: $width-mobile) {
@media (max-width: ui-vars.$width-mobile) {
transform: none;
}
}
@@ -34,11 +38,11 @@
justify-content: center;
flex-wrap: wrap;
@media (max-width: $width-tablet-1) {
@media (max-width: ui-vars.$width-tablet-1) {
margin: 0 -16px;
}
@media (max-width: $width-tablet-2) {
@media (max-width: ui-vars.$width-tablet-2) {
margin: 0;
}
}
@@ -50,29 +54,29 @@
margin: 0 32px;
padding-top: 64px;
@media (max-width: $width-tablet-1) {
@media (max-width: ui-vars.$width-tablet-1) {
width: calc(50% - 32px);
margin: 0 16px;
}
@media (max-width: $width-tablet-2) {
@media (max-width: ui-vars.$width-tablet-2) {
max-width: 480px;
width: 100%;
margin: 0;
text-align: center;
@include flex-cols();
@include mixins.flex-cols();
}
}
&__text {
width: calc(100% - #{$icon-size-1});
width: calc(100% - #{ui-vars.$icon-size-1});
padding-left: 16px;
> div + div {
margin-top: 16px;
}
@media (max-width: $width-tablet-2) {
@media (max-width: ui-vars.$width-tablet-2) {
width: 100%;
padding: 0;
margin-top: 16px;
@@ -88,14 +92,14 @@
text-align: center;
&__wrap {
@include flex-cols();
@include mixins.flex-cols();
}
&__subtext {
margin-top: 16px;
max-width: 735px;
@media (max-width: $width-tablet-1) {
@media (max-width: ui-vars.$width-tablet-1) {
max-width: 615px;
}
}
@@ -103,25 +107,25 @@
&__btns {
padding: 64px 0;
@media (max-width: $width-tablet-1) {
@media (max-width: ui-vars.$width-tablet-1) {
padding: 48px 0;
}
}
&__logo {
@include flex-cols();
@include mixins.flex-cols();
img {
width: 200px;
margin-bottom: 32px;
@media (max-width: $width-mobile) {
@media (max-width: ui-vars.$width-mobile) {
width: 160px;
}
}
}
&__cta {
@include cta();
@include mixins.cta();
}
}

8
yarn.lock
View File

@@ -2267,10 +2267,10 @@ isstream@~0.1.2:
resolved "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz"
integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
jambonz-ui@^0.0.2:
version "0.0.2"
resolved "https://registry.yarnpkg.com/jambonz-ui/-/jambonz-ui-0.0.2.tgz#9ea650a2ed98f0a26ae2c8c4269c6f99372f642b"
integrity sha512-O4FYl7IaVTLUFcpagvdSOvv1kpKuDps4SNu3X08rk2w2s30L+Ug+k/cVDxy7UKnaR+3l4NUnwUQD8q0VK/g2NA==
jambonz-ui@^0.0.6:
version "0.0.6"
resolved "https://registry.yarnpkg.com/jambonz-ui/-/jambonz-ui-0.0.6.tgz#63c4afd618f8d4dff210152a8ecf64f61ea67758"
integrity sha512-52P+xsLhqES2lo+Inz/mEzdfIgp5AV4NDzW1+6/16LiYDndxWzCnTyU6xkW4HGxmnEVvGdpcrPnQvuY+W4ojsw==
"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
version "4.0.0"