From dd0c0513eeb9deb7618d8e1c4efd4872bff1c5ab Mon Sep 17 00:00:00 2001 From: Jason Miller Date: Sun, 11 Apr 2021 21:44:34 +0000 Subject: [PATCH 1/2] Add Substack as a platinum sponsor. --- src/components/sponsors/amp.svg | 17 ++++-------- src/components/sponsors/index.js | 41 ++++++++++++++++++++-------- src/components/sponsors/substack.svg | 1 + src/components/sponsors/trivago.svg | 6 +--- 4 files changed, 36 insertions(+), 29 deletions(-) create mode 100644 src/components/sponsors/substack.svg diff --git a/src/components/sponsors/amp.svg b/src/components/sponsors/amp.svg index db6d8a768..cbd50d981 100644 --- a/src/components/sponsors/amp.svg +++ b/src/components/sponsors/amp.svg @@ -1,16 +1,9 @@ - - - - + diff --git a/src/components/sponsors/index.js b/src/components/sponsors/index.js index 7c4815fde..7f74353a0 100644 --- a/src/components/sponsors/index.js +++ b/src/components/sponsors/index.js @@ -2,6 +2,7 @@ import styles from './style.less'; import AMPSvg from './amp.svg'; import TrivagoSvg from './trivago.svg'; import WebflowSvg from './webflow.svg'; +import SubstackSvg from './substack.svg'; /** * Sponsors on the main page is a unique selling point of our @@ -23,40 +24,56 @@ export default function Sponsors() { src={AMPSvg} alt="AMP" width="150" - height="150" - style="height: 4rem; width: auto;" + height="100" + style="height: 3rem; width: auto;" />
  • trivago + +
    • +
  • + + Substack
  • webflow
    • diff --git a/src/components/sponsors/substack.svg b/src/components/sponsors/substack.svg new file mode 100644 index 000000000..9a087c589 --- /dev/null +++ b/src/components/sponsors/substack.svg @@ -0,0 +1 @@ + diff --git a/src/components/sponsors/trivago.svg b/src/components/sponsors/trivago.svg index ffc5934f6..adf15223d 100644 --- a/src/components/sponsors/trivago.svg +++ b/src/components/sponsors/trivago.svg @@ -1,5 +1 @@ - - - - - + From e1dcbcb9c071c6a772e7d670e9f5cff97f78eb95 Mon Sep 17 00:00:00 2001 From: Jason Miller Date: Sun, 11 Apr 2021 21:44:58 +0000 Subject: [PATCH 2/2] adjust styles to account for 4 sponsors, drop to multiline on small screens --- src/components/sponsors/style.less | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/src/components/sponsors/style.less b/src/components/sponsors/style.less index 284ba2580..e35e31373 100644 --- a/src/components/sponsors/style.less +++ b/src/components/sponsors/style.less @@ -1,6 +1,9 @@ :global(.sponsors) { text-align: center; margin-bottom: -2rem; + max-width: 60rem !important; + padding-left: 0 !important; + padding-right: 0 !important; p { margin-bottom: 0; @@ -9,24 +12,33 @@ .sponsorList { display: flex; + flex-wrap: wrap; justify-content: center; align-items: center; padding: 0 !important; - margin: 1rem 0 0 0; + margin: .5rem 0 0; } .sponsorItem { + flex: 1 1 auto; list-style: none; opacity: 0.5; transition: all 0.3s; - filter: grayscale(1); + filter: grayscale(1) contrast(5); + text-align: center; + padding: .5rem 1.5rem 0; + margin: 0; @media (prefers-color-scheme: dark) { filter: brightness(0) invert(1); + &:hover { + filter: grayscale(0) contrast(1); + } } &:hover { opacity: 1; + filter: none; } a { @@ -37,7 +49,7 @@ background: none !important; } - & + .sponsorItem { - margin-left: 3rem; - } + // & + .sponsorItem { + // margin-left: 3rem; + // } }