ben.carrasco/next-static-site
1
0
Fork 0
mirror of https://github.com/jambonz/next-static-site.git synced 2026-07-04 19:21:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

jambonz-ui tweak -- tighten SASS styles

Browse Source
This commit is contained in:
kitajchuk
2021-04-08 14:07:32 -07:00
parent 3c03704f66
commit 997a28e3d2
8 changed files with 108 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/jambonz-ui.js
+7 -7
View File
@@ -46,31 +46,31 @@ export function useMobileMedia() {
}
export function H1({ children }) {
return <div className="h1">{children}</div>;
return <h1>{children}</h1>;
}
export function H2({ children }) {
return <div className="h2">{children}</div>;
return <h2>{children}</h2>;
}
export function H3({ children }) {
return <div className="h3">{children}</div>;
return <h3>{children}</h3>;
}
export function H4({ children }) {
return <div className="h4">{children}</div>;
return <h4>{children}</h4>;
}
export function H5({ children }) {
return <div className="h5">{children}</div>;
return <h5>{children}</h5>;
}
export function H6({ children }) {
return <div className="h6">{children}</div>;
return <h6>{children}</h6>;
}
export function P({children}) {
return <div className="p">{children}</div>;
return <p>{children}</p>;
}
export function M({ children }) {
styles/_buttons.scss
+1 -1
View File
@@ -119,7 +119,7 @@
.btn {
margin: 0 2.2222222222vw;
& + .btn {
&:nth-child(even) {
@media (max-width: $width-mobile) {
margin-top: 16px;
}
styles/_layout.scss
+64 -36
View File
@@ -30,7 +30,7 @@
text-align: center;
&--why {
.hero__subtext > div {
.hero__subtext {
max-width: 870px;
@media (max-width: $width-tablet-1) {
@@ -66,21 +66,24 @@
.hero__subtext {
margin-bottom: 0;
max-width: 820px;
> div {
max-width: 820px;
@media (max-width: $width-tablet-1) {
max-width: 680px;
}
}
> div + div {
> :nth-child(even) {
margin-top: 32px;
}
@media (max-width: $width-tablet-1) {
max-width: 680px;
}
}
}
&__wrap {
display: flex;
flex-direction: column;
align-items: center;
}
&__subtext {
margin-top: 16px;
margin-bottom: 32px;
@@ -96,7 +99,6 @@
* Tables
*******************************************************************************/
.table {
margin: 0 auto;
max-width: 100%;
display: flex;
justify-content: center;
@@ -106,15 +108,55 @@
max-width: 420px;
}
.table__row {
&__row {
border-top: 2px solid $charcoal;
border-bottom: 2px solid $charcoal;
@media (max-width: $width-tablet-2) {
width: 100%;
display: flex;
}
&:last-child {
.table__head {
border-right: 2px solid $charcoal;
@media (max-width: $width-tablet-2) {
border-right: none;
}
}
.table__cell {
border-right: 2px solid $charcoal;
}
}
& + & {
@media (max-width: $width-tablet-2) {
border-top: none;
}
}
}
&__head {
border-bottom: 2px solid $charcoal;
border-left: 2px solid $charcoal;
@media (max-width: $width-tablet-2) {
border-bottom: none;
}
}
&__cell {
border-left: 2px solid $charcoal;
@media (max-width: $width-tablet-2) {
border-right: 2px solid $charcoal;
}
}
.table__head,
.table__cell {
&__head,
&__cell {
text-align: center;
padding: 16px;
@@ -133,44 +175,30 @@
@each $name, $color in $colors {
&--#{$name} {
.table__row {
border-top: 2px solid $color;
border-bottom: 2px solid $color;
& + .table__row {
@media (max-width: $width-tablet-2) {
border-top: none;
}
}
border-top-color: $color;
border-bottom-color: $color;
&:last-child {
.table__head {
border-right: 2px solid $color;
@media (max-width: $width-tablet-2) {
border-right: none;
}
border-right-color: $color;
}
.table__cell {
border-right: 2px solid $color;
border-right-color: $color;
}
}
}
.table__head {
border-bottom: 2px solid $color;
border-left: 2px solid $color;
@media (max-width: $width-tablet-2) {
border-bottom: none;
}
border-bottom-color: $color;
border-left-color: $color;
}
.table__cell {
border-left: 2px solid $color;
border-left-color: $color;
@media (max-width: $width-tablet-2) {
border-right: 2px solid $color;
border-right-color: $color;
}
}
}
styles/pages/_docs.scss
+1 -7
View File
@@ -59,14 +59,8 @@
}
}
&__link {
margin-bottom: 16px;
}
&__item {
+ .docs__item {
margin-top: 16px;
}
margin-top: 16px;
}
&__label {
styles/pages/_home.scss
+10 -15
View File
@@ -63,11 +63,6 @@
&__subtext {
margin-top: 16px;
margin-bottom: 64px;
> div {
margin-left: auto;
margin-right: auto;
}
}
&__tables {
@@ -98,7 +93,7 @@
max-width: 100%;
}
& + .dilemma__table {
& + & {
@media (max-width: $width-tablet-2) {
margin-top: 32px;
}
@@ -187,14 +182,17 @@
.byo {
text-align: center;
&__wrap {
display: flex;
flex-direction: column;
align-items: center;
}
&__subtext {
margin-top: 16px;
> div {
@media (max-width: $width-mobile) {
max-width: 320px;
margin: 0 auto;
}
@media (max-width: $width-mobile) {
max-width: 320px;
}
}
@@ -207,10 +205,7 @@
}
&__comment {
> div {
max-width: 800px;
margin: 0 auto;
}
max-width: 800px;
a {
text-decoration: underline;
styles/pages/_jambonz-ui.scss
+10 -7
View File
@@ -2,31 +2,34 @@
text-align: center;
.wrap-text {
.h1 {
display: flex;
justify-content: center;
h1 {
max-width: 1024px;
}
.h2 {
h2 {
max-width: 950px;
}
.h3 {
h3 {
max-width: 860px;
}
.h4 {
h4 {
max-width: 875px;
}
.h5 {
h5 {
max-width: 768px;
}
.h6 {
h6 {
max-width: 640px;
}
.p {
p {
max-width: 640px;
}
styles/pages/_pricing.scss
+6 -2
View File
@@ -29,7 +29,7 @@
margin: 0 32px;
}
& + .touts__item {
& + & {
@media (max-width: $width-tablet-2) {
margin-top: 64px;
}
@@ -57,7 +57,11 @@
text-align: center;
&__item {
+ .tiers__item {
display: flex;
flex-direction: column;
align-items: center;
& + & {
margin-top: 96px;
@media (max-width: $width-tablet-1) {
styles/pages/_why.scss
+9 -7
View File
@@ -86,17 +86,19 @@
*******************************************************************************/
.os {
text-align: center;
&__wrap {
display: flex;
flex-direction: column;
align-items: center;
}
&__subtext {
margin-top: 16px;
max-width: 735px;
> div {
max-width: 735px;
margin: 0 auto;
@media (max-width: $width-tablet-1) {
max-width: 615px;
}
@media (max-width: $width-tablet-1) {
max-width: 615px;
}
}