diff --git a/styles/styles.css b/styles/styles.css index e6e7755..a3c0659 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -6,3 +6,101 @@ * * */ + :root { + --color-white: #FFF; + --color-gray-100: #F8F8F8; + --color-gray-200: #E8E8E8; + --color-gray-300: #D4D4D4; + --color-gray-400: #B6B6B6; + --color-gray-500: #909090; + --color-gray-600: #686868; + --color-gray-700: #444; + --color-gray-800: #242424; + --color-black: #000; + --color-brand-title: #000B1D; + --color-accent: #1473E6; + --color-accent-hover: #0D67EE; + --color-info-accent: #5C5CE0; + --color-info-accent-hover: #4646C6; + --color-info-accent-down: #3D3DB4; + --color-info-accent-light: #DEDEF9; + + /* body */ + --body-max-width: 600px; + --body-background-color: var(--color-white); + --body-alt-background-color: var(--color-gray-600); + --body-font-family: 'adobe-clean', 'Trebuchet MS', sans-serif; + --body-font-weight: 300; + --body-color: var(--color-black); + --body-line-height: 1.5; + --body-font-size-xxl: 1.75rem; /* 28px */ + --body-font-size-xl: 1.375rem; /* 22px */ + --body-font-size-l: 1.25rem; /* 20px */ + --body-font-size-m: 1.125rem; /* 18px */ + --body-font-size-s: 1rem; /* 16px */ + --body-font-size-xs: 0.875rem; /* 14px */ + --body-font-size-xxs: 0.75rem; /* 12px */ + + /* headings */ + --heading-font-weight: 700; + --heading-color: var(--color-gray-800); + --heading-line-height: 1.25; + --heading-font-size-xxxl: 5rem; /* 80px */ + --heading-font-size-xxl: 2.75rem; /* 44px */ + --heading-font-size-xl: 2.25rem; /* 36px */ + --heading-font-size-l: 1.75rem; /* 28px */ + --heading-font-size-m: 1.5rem; /* 24px */ + --heading-font-size-s: 1.25rem; /* 20px */ + --heading-font-size-xs: 1.125rem; /* 18px */ + --heading-font-size-xxs: 0.875rem; /* 14px */ + + /* details */ + --detail-font-weight: 700; + --detail-color: var(--color-gray-600); + --detail-line-height: 1.25; + --detail-font-size-l: 1.25rem; /* 20px */ + --detail-font-size-m: 1rem; /* 16px */ + --detail-font-size-s: 0.75rem; /* 12px */ +} + +body main { + font-size: var(--body-font-size-m); + line-height: var(--body-line-height); + margin: 64px 0 0; + font-weight: var(--body-font-weight); +} + +main .section p:has(img) { + display: flex; + flex-direction: column; + justify-content: center; +} + +main p picture { + margin: 0 auto; +} + +main p picture img { + max-width: 100%; + max-height: 440px; + object-fit: cover; +} + +/** Block Specific Styles **/ +.section .columns { + max-width: var(--body-max-width); + margin-left: auto; + margin-right: auto; +} + +@media screen and (min-width: 600px) { + body main { + font-size: var(--body-font-size-l); + } + + main .section .content { + max-width: var(--body-max-width); + margin-left: auto; + margin-right: auto; + } +}