Fabric Web migration to Svelte #339
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| <script lang="ts"> | ||
deedeeh marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| export let fullWidth: boolean; | ||
| </script> | ||
|
|
||
| <div class="container" class:fullWidth> | ||
| <div class="text">Advertisement</div> | ||
| </div> | ||
|
|
||
| <style lang="scss"> | ||
| @import './fonts/Sans.css'; | ||
|
|
||
| .container { | ||
|
There was a problem hiding this comment. I think the label won't be aligned with the ad on larger screens without the helpers media queries There was a problem hiding this comment. You're right the label is not aligned. I tried it with the media queries but it didn't work. I had to add the padding to replicate the behaviour of the live site. On a separate note, I notice the layers don't behave correctly with the media queries. I removed them and now I believe the behaviour is aligned to legacy There was a problem hiding this comment. Without the media queries the ad won't be constrained to certain widths at certain breakpoints like the current fabric is? There was a problem hiding this comment. It's a bit confusing because fixed ads behave differently to parallax ads. The background image of the parallax ads is controlled by the commercial code and is outside this template so doesn't respect these media queries. I've reinstated the media queries, but for parallax ads I've allowed the ad label to go full-width and used padding to place it in the correct position on large screens |
||
| position: relative; | ||
| height: 2em; | ||
| background-color: #f6f6f6; | ||
| border-top: 1px solid #dcdcdc; | ||
| color: #707070; | ||
| font-family: 'GuardianTextSans', 'Helvetica Neue', Helvetica, Arial, | ||
| 'Lucida Grande', sans-serif; | ||
| font-size: 0.75rem; | ||
| line-height: 1.9; | ||
| font-weight: 400; | ||
| box-sizing: border-box; | ||
|
|
||
| &.fullWidth { | ||
| padding: 0 calc(50% - 650px); // Keep the label central for large screens | ||
| } | ||
|
|
||
| &:not(.fullWidth) { | ||
| margin: 0 auto; | ||
| @media (min-width: 740px) { | ||
| max-width: 740px; | ||
| } | ||
| @media (min-width: 980px) { | ||
| max-width: 980px; | ||
| } | ||
| @media (min-width: 1140px) { | ||
| max-width: 1140px; | ||
| } | ||
| @media (min-width: 1300px) { | ||
| max-width: 1300px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .text { | ||
| padding: 0 10px; | ||
|
|
||
| @media (min-width: 740px) { | ||
| padding: 0 20px; | ||
| } | ||
| } | ||
| </style> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <script lang="ts"> | ||
| export let src: string; | ||
| </script> | ||
|
|
||
| <img {src} alt="" class="pixel" /> | ||
|
|
||
| <style lang="scss"> | ||
| .pixel { | ||
| position: absolute; | ||
| bottom: 0; | ||
| right: 0; | ||
| width: 1px; | ||
| height: 1px; | ||
| opacity: 0; | ||
| } | ||
| </style> | ||
|
Comment on lines
+7
to
+16
There was a problem hiding this comment. As Svelte scopes styles automaticall, you can apply the styles directly to |
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| $guardian-brand: #c70000; | ||
|
There was a problem hiding this comment. I've created a ticket in the backlog for us to use this palette, as we currently don't use it There was a problem hiding this comment. Some of these colour values could use a Source makeover too 💅 There was a problem hiding this comment. Will add this as a note on the newly created ticket |
||
| $guardian-brand-light: #94b1ca; | ||
| $guardian-brand-dark: #121212; | ||
|
|
||
| $error: #d61d00; | ||
| $success: #4a7801; | ||
|
|
||
| // Neutral palette | ||
| $neutral-1: #333333; | ||
| $neutral-2: #767676; | ||
| $neutral-3: #bdbdbd; | ||
| $neutral-4: #dcdcdc; | ||
| $neutral-5: #dfdfdf; | ||
| $neutral-6: #eaeaea; | ||
| $neutral-7: #f1f1f1; | ||
| $neutral-8: #f6f6f6; | ||
| $neutral-2-contrasted: darken($neutral-2, 3%); | ||
|
|
||
| // News palette | ||
| $news-main-1: #005689; | ||
| $news-main-2: #4bc6df; | ||
| $news-support-1: #aad8f1; | ||
| $news-support-2: #197caa; | ||
| $news-support-3: #69d1ca; | ||
| $news-support-4: #66a998; | ||
| $news-support-5: #aad801; | ||
| $news-support-6: #63717a; | ||
| $news-support-7: #484f53; | ||
|
|
||
| // Features palette | ||
| $features-main-1: #7d0068; | ||
| $features-main-2: #b82266; | ||
| $features-support-1: #951c55; | ||
| $features-support-2: #4e0375; | ||
| $features-support-3: #fdadba; | ||
| $features-support-4: #dc2a7d; | ||
|
|
||
| // Comment palette | ||
| $comment-main-1: #c05303; | ||
| $comment-main-2: #ff9b0b; | ||
| $comment-support-1: #7d7569; | ||
| $comment-support-2: #efefec; | ||
| $comment-support-3: #ffce4b; | ||
| $comment-support-4: #e6711b; | ||
|
|
||
| // Multimedia palette | ||
| $multimedia-main-1: #333333; | ||
| $multimedia-main-2: #c70000; | ||
| $multimedia-support-1: #c5d4ea; | ||
| $multimedia-support-2: #507892; | ||
| $multimedia-support-3: #002c59; | ||
| $multimedia-support-4: #484848; | ||
| $multimedia-support-5: #161616; | ||
|
|
||
| // Futurelearn palette | ||
| $futurelearn-main-1: #333333; | ||
| $futurelearn-main-2: #f18b00; | ||
| $futurelearn-support-1: #c5d4ea; | ||
| $futurelearn-support-2: #507892; | ||
| $futurelearn-support-3: #002c59; | ||
| $futurelearn-support-4: #484848; | ||
| $futurelearn-support-5: #161616; | ||
|
|
||
| // Live palette | ||
| $live-main-1: #f5b3c7; | ||
| $live-main-2: #e71c77; | ||
| $live-support-1: #ff5b3a; | ||
| $live-support-2: #800c0c; | ||
| $live-support-3: #a60947; | ||
|
|
||
| // Maps palette | ||
| $maps-main-1: #1c6326; | ||
| $maps-main-2: #298422; | ||
| $maps-support-1: #ceb41d; | ||
| $maps-support-2: #a9af2b; | ||
| $maps-support-3: #5ebfba; | ||
| $maps-support-4: #72af7e; | ||
|
|
||
| // External content palette | ||
| $external-main-1: #1c6326; | ||
| $external-support-1: #a9af2b; | ||
|
|
||
| $paid-article: #d9d9d9; | ||
| $paid-article-bg: #d1d1d1; | ||
| $paid-article-header: #bfbfbf; | ||
| $paid-article-header-bg: #b8b8b8; | ||
| $paid-article-subheader: #f6f6f6; | ||
| $paid-article-subheader-bg: #c4c4c4; | ||
| $paid-article-media-bg: #bbb7b1; | ||
| $paid-article-icon: #767676; | ||
| $paid-article-brand: #69d1ca; | ||
| $paid-article-mpu: #cccccc; | ||
| $paidfor-background: $news-support-3; | ||
| $rainbow-red: #ed1c24; // from Guss | ||
| $paid-card-kicker: #626262; | ||
|
|
||
| $media-background: $multimedia-support-5; | ||
|
|
||
| // Membership | ||
| // ============================================================================= | ||
|
|
||
| $membership-default: #2d4391; | ||
|
|
||
| // Lifestyle (magenta) | ||
| $lifestyle-dark: #7d0068; | ||
| $lifestyle-main: #bb3b80; | ||
| $lifestyle-bright: #ffabdb; | ||
| $lifestyle-pastel: #fec8d3; | ||
| $lifestyle-faded: #feeef7; | ||
|
|
||
| // New garnett colours | ||
| // ============================================================================= | ||
|
|
||
| $guardian-books-rebrand: #8e246f; | ||
| $guardian-live-rebrand: #c83877; | ||
| $guardian-jobs-rebrand: #469d93; | ||
| $guardian-travel-rebrand: #007ba6; | ||
| $guardian-money-rebrand: #b39069; | ||
| $guardian-masterclasses-rebrand: #f4bc44; | ||
| $guardian-subscriptions-rebrand: #d01317; | ||
| $guardian-subscriptions-rebrand-blue: #005689; | ||
| $guardian-generic-rebrand: #012937; | ||
| $guardian-weekly-rebrand: #2c363b; | ||
| $guardian-members-rebrand: #bb3a7f; | ||
| $news-garnett-highlight: #ffe500; | ||
| $guardian-patron: #4f5249; | ||
| $guardian-highlight-hover: #f2ae00; | ||
| $guardian-support: #ff7f0f; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| { | ||
| "nativeStyleId": "71299" | ||
| } |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In Svelte, this is more semantically achieved by the
class:directive