From 6a4086f7793d1256a0bced752419e445e70e4259 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?B=C3=A1rbara=20Chaves?= Date: Sun, 18 Feb 2024 14:11:15 +0100 Subject: [PATCH] Feature/mp 202 update style (#30) * Update style --- components/header/constants.js | 8 ++--- components/header/menu/index.js | 15 +++------ components/header/style.scss | 39 +++++++++++++--------- components/icons/index.js | 14 +++----- components/tool/data-layer-list/style.scss | 2 +- components/tool/sidebar/component.js | 9 ++--- components/tool/sidebar/style.scss | 23 +++++++++++-- css/_settings.scss | 2 +- pages/_document.js | 2 +- 9 files changed, 63 insertions(+), 51 deletions(-) diff --git a/components/header/constants.js b/components/header/constants.js index 43756b6..9a7490f 100644 --- a/components/header/constants.js +++ b/components/header/constants.js @@ -3,28 +3,26 @@ export const COLORS = ['#03755E', '#184B95', '#A01200', '#7E56D8']; export const TOOLS = [ { id: 'earth-atlas', - name: 'Earth Atlas', color: COLORS[1], + name: 'Earth Atlas', url: 'https://maps.mongabay.com', }, { id: 'fire-weather-almanac', - name: 'Fire Weather Almanac', color: COLORS[2], - image: '/images/fire-tool.png', + name: 'Fire Weather Almanac', url: 'https://charts.mongabay.com', }, { id: 'reforestation-app', - title: 'Reforestation App', color: COLORS[0], name: 'Reforestation App', url: 'https://reforestation.app', }, { id: 'trade-flow-map', - name: 'Trade Flow Map', color: COLORS[3], + name: 'Trade Flow Map', url: 'https://chains.mongabay.com', }, ]; diff --git a/components/header/menu/index.js b/components/header/menu/index.js index 2dd2834..23924c0 100644 --- a/components/header/menu/index.js +++ b/components/header/menu/index.js @@ -40,7 +40,7 @@ const HeaderMenu = () => { close navigation menu -

Data Journalism Tools

+

Mongabay Data Studio

-
- {/* TODO: add lights */} +
Get in touch - - Find out more -
diff --git a/components/header/style.scss b/components/header/style.scss index a450045..319456e 100644 --- a/components/header/style.scss +++ b/components/header/style.scss @@ -23,20 +23,14 @@ color: white; font-family: $font-family-1; font-size: $font-size-xs; - font-weight: $font-weight-strong; letter-spacing: 0.96px; - text-transform: uppercase; - } - - &__name { - text-transform: uppercase; + font-weight: 700; } } &__menu { flex-shrink: 0; - &__icon { - width: 29px; - height: 29px; + &__icon.c-icon { + transform: scale(0.9); } &__content { position: fixed; @@ -71,14 +65,20 @@ right: 2rem; top: 10px; &__icon.c-icon { - stroke: $text-color-1; + stroke: black; width: 51px; height: 51px; stroke-width: 0px; + transform: scale(0.8); } } &__title { - font: $font-weight-bold $font-size-l $font-family-2; + color: var(--Black-500, #000); + font-family: 'Open Sans'; + font-size: 44px; + font-style: normal; + font-weight: 300; + line-height: 56px; /* 127.273% */ } ul { display: flex; @@ -91,12 +91,16 @@ display: flex; align-items: center; gap: 16px; - font: $font-weight-strong $font-size-medium $font-family-1; - text-transform: uppercase; + font-family: $font-family-1; + font-size: 24px; + font-style: normal; + font-weight: 300; + line-height: 32px; color: $text-color-1; border-radius: 22px; &:hover { text-decoration: underline; + text-decoration-thickness: 1px; } &:focus-visible { outline: $primary auto 1px; @@ -121,12 +125,16 @@ } } } - &__buttons { + &__button a { padding-top: 42px; display: flex; align-items: flex-end; gap: 12px; - font: $font-weight-strong $font-size-s $font-family-1; + font-size: 16px; + font-style: normal; + font-weight: 600; + padding: 12px 32px; + background-color: black; } } } @@ -160,6 +168,7 @@ } } .btn { + border-radius: 80px; &:focus-visible { outline: $primary auto 1px; outline-offset: 2px; diff --git a/components/icons/index.js b/components/icons/index.js index 010cad6..6b30f80 100644 --- a/components/icons/index.js +++ b/components/icons/index.js @@ -56,17 +56,11 @@ const Icons = () => ( - + Menu - - - - - - - - - + + + { setDownloadModalOpen(false)} />

Earth Atlas

- Create images of maps using various basemaps, contextual and data layers, or explore the map - presets about topics like conservation. + Seeing patterns of planetary change is profound. Combine environmental, social, and + satellite data aggregated from various reputable sources to create maps that add evidence + and context to articles quickly.

{ -
+
}> - diff --git a/components/tool/sidebar/style.scss b/components/tool/sidebar/style.scss index 3b5c443..3f9236d 100644 --- a/components/tool/sidebar/style.scss +++ b/components/tool/sidebar/style.scss @@ -10,15 +10,18 @@ padding: 3rem 0 3rem 3rem; h1 { - font-weight: $font-weight-bold; + font-weight: 300; + font-family: $font-family-1; + font-size: 44px; } - h2, .h2 { + h2, + .h2 { font-weight: $font-weight-normal; } &__description { - font-size: 18px; + font-size: 16px; margin: 0; } @@ -29,6 +32,10 @@ flex-grow: 1; overflow: hidden; + .title .button .h1 { + font-weight: 400; + } + .item { margin: map-get($spacers, 2) 0; overflow: hidden; @@ -55,4 +62,14 @@ } } } + .buttons { + display: flex; + gap: 12px; + .btn { + flex: 1; + padding-block: 11px; + font-weight: 600; + border-radius: 80px; + } + } } diff --git a/css/_settings.scss b/css/_settings.scss index a15c133..631c683 100644 --- a/css/_settings.scss +++ b/css/_settings.scss @@ -34,7 +34,7 @@ $font-family-2: 'Cardo', sans-serif; $font-family-base: $font-family-1; -$font-size-l: rem(30); +$font-size-l: rem(28); $font-size-base: rem(16); $font-size-medium: rem(14); $font-size-s: rem(13); diff --git a/pages/_document.js b/pages/_document.js index 9be203f..4c68b89 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -17,7 +17,7 @@ export default class MyDocument extends Document {