diff --git a/css/base/base.css b/css/base/base.css index 9b0b2c2..3fcd47b 100755 --- a/css/base/base.css +++ b/css/base/base.css @@ -27,8 +27,8 @@ html { body { margin: 0; color: var(--color-text-neutral-medium); - /*background-color: var(--color--gray-100);*/ - background-color: #ece8e3; + background-color: var(--color--gray-100); + /* background-color: #ece8e3; */ /*background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='84' viewBox='0 0 50 84'%3e %3cpath opacity='0.05' fill='%230e6ba6' d='M25,61.7C25,68.5,19.4,74,12.5,74S0,68.5,0,61.7c0-5.7,3.9-9.6,7.4-12.9c2.3-2.2,4.5-4.4,5.1-6.8c0.7,2.4,2.8,4.6,5.1,6.8C21.1,52.2,25,56,25,61.7z M42.6,6.8c-2.3-2.2-4.5-4.4-5.1-6.8c-0.7,2.4-2.9,4.6-5.1,6.8C28.9,10.2,25,14,25,19.7C25,26.5,30.6,32,37.5,32S50,26.5,50,19.7C50,14,46.1,10.2,42.6,6.8z'/%3e%3c/svg%3e");*/ /*background-position: top left; [> LTR <]*/ } diff --git a/css/base/variables.css b/css/base/variables.css index afb3aed..f8b1e44 100755 --- a/css/base/variables.css +++ b/css/base/variables.css @@ -47,8 +47,13 @@ --grid-col-count: 6; --grid-gap: var(--sp); --grid-gap-count: calc(var(--grid-col-count) - 1); /* Count of grid-gaps. */ - --grid-full-width: calc(100vw - var(--sp2) - var(--scrollbar-width)); /* Width of the entire grid. */ - --grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count)); + --grid-full-width: calc( + 100vw - var(--sp2) - var(--scrollbar-width) + ); /* Width of the entire grid. */ + --grid-col-width: calc( + (var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / + var(--grid-col-count) + ); /* Layout helpers */ --sp0-25: calc(0.25 * var(--sp)); @@ -76,16 +81,56 @@ */ --color--gray-hue: 201; --color--gray-saturation: 15%; - --color--gray-5: hsl(var(--color--gray-hue), var(--color--gray-saturation), 5%); /* Black */ - --color--gray-10: hsl(var(--color--gray-hue), var(--color--gray-saturation), 11%); - --color--gray-20: hsl(var(--color--gray-hue), var(--color--gray-saturation), 20%); /* Black 2 */ - --color--gray-45: hsl(var(--color--gray-hue), var(--color--gray-saturation), 44%); /* Gray Dark */ - --color--gray-60: hsl(var(--color--gray-hue), var(--color--gray-saturation), 57%); /* Gray medium */ - --color--gray-65: hsl(var(--color--gray-hue), var(--color--gray-saturation), 63%); /* Black 4 */ - --color--gray-70: hsl(var(--color--gray-hue), var(--color--gray-saturation), 72%); /* Gray medium 2 */ - --color--gray-90: hsl(var(--color--gray-hue), var(--color--gray-saturation), 88%); /* Gray light */ - --color--gray-95: hsl(var(--color--gray-hue), var(--color--gray-saturation), 93%); /* Gray light 1 */ - --color--gray-100: hsl(var(--color--gray-hue), var(--color--gray-saturation), 97%); + --color--gray-5: hsl( + var(--color--gray-hue), + var(--color--gray-saturation), + 5% + ); /* Black */ + --color--gray-10: hsl( + var(--color--gray-hue), + var(--color--gray-saturation), + 11% + ); + --color--gray-20: hsl( + var(--color--gray-hue), + var(--color--gray-saturation), + 20% + ); /* Black 2 */ + --color--gray-45: hsl( + var(--color--gray-hue), + var(--color--gray-saturation), + 44% + ); /* Gray Dark */ + --color--gray-60: hsl( + var(--color--gray-hue), + var(--color--gray-saturation), + 57% + ); /* Gray medium */ + --color--gray-65: hsl( + var(--color--gray-hue), + var(--color--gray-saturation), + 63% + ); /* Black 4 */ + --color--gray-70: hsl( + var(--color--gray-hue), + var(--color--gray-saturation), + 72% + ); /* Gray medium 2 */ + --color--gray-90: hsl( + var(--color--gray-hue), + var(--color--gray-saturation), + 88% + ); /* Gray light */ + --color--gray-95: hsl( + var(--color--gray-hue), + var(--color--gray-saturation), + 93% + ); /* Gray light 1 */ + --color--gray-100: hsl( + var(--color--gray-hue), + var(--color--gray-saturation), + 97% + ); /** * Primary colors. @@ -95,11 +140,55 @@ --color--primary-hue: 202; --color--primary-saturation: 79%; --color--primary-lightness: 50; - --color--primary-30: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.36 * var(--color--primary-lightness))))); - --color--primary-40: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) - (0.24 * var(--color--primary-lightness))))); /* Blue dark */ - --color--primary-50: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * var(--color--primary-lightness))); /* Blue medium */ - --color--primary-60: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.24 * (100 - var(--color--primary-lightness)))))); /* Blue bright */ - --color--primary-80: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1% * (var(--color--primary-lightness) + (0.85 * (100 - var(--color--primary-lightness)))))); + --color--primary-30: hsl( + var(--color--primary-hue), + var(--color--primary-saturation), + calc( + 1% * + ( + var(--color--primary-lightness) - + (0.36 * var(--color--primary-lightness)) + ) + ) + ); + --color--primary-40: hsl( + var(--color--primary-hue), + var(--color--primary-saturation), + calc( + 1% * + ( + var(--color--primary-lightness) - + (0.24 * var(--color--primary-lightness)) + ) + ) + ); /* Blue dark */ + --color--primary-50: hsl( + var(--color--primary-hue), + var(--color--primary-saturation), + calc(1% * var(--color--primary-lightness)) + ); /* Blue medium */ + --color--primary-60: hsl( + var(--color--primary-hue), + var(--color--primary-saturation), + calc( + 1% * + ( + var(--color--primary-lightness) + + (0.24 * (100 - var(--color--primary-lightness))) + ) + ) + ); /* Blue bright */ + --color--primary-80: hsl( + var(--color--primary-hue), + var(--color--primary-saturation), + calc( + 1% * + ( + var(--color--primary-lightness) + + (0.85 * (100 - var(--color--primary-lightness))) + ) + ) + ); /** * Variables specific to text. @@ -119,6 +208,10 @@ --color--red: #e33f1e; /* Red */ --color--gold: #fdca40; /* Gold */ --color--green: #3fa21c; + /* ============ */ + --color--blue: #115ca0; + --color--red: #e21c21; + --color--yellow: #ffd703; /* Header */ --header-height-wide-when-fixed: calc(6 * var(--sp)); @@ -159,7 +252,9 @@ @media ((((min-width: 60rem)))) { :root { - --grid-full-width: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4)); + --grid-full-width: calc( + 100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4) + ); } } diff --git a/css/components/block.css b/css/components/block.css index a0bdb21..f201ee0 100755 --- a/css/components/block.css +++ b/css/components/block.css @@ -22,13 +22,11 @@ } .site-footer .block__title { - color: var(--color--gray-65); + color: var(--color--white); } .region--sidebar .block { - /*background: #f6f8f8;*/ background: #ece8e3; padding: 1rem; border-radius: 5px; - } diff --git a/css/components/header-site-branding.css b/css/components/header-site-branding.css index 3d0847f..833de89 100755 --- a/css/components/header-site-branding.css +++ b/css/components/header-site-branding.css @@ -29,6 +29,10 @@ var(--color--primary-40) 78.66% ); } +.site-header__initial, +.site-branding { + border-bottom: 6px solid var(--color--yellow); +} @media (min-width: 31.25rem) { .site-branding { @@ -139,6 +143,7 @@ } .site-branding__slogan { color: #d0bca4; + color: var(--color--yellow); font-size: 1.125rem; /*font-size: 1.5rem;*/ }