diff --git a/gatsby-browser.js b/gatsby-browser.js index f6cea154..c6803303 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -10,7 +10,6 @@ const supportedLanguagePaths = langConfig // eslint-disable-next-line import/prefer-default-export export const onInitialClientRender = () => { let currentPath = window.location.pathname + window.location.hash; - console.log(currentPath); // get language to use let language = window.navigator.language.substr(0, 2); diff --git a/gatsby-config.js b/gatsby-config.js index 04d61472..4928629c 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -32,7 +32,6 @@ module.exports = { short_name: `hubblr`, start_url: `/`, background_color: fullConfig.theme.colors.white, - theme_color: fullConfig.theme.colors.teal['400'], display: `minimal-ui`, icon: `src/images/fav.png`, }, diff --git a/package.json b/package.json index 389352f1..26348b8d 100644 --- a/package.json +++ b/package.json @@ -4,13 +4,13 @@ "dependencies": { "@hubblr/react-side-content-accordion": "^1.0.3", "@reach/router": "^1.3.4", - "autoprefixer": "^9.8.6", + "autoprefixer": "^10.4.0", "babel-eslint": "^10.0.3", "babel-loader": "^8.2.2", "babel-plugin-module-resolver": "^4.0.0", "browser-cookies": "^1.2.0", "cssnano": "4.1.10", - "eslint": "7.11.0", + "eslint": "^7.18.0", "eslint-config-airbnb": "^18.2.1", "eslint-config-prettier": "^6.15.0", "eslint-import-resolver-babel-module": "^5.1.2", @@ -21,21 +21,22 @@ "eslint-plugin-react": "^7.21.5", "flat": "^5.0.2", "framer-motion": "^2.9.4", - "gatsby": "^2.24.92", - "gatsby-plugin-eslint": "2.0.8", - "gatsby-plugin-ffmpeg": "^0.3.1", - "gatsby-plugin-manifest": "^2.4.34", - "gatsby-plugin-offline": "3.2.31", - "gatsby-plugin-postcss": "2.3.13", - "gatsby-plugin-react-helmet": "3.3.14", - "gatsby-plugin-sass": "^2.6.0", - "gatsby-plugin-sharp": "^2.9.1", - "gatsby-source-airtable": "^2.1.1", - "gatsby-source-filesystem": "^3.4.0", + "gatsby": "^4.0.2", + "gatsby-plugin-eslint": "4.0.1", + "gatsby-plugin-ffmpeg": "^0.4.1", + "gatsby-plugin-manifest": "4.0.0", + "gatsby-plugin-offline": "5.0.0", + "gatsby-plugin-postcss": "5.0.0", + "gatsby-plugin-react-helmet": "5.0.0", + "gatsby-plugin-sass": "5.0.0", + "gatsby-plugin-sharp": "^4.0.1", + "gatsby-source-airtable": "^2.2.1", + "gatsby-source-filesystem": "4.0.0", "gatsby-theme-i18n": "^1.0.4", - "gatsby-transformer-ffmpeg": "^0.3.8", - "gatsby-transformer-sharp": "^2.7.0", + "gatsby-transformer-ffmpeg": "0.4.0", + "gatsby-transformer-sharp": "4.0.0", "gatsby-video": "^0.2.0", + "postcss": "^8.3.11", "prop-types": "^15.7.2", "react": "^16.13.1", "react-autosize-textarea": "^7.1.0", @@ -44,8 +45,10 @@ "react-intl": "^5.10.6", "react-responsive": "^8.1.1", "sass": "^1.29.0", + "sharp": "^0.29.2", "smoothscroll-polyfill": "^0.4.4", "sweetalert2": "^10.10.4", + "tailwindcss": "^2.2.19", "uuid": "^8.3.1", "validator": "^13.1.17" }, @@ -65,11 +68,10 @@ "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1" }, "devDependencies": { - "@tailwindcss/custom-forms": "0.2.1", + "@tailwindcss/forms": "0.2.1", "@types/tailwindcss": "^2.0.5", "eslint-plugin-react-hooks": "^4.2.0", "prettier": "^2.2.1", - "tailwindcss": "1.9.1", "tailwindcss-textshadow": "^2.1.3" }, "prettier": { diff --git a/src/components/nav-bar/NavBar.jsx b/src/components/nav-bar/NavBar.jsx index 87645080..b59f1938 100644 --- a/src/components/nav-bar/NavBar.jsx +++ b/src/components/nav-bar/NavBar.jsx @@ -1,3 +1,4 @@ +/* eslint-disable react/jsx-no-bind */ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { useLocalization } from 'gatsby-theme-i18n'; diff --git a/src/components/seo/Seo.jsx b/src/components/seo/Seo.jsx index 2da87d75..2e7d607d 100644 --- a/src/components/seo/Seo.jsx +++ b/src/components/seo/Seo.jsx @@ -23,13 +23,8 @@ const SEO = ({ title, description, image }) => { const intl = useIntl(); const { pathname } = useLocation(); const { site } = useStaticQuery(query); - const { - defaultTitle, - titleTemplate, - defaultDescription, - siteUrl, - defaultImage, - } = site.siteMetadata; + const { defaultTitle, titleTemplate, defaultDescription, siteUrl, defaultImage } = + site.siteMetadata; const seo = { title: title ? intl.formatMessage({ id: title }) : defaultTitle, diff --git a/src/components/text/AppKnockoutText.jsx b/src/components/text/AppKnockoutText.jsx index 81a8ac2a..98f8af2d 100644 --- a/src/components/text/AppKnockoutText.jsx +++ b/src/components/text/AppKnockoutText.jsx @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; function AppKnockoutText({ children, className }) { return ( {children} diff --git a/src/css/components/_accordion.scss b/src/css/components/_accordion.scss index 88cc7657..70870629 100644 --- a/src/css/components/_accordion.scss +++ b/src/css/components/_accordion.scss @@ -1,9 +1,9 @@ .accordion-heading { - @apply .text-2xl font-bold .py-5 text-left leading-tight tracking-tight; + @apply text-2xl font-bold py-5 text-left leading-tight tracking-tight; } .accordion-text-content { - @apply .text-2xl leading-tight font-light; + @apply text-2xl leading-tight font-light; transition: height .8s ease-in-out; overflow: hidden; } diff --git a/src/css/components/_buttons.scss b/src/css/components/_buttons.scss index 84cb05a1..1724a95c 100644 --- a/src/css/components/_buttons.scss +++ b/src/css/components/_buttons.scss @@ -1,55 +1,55 @@ // different types of buttons .button { - @apply .rounded-lg; + @apply rounded-lg; &:not(.button-gradient) { &:not([class*='p-']) { - @apply .px-3 .py-1; + @apply px-3 py-1; } } &.button-theme-light { - @apply .text-hubblr-turquoise; + @apply text-hubblr-turquoise; &:not(.button-gradient) { - @apply .bg-white; + @apply bg-white; @extend .animate-bg-brand-gray-light; } &.button-gradient > .button-content-container { - @apply .bg-white; + @apply bg-white; @include animate-bg; } &:hover { &.button-gradient > .button-content-container { - @apply .bg-brand-gray-light; + @apply bg-brand-gray-light; } } } &.button-theme-dark { - @apply .text-white; + @apply text-white; &:not(.button-gradient) { - @apply .bg-brand-gray-darkest; + @apply bg-brand-gray-darkest; @extend .animate-bg-brand-gray-darkest; } &.button-gradient > .button-content-container { - @apply .bg-brand-gray-darkest; + @apply bg-brand-gray-darkest; @include animate-bg; } &:hover { &.button-gradient > .button-content-container { - @apply .bg-black; + @apply bg-black; } } } &.button-theme-transparent { - @apply .text-white; + @apply text-white; &:not(.button-gradient) { @extend .animate-bg-brand-gray-darkest; @@ -61,7 +61,7 @@ &:hover { &.button-gradient > .button-content-container { - @apply .bg-black; + @apply bg-black; } } } @@ -69,8 +69,8 @@ .round-button { &:not([class*='p-']) { - @apply .px-3 .py-3; + @apply px-3 py-3; } - @apply .rounded-full; + @apply rounded-full; } diff --git a/src/css/components/hamburgers/_base.scss b/src/css/components/hamburgers/_base.scss index 72630679..c3ac0820 100644 --- a/src/css/components/hamburgers/_base.scss +++ b/src/css/components/hamburgers/_base.scss @@ -55,7 +55,7 @@ .hamburger-inner { display: block; top: 50%; - margin-top: $hamburger-layer-height / -2; + margin-top: calc($hamburger-layer-height / -2); &, &::before, diff --git a/src/css/components/hamburgers/types/_elastic-r.scss b/src/css/components/hamburgers/types/_elastic-r.scss index 367c0191..057eb1ca 100644 --- a/src/css/components/hamburgers/types/_elastic-r.scss +++ b/src/css/components/hamburgers/types/_elastic-r.scss @@ -4,7 +4,7 @@ */ .hamburger--elastic-r { .hamburger-inner { - top: $hamburger-layer-height / 2; + top: calc($hamburger-layer-height / 2); transition-duration: 0.275s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); diff --git a/src/css/components/hamburgers/types/_elastic.scss b/src/css/components/hamburgers/types/_elastic.scss index ef06a718..59b94958 100644 --- a/src/css/components/hamburgers/types/_elastic.scss +++ b/src/css/components/hamburgers/types/_elastic.scss @@ -4,7 +4,7 @@ */ .hamburger--elastic { .hamburger-inner { - top: $hamburger-layer-height / 2; + top: calc($hamburger-layer-height / 2); transition-duration: 0.275s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); diff --git a/src/css/components/hamburgers/types/_slider-r.scss b/src/css/components/hamburgers/types/_slider-r.scss index ff3cb532..b63877cb 100644 --- a/src/css/components/hamburgers/types/_slider-r.scss +++ b/src/css/components/hamburgers/types/_slider-r.scss @@ -4,7 +4,7 @@ */ .hamburger--slider-r { .hamburger-inner { - top: $hamburger-layer-height / 2; + top: calc($hamburger-layer-height / 2); &::before { top: $hamburger-layer-height + $hamburger-layer-spacing; @@ -25,7 +25,7 @@ transform: translate3d(0, $y-offset, 0) rotate(-45deg); &::before { - transform: rotate(45deg) translate3d($hamburger-layer-width / 7, $hamburger-layer-spacing * -1, 0); + transform: rotate(45deg) translate3d(calc($hamburger-layer-width / 7), $hamburger-layer-spacing * -1, 0); opacity: 0; } diff --git a/src/css/components/hamburgers/types/_slider.scss b/src/css/components/hamburgers/types/_slider.scss index 2ba9cc28..9a175b47 100644 --- a/src/css/components/hamburgers/types/_slider.scss +++ b/src/css/components/hamburgers/types/_slider.scss @@ -4,7 +4,7 @@ */ .hamburger--slider { .hamburger-inner { - top: $hamburger-layer-height / 2; + top: calc($hamburger-layer-height / 2); &::before { top: $hamburger-layer-height + $hamburger-layer-spacing; @@ -25,7 +25,7 @@ transform: translate3d(0, $y-offset, 0) rotate(45deg); &::before { - transform: rotate(-45deg) translate3d($hamburger-layer-width / -7, $hamburger-layer-spacing * -1, 0); + transform: rotate(-45deg) translate3d(calc($hamburger-layer-width / -7), $hamburger-layer-spacing * -1, 0); opacity: 0; } diff --git a/src/css/components/hamburgers/types/_spring.scss b/src/css/components/hamburgers/types/_spring.scss index cdf77d99..f01bb0da 100644 --- a/src/css/components/hamburgers/types/_spring.scss +++ b/src/css/components/hamburgers/types/_spring.scss @@ -4,7 +4,7 @@ */ .hamburger--spring { .hamburger-inner { - top: $hamburger-layer-height / 2; + top: calc($hamburger-layer-height / 2); transition: background-color 0s 0.13s linear; &::before { diff --git a/src/css/globals/_animations.scss b/src/css/globals/_animations.scss index e2cf2acf..7906051f 100644 --- a/src/css/globals/_animations.scss +++ b/src/css/globals/_animations.scss @@ -19,13 +19,13 @@ .animate-bg-brand-gray-light { @include animate-bg; &:hover { - @apply .bg-brand-gray-light; + @apply bg-brand-gray-light; } } .animate-bg-brand-gray-darkest { @include animate-bg; &:hover { - @apply .bg-brand-gray-darkest; + @apply bg-brand-gray-darkest; } } diff --git a/src/css/style.scss b/src/css/style.scss index 8d659dfb..7149f572 100644 --- a/src/css/style.scss +++ b/src/css/style.scss @@ -12,51 +12,51 @@ @layer base { h1 { - @apply .font-black .font-sans .text-xl; + @apply font-black font-sans text-xl; } h2 { - @apply .font-black .font-sans .text-xl; + @apply font-black font-sans text-xl; } h3 { - @apply .font-black .font-sans .text-xl; + @apply font-black font-sans text-xl; } p { - @apply .font-mono; + @apply font-mono; } .secondary-title { - @apply .font-black .font-sans .text-lg; + @apply font-black font-sans text-lg; } .secondary-subtitle { - @apply .font-light .font-sans .text-base; + @apply font-light font-sans text-base; } .h1 { - @apply .font-black .font-sans .text-xl; + @apply font-black font-sans text-xl; } .borderless-link-black { - @apply .font-black .font-sans .text-xl .bg-clip-text .text-transparent .bg-gradient-to-r .from-hubblr-blue .to-hubblr-green; + @apply font-black font-sans text-xl bg-clip-text text-transparent bg-gradient-to-r from-hubblr-blue to-hubblr-green; a { - @apply .font-black .font-sans .text-xl .bg-clip-text .text-transparent .bg-gradient-to-r .from-hubblr-blue .to-hubblr-green; + @apply font-black font-sans text-xl bg-clip-text text-transparent bg-gradient-to-r from-hubblr-blue to-hubblr-green; @screen lg { - @apply .text-3xl; + @apply text-3xl; } } } .swimmingunderline { padding-bottom: 3px; - background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%); - background-position: 0 100%; - background-repeat: repeat-x; - background-size: 3px 3px; - color: #000; - text-decoration: none; + background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%); + background-position: 0 100%; + background-repeat: repeat-x; + background-size: 3px 3px; + color: #000; + text-decoration: none; } .swimmingunderline:hover { diff --git a/src/css/text-page-styles.scss b/src/css/text-page-styles.scss index e8782924..41dbb5ea 100644 --- a/src/css/text-page-styles.scss +++ b/src/css/text-page-styles.scss @@ -1,52 +1,52 @@ .text-content { * { - @apply .text-sm; + @apply text-sm; } @screen lg { * { - @apply .text-base; + @apply text-base; } } h1 { - @apply .text-2xl .mb-5; + @apply text-2xl mb-5; } @screen lg { h1 { - @apply .text-4xl .mb-8; + @apply text-4xl mb-8; } } h2 { - @apply .text-xl .mb-3; + @apply text-xl mb-3; } @screen lg { h2 { - @apply .text-2xl .mt-6 .mb-4; + @apply text-2xl mt-6 mb-4; } } h3 { - @apply .text-xl .mb-3; + @apply text-xl mb-3; } @screen lg { h3 { - @apply .text-2xl .mt-6 .mb-4; + @apply text-2xl mt-6 mb-4; } } p, ul { - @apply .mb-3; + @apply mb-3; } ul { list-style-type: disc; list-style-position: inside; - @apply .px-4; + @apply px-4; } a { - @apply .underline; + @apply underline; } } diff --git a/src/util/withContext.jsx b/src/util/withContext.jsx index e329f3e0..c43a2c36 100644 --- a/src/util/withContext.jsx +++ b/src/util/withContext.jsx @@ -1,7 +1,8 @@ import React from 'react'; -export default (Context, propName) => (WrappedComponent) => (props) => ( - - {(contextValue) => } - -); +export default (Context, propName) => (WrappedComponent) => (props) => + ( + + {(contextValue) => } + + ); diff --git a/tailwind.config.js b/tailwind.config.js index 44f45839..a7494351 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,11 +1,11 @@ // See https://tailwindcss.com/docs/configuration for details module.exports = { - future: { - purgeLayersByDefault: true, - removeDeprecatedGapUtilities: true, - defaultLineHeights: true, - standardFontWeights: true, - }, + // future: { + // purgeLayersByDefault: true, + // removeDeprecatedGapUtilities: true, + // defaultLineHeights: true, + // standardFontWeights: true, + // }, purge: { content: ['./src/**/*.jsx'], }, @@ -72,12 +72,15 @@ module.exports = { 'hubblr-blue': '#4299e1', 'hubblr-green': '#4fd1c5', }, + gradientColorStops: (theme) => ({ + ...theme('colors'), + }), }, }, variants: {}, plugins: [ // eslint-disable-next-line global-require - require('@tailwindcss/custom-forms'), + require('@tailwindcss/forms'), // eslint-disable-next-line global-require require('tailwindcss-textshadow'), ],