diff --git a/src/components/GlossarySearch/glossaryTerms.json b/src/components/GlossarySearch/glossaryTerms.json index 4261f477..eff20a52 100644 --- a/src/components/GlossarySearch/glossaryTerms.json +++ b/src/components/GlossarySearch/glossaryTerms.json @@ -449,7 +449,6 @@ { "termTitle": "Chargeback", "pageTitle": "Define: Chargeback in FinOps", - "imgUrl": "/img/glossary/chargeback.png", "slug": "chargeback", "definition": "A financial management tool where departments or teams are billed internally for their consumption or use of IT services and resources.", "sections": [ @@ -793,6 +792,7 @@ "termTitle": "AWS", "pageTitle": "Understanding AWS in the Context of FinOps", "slug": "aws", + "imgUrl": "aws.png", "definition": "Amazon Web Services, a subsidiary of Amazon providing cloud computing platforms and APIs to businesses, governments, and individuals.", "sections": [ { diff --git a/src/components/GlossaryTermPage/GlossaryTermPage.css b/src/components/GlossaryTermPage/GlossaryTermPage.css index e9819e0e..a1edb23c 100644 --- a/src/components/GlossaryTermPage/GlossaryTermPage.css +++ b/src/components/GlossaryTermPage/GlossaryTermPage.css @@ -29,7 +29,13 @@ box-shadow: var(--box-shadow); } -.glossary-term__aside--img { +.glossary-term__aside-img-container { + position: relative; + display: flex; + align-items: stretch; +} + +.glossary-term__aside-img { background-color: #fafafa; object-fit: cover; width: 100%; @@ -47,12 +53,23 @@ margin-bottom: .5rem; } -.glossary-term__def { +.glossary-term__aside-def { + display: flex; + gap: .25rem; + align-items: center; font-size: smaller; - color: var(--faded-text); + position: absolute; + color: white; + bottom: .5rem; + left: 1rem; + opacity: .5; font-weight: 100; } +.glossary-term__aside-def svg { + margin-bottom: 1px; +} + .glossary-term__definition { margin: .4rem 0 } diff --git a/src/components/GlossaryTermPage/GlossaryTermPageAside.tsx b/src/components/GlossaryTermPage/GlossaryTermPageAside.tsx index 8d8bd8f7..5ce12966 100644 --- a/src/components/GlossaryTermPage/GlossaryTermPageAside.tsx +++ b/src/components/GlossaryTermPage/GlossaryTermPageAside.tsx @@ -1,18 +1,24 @@ import React from 'react'; import { GlossaryTermType } from '../GlossarySearch'; +import OpenBookIcon from '../icons/OpenBookIcon'; + +const imgUrlPrefix = '/img/glossary/'; const GlossaryTermPageAside = ({ term }: { term: GlossaryTermType }) => ( diff --git a/static/img/glossary/aws.png b/static/img/glossary/aws.png new file mode 100644 index 00000000..955364bd Binary files /dev/null and b/static/img/glossary/aws.png differ diff --git a/static/img/glossary/chargeback.png b/static/img/glossary/chargeback.png deleted file mode 100644 index 228dae25..00000000 Binary files a/static/img/glossary/chargeback.png and /dev/null differ diff --git a/static/img/glossary/generic.png b/static/img/glossary/generic.png new file mode 100644 index 00000000..c92c3349 Binary files /dev/null and b/static/img/glossary/generic.png differ