Skip to content

Commit

Permalink
Update colorscheme (#41)
Browse files Browse the repository at this point in the history 
# Description

- Updates light and darkmode color scheme
- Updates logos

<img width="1715" alt="Screenshot 2024-06-28 at 20 18 50"
src="https://github.com/cowprotocol/learn/assets/31534717/ca27af9f-4997-4f3b-b365-5b8086250905">
<img width="1726" alt="Screenshot 2024-06-28 at 20 18 42"
src="https://github.com/cowprotocol/learn/assets/31534717/5ea2830d-b7ca-47e9-91e7-73a997f5a6fc">
  • Loading branch information
@fairlighteth
fairlighteth authored Jul 3, 2024
1 parent 7134652 commit 84ee5a5
Show file tree
Hide file tree
Showing 15 changed files with 100 additions and 68 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<p align="center">
<img alt="CoW Protocol Logo" width="400" src="./.github/cow.png">
<img alt="CoW Protocol Logo" width="600" src="./static/og-meta-cowprotocol.png">
</p>

# CoW Tutorials
Expand Down
131 changes: 78 additions & 53 deletions src/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,26 +10,31 @@ body {

html body.dark {
color-scheme: dark;
--sk-back-3-hsl: 216, 100%, 10%;
--sk-back-3: #191415;
--sk-back-3-hsl: #000000;
--sk-back-2: #23191A;
--sk-back-2-hsl: 216, 100%, 15%;
--sk-back-1: #052b65;
--sk-back-4: #0a3d8c;
--sk-back-5: #295aa1;
--sk-back-1: #23191A;
--sk-back-4: #000;
--sk-back-5: #fff;
--sk-back-translucent: #052b651a;
--sk-theme-1-hsl: 216, 100%, 90%;
--sk-theme-1: #fff;
--sk-theme-1-hsl: #fff;
--sk-theme-2: #000;
--sk-theme-2-hsl: 216, 80%, 30%;
--sk-theme-3: #000;
--sk-theme-3-hsl: 216, 60%, 50%;
--sk-text-1: #cae9ff;
--sk-text-2: #b0d4f7;
--sk-text-3: #96bff5;
--sk-text-4: #7caaf2;
--sk-text-1: #fff;
--sk-text-2: #c4c1bb;
--sk-text-3: #c4c1bb;
--sk-text-4: #c4c1bb;
--sk-text-translucent: #cae9ff1a;
--sk-scrollbar: #cae9ff4d;
--sk-theme-1-variant: #084a8d;
--sk-theme-2-variant: #296ba4;
--sk-theme-3-variant: #4b8cc1;
--sk-text-warning-hsl: 216, 67%, 56%;
--sk-code-ts-bg: hsl(216, 100%, 15%);
--sk-code-ts-bg: #191415;
--sk-code-base: #c4c1bb;
--sk-code-comment: #8c8c8c;
--sk-code-keyword: #57b5f4;
Expand All @@ -44,46 +49,51 @@ html body.dark {
--sk-code-diff-removed: #e38582;
--faded: rgba(255, 255, 255, 0.5);
--progress: #cae9ff;
--cutout: #052b65;
--cutout: #23191A;
}

html body.light {
color-scheme: light;
--sk-back-3-hsl: 206, 64%, 98%;
--sk-back-2-hsl: 0, 0%, 100%;
--sk-back-1: #fff;
--sk-back-4: #f2f7fd;
--sk-back-5: #c2cdd6;
--sk-theme-1-hsl: 216, 100%, 33%;
--sk-theme-2-hsl: 240, 8%, 44%;
--sk-theme-3-hsl: 204, 100%, 63%;
--sk-text-1: #052b65;
--sk-text-2: #052b65;
--sk-text-3: #405a82;
--sk-text-4: #405a82;
--sk-scrollbar: #052b654d;
--sk-theme-1-variant: #084a8d;
--sk-theme-2-variant: #676779;
--sk-theme-3-variant: #42b4ff;
--sk-code-ts-bg: var(--sk-back-1);
--sk-code-base: #5f5c53;
--sk-code-comment: #696969;
--sk-code-keyword: #0b69a8;
--sk-code-function: #bb5525;
--sk-code-string: #856e3d;
--sk-code-number: green;
--sk-code-template-string: #d81e18;
--sk-code-tags: var(--sk-code-function);
--sk-code-important: var(--sk-code-string);
--sk-code-diff-base: #0009;
--sk-code-diff-inserted: green;
--sk-code-diff-removed: #d81e18;
--sk-text-warning-hsl: 32, 95%, 44%;
--sk-back-translucent: #0000001a;
--sk-text-translucent: #000000b3;
--faded: #052b6524;
--progress: #052b65;
--cutout: #052b65;
color-scheme: light;
--sk-back-3: #f0dede; /* light blue */
--sk-back-3-hsl: #fff;
--sk-back-2: #ffffff; /* white */
--sk-back-2-hsl: 0, 0%, 100%;
--sk-back-1: #fff; /* white */
--sk-back-4: rgb(35 25 26 / 16%); /* very light blue */
--sk-back-5: #c2cdd6; /* light gray */
--sk-theme-1: #23191A; /* dark blue */
--sk-theme-1-hsl: 216, 100%, 33%;
--sk-theme-2: #676779; /* medium gray */
--sk-theme-2-hsl: 240, 8%, 44%;
--sk-theme-3: #42b4ff; /* bright blue */
--sk-theme-3-hsl: 204, 100%, 63%;
--sk-text-1: #000; /* dark brown */
--sk-text-2: #000; /* dark brown */
--sk-text-3: #000; /* medium blue */
--sk-text-4: #000; /* medium blue */
--sk-scrollbar: #052b654d; /* dark blue semi-transparent */
--sk-theme-1-variant: #084a8d; /* dark blue */
--sk-theme-2-variant: #676779; /* medium gray */
--sk-theme-3-variant: #42b4ff; /* bright blue */
--sk-code-ts-bg: #ffffff; /* white */
--sk-code-base: #5f5c53; /* dark beige */
--sk-code-comment: #696969; /* gray */
--sk-code-keyword: #0b69a8; /* dark blue */
--sk-code-function: #bb5525; /* dark orange */
--sk-code-string: #856e3d; /* brown */
--sk-code-number: green;
--sk-code-template-string: #d81e18; /* dark red */
--sk-code-tags: #bb5525; /* dark orange */
--sk-code-important: #856e3d; /* brown */
--sk-code-diff-base: #0009;
--sk-code-diff-inserted: green;
--sk-code-diff-removed: #d81e18; /* dark red */
--sk-text-warning-hsl: 32, 95%, 44%;
--sk-back-translucent: #0000001a; /* black semi-transparent */
--sk-text-translucent: #000000b3; /* black semi-transparent */
--faded: #052b6524; /* dark blue semi-transparent */
--progress: #23191A; /* dark brown */
--cutout: #23191A; /* dark brown */
}

/* override logo */
Expand All @@ -102,12 +112,16 @@ html body a.home-link {
#cow-logo>img {
object-fit: contain;
width: 100%;
height: 3.5rem;
margin: 0 1.5rem 0 0;
height: 3rem;
margin: 0 1rem 0 0;
}

html body.dark #cow-logo>img {
content: url(/cow_logo_light.svg);
content: url(../static/logo-light-full.svg);
}

html body.light #cow-logo>img {
content: url(../static/logo-dark-full.svg);
}

#cow-logo-small {
Expand All @@ -120,15 +134,26 @@ html body.dark #cow-logo>img {
#cow-logo-small>img {
object-fit: contain;
width: 100%;
height: 3.5rem;
height: 3rem;
margin: 0;
;
}

html body.dark #cow-logo-small>img {
content: url(/cow_icon_light.svg);
content: url(../static/logo-light.svg);
}

html body.light #cow-logo-small>img {
content: url(../static/logo-dark.svg);
}

html body.dark .navigator .solve:not(:disabled) {
color: #000!important;
background: #fff!important;
}



input,
button {
border: 2px solid transparent;
Expand Down Expand Up @@ -177,4 +202,4 @@ pre.language-diff code {

.language-diff .deleted::before {
content: '-';
}
}
4 changes: 2 additions & 2 deletions src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@
<svelte:fragment slot="home-large">

<span id="cow-logo">
<img src="/cow_logo_dark.svg" alt="CoW Logo" />
<img src="/logo-dark-full.svg" alt="CoW Logo" />
tutorials
</span>
</svelte:fragment>

<svelte:fragment slot="home-small">
<span id="cow-logo-small">
<img src="/cow_icon_dark.svg" alt="CoW Logo" />
<img src="/logo-dark.svg" alt="CoW Logo" />
</span>

</svelte:fragment>
Expand Down
2 changes: 1 addition & 1 deletion src/routes/tutorial/[slug]/codemirror.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@

.cm-editor .cm-lineNumbers {
flex: 1;
color: #237893;
color: grey;
}

.cm-editor .cm-foldGutter {
Expand Down
1 change: 0 additions & 1 deletion static/cow_icon_dark.svg
View file

This file was deleted.

1 change: 0 additions & 1 deletion static/cow_icon_light.svg
View file

This file was deleted.

1 change: 0 additions & 1 deletion static/cow_logo_dark.svg
View file

This file was deleted.

Loading

0 comments on commit 84ee5a5

Please sign in to comment.