diff --git a/assets/tailwind-output.css b/assets/tailwind-output.css index 2682dbae1..ff8db588b 100644 --- a/assets/tailwind-output.css +++ b/assets/tailwind-output.css @@ -567,6 +567,16 @@ video { width: 100%; } +@media (min-width: 600px) { + .\!container { + max-width: 600px !important; + } + + .container { + max-width: 600px; + } +} + @media (min-width: 768px) { .\!container { max-width: 768px !important; @@ -577,13 +587,13 @@ video { } } -@media (min-width: 1000px) { +@media (min-width: 900px) { .\!container { - max-width: 1000px !important; + max-width: 900px !important; } .container { - max-width: 1000px; + max-width: 900px; } } @@ -675,6 +685,10 @@ video { left: 0px; } +.left-1\/2 { + left: 50%; +} + .left-2 { left: 0.5rem; } @@ -695,6 +709,10 @@ video { top: 0px; } +.top-1\/2 { + top: 50%; +} + .top-\[50\%\] { top: 50%; } @@ -1002,6 +1020,14 @@ video { display: none; } +.aspect-square { + aspect-ratio: 1 / 1; +} + +.aspect-\[327\/320\] { + aspect-ratio: 327/320; +} + .size-0 { width: 0px; height: 0px; @@ -1046,6 +1072,10 @@ video { height: 2rem; } +.h-auto { + height: auto; +} + .h-full { height: 100%; } @@ -1191,6 +1221,20 @@ video { border-collapse: collapse; } +.-translate-x-1\/2 { + --tw-translate-x: -50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} + +.-translate-y-1\/2 { + --tw-translate-y: -50%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} + .translate-x-1 { --tw-translate-x: 0.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) @@ -1336,6 +1380,12 @@ video { margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } +.space-y-8 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(2rem * var(--tw-space-y-reverse)); +} + .space-y-\[0\.3125rem\] > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.3125rem * calc(1 - var(--tw-space-y-reverse))); @@ -2825,7 +2875,7 @@ video { display: block; position: absolute; content: ''; - background-image: url('../assets/book-open-light.svg'); + background-image: var(--book-asset-path); background-size: 1.5rem 1.5rem; height: 1.5rem; width: 1.5rem; @@ -2846,7 +2896,7 @@ video { &:after { position: absolute; content: ''; - background-image: url('../assets/book-open-dark.svg'); + background-image: var(--book-asset-path-dark); background-size: 1.5rem 1.5rem; height: 1.5rem; width: 1.5rem; @@ -2921,7 +2971,7 @@ video { display: block; position: absolute; content: ''; - background-image: url('../assets/right-arrow-light.svg'); + background-image: var(--right-arrow-path); background-size: 1.5rem 1.5rem; height: 1.5rem; width: 1.5rem; @@ -2958,7 +3008,7 @@ video { &:after { position: absolute; content: ''; - background-image: url('../assets/right-arrow-dark.svg'); + background-image: var(--right-arrow-path-dark); background-size: 1.5rem 1.5rem; height: 1.5rem; width: 1.5rem; @@ -4018,13 +4068,52 @@ iframe#launcher { scaleY(var(--tw-scale-y)); } +@media (min-width: 600px) { + .xs\:-left-24 { + left: -6rem; + } + + .xs\:-right-24 { + right: -6rem; + } + + .xs\:-left-32 { + left: -8rem; + } + + .xs\:-right-32 { + right: -8rem; + } + + .xs\:block { + display: block; + } + + .xs\:hidden { + display: none; + } + + .xs\:aspect-auto { + aspect-ratio: auto; + } + + .xs\:justify-between { + justify-content: space-between; + } + + .xs\:py-\[3\.75rem\] { + padding-top: 3.75rem; + padding-bottom: 3.75rem; + } +} + @media (min-width: 768px) { - .sm\:left-0 { - left: 0px; + .sm\:-left-24 { + left: -6rem; } - .sm\:right-0 { - right: 0px; + .sm\:-right-24 { + right: -6rem; } .sm\:col-span-2 { @@ -4072,6 +4161,14 @@ iframe#launcher { display: grid; } + .sm\:hidden { + display: none; + } + + .sm\:aspect-auto { + aspect-ratio: auto; + } + .sm\:min-h-\[15\.625rem\] { min-height: 15.625rem; } @@ -4194,21 +4291,21 @@ iframe#launcher { } } -@media (min-width: 1000px) { +@media (min-width: 900px) { .sm-md\:right-auto { right: auto; } +} - .sm-md\:block { - display: block; +@media (min-width: 1280px) { + .md\:left-0 { + left: 0px; } - .sm-md\:justify-between { - justify-content: space-between; + .md\:right-0 { + right: 0px; } -} -@media (min-width: 1280px) { .md\:col-span-2 { grid-column: span 2 / span 2; } diff --git a/manifest.json b/manifest.json index af44ad0b8..f3efe3399 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "name": "Copenhagen", - "author": "Zendesk", - "version": "4.2.4", + "author": "Sanctuary Computer", + "version": "4.2.9", "api_version": 4, "default_locale": "en-us", "settings": [ diff --git a/src/modules/homepage/HeaderBackgroundMobile.tsx b/src/modules/homepage/HeaderBackgroundMobile.tsx new file mode 100644 index 000000000..1a3820552 --- /dev/null +++ b/src/modules/homepage/HeaderBackgroundMobile.tsx @@ -0,0 +1,417 @@ +import { FC } from 'react'; +import cn from 'classnames'; + +export const HeaderBackgroundMobile: FC<{ + className?: string; +}> = ({ className }) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/modules/homepage/HomepageModule.tsx b/src/modules/homepage/HomepageModule.tsx index 22e1be6a4..48563e0c2 100644 --- a/src/modules/homepage/HomepageModule.tsx +++ b/src/modules/homepage/HomepageModule.tsx @@ -13,6 +13,7 @@ import { } from './Icons'; import { HomepageData, ColoredCardsColor } from '../../lib/types'; import ConnectBlock from './ConnectBlock'; +import { HeaderBackgroundMobile } from './HeaderBackgroundMobile'; type Props = { homepageData: HomepageData; @@ -61,10 +62,11 @@ const Homepage: FC = ({ homepageData }) => { return (
{hero && ( -
-
- - +
+
+ + +

= ({ homepageData }) => {

)} diff --git a/style.css b/style.css index 3cc40c3dc..d5f8ae212 100644 --- a/style.css +++ b/style.css @@ -198,11 +198,11 @@ template { .avatar-wrapper g:nth-of-type(1) { animation-duration: 6s; - animation-delay: 2s; + animation-delay: 1s; } .avatar-wrapper g:nth-of-type(2) { - animation-duration: 6s; + animation-duration: 5s; animation-delay: 1s; } @@ -213,35 +213,35 @@ template { .avatar-wrapper g:nth-of-type(4) { animation-duration: 5s; - animation-delay: 1s; + animation-delay: 2s; } .avatar-wrapper g:nth-of-type(5) { - animation-duration: 5s; + animation-duration: 4s; animation-delay: 1s; } .avatar-wrapper g:nth-of-type(6) { - animation-duration: 5s; + animation-duration: 6s; animation-delay: 2s; } .avatar-wrapper g:nth-of-type(7) { - animation-duration: 4s; - animation-delay: 1s; + animation-duration: 5s; + animation-delay: 2s; } .avatar-wrapper g:nth-of-type(8) { - animation-duration: 5s; + animation-duration: 6s; animation-delay: 1s; } .avatar-wrapper g:nth-of-type(9) { - animation-duration: 4s; - animation-delay: 2s; + animation-duration: 6s; + animation-delay: 1s; } .avatar-wrapper g:nth-of-type(10) { animation-duration: 4s; - animation-delay: 2s; + animation-delay: 1s; } diff --git a/styles/main.css b/styles/main.css index 1d972a62d..e3f7cd1db 100644 --- a/styles/main.css +++ b/styles/main.css @@ -140,7 +140,7 @@ display: block; position: absolute; content: ''; - background-image: url('../assets/book-open-light.svg'); + background-image: var(--book-asset-path); background-size: 1.5rem 1.5rem; height: 1.5rem; width: 1.5rem; @@ -151,7 +151,7 @@ @apply top-padding-medium left-padding-medium hidden dark:block; position: absolute; content: ''; - background-image: url('../assets/book-open-dark.svg'); + background-image: var(--book-asset-path-dark); background-size: 1.5rem 1.5rem; height: 1.5rem; width: 1.5rem; @@ -166,7 +166,7 @@ display: block; position: absolute; content: ''; - background-image: url('../assets/right-arrow-light.svg'); + background-image: var(--right-arrow-path); background-size: 1.5rem 1.5rem; height: 1.5rem; width: 1.5rem; @@ -180,7 +180,7 @@ @apply top-padding-medium right-padding-medium hidden dark:block transition opacity-0; position: absolute; content: ''; - background-image: url('../assets/right-arrow-dark.svg'); + background-image: var(--right-arrow-path-dark); background-size: 1.5rem 1.5rem; height: 1.5rem; width: 1.5rem; diff --git a/tailwind.config.ts b/tailwind.config.ts index 850a85e2f..80135b88e 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -34,7 +34,8 @@ const config: Config = { md: `${SCREEN_SIZE.DESKTOP.min}px`, /* Max */ lg: `${SCREEN_SIZE.XL_DESKTOP.min}px`, - 'sm-md': '1000px', + 'sm-md': '900px', + xs: '600px', }, extend: { borderRadius: { diff --git a/templates/document_head.hbs b/templates/document_head.hbs index 9757767ec..3974d016a 100644 --- a/templates/document_head.hbs +++ b/templates/document_head.hbs @@ -33,6 +33,10 @@ --font-riegraf: 'Riegraf', serif; --font-basel-grotesk: 'Basel Grotesk', sans-serif; --font-fragment-mono: 'Fragment Mono', monospace; + --book-asset-path: url('{{asset "book-open-light.svg"}}'); + --book-asset-path-dark: url('{{asset "book-open-dark.svg"}}'); + --right-arrow-path: url('{{asset "right-arrow-light.svg"}}'); + --right-arrow-path-dark: url('{{asset "right-arrow-dark.svg"}}'); } @font-face { diff --git a/templates/home_page.hbs b/templates/home_page.hbs index f89538ec1..06ae88c5b 100644 --- a/templates/home_page.hbs +++ b/templates/home_page.hbs @@ -1,8 +1,8 @@
-