update logo and color scheme across components

ostafinskim · ostafinskim · commit f07f60f4f803 · 2024-11-29T13:15:03.000Z
diff --git a/assets-src/images/w3c-logo-full.png b/assets-src/images/w3c-logo-full.png
diff --git a/assets-src/images/w3c-logo-letters.png b/assets-src/images/w3c-logo-letters.png
diff --git a/assets-src/styles/sass/00-settings/_colors.scss b/assets-src/styles/sass/00-settings/_colors.scss
@@ -24,7 +24,7 @@ $teal: #39cccc;
 $aqua: #7fdbff;
 $blue: #0073d8;
 $navy: #001f3f;
-$purple: #920ba6;
+$purple: #75336c;
 $fuchsia: #f012be;
 $grey: #aaa;
 $mercury-grey: #e5e5e5;
@@ -38,21 +38,17 @@ $red: #e93737;
 $light-red: #ec7070;
 $coral: #fc7750;
 $light-coral: #fea78d;
-$deep-yellow: #f9c818;
 $yellow: #f9dc4a;
 $deep-green: #0a4343;
 $teal-green: #237978;
 $aqua: #1bc0d7;
 $light-blue: #cbe0fb;
-$sky-blue: #6bc8fe;
-$azure: #0075ff;
 $w3c-blue: #005a9c;
-$blue: #005797;
-$deep-blue: #024488;
+$deep-blue: #002a56;
 $pink: #ddb0c8;
 $light-pink: #eeccdc;
 $storm-gray: #545454;
-$twiki-gray: #bdbdbd;
+$twiki-gray: #cac9c9;
 $mist-gray: #f8f8fb;
 
 
@@ -63,12 +59,12 @@ $border-color:                  $twiki-gray;
 $input-border-color:            $storm-gray;
 $focus-color:                   $yellow;
 
-$link-color:                    $blue;
+$link-color:                    $w3c-blue;
 $link-color--visited:           $purple;
 $link-color--hover:             $deep-blue;
 
 $success-color:                 #046704;
-$info-color:                    $w3c-blue;
+$info-color:                    $deep-blue;
 $warning-color:                 #c28605;
 $error-color:                   #a82615;
 
diff --git a/assets-src/styles/sass/50-core-components/_cards.scss b/assets-src/styles/sass/50-core-components/_cards.scss
@@ -39,7 +39,7 @@
 	}
 
 	&.talk {
-		border-color: $deep-yellow;
+		border-color: $deep-blue;
 	}
 
 	&.workshop {
diff --git a/assets-src/styles/sass/50-core-components/_evangelists.scss b/assets-src/styles/sass/50-core-components/_evangelists.scss
@@ -30,7 +30,7 @@
 }
 
 .component--evangelists__list {
-	background-color: $w3c-blue;
+	background-color: $deep-blue;
 	border-radius: rem(6);
 	color: $white;
 	overflow: hidden;
diff --git a/assets-src/styles/sass/50-core-components/_logo.scss b/assets-src/styles/sass/50-core-components/_logo.scss
@@ -4,14 +4,18 @@
 
 .logo {
 	display: block;
-	height: rem(44);
 	position: relative;
-	width: rem(66);
+	max-width: rem(80);
+	
+	> img {
+		display: block;
+		width: 100%;
+	}
 
-	@include mq($bp-tab-large) {
-		height: rem(52);
-		width: rem(78);
+	@include mq($bp-lap){
+		max-width: rem(115);
 	}
+
 }
 
 .logo--member {
diff --git a/assets-src/styles/sass/50-core-components/_navigation.scss b/assets-src/styles/sass/50-core-components/_navigation.scss
@@ -7,7 +7,6 @@
 }
 
 #global-nav {
-	border-bottom: solid 1px $border-color;
 	display: block;
 	padding-bottom: rem(18);
 	padding-top: rem(18);
@@ -24,7 +23,6 @@
 	flex-wrap: wrap;
 
 	@include mq($max-width) {
-		align-items: flex-end;
 		flex-wrap: nowrap;
 		position: relative;
 	}
diff --git a/assets-src/styles/sass/50-core-components/_quotes.scss b/assets-src/styles/sass/50-core-components/_quotes.scss
@@ -4,15 +4,15 @@
 
 .component--quote {
 	@include txt-saturn;
-	color: $w3c-blue;
+	color: $deep-blue;
 	font-weight: bold;
 	margin-inline-end: 0;
 	margin-inline-start: rem(10);
 	padding: rem(20);
 	position: relative;
 
 	&::before {
-		background-color: $w3c-blue;
+		background-color: $deep-blue;
 		border-radius: rem(5);
 		left: rem(-10);
 		width: rem(10);
diff --git a/assets-src/styles/sass/50-core-components/_slide.scss b/assets-src/styles/sass/50-core-components/_slide.scss
@@ -40,7 +40,7 @@
 	}
 
 	&::before {
-		background-color: $w3c-blue;
+		background-color: $deep-blue;
 		border-radius: rem(5);
 		content: '';
 		height: 100%;
diff --git a/assets-src/styles/sass/50-core-components/_toc.scss b/assets-src/styles/sass/50-core-components/_toc.scss
@@ -17,7 +17,7 @@
 
 // Only apply the border to the top level list
 .toc > ul {
-	border-inline-start: solid 3px $deep-yellow;
+	border-inline-start: solid 3px $w3c-blue;
 }
 
 .toc ul {
diff --git a/assets-src/styles/sass/50-core-components/_you-may-also-like.scss b/assets-src/styles/sass/50-core-components/_you-may-also-like.scss
@@ -3,7 +3,7 @@
 \*------------------------------------*/
 
 .crosslinks {
-	background-color: $w3c-blue;
+	background-color: $deep-blue;
 	color: $white;
 	padding-bottom: rem(50);
 	padding-top: rem(50);
diff --git a/assets-src/styles/sass/80-templates/_event.scss b/assets-src/styles/sass/80-templates/_event.scss
@@ -32,7 +32,7 @@
 	}
 
 	&.talk::before {
-		background-color: $deep-yellow;
+		background-color: $deep-blue;
 	}
 
 	&.workshop::before {
diff --git a/assets-src/svg/w3c-logo-letters.svg b/assets-src/svg/w3c-logo-letters.svg
diff --git a/design-system-templates/components/header-new-logo-v2.html.twig b/design-system-templates/components/header-new-logo-v2.html.twig
@@ -1,10 +1,4 @@
 <header class="global-header">
-	<span role="status" aria-live="polite"></span>
-	<div class="banner">
-		<div class="banner__inner l-center">
-			<p>This is a new website. <a href="https://github.com/w3c/w3c-website">Give feedback</a> to help us improve it.</p>
-		</div>
-	</div>
 	<nav id="lang-nav" aria-label="Language options">
 		<div class="l-center">
 			<div class="l-cluster">
@@ -19,7 +13,7 @@
 		<div class="global-nav__inner l-center">
 			<a class="logo-link" href="/">
                 <span class="logo">
-                    <img src="/dist/assets/svg/w3c-logo-letters.svg" alt="W3C" role="img"/>
+                    <img src="/dist/assets/images/w3c-logo-letters.png" alt="W3C" role="img"/>
                 </span>
 				<span class="visuallyhidden">Visit the W3C homepage</span>
 			</a>
diff --git a/design-system-templates/components/header-new-logo.html.twig b/design-system-templates/components/header-new-logo.html.twig
@@ -1,10 +1,4 @@
 <header class="global-header">
-	<span role="status" aria-live="polite"></span>
-	<div class="banner">
-		<div class="banner__inner l-center">
-			<p>This is a new website. <a href="https://github.com/w3c/w3c-website">Give feedback</a> to help us improve it.</p>
-		</div>
-	</div>
 	<nav id="lang-nav" aria-label="Language options">
 		<div class="l-center">
 			<div class="l-cluster">
@@ -19,7 +13,7 @@
 		<div class="global-nav__inner l-center">
 			<a class="logo-link" href="/">
                 <span class="logo">
-                    <img src="/dist/assets/images/w3c-logo-full-color.png" alt="World Wide Web Consortium" role="img"/>
+                    <img class="logo logo--circle" src="/dist/assets/images/w3c-logo-full.png" alt="World Wide Web Consortium" role="img"/>
                 </span>
 				<span class="visuallyhidden">Visit the W3C homepage</span>
 			</a>

Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@`
`39`	`39`	`}`
`40`	`40`
`41`	`41`	`&.talk {`
`42`		`- border-color: $deep-yellow;`
	`42`	`+ border-color: $deep-blue;`
`43`	`43`	`}`
`44`	`44`
`45`	`45`	`&.workshop {`
Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`.component--evangelists__list {`
`33`		`- background-color: $w3c-blue;`
	`33`	`+ background-color: $deep-blue;`
`34`	`34`	`border-radius: rem(6);`
`35`	`35`	`color: $white;`
`36`	`36`	`overflow: hidden;`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,6 @@`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`#global-nav {`
`10`		`- border-bottom: solid 1px $border-color;`
`11`	`10`	`display: block;`
`12`	`11`	`padding-bottom: rem(18);`
`13`	`12`	`padding-top: rem(18);`
`@@ -24,7 +23,6 @@`
`24`	`23`	`flex-wrap: wrap;`
`25`	`24`
`26`	`25`	`@include mq($max-width) {`
`27`		`- align-items: flex-end;`
`28`	`26`	`flex-wrap: nowrap;`
`29`	`27`	`position: relative;`
`30`	`28`	`}`
Original file line number	Diff line number	Diff line change
`@@ -40,7 +40,7 @@`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`&::before {`
`43`		`- background-color: $w3c-blue;`
	`43`	`+ background-color: $deep-blue;`
`44`	`44`	`border-radius: rem(5);`
`45`	`45`	`content: '';`
`46`	`46`	`height: 100%;`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@`
`17`	`17`
`18`	`18`	`// Only apply the border to the top level list`
`19`	`19`	`.toc > ul {`
`20`		`- border-inline-start: solid 3px $deep-yellow;`
	`20`	`+ border-inline-start: solid 3px $w3c-blue;`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`.toc ul {`