From d90c282a535294175e11083ffb22f96630331deb Mon Sep 17 00:00:00 2001 From: Artur Janas Date: Thu, 24 Aug 2023 15:35:12 +0100 Subject: [PATCH] chore: formatting --- .../GlossarySearch/GlossaryCard.css | 57 ++++---- .../GlossarySearch/GlossarySearch.css | 88 ++++++------ src/components/GlossaryTermPage/Cta.css | 46 +++--- .../GlossaryTermPage/GlossaryTermPage.css | 135 +++++++++--------- 4 files changed, 161 insertions(+), 165 deletions(-) diff --git a/src/components/GlossarySearch/GlossaryCard.css b/src/components/GlossarySearch/GlossaryCard.css index e1c46a88..03c0d76e 100644 --- a/src/components/GlossarySearch/GlossaryCard.css +++ b/src/components/GlossarySearch/GlossaryCard.css @@ -1,65 +1,62 @@ /* GLOSSARY TERM CARD */ .glossary-term__card { - display: flex; - flex-direction: column; - justify-content: space-between; - gap: .5rem; - padding: 1rem 1.5rem; - border: 1px solid var(--border-color); - border-radius: 8px; - transition: all 0.2s ease-in-out; - border: 1px solid var(--border-light); + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 0.5rem; + padding: 1rem 1.5rem; + border: 1px solid var(--border-color); + border-radius: 8px; + transition: all 0.2s ease-in-out; + border: 1px solid var(--border-light); } - .glossary-term__card-title { - font-size: 1.5rem; - margin-bottom: .5rem; - font-weight: bold; - display: flex; - gap: 0.5rem; - align-items: baseline; + font-size: 1.5rem; + margin-bottom: 0.5rem; + font-weight: bold; + display: flex; + gap: 0.5rem; + align-items: baseline; } /* Hover animations */ .glossary-term__card-title, .glossary-term__card-description, .glossary-term__card-link .arrow-icon { - transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; } .glossary-term__card:hover { - background-color: #fafafa; - transform: translateY(-.25rem) scale(1.02); + background-color: #fafafa; + transform: translateY(-0.25rem) scale(1.02); } - .glossary-term__card:hover .glossary-term__card-description { - background-position: -100% 0; + background-position: -100% 0; } .glossary-term__card-description { background-size: 200%; background-position: 0 0; display: inline; - transition: .2s ease-in; - + transition: 0.2s ease-in; } /* link */ .glossary-term__card-link { - font-size: 1rem; - margin-bottom: 0; - display: flex; - align-items: center; - gap: 0.325rem; - width: fit-content; + font-size: 1rem; + margin-bottom: 0; + display: flex; + align-items: center; + gap: 0.325rem; + width: fit-content; } .glossary-term__card-link:hover .arrow-icon { - animation: slideRight 0.5s ease-in-out; + animation: slideRight 0.5s ease-in-out; } @keyframes slideRight { diff --git a/src/components/GlossarySearch/GlossarySearch.css b/src/components/GlossarySearch/GlossarySearch.css index 6b0cf731..148fed0e 100644 --- a/src/components/GlossarySearch/GlossarySearch.css +++ b/src/components/GlossarySearch/GlossarySearch.css @@ -2,83 +2,83 @@ /* Intro */ .glossary-search__intro-container { - display: flex; - flex-direction: column; - gap: 2rem; - justify-content: center; + display: flex; + flex-direction: column; + gap: 2rem; + justify-content: center; } .glossary-search__intro-container .tagline { - display: flex; - gap: .5rem; - align-items: center; + display: flex; + gap: 0.5rem; + align-items: center; } /* Content */ .glossary-search__content-wrapper { - padding: 4rem 1.5rem; + padding: 4rem 1.5rem; } .glossary-search__content-list { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); - grid-gap: 1rem; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + grid-gap: 1rem; } /* Glossary search */ .finops-glossary__search { - position: relative; - border-radius: 3rem; - padding: 2px; - width: 50%; - margin: 0 auto; + position: relative; + border-radius: 3rem; + padding: 2px; + width: 50%; + margin: 0 auto; } input.glossary-search__input { - width: 100%; - padding: 1.5rem 2rem 1.5rem 4rem; - background-color: #2a2a5b; - border-radius: 3rem; + width: 100%; + padding: 1.5rem 2rem 1.5rem 4rem; + background-color: #2a2a5b; + border-radius: 3rem; } .finops-glossary__search > .search-icon { - position: absolute; - top: 50%; - left: 2rem; - transform: translateY(-50%); + position: absolute; + top: 50%; + left: 2rem; + transform: translateY(-50%); } /* Search clear */ .glossary-search__clear-button { - position: absolute; - top: 50%; - right: 2rem; - display: flex; - align-items: center; - gap: 0.5rem; - transform: translateY(-50%); - background-color: #1e1e48; + position: absolute; + top: 50%; + right: 2rem; + display: flex; + align-items: center; + gap: 0.5rem; + transform: translateY(-50%); + background-color: #1e1e48; } /* Hide the html5 button */ -.intro input[type="search"]::-webkit-search-decoration, -.intro input[type="search"]::-webkit-search-cancel-button, -.intro input[type="search"]::-webkit-search-results-button, -.intro input[type="search"]::-webkit-search-results-decoration { - -webkit-appearance:none; +.intro input[type='search']::-webkit-search-decoration, +.intro input[type='search']::-webkit-search-cancel-button, +.intro input[type='search']::-webkit-search-results-button, +.intro input[type='search']::-webkit-search-results-decoration { + -webkit-appearance: none; } /* Search no results */ .finops-glossary__search-no-results { - padding: 1.5rem; - background-color: var(--nu10); - border: 1px solid var(--border-light); - border-radius: 8px; + padding: 1.5rem; + background-color: var(--nu10); + border: 1px solid var(--border-light); + border-radius: 8px; } @media screen and (max-width: 1080px) { - .finops-glossary__search { - width: 100%; - } + .finops-glossary__search { + width: 100%; + } } diff --git a/src/components/GlossaryTermPage/Cta.css b/src/components/GlossaryTermPage/Cta.css index a71fe36a..7787c8d0 100644 --- a/src/components/GlossaryTermPage/Cta.css +++ b/src/components/GlossaryTermPage/Cta.css @@ -1,50 +1,50 @@ /* CTA */ .glossary-cta { - background: var(--primary-gradient); + background: var(--primary-gradient); } .glossary-cta__wrapper { - display: flex; - flex-wrap: wrap; - gap: 1rem; - justify-content: space-between; - align-items: center; - background: url('/img/shift-left.svg') center right -200px no-repeat; - background-size: cover; - padding: 1.5rem 2rem; - position: relative; + display: flex; + flex-wrap: wrap; + gap: 1rem; + justify-content: space-between; + align-items: center; + background: url('/img/shift-left.svg') center right -200px no-repeat; + background-size: cover; + padding: 1.5rem 2rem; + position: relative; } .glossary-cta__text-wrapper { - display: flex; - align-items: flex-start; - flex-direction: column; + display: flex; + align-items: flex-start; + flex-direction: column; } -.glossary-cta, +.glossary-cta, .glossary-cta__wrapper { - border-radius: 8px; + border-radius: 8px; } h3.glossary-cta__header { - margin-bottom: .5rem; - font-size: 1.875rem; + margin-bottom: 0.5rem; + font-size: 1.875rem; font-weight: 900; } .glossary-cta__text { - margin: 0; - font-weight: 400; - line-height: 1.4; + margin: 0; + font-weight: 400; + line-height: 1.4; } h3.glossary-cta__header, .glossary-cta__text { - color: var(--header-color); + color: var(--header-color); } @media screen and (max-width: 769px) { .glossary-term__cta { padding: 1rem 0; - } -} \ No newline at end of file + } +} diff --git a/src/components/GlossaryTermPage/GlossaryTermPage.css b/src/components/GlossaryTermPage/GlossaryTermPage.css index c3b11b99..57d73538 100644 --- a/src/components/GlossaryTermPage/GlossaryTermPage.css +++ b/src/components/GlossaryTermPage/GlossaryTermPage.css @@ -1,100 +1,99 @@ /* GLOSSARY TERM PAGE */ .glossary-term__page-container { - display: grid; - grid-template-columns: 2fr 1fr; + display: grid; + grid-template-columns: 2fr 1fr; } -.glossary-term__article { - display: flex; - flex-direction: column; - gap: 2rem; - padding: 4rem 1.5rem; +.glossary-term__article { + display: flex; + flex-direction: column; + gap: 2rem; + padding: 4rem 1.5rem; } -.glossary-term__content { - display: flex; - flex-direction: column; - gap: 1rem; - padding: 0 4rem 4rem 0; +.glossary-term__content { + display: flex; + flex-direction: column; + gap: 1rem; + padding: 0 4rem 4rem 0; } -.glossary-term__aside { - display: flex; - flex-direction: column; - border: 1px solid var(--border-light); - border-radius: 8px; - height: fit-content; - overflow: hidden; - box-shadow: var(--box-shadow); +.glossary-term__aside { + display: flex; + flex-direction: column; + border: 1px solid var(--border-light); + border-radius: 8px; + height: fit-content; + overflow: hidden; + box-shadow: var(--box-shadow); } .glossary-term__aside-img-container { - position: relative; - display: flex; - align-items: center; - justify-content: center; - height: 150px; - background: url('/img/glossary/background.svg') no-repeat center center; + position: relative; + display: flex; + align-items: center; + justify-content: center; + height: 150px; + background: url('/img/glossary/background.svg') no-repeat center center; } -.glossary-term__aside-img { - object-fit: contain; - width: auto; - height: 50px; +.glossary-term__aside-img { + object-fit: contain; + width: auto; + height: 50px; } .glossary-term__aside-content { - padding: 1rem; + padding: 1rem; } -.glossary-term__header { - display: flex; - align-items: baseline; - gap: 0.5rem; - margin-bottom: .5rem; +.glossary-term__header { + display: flex; + align-items: baseline; + gap: 0.5rem; + margin-bottom: 0.5rem; } .glossary-term__aside-def { - display: flex; - gap: .25rem; - align-items: center; - font-size: smaller; - position: absolute; - color: white; - bottom: .5rem; - left: 1rem; - opacity: .5; - font-weight: 100; + display: flex; + gap: 0.25rem; + align-items: center; + font-size: smaller; + position: absolute; + color: white; + bottom: 0.5rem; + left: 1rem; + opacity: 0.5; + font-weight: 100; } .glossary-term__aside-def svg { - margin-bottom: 2px; + margin-bottom: 2px; } .glossary-term__definition { - margin: .4rem 0 + margin: 0.4rem 0; } - @media (max-width: 1080px) { - .glossary-term__page-container { - grid-template-columns: 1fr; - } - .glossary-term__content { - padding: 0 1.5rem 1.5rem 1.5rem; - } - .glossary-term__aside { - order: -1; - margin: 0; - } - .glossary-term__aside-def{ - margin-left: .625rem; - } - .glossary-term__aside-content { - padding-left: 1.5rem; - } - .glossary-term__content{ - margin-top: 1.5rem; - } + .glossary-term__page-container { + grid-template-columns: 1fr; + } + .glossary-term__content { + padding: 0 1.5rem 1.5rem 1.5rem; + } + .glossary-term__aside { + order: -1; + margin: 0; + } + .glossary-term__aside-def { + margin-left: 0.625rem; + } + .glossary-term__aside-content { + padding-left: 1.5rem; + } + .glossary-term__content { + margin-top: 1.5rem; + } }