diff --git a/components/common/Header.jsx b/components/common/Header.jsx index b17ec44..23d026f 100644 --- a/components/common/Header.jsx +++ b/components/common/Header.jsx @@ -75,7 +75,14 @@ const MenuTray = styled.div` display: none; } `; -const MenuItems = styled.ul``; +const MenuItems = styled.ul` + @media only screen and (max-width: 767px) { + opacity: 0; + padding: 4px 24px 24px; + transform: translate3d(0, -150px, 0); + transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0.5s,opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.2s; + } +`; const MenuItem = styled.li` margin-left: 24px; float: left; diff --git a/components/common/Site.jsx b/components/common/Site.jsx index 45f4c68..3e83a6b 100644 --- a/components/common/Site.jsx +++ b/components/common/Site.jsx @@ -29,7 +29,8 @@ const Site = ({ children }) => { getColorSchemeSetting, setColorScheme, getSystemColorScheme, - windowDimensions + windowDimensions, + breakpoint: windowDimensions.breakpoint }}> {children} diff --git a/components/common/layout/Stack.jsx b/components/common/layout/Stack.jsx index ead68b5..929a151 100644 --- a/components/common/layout/Stack.jsx +++ b/components/common/layout/Stack.jsx @@ -5,7 +5,7 @@ import spacing from "@/styles/spacing"; const StackWrap = styled.div` display: flex; flex-direction: ${({ $direction }) => ($direction === "vertical" ? `column` : `row`)}${({ $reverse }) => ($reverse ? `-reverse` : ``)}; - ${({ $gap, theme }) => + ${({ $gap }) => $gap !== undefined && $gap !== null && $gap !== false ? `gap: ${Array.isArray($gap) ? spacing(...$gap) : spacing($gap)};` : ``} diff --git a/components/pages/dev/layout.js b/components/pages/dev/layout.js index 47c2848..1ead087 100644 --- a/components/pages/dev/layout.js +++ b/components/pages/dev/layout.js @@ -74,7 +74,6 @@ export default function DevPage() { -
@@ -143,7 +142,7 @@ export default function DevPage() {
-
+
Offsets @@ -213,7 +212,7 @@ export default function DevPage() {
-
+
Auto Width @@ -248,7 +247,7 @@ export default function DevPage() {
-
+
Align @@ -279,7 +278,7 @@ export default function DevPage() {
-
+
Distribute diff --git a/components/pages/home/HeroImage.jsx b/components/pages/home/HeroImage.jsx index 40df63a..e8ee36a 100644 --- a/components/pages/home/HeroImage.jsx +++ b/components/pages/home/HeroImage.jsx @@ -38,7 +38,7 @@ const SceneWrap = styled.div` animation: ${scaleBlurIn} 500ms 750ms cubic-bezier(0.0, 0.0, 0.2, 1); animation-fill-mode: both; transform-origin: bottom center; - margin-top: 64px; + margin-top: 6%; `; const ImageWrap = styled.div` position: relative; @@ -64,8 +64,15 @@ const colorFlairPiece = css` left: 0; width: 200px; height: 200px; - border-radius: 50%; filter: blur(100px); + + @media ${mediaQueries.md} { + width: 20vw; + height: 20vw; + filter: blur(10vw); + } + + border-radius: 50%; background: #4F95FF; transform-origin: bottom center; `; @@ -125,8 +132,8 @@ const StyledHardwareLockup = styled(HardwareLockup)` ` const HeroImage = ({ percentage }) => { - const { colorScheme = "light" } = useSite(); - const adjustedPercentage = (Math.min(Math.max(percentage, 1), 1.2) - 1) * 5; + const { colorScheme = "light", breakpoint } = useSite(); + const adjustedPercentage = (Math.min(Math.max(percentage - ( breakpoint === 'xs' ? .2 : 0), 1), 1.2) - 1) * 5; return ( diff --git a/styles/globals.css b/styles/globals.css index 5b6c0ca..9cee84e 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -54,9 +54,6 @@ body { html { height: 100%; } -body { - min-height: 100%; -} a { color: inherit; @@ -331,12 +328,17 @@ html[data-color-scheme='dark'] { --material-filters: saturate(180%) blur(20px); } +#__next { + display: contents; +} + main { background: linear-gradient( to bottom, var(--dark) 0%, var(--fill-gray-secondary-alt) 100% ); + min-height: calc(100vh - 168px); } main a { diff --git a/yarn.lock b/yarn.lock index 85f412c..cfc4084 100644 --- a/yarn.lock +++ b/yarn.lock @@ -915,6 +915,17 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== +fast-glob@^3.2.11: + version "3.2.12" + resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80" + integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w== + dependencies: + "@nodelib/fs.stat" "^2.0.2" + "@nodelib/fs.walk" "^1.2.3" + glob-parent "^5.1.2" + merge2 "^1.3.0" + micromatch "^4.0.4" + fast-glob@^3.2.9: version "3.2.11" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9" @@ -1059,6 +1070,17 @@ globals@^13.6.0, globals@^13.9.0: dependencies: type-fest "^0.20.2" +globby@13.1.2: + version "13.1.2" + resolved "https://registry.yarnpkg.com/globby/-/globby-13.1.2.tgz#29047105582427ab6eca4f905200667b056da515" + integrity sha512-LKSDZXToac40u8Q1PQtZihbNdTYSNMuWe+K5l+oa6KgDzSvVrHXlJy40hUP522RjAIoNLJYBJi7ow+rbFpIhHQ== + dependencies: + dir-glob "^3.0.1" + fast-glob "^3.2.11" + ignore "^5.2.0" + merge2 "^1.4.1" + slash "^4.0.0" + globby@^11.0.4: version "11.1.0" resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b" @@ -1585,6 +1607,11 @@ prelude-ls@^1.2.1: resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== +prettier@^2.5.1: + version "2.7.1" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64" + integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g== + prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" @@ -1748,6 +1775,11 @@ slash@^3.0.0: resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634" integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q== +slash@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7" + integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew== + source-map-js@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"