diff --git a/gatsby-browser.js b/gatsby-browser.js
index f544198..10143bc 100644
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -4,9 +4,6 @@
* @see https://www.gatsbyjs.org/docs/browser-apis/
*/
-const { isDev } = require('./utils/environment')
-const { getLocale, getLanguage } = require('./src/utils/locale')
-
const printCorporateMessage = require('./gatsby/browser/corporateMessage')
const setDefaultTime = require('./gatsby/browser/defaultTime')
@@ -17,11 +14,6 @@ module.exports.wrapRootElement = require('./gatsby/wrapRootElement')
module.exports.onClientEntry = () => {
setDefaultTime()
-
- if (isDev) {
- // TODO: if i18n, move it there
- console.log('Language:', getLanguage(), getLocale())
- }
}
module.exports.onInitialClientRender = () => {
diff --git a/src/components/Head.jsx b/src/components/Head.jsx
index 8a4419d..98a7129 100644
--- a/src/components/Head.jsx
+++ b/src/components/Head.jsx
@@ -25,7 +25,6 @@ const Head = ({
}) => {
const twitter = social.find(({ icon }) => icon === 'twitter')
- // TODO: improve this if i18n
const language = pageLang || siteLanguage || 'en'
// set default social-media images
diff --git a/src/components/Lightbox.jsx b/src/components/Lightbox.jsx
index 0682d1f..c566881 100644
--- a/src/components/Lightbox.jsx
+++ b/src/components/Lightbox.jsx
@@ -28,7 +28,7 @@ class Lightbox extends React.Component {
const clientY = element.offsetTop - document.documentElement.scrollTop
const maxWidth = document.documentElement.clientWidth
const maxHeight = document.documentElement.clientHeight
- const scrollbarWidth = 0 // TODO: is this needed? (test on common browser across different platforms)
+ const scrollbarWidth = 0
// Get the current picture source image natural width.
const naturalWidth = image.naturalWidth
diff --git a/src/html.js b/src/html.js
index 7e4f0de..b2539c4 100644
--- a/src/html.js
+++ b/src/html.js
@@ -25,7 +25,6 @@ export default function HTML(props) {
{props.preBodyComponents}
- {/*TODO: Show beautiful message here*/}
diff --git a/src/styles/components/_anchor.scss b/src/styles/components/_anchor.scss
index d2f2298..321e836 100644
--- a/src/styles/components/_anchor.scss
+++ b/src/styles/components/_anchor.scss
@@ -1,7 +1,3 @@
-// NOTE: copied some code from here, because it is not added to head: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-autolink-headers/src/gatsby-ssr.js
-
-$size: 15px;
-
.anchor-link {
display: block;
position: absolute;
@@ -19,8 +15,8 @@ $size: 15px;
}
svg {
- width: $size;
- height: $size;
+ width: 15px;
+ height: 15px;
fill: var(--text-color-dark);
@include breakpoint-up(md) {
diff --git a/src/styles/components/_portfolio.scss b/src/styles/components/_portfolio.scss
index 5a8e304..c8f174f 100644
--- a/src/styles/components/_portfolio.scss
+++ b/src/styles/components/_portfolio.scss
@@ -1,5 +1,3 @@
-// TODO: do this as gallery: https://dribbble.com/shots/6154629-Gallerie-Due-Concept/attachments
-
.portfolio {
display: grid;
grid-template-areas:
diff --git a/src/styles/fonts/_inter.scss b/src/styles/fonts/_inter.scss
index 9d79f93..82c2750 100644
--- a/src/styles/fonts/_inter.scss
+++ b/src/styles/fonts/_inter.scss
@@ -25,20 +25,7 @@ $font-display: swap;
url('#{$font-path}/Inter-Bold.woff?v=#{$font-version}') format('woff');
}
-// FIXME: keep a look at the progress here (at new releases). Sadly, there is now release or progress page
-/* --------------------------------------------------------------------------
-[EXPERIMENTAL] Multi-axis, single variable font.
-
-Slant axis is not yet widely supported (as of February 2019) and thus this
-multi-axis single variable font is opt-in rather than the default.
-
-When using this, you will probably need to set font-variation-settings
-explicitly, e.g.
-
- * { font-variation-settings: "slnt" 0deg }
- .italic { font-variation-settings: "slnt" 10deg }
-
-*/
+// NOTE: keep a look at the progress here (at new releases). Sadly, there is now release or progress page
@font-face {
font-family: 'Inter var experimental';
font-style: oblique 0deg 10deg;
diff --git a/src/styles/mixins/_accessibility.scss b/src/styles/mixins/_accessibility.scss
index 60edab8..56f54c6 100644
--- a/src/styles/mixins/_accessibility.scss
+++ b/src/styles/mixins/_accessibility.scss
@@ -4,6 +4,11 @@
@content;
}
}
+@mixin noReducedMotion() {
+ @media (prefers-reduced-motion: no-preference) {
+ @content;
+ }
+}
// https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-transparency
@mixin reducedTransparency() {
@@ -11,6 +16,11 @@
@content;
}
}
+@mixin noReducedTransparency() {
+ @media (prefers-reduced-transparency: no-preference) {
+ @content;
+ }
+}
// https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
@mixin schemeDark() {
diff --git a/src/styles/modules/_showcase.scss b/src/styles/modules/_showcase.scss
index 045d4b5..7761d86 100644
--- a/src/styles/modules/_showcase.scss
+++ b/src/styles/modules/_showcase.scss
@@ -31,9 +31,11 @@
align-items: center;
justify-content: center;
overflow: hidden;
- transition: all ease-in-out 220ms;
cursor: pointer;
- // TODO: reduced motion
+
+ @include noReducedMotion() {
+ transition: all ease-in-out 220ms;
+ }
@include breakpoint-up(lg) {
align-items: flex-end;
@@ -64,15 +66,21 @@
}
&::after {
- transition: opacity var(--transition-fast);
opacity: 0.4;
+
+ @include noReducedMotion() {
+ transition: opacity var(--transition-fast);
+ }
}
}
.content {
- transition: all 200ms ease-in-out;
text-align: center;
+ @include noReducedMotion() {
+ transition: all 200ms ease-in-out;
+ }
+
@include breakpoint-up(lg) {
transform: translateY(-70px);
opacity: 0;
diff --git a/tests/lighthouse/index.js b/tests/lighthouse/index.js
index 4111d00..bd2284a 100644
--- a/tests/lighthouse/index.js
+++ b/tests/lighthouse/index.js
@@ -6,7 +6,6 @@ const chromeLauncher = require('chrome-launcher')
const lighthouse = require('lighthouse')
const { getVersion, transformVersion } = require('../../utils/version')
-// TODO: test a project site as well
const testSite = 'https://marvin.lcl'
const rootPath = path.resolve(__dirname, '..', '..')