From 2366b4ecc1be50b133914719e4031ec4dd93c381 Mon Sep 17 00:00:00 2001 From: Brett Hayes Date: Tue, 12 Apr 2022 15:03:33 -0400 Subject: [PATCH 01/10] colour and gradient improvements --- website/src/components/Header.tsx | 2 +- website/src/components/IconItem.tsx | 2 +- .../components/Install/install.module.scss | 2 +- website/src/components/Jumbotron.tsx | 2 +- .../src/components/TestimonialCarousel.tsx | 2 +- website/src/components/blog/LinkPost.tsx | 2 +- .../src/components/content/ContentSection.tsx | 2 +- .../product/OpenSourcePrivacyFeatureItem.tsx | 2 +- website/src/css/_colors.scss | 160 +++++++++++------- website/src/css/_gradients.scss | 123 +++++++------- .../src/css/components/_ComparisonTable.scss | 2 +- .../src/css/components/_CustomCarousel.scss | 2 +- website/src/css/components/_Header.scss | 10 +- website/src/css/components/_IconItem.scss | 11 +- .../css/components/_SelfHostedSection.scss | 4 +- .../css/components/_TemplateCodeBlock.scss | 4 +- .../src/css/components/blog/_BlogPost.scss | 2 +- .../src/css/components/blog/_PostsList.scss | 2 +- .../product/_GitLabIntegrationSection.scss | 4 +- website/src/css/pages/__white_papers.scss | 2 +- website/src/css/pages/_about.scss | 4 +- website/src/css/pages/_batch-changes.scss | 4 +- website/src/css/pages/_code-insights.scss | 13 +- website/src/css/pages/_content.scss | 4 +- website/src/css/pages/_jobs.scss | 6 +- website/src/css/pages/_podcast.scss | 16 +- website/src/css/pages/_sales.scss | 2 +- .../src/css/pages/_universal-code-search.scss | 2 +- .../product/_code-change-management.scss | 2 +- website/src/css/styles.scss | 16 +- website/src/css/templates/_PostTemplate.scss | 2 +- .../src/pages/accelerate-dev-onboarding.tsx | 2 +- website/src/pages/cloud-beta.tsx | 6 +- website/src/pages/code-insights.tsx | 18 +- website/src/pages/fixing-vulnerabilities.tsx | 2 +- .../pages/get-started/getStarted.module.scss | 10 +- website/src/pages/get-started/self-hosted.tsx | 2 +- .../index.module.scss | 2 +- website/src/pages/index.tsx | 19 ++- website/src/pages/jobs.tsx | 14 +- website/src/pages/use-cases/onboarding.tsx | 12 +- .../src/pages/use-cases/useCases.module.scss | 3 +- .../src/pages/use-cases/vulnerabilities.tsx | 12 +- 43 files changed, 274 insertions(+), 241 deletions(-) diff --git a/website/src/components/Header.tsx b/website/src/components/Header.tsx index d366e031dc1..070e12ae56f 100644 --- a/website/src/components/Header.tsx +++ b/website/src/components/Header.tsx @@ -67,7 +67,7 @@ export default class Header extends React.Component { return ( <> {this.props.isHome && ( -
+
Track what really matters to you and your team. 🎉 Show me Code Insights! diff --git a/website/src/components/IconItem.tsx b/website/src/components/IconItem.tsx index a1aada8c7a5..6f1d54191f1 100644 --- a/website/src/components/IconItem.tsx +++ b/website/src/components/IconItem.tsx @@ -3,7 +3,7 @@ import React from 'react' export const IconItem: React.FunctionComponent<{ className?: string icon: React.ComponentType<{ className?: string }> - color: 'blue' | 'brand-cyan' | 'brand-orange' | 'brand-purple' | 'green' | 'red' | 'white' + color: 'primary' | 'sky-blue' | 'vivid-violet' | 'green' | 'vermillion' | 'white' children: React.ReactNode }> = ({ className = '', icon: Icon, color, children }) => (
diff --git a/website/src/components/Install/install.module.scss b/website/src/components/Install/install.module.scss index 47d7b77e250..91ce184eae3 100644 --- a/website/src/components/Install/install.module.scss +++ b/website/src/components/Install/install.module.scss @@ -2,7 +2,7 @@ @keyframes flashBackground { 0% { - background: $light-yellow; + background: $yellow-mist; } 100% { background-color: none; diff --git a/website/src/components/Jumbotron.tsx b/website/src/components/Jumbotron.tsx index 6091f7fc335..fe62a35f542 100644 --- a/website/src/components/Jumbotron.tsx +++ b/website/src/components/Jumbotron.tsx @@ -3,7 +3,7 @@ import React from 'react' export const COLORS = { white: '', dark: 'bg-black text-light', - purple: 'bg-purple text-light', + purple: 'bg-vivid-violet text-light', } export const Jumbotron: React.FunctionComponent<{ diff --git a/website/src/components/TestimonialCarousel.tsx b/website/src/components/TestimonialCarousel.tsx index e895b5eb10e..eea3c712a79 100644 --- a/website/src/components/TestimonialCarousel.tsx +++ b/website/src/components/TestimonialCarousel.tsx @@ -4,7 +4,7 @@ import slugify from 'slugify' export enum CarouselColors { dark = 'bg-black text-light', - purple = 'bg-purple text-light', + purple = 'bg-vivid-violet text-light', } interface Author { diff --git a/website/src/components/blog/LinkPost.tsx b/website/src/components/blog/LinkPost.tsx index da8f4c5c59f..a32c44778b0 100644 --- a/website/src/components/blog/LinkPost.tsx +++ b/website/src/components/blog/LinkPost.tsx @@ -52,7 +52,7 @@ export const LinkPost: React.FunctionComponent = ({ {title}
-
+
{post.frontmatter.publishDate} diff --git a/website/src/components/content/ContentSection.tsx b/website/src/components/content/ContentSection.tsx index 3befe62d748..aed8c6df924 100644 --- a/website/src/components/content/ContentSection.tsx +++ b/website/src/components/content/ContentSection.tsx @@ -5,7 +5,7 @@ const COLORS = { white: 'bg-white text-dark', black: 'bg-black text-light', gray: 'bg-dark text-light', - purple: 'bg-purple text-light', + purple: 'bg-vivid-violet text-light', primary: 'bg-primary text-light', pink: 'bg-pink text-dark', 'light-orange': 'bg-light-orange text-dark', diff --git a/website/src/components/product/OpenSourcePrivacyFeatureItem.tsx b/website/src/components/product/OpenSourcePrivacyFeatureItem.tsx index 3d72b2acf80..5910f94d614 100644 --- a/website/src/components/product/OpenSourcePrivacyFeatureItem.tsx +++ b/website/src/components/product/OpenSourcePrivacyFeatureItem.tsx @@ -4,7 +4,7 @@ import React from 'react' import { IconItem } from '../IconItem' export const OpenSourcePrivacyFeatureItem: React.FunctionComponent<{}> = () => ( - +

Open source, self-managed, & privacy-respectful

Sourcegraph is{' '} diff --git a/website/src/css/_colors.scss b/website/src/css/_colors.scss index 307b969a8c0..f0ed95be8eb 100644 --- a/website/src/css/_colors.scss +++ b/website/src/css/_colors.scss @@ -1,32 +1,31 @@ -/* Sourcegraph Brand Colors */ -$sg-space-black: #000000; -$blue: #2c7ef6; -$red: #dc3545; -$purple: #5033e1; -$white: #ffffff; -$brand-purple: #a112ff; -$brand-cyan: #00cbec; -$brand-orange: #ff5543; -$brand-primary-blue: #2a66e2; -$logo-purple: #b200f8; +/** + * Sourcegraph Brand Colors + * See: https://handbook.sourcegraph.com/departments/marketing/brand/brand_guidelines/color/ +*/ -// Sourcegraph Brand Secondary Colors -$brand-onahau: #c7ffff; -$brand-mint: #8fedcf; -$brand-fog: #e8d1ff; -// TODO: consolidate and name more brand colours +// Sourcegraph Primary Colors +$sky-blue: #00cbec; +$vivid-violet: #a112ff; +$vermillion: #ff5543; -$body-bg: #f9f9f9; -$body-color: #222233; +// Sourcegraph Secondary Colors +$yellow-mist: #fff2cf; +$red-mist: #ffc9c9; +$violet-mist: #e8d1ff; +$plum-mist: #bfbfff; +$dodger-blue-mist: #c7ffff; +$green-mist: #c4ffe8; +$mint: #8fedcf; +$blurple: #5033e1; +$pacific-blue: #00a1c7; -$nav-bg-color: #f9f9f9; +// Sourcegraph Colors for Website UI +$space-black: #000000; +$white: #ffffff; -$dark-13: #000000; -$dark-12: #07090d; -$dark-11: #0e121b; -$dark-10: #151c28; +// Colors not listed in our Brand Guidelines $dark-9: #1d2535; -$dark-8: #242e42; +$dark-8: #222233; $dark-5: #39496a; $dark-3: #475c85; @@ -36,52 +35,83 @@ $light-5: #a2b0cd; $light-6: #afbcd4; $light-8: #cad2e2; $light-9: #d7ddea; -$light-gray-0: #ddd; +$light-gray-0: #dddddd; $light-gray-1: #dee2e6; -$light-gray-2: #f9fafb; -$light-10: #e4e9f1; -$light-11: #f2f4f8; +$light-gray-2: #e4e9f1; +$light-gray-3: #f2f4f8; +$light-gray-4: #f9fafb; +$light-gray-5: #f5f5f5; -$red-7: #f03e3e; - -$indigo-5: #5c7cfa; +$green-1: #d3f9d8; +$green-5: #51cf66; +$green-7: #37b24d; +$green-9: #2b8a3e; -$light-green: #bceee9; -$light-green2: #c4ffe8; $light-blue: #d5e6f7; -$light-blue2: #bfbfff; -$light-yellow: #fff2cf; -$light-red: #ffc9c9; -$blue-3: #72c3fc; -$blue-7: #1c7cd6; -$blue-mist: #c7ffff; -$wild-sand: #f5f5f5; +$light-green: #bceee9; +$turquoise: #66d9e8; +$malibu: #72c3fc; +$curious-blue: #1c7cd6; +$cornflower-blue: #5c7cfa; +$dodger-blue: #2c7ef6; -$cyan-2: #00a1c7; -$cyan-3: #66d9e8; +/** + * Bootstrap Theme Colors + * This allows us to use text-{colorName} and bg-{colorName} utility classes +*/ +$theme-colors: ( + // Bootstrap overrides + "primary": $blurple, -$teal-7: #0ca678; + // Sourcegraph Primary Colors + "sky-blue": $sky-blue, + "vivid-violet": $vivid-violet, + "vermillion": $vermillion, + + // Sourcegraph Secondary Colors + "yellow-mist": $yellow-mist, + "red-mist": $red-mist, + "violet-mist": $violet-mist, + "plum-mist": $plum-mist, + "blue-mist": $dodger-blue-mist, + "green-mist": $green-mist, + "mint": $mint, + "blurple": $blurple, + "pacific-blue": $pacific-blue, -$green-1: #d3f9d8; -$green-5: #51cf66; -$green-7: #37b24d; -$green-9: #2b8a3e; + // Sourcegraph Colors for Website UI + "black": $space-black, + "white": $white, + + // Colors not listed in our Brand Guidelines + "dark-9": $dark-9, + "dark-8": $dark-8, + "dark-5": $dark-5, + "dark-3": $dark-3, + + "light-1": $light-1, + "light-2": $light-2, + "light-5": $light-5, + "light-6": $light-6, + "light-8": $light-8, + "light-9": $light-9, + "light-gray-0": $light-gray-0, + "light-gray-1": $light-gray-1, + "light-gray-2": $light-gray-2, + "light-gray-3": $light-gray-3, + "light-gray-4": $light-gray-4, + "light-gray-5": $light-gray-5, + + "green-1": $green-1, + "green-5": $green-5, + "green-7": $green-7, + "green-9": $green-9, -.bg-light-gray { - background-color: $light-gray-2; -} -.bg-light-gray2 { - background-color: $light-11; -} -.bg-black { - background-color: $sg-space-black; -} -.bg-purple { - background-color: $logo-purple; -} -.bg-light-transparent { - background-color: transparentize($light-11, 0.3); -} -.bg-unset { - background-color: unset; -} + "light-blue": $light-blue, + "light-green": $light-green, + "turquoise": $turquoise, + "malibu": $malibu, + "curious-blue": $curious-blue, + "cornflower-blue": $cornflower-blue, + "dodger-blue": $dodger-blue, +); diff --git a/website/src/css/_gradients.scss b/website/src/css/_gradients.scss index c61b2cf3835..d67ed795781 100644 --- a/website/src/css/_gradients.scss +++ b/website/src/css/_gradients.scss @@ -1,91 +1,94 @@ @use 'sass:color'; @import '@styles/colors'; -@mixin BgGradientPrimary { - background-image: radial-gradient(circle at 50% 0px, $blue-7, darken($blue, 9%)); -} -@mixin BgGradientGreenBlue { - background: linear-gradient(90deg, $light-green 0%, $light-blue 100%); -} -@mixin BgGradientBlueGreen { - background: linear-gradient(90deg, $light-blue 0%, $light-green 100%); -} -@mixin BgGradientOnahauMint { +/** + * Sourcegraph Brand Gradients + * See: https://handbook.sourcegraph.com/departments/marketing/brand/brand_guidelines/color/#gradients +*/ + +/** + * Sourcegraph Gradients + * Note: These are slightly adjusted and not true to the Brand Guidelines + * due to following Figma designs provided. +*/ +@mixin GradientVenusSaturated { background: linear-gradient( 90deg, - color.adjust($brand-onahau, $alpha: -0.7) 14.33%, - color.adjust($brand-mint, $alpha: -0.7) 81.79% + color.adjust($dodger-blue-mist, $alpha: -0.7) 14.33%, + color.adjust($mint, $alpha: -0.7) 81.79% ); } -@mixin BgGradientOnahauFog { +@mixin GradientVenusRadial { + background: radial-gradient(ellipse at top left, rgba($dodger-blue-mist, 0.5), transparent), + radial-gradient(ellipse at bottom right, rgba($green-mist, 0.5), transparent); +} +@mixin GradientSaturnSaturated { background: linear-gradient( 90deg, - color.adjust($brand-onahau, $alpha: -0.7) 14.33%, - color.adjust($brand-fog, $alpha: -0.7) 81.79% + color.adjust($dodger-blue-mist, $alpha: -0.7) 14.33%, + color.adjust($violet-mist, $alpha: -0.7) 81.79% ); } -@mixin BgGradientBluePurple { - background: linear-gradient(90deg, $light-blue 0%, $brand-fog 100%); + +// Gradients not listed in our Brand Guidelines +@mixin GradientGreenBlue { + background: linear-gradient(90deg, $light-green 0%, $light-blue 100%); } -@mixin BgGradientPurpleYellow { - background: linear-gradient(90deg, $brand-fog 0%, $light-yellow 100%); +@mixin GradientBlueGreen { + background: linear-gradient(90deg, $light-blue 0%, $light-green 100%); } -@mixin BgGradientFogBlue2 { - background: linear-gradient(90deg, $brand-fog 0%, $light-blue2 100%); +@mixin GradientBlueVioletMist { + background: linear-gradient(90deg, $light-blue 0%, $violet-mist 100%); } -@mixin BgGradientYellowGreen2 { - background: linear-gradient(90deg, $light-yellow 0%, $light-green2 100%); +@mixin GradientVioletYellowMist { + background: linear-gradient(90deg, $violet-mist 0%, $yellow-mist 100%); } -@mixin BgGradientGreen2Red { - background: linear-gradient(90deg, $light-green 0%, $light-red 100%); +@mixin GradientYellowGreenMist { + background: linear-gradient(90deg, $yellow-mist 0%, $green-mist 100%); } -@mixin BgGradientRedBlue2 { - background: linear-gradient(90deg, $light-red 0%, $light-blue2 100%); +@mixin GradientGreenRedMist { + background: linear-gradient(90deg, $light-green 0%, $red-mist 100%); } -@mixin BgGradientBlue2Blue { - background: linear-gradient(90deg, $light-blue2 0%, $light-blue 100%); +@mixin GradientRedPlumMist { + background: linear-gradient(90deg, $red-mist 0%, $plum-mist 100%); } -@mixin BgGradientBlueMist { - background: radial-gradient(ellipse at top left, rgba($blue-mist, 0.5), transparent), - radial-gradient(ellipse at bottom right, rgba($light-green2, 0.5), transparent); +@mixin GradientPlumMistBlue { + background: linear-gradient(90deg, $plum-mist 0%, $light-blue 100%); } -.bg-gradient-primary { - @include BgGradientPrimary; -} -.bg-gradient-green-blue { - @include BgGradientGreenBlue; -} -.bg-gradient-blue-green { - @include BgGradientBlueGreen; +// Sourcegraph Gradients - utility classes +.bg-gradient-venus-saturated { + @include GradientVenusSaturated; } -.bg-gradient-onahau-mint { - @include BgGradientOnahauMint; +.bg-gradient-venus-radial { + @include GradientVenusRadial; } -.bg-gradient-onahau-fog { - @include BgGradientOnahauFog; +.bg-gradient-saturn-saturated { + @include GradientSaturnSaturated; } -.bg-gradient-blue-purple { - @include BgGradientBluePurple; + +// Gradients not listed in our Brand Guidelines - utility classes +.bg-gradient-green-blue { + @include GradientGreenBlue; } -.bg-gradient-purple-yellow { - @include BgGradientPurpleYellow; +.bg-gradient-blue-green { + @include GradientBlueGreen; } -.bg-gradient-fog-blue2 { - @include BgGradientFogBlue2; +.bg-gradient-blue-violet-mist { + @include GradientBlueVioletMist; } -.bg-gradient-yellow-green2 { - @include BgGradientYellowGreen2; +.bg-gradient-violet-yellow-mist { + @include GradientVioletYellowMist; } -.bg-gradient-green2-red { - @include BgGradientGreen2Red; +.bg-gradient-yellow-green-mist { + @include GradientYellowGreenMist; } -.bg-gradient-red-blue2 { - @include BgGradientRedBlue2; +.bg-gradient-green-red-mist { + @include GradientGreenRedMist; } -.bg-gradient-blue2-blue { - @include BgGradientBlue2Blue; +.bg-gradient-red-plum-mist { + @include GradientRedPlumMist; } -.bg-gradient-blue-mist { - @include BgGradientBlueMist; +.bg-gradient-plum-mist-blue { + @include GradientPlumMistBlue; } diff --git a/website/src/css/components/_ComparisonTable.scss b/website/src/css/components/_ComparisonTable.scss index 8a701c160e2..a52d3a93e16 100644 --- a/website/src/css/components/_ComparisonTable.scss +++ b/website/src/css/components/_ComparisonTable.scss @@ -28,7 +28,7 @@ &__close { svg path { - fill: $red-7; + fill: $vermillion; } margin-right: 0.5rem; } diff --git a/website/src/css/components/_CustomCarousel.scss b/website/src/css/components/_CustomCarousel.scss index 05ad8759dce..35a0787bd31 100644 --- a/website/src/css/components/_CustomCarousel.scss +++ b/website/src/css/components/_CustomCarousel.scss @@ -37,7 +37,7 @@ li { cursor: pointer; - color: $sg-space-black; + color: $space-black; margin: 30px 0; } diff --git a/website/src/css/components/_Header.scss b/website/src/css/components/_Header.scss index d491d45894a..02a8ee9ff2d 100644 --- a/website/src/css/components/_Header.scss +++ b/website/src/css/components/_Header.scss @@ -40,10 +40,10 @@ color: $white; } &.btn-outline-primary { - color: $blue; + color: $blurple; &:hover { - background-color: $blue; + background-color: $blurple; color: $white; } } @@ -51,7 +51,7 @@ .right-nav { .nav-link.btn-simple { - color: $blue; + color: $blurple; } .nav-link.btn { font-weight: bold; @@ -88,7 +88,7 @@ font-weight: normal; &:hover { color: $navbar-light-hover-color !important; - background-color: $nav-bg-color !important; + background-color: $white !important; } } /* Adjust dropdown arrow positioning */ @@ -125,5 +125,5 @@ /* Hello bar */ .background-purple { - background-color: $purple; + background-color: $blurple; } diff --git a/website/src/css/components/_IconItem.scss b/website/src/css/components/_IconItem.scss index 9a15bacc92f..3dc8a9500fb 100644 --- a/website/src/css/components/_IconItem.scss +++ b/website/src/css/components/_IconItem.scss @@ -10,12 +10,11 @@ margin-right: 0.5rem; padding: 0.125rem; - @include icon-item-color('blue', $primary); - @include icon-item-color('brand-cyan', $brand-cyan); - @include icon-item-color('brand-purple', $brand-purple); - @include icon-item-color('brand-orange', $brand-orange); - @include icon-item-color('green', $green); - @include icon-item-color('red', $red); + @include icon-item-color('primary', $primary); + @include icon-item-color('sky-blue', $sky-blue); + @include icon-item-color('vivid-violet', $vivid-violet); + @include icon-item-color('green', $green-5); + @include icon-item-color('vermillion', $vermillion); @include icon-item-color('white', $white); } } diff --git a/website/src/css/components/_SelfHostedSection.scss b/website/src/css/components/_SelfHostedSection.scss index 5160fba39c6..d381ad77387 100644 --- a/website/src/css/components/_SelfHostedSection.scss +++ b/website/src/css/components/_SelfHostedSection.scss @@ -6,7 +6,7 @@ width: 100%; outline: none; resize: none; - background-color: $light-11; + background-color: $light-gray-3; min-height: 150px; padding: 1.5rem; } @@ -45,7 +45,7 @@ padding-left: 1.5rem; } &__action { - background-color: $light-11; + background-color: $light-gray-3; border: 1px solid $light-gray-1 !important; padding: 1.5rem; min-height: 150px; diff --git a/website/src/css/components/_TemplateCodeBlock.scss b/website/src/css/components/_TemplateCodeBlock.scss index 8c2e2a740df..514a6c994ad 100644 --- a/website/src/css/components/_TemplateCodeBlock.scss +++ b/website/src/css/components/_TemplateCodeBlock.scss @@ -15,13 +15,13 @@ } .code { - background-color: $light-11; + background-color: $light-gray-3; font-family: sfmono-regular, consolas, menlo, dejavu sans mono, monospace; font-size: 11px; border: 1px solid #dfe2e6; } .keyword { - color: $blue; + color: $dodger-blue; } } diff --git a/website/src/css/components/blog/_BlogPost.scss b/website/src/css/components/blog/_BlogPost.scss index ad80ee26fd5..c61034e887e 100644 --- a/website/src/css/components/blog/_BlogPost.scss +++ b/website/src/css/components/blog/_BlogPost.scss @@ -17,7 +17,7 @@ } &__read-more { - color: $blue-7; + color: $curious-blue; font-weight: bold; } diff --git a/website/src/css/components/blog/_PostsList.scss b/website/src/css/components/blog/_PostsList.scss index ac3aca82ac7..b5163cbea71 100644 --- a/website/src/css/components/blog/_PostsList.scss +++ b/website/src/css/components/blog/_PostsList.scss @@ -5,7 +5,7 @@ &-title { font-size: $h5-font-size; &-link { - color: $body-color; + color: $dark-8; } } } diff --git a/website/src/css/components/product/_GitLabIntegrationSection.scss b/website/src/css/components/product/_GitLabIntegrationSection.scss index 377011439a6..204456dc68d 100644 --- a/website/src/css/components/product/_GitLabIntegrationSection.scss +++ b/website/src/css/components/product/_GitLabIntegrationSection.scss @@ -8,7 +8,7 @@ } &__new-badge { - color: $light-11; + color: $light-gray-3; background-color: #dc3545; border: 1px solid transparent; padding: 0.15rem 0.75rem; @@ -25,7 +25,7 @@ font-size: 1.35rem; p { - border-left: 3px solid $brand-cyan; + border-left: 3px solid $sky-blue; padding-left: 1rem; text-indent: 0.4em; diff --git a/website/src/css/pages/__white_papers.scss b/website/src/css/pages/__white_papers.scss index b156e24a511..aea854a2150 100644 --- a/website/src/css/pages/__white_papers.scss +++ b/website/src/css/pages/__white_papers.scss @@ -72,7 +72,7 @@ p { padding-left: 1rem; - border-left: 3px solid $brand-cyan; + border-left: 3px solid $sky-blue; font-weight: 600; font-size: 1.2rem; line-height: 1.3; diff --git a/website/src/css/pages/_about.scss b/website/src/css/pages/_about.scss index ea41e758846..7e70f5a1d5d 100644 --- a/website/src/css/pages/_about.scss +++ b/website/src/css/pages/_about.scss @@ -5,7 +5,7 @@ &__plan { padding: 3rem 0; - background-color: $light-10; + background-color: $light-gray-2; &-container { background-color: #ffffff; padding: 2rem 2rem; @@ -34,7 +34,7 @@ border-radius: 0.25rem; padding-right: 1rem; margin: 0 0 1rem 1rem; - background: $light-11; + background: $light-gray-3; display: flex; img { margin-bottom: 0; diff --git a/website/src/css/pages/_batch-changes.scss b/website/src/css/pages/_batch-changes.scss index accc536e29c..f70d1e024e7 100644 --- a/website/src/css/pages/_batch-changes.scss +++ b/website/src/css/pages/_batch-changes.scss @@ -2,8 +2,8 @@ &__hero-and-header { background-image: url('/batch-changes/hero_illustration.svg'), url('/batch-changes/hero_background.svg'), // Fallback while the SVGs are loading - radial-gradient(ellipse at bottom right, rgba($indigo-5, 0.5), transparent), - radial-gradient(ellipse at bottom left, rgba($cyan-3, 0.5), transparent); + radial-gradient(ellipse at bottom right, rgba($cornflower-blue, 0.5), transparent), + radial-gradient(ellipse at bottom left, rgba($turquoise, 0.5), transparent); background-repeat: no-repeat, no-repeat; background-size: auto 113%, 100% 100%; background-position: center right 15%, top left; diff --git a/website/src/css/pages/_code-insights.scss b/website/src/css/pages/_code-insights.scss index b472ec470f2..3adc1717fa9 100644 --- a/website/src/css/pages/_code-insights.scss +++ b/website/src/css/pages/_code-insights.scss @@ -28,7 +28,7 @@ &::before { background-image: url('/code-insights/code-insights-page-bg.svg'), // Fallback while the SVGs are loading - radial-gradient(ellipse at bottom left, rgba($light-green2, 0.5), transparent); + radial-gradient(ellipse at bottom left, rgba($green-mist, 0.5), transparent); background-position: top left; @media only screen and (max-width: 990px) { transform: rotate(180deg); @@ -39,7 +39,7 @@ &::after { background-image: url('/code-insights/code-insights-illustration.svg'), // Fallback while the SVGs are loading - radial-gradient(ellipse at bottom right, rgba($blue-mist, 0.5), transparent); + radial-gradient(ellipse at bottom right, rgba($dodger-blue-mist, 0.5), transparent); background-position: bottom right; @media only screen and (max-width: 990px) { background-size: 150%; @@ -70,7 +70,6 @@ border-radius: 45%; padding: 1rem; background-color: $white; - color: $cyan-2; } } @@ -88,15 +87,9 @@ } .btn-link { - color: $brand-primary-blue; text-decoration: none; } - .btn-primary { - color: $white; - background-color: $brand-primary-blue; - } - .tab-section { @media only screen and (max-width: 768px) { display: none; @@ -146,7 +139,7 @@ font-size: 1.5rem; line-height: 1.4rem; cursor: pointer; - color: $sg-space-black; + color: $space-black; display: block; margin: 10px 0 10px 10px; font-size: 18px; diff --git a/website/src/css/pages/_content.scss b/website/src/css/pages/_content.scss index 8943766e91b..f4194fe5659 100644 --- a/website/src/css/pages/_content.scss +++ b/website/src/css/pages/_content.scss @@ -2,8 +2,8 @@ &__title { text-align: center; padding: 2rem; - border-bottom: 1px solid $light-11; - background-color: $light-11; + border-bottom: 1px solid $light-gray-3; + background-color: $light-gray-3; } &__body { diff --git a/website/src/css/pages/_jobs.scss b/website/src/css/pages/_jobs.scss index d63f5ef98e8..5b712a94ed2 100644 --- a/website/src/css/pages/_jobs.scss +++ b/website/src/css/pages/_jobs.scss @@ -76,7 +76,7 @@ .handbook-benefits-link { text-decoration: underline; - color: $sg-space-black; + color: $space-black; } .icon { @@ -98,7 +98,7 @@ } li { - background-color: $sg-space-black; + background-color: $space-black; width: 10px; height: 10px; border-radius: 5px; @@ -241,7 +241,7 @@ .carousel-control-prev-icon, .carousel-control-next-icon, .carousel-indicators li { - background-color: $sg-space-black; + background-color: $space-black; } } diff --git a/website/src/css/pages/_podcast.scss b/website/src/css/pages/_podcast.scss index cd930b6216a..b8af3816c3e 100644 --- a/website/src/css/pages/_podcast.scss +++ b/website/src/css/pages/_podcast.scss @@ -21,7 +21,7 @@ border-top: 1px solid $dark-5; border-bottom: 1px solid $dark-5; color: black; - background-color: $blue-3; + background-color: $malibu; padding-top: 1em; padding-bottom: 1em; &-highlight { @@ -51,13 +51,13 @@ &__content-option { margin: 1.5em 0 1.5em 0; - color: $blue-3; + color: $malibu; a { padding-top: 0.5em; padding-bottom: 0.5em; padding-right: 1em; padding-left: 1em; - color: $blue-3; + color: $malibu; &:first-child { margin-left: -1em; @@ -66,8 +66,8 @@ border-radius: 0.5em; } a.podcast__content-option-selected { - text-shadow: 0 0 0.9px $blue-3, 0 0 0.9px $blue-3; - border: 1px solid $blue-3; + text-shadow: 0 0 0.9px $malibu, 0 0 0.9px $malibu; + border: 1px solid $malibu; box-sizing: border-box; } } @@ -92,13 +92,13 @@ font-size: 2.5em; margin: 0.75em auto 0.75em auto; font-weight: 100; - color: $blue-3; + color: $malibu; a { - color: $blue-3; + color: $malibu; } a:hover { text-decoration: none; - border-bottom: 2px solid $blue-3; + border-bottom: 2px solid $malibu; } } diff --git a/website/src/css/pages/_sales.scss b/website/src/css/pages/_sales.scss index 12fb49d2f3f..0aec0a44be9 100644 --- a/website/src/css/pages/_sales.scss +++ b/website/src/css/pages/_sales.scss @@ -73,7 +73,7 @@ } .panel { - background: $light-10; + background: $light-gray-2; border-radius: 0.5rem; padding: 2rem; &__help { diff --git a/website/src/css/pages/_universal-code-search.scss b/website/src/css/pages/_universal-code-search.scss index c9f1210e074..64aa44290da 100644 --- a/website/src/css/pages/_universal-code-search.scss +++ b/website/src/css/pages/_universal-code-search.scss @@ -5,6 +5,6 @@ } &__btn { - background-color: $brand-cyan; + background-color: $sky-blue; } } diff --git a/website/src/css/pages/product/_code-change-management.scss b/website/src/css/pages/product/_code-change-management.scss index b3765ea6fdf..4c27c82693a 100644 --- a/website/src/css/pages/product/_code-change-management.scss +++ b/website/src/css/pages/product/_code-change-management.scss @@ -8,7 +8,7 @@ top: -0.3rem; right: -6rem; content: 'Private beta'; - color: $light-11; + color: $light-gray-3; background-color: #dc3545; text-transform: uppercase; border: 1px solid transparent; diff --git a/website/src/css/styles.scss b/website/src/css/styles.scss index 5b43eb29eda..0ecc1ac7140 100644 --- a/website/src/css/styles.scss +++ b/website/src/css/styles.scss @@ -64,9 +64,9 @@ $display4-size: 1.75rem; $navbar-nav-link-padding-x: $spacer * 0.75; $navbar-light-color: $dark; -$navbar-light-hover-color: $blue; +$navbar-light-hover-color: $blurple; $navbar-dark-color: $light; -$navbar-dark-hover-color: $blue; +$navbar-dark-hover-color: $blurple; $nav-tabs-border-width: 0; @@ -74,13 +74,13 @@ $btn-padding-x: 1.5rem; $btn-font-weight: 600; $input-bg: transparent; -$input-color: $body-color; +$input-color: $dark-8; $input-box-shadow: none; -$input-border-color: $brand-primary-blue; +$input-border-color: $blurple; $input-border-width: 3px; $input-focus-bg: $input-bg; -$input-focus-color: $body-color; -$input-placeholder-color: $body-color; +$input-focus-color: $dark-8; +$input-placeholder-color: $dark-8; $input-focus-border-color: darken($component-active-bg, 25%); $input-focus-box-shadow: none; @@ -97,7 +97,7 @@ $card-spacer-x: 1.25 * $spacer; $grid-gutter-width: 2rem; :root { - --body-color: #{$body-color}; + --body-color: #{$dark-8}; --border-color: #{$border-color}; } @@ -205,7 +205,7 @@ img.icon-inline, } code.border { - background-color: $light-11; + background-color: $light-gray-3; font-size: 80%; } diff --git a/website/src/css/templates/_PostTemplate.scss b/website/src/css/templates/_PostTemplate.scss index 3db48abfbb4..08463664d57 100644 --- a/website/src/css/templates/_PostTemplate.scss +++ b/website/src/css/templates/_PostTemplate.scss @@ -9,7 +9,7 @@ &-title { &-link { - color: $body-color; + color: $dark-8; } } diff --git a/website/src/pages/accelerate-dev-onboarding.tsx b/website/src/pages/accelerate-dev-onboarding.tsx index b32042e1017..be2a6936ae9 100644 --- a/website/src/pages/accelerate-dev-onboarding.tsx +++ b/website/src/pages/accelerate-dev-onboarding.tsx @@ -59,7 +59,7 @@ const AccelerateDevOnboarding: FunctionComponent = props => {

-
+

Learn how Convoy increases the efficiency and confidence of entry level developers diff --git a/website/src/pages/cloud-beta.tsx b/website/src/pages/cloud-beta.tsx index 190465233ce..24280bd265a 100644 --- a/website/src/pages/cloud-beta.tsx +++ b/website/src/pages/cloud-beta.tsx @@ -15,14 +15,14 @@ const items = [ itemClass: 'd-block', }, { - backgroundClass: 'bg-gradient-blue-purple', + backgroundClass: 'bg-gradient-blue-violet-mist', buttonLabel: 'Accelerate velocity', text: 'Streamline collaboration across teams, even while apart: find and reuse code, search for best practices for unfamiliar libraries or APIs, share links to code with teammates, and catch more bugs through better code reviews—and fix them faster, too.', headerClass: '', itemClass: 'd-none', }, { - backgroundClass: 'bg-gradient-purple-yellow', + backgroundClass: 'bg-gradient-violet-yellow-mist', buttonLabel: 'Mitigate risks', text: 'Identify and mitigate issues across your entire codebase: monitor the introduction of vulnerable dependencies, hunt down outdated practices and patterns, and reduce the time it takes to search for bugs and security concerns.', headerClass: '', @@ -71,7 +71,7 @@ export const CloudBetaPage: React.FunctionComponent = props => (

} > - +
diff --git a/website/src/pages/code-insights.tsx b/website/src/pages/code-insights.tsx index d5450916205..e3b4428038e 100644 --- a/website/src/pages/code-insights.tsx +++ b/website/src/pages/code-insights.tsx @@ -378,7 +378,7 @@ export const CodeInsightsPage: React.FunctionComponent = props => (
-
+
@@ -404,7 +404,7 @@ export const CodeInsightsPage: React.FunctionComponent = props => (
-
+

@@ -417,7 +417,7 @@ export const CodeInsightsPage: React.FunctionComponent = props => (
- +
Set goals
@@ -426,7 +426,7 @@ export const CodeInsightsPage: React.FunctionComponent = props => (
- +
Plan proactively
@@ -439,7 +439,7 @@ export const CodeInsightsPage: React.FunctionComponent = props => (
- +
{'Track ownership & trends'}
@@ -448,7 +448,7 @@ export const CodeInsightsPage: React.FunctionComponent = props => (
- +
Celebrate progress
@@ -478,7 +478,7 @@ export const CodeInsightsPage: React.FunctionComponent = props => ( {/* Use Cases */} -
+

Popular Code Insights templates

@@ -532,7 +532,7 @@ export const CodeInsightsPage: React.FunctionComponent = props => (
{/* Use Cases Carousel */} -
+

Popular Code Insights templates

@@ -577,7 +577,7 @@ export const CodeInsightsPage: React.FunctionComponent = props => (
-
+
diff --git a/website/src/pages/fixing-vulnerabilities.tsx b/website/src/pages/fixing-vulnerabilities.tsx index d7c94efb524..cbc781af622 100644 --- a/website/src/pages/fixing-vulnerabilities.tsx +++ b/website/src/pages/fixing-vulnerabilities.tsx @@ -56,7 +56,7 @@ const FixingVulnerabilities: FunctionComponent = props => {
-
+

Cloudflare proves to auditors that its code isn't vulnerable diff --git a/website/src/pages/get-started/getStarted.module.scss b/website/src/pages/get-started/getStarted.module.scss index 44390c9b572..3c8b5ea0692 100644 --- a/website/src/pages/get-started/getStarted.module.scss +++ b/website/src/pages/get-started/getStarted.module.scss @@ -15,7 +15,7 @@ // Get started page index specific .getStartedPage { - background: linear-gradient(90deg, $light-blue 0%, $brand-fog 50%, $light-blue 50%, $light-green 100%); + background: linear-gradient(90deg, $light-blue 0%, $violet-mist 50%, $light-blue 50%, $light-green 100%); section h1 { font-size: 2.25rem; @@ -25,20 +25,20 @@ // Self hosted section section:nth-of-type(1) { @media only screen and (max-width: 990px) { - @include BgGradientBluePurple; + @include GradientBlueVioletMist; } } // Cloud section section:nth-of-type(2) { @media only screen and (max-width: 990px) { - @include BgGradientBlueGreen; + @include GradientBlueGreen; } } } .mostPopularBadge { - background: $brand-purple; + background: $vivid-violet; padding: 7px 10px; font-size: 0.65rem; line-height: 0.815rem; @@ -63,5 +63,5 @@ // Cloud page specific .gitLab { - background-color: $purple; + background-color: $blurple; } diff --git a/website/src/pages/get-started/self-hosted.tsx b/website/src/pages/get-started/self-hosted.tsx index 2df36d81871..e73ef75629a 100644 --- a/website/src/pages/get-started/self-hosted.tsx +++ b/website/src/pages/get-started/self-hosted.tsx @@ -29,7 +29,7 @@ export const SelfHostedPage: FunctionComponent = props => ( heroAndHeaderClassName={styles.hero} hideGetStartedButton={true} > -
+
diff --git a/website/src/pages/guides/continuous-developer-onboarding/index.module.scss b/website/src/pages/guides/continuous-developer-onboarding/index.module.scss index 04619e78617..7ddca39bfba 100644 --- a/website/src/pages/guides/continuous-developer-onboarding/index.module.scss +++ b/website/src/pages/guides/continuous-developer-onboarding/index.module.scss @@ -13,5 +13,5 @@ } .formContainer { - background: $wild-sand; + background: $light-gray-5; } diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 656583283f7..e3fb51b4edb 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -1,16 +1,25 @@ -import { Link } from 'gatsby' +import React, { FunctionComponent } from 'react' + +import { Link, PageProps } from 'gatsby' + import ArrowRightBoxIcon from 'mdi-react/ArrowRightBoxIcon' import ArrowRightIcon from 'mdi-react/ArrowRightIcon' -import * as React from 'react' + +import Layout from '../components/Layout' import { ContentSection } from '../components/content/ContentSection' import { IntegrationsSection } from '../components/IntegrationsSection' -import Layout from '../components/Layout' import { CustomerLogosSectionAnimated } from '../components/product/CustomerLogosSectionAnimated' import { SelfHostedSection } from '../components/SelfHostedSection' import { buttonStyle, buttonLocation } from '../tracking' -const Index: React.FunctionComponent = (props: any) => ( - +const Index: FunctionComponent = props => ( +
diff --git a/website/src/pages/jobs.tsx b/website/src/pages/jobs.tsx index 1304e1ab101..0f845e6b1e9 100644 --- a/website/src/pages/jobs.tsx +++ b/website/src/pages/jobs.tsx @@ -109,7 +109,7 @@ const CareersPage = props => { {/* - +

@@ -123,7 +123,7 @@ const CareersPage = props => {

*/} - +

@@ -136,7 +136,7 @@ const CareersPage = props => {

- +

@@ -148,7 +148,7 @@ const CareersPage = props => {

- +

@@ -161,7 +161,7 @@ const CareersPage = props => {

- +

@@ -175,7 +175,7 @@ const CareersPage = props => {

{/* - +

@@ -189,7 +189,7 @@ const CareersPage = props => {

*/} - +

Creating the next generation of Sourcegraph coders, one baby at a time

diff --git a/website/src/pages/use-cases/onboarding.tsx b/website/src/pages/use-cases/onboarding.tsx index 5c51b9ff17b..7d7860993c0 100644 --- a/website/src/pages/use-cases/onboarding.tsx +++ b/website/src/pages/use-cases/onboarding.tsx @@ -176,7 +176,7 @@ const UseCasePage: FunctionComponent = props => (

- +

Find answers across all repositories

Codebases grow increasingly complex over time. Sourcegraph enables developers to search @@ -184,7 +184,7 @@ const UseCasePage: FunctionComponent = props => (

- +

Share knowledge quickly with links to specific code

Knowledge sharing takes time. With Sourcegraph, developers can share links directly to @@ -192,7 +192,7 @@ const UseCasePage: FunctionComponent = props => (

- +

Navigate and understand large codebases

Make new codebases approachable, not aggravating. Search across all your repositories in one @@ -203,7 +203,7 @@ const UseCasePage: FunctionComponent = props => (

-
+
@@ -253,7 +253,7 @@ const UseCasePage: FunctionComponent = props => (
-
+
= props => (
-
+
diff --git a/website/src/pages/use-cases/useCases.module.scss b/website/src/pages/use-cases/useCases.module.scss index 5b613049df4..a99839313ae 100644 --- a/website/src/pages/use-cases/useCases.module.scss +++ b/website/src/pages/use-cases/useCases.module.scss @@ -1,5 +1,4 @@ @import '@styles/colors'; -@import '@styles/gradients'; .header-and-hero { background: url('/customers-page-bg.svg') no-repeat; @@ -10,7 +9,7 @@ position: relative; background-image: url('/code-insights/code-insights-page-bg.svg'), // Fallback while the SVGs are loading - radial-gradient(ellipse at bottom left, rgba($light-green2, 0.5), transparent); + radial-gradient(ellipse at bottom left, rgba($green-mist, 0.5), transparent); background-repeat: no-repeat; background-size: cover; } diff --git a/website/src/pages/use-cases/vulnerabilities.tsx b/website/src/pages/use-cases/vulnerabilities.tsx index 14f062916d8..b1a541d5a3b 100644 --- a/website/src/pages/use-cases/vulnerabilities.tsx +++ b/website/src/pages/use-cases/vulnerabilities.tsx @@ -219,7 +219,7 @@ const UseCasePage: FunctionComponent = props => (
- +

Reduce time to discovery and resolution

Find every instance of a vulnerability and start remediating in minutes instead of days or @@ -227,7 +227,7 @@ const UseCasePage: FunctionComponent = props => (

- +

Automate fixing, merging, and deploying fixes

Automate PRs to fix vulnerabilities across your entire codebase so you can be 100% confident @@ -235,7 +235,7 @@ const UseCasePage: FunctionComponent = props => (

- +

Alert for risky code changes & known vulnerabilities

Get on top of vulnerabilities by monitoring your repositories for commits when risky @@ -246,7 +246,7 @@ const UseCasePage: FunctionComponent = props => (

-
+
@@ -307,13 +307,13 @@ const UseCasePage: FunctionComponent = props => (
-
+
-
+
From 54d4b39ac53475b1446237b4e1191661d4a0e9ed Mon Sep 17 00:00:00 2001 From: bretthayes Date: Tue, 12 Apr 2022 19:04:59 +0000 Subject: [PATCH 02/10] squash! Prettier --- website/src/css/_colors.scss | 88 ++++++++++++++++++------------------ website/src/pages/index.tsx | 3 +- 2 files changed, 46 insertions(+), 45 deletions(-) diff --git a/website/src/css/_colors.scss b/website/src/css/_colors.scss index f0ed95be8eb..6fcbd063914 100644 --- a/website/src/css/_colors.scss +++ b/website/src/css/_colors.scss @@ -12,7 +12,7 @@ $vermillion: #ff5543; $yellow-mist: #fff2cf; $red-mist: #ffc9c9; $violet-mist: #e8d1ff; -$plum-mist: #bfbfff; +$plum-mist: #bfbfff; $dodger-blue-mist: #c7ffff; $green-mist: #c4ffe8; $mint: #8fedcf; @@ -61,57 +61,57 @@ $dodger-blue: #2c7ef6; */ $theme-colors: ( // Bootstrap overrides - "primary": $blurple, + 'primary': $blurple, // Sourcegraph Primary Colors - "sky-blue": $sky-blue, - "vivid-violet": $vivid-violet, - "vermillion": $vermillion, - + 'sky-blue': $sky-blue, + 'vivid-violet': $vivid-violet, + 'vermillion': $vermillion, + // Sourcegraph Secondary Colors - "yellow-mist": $yellow-mist, - "red-mist": $red-mist, - "violet-mist": $violet-mist, - "plum-mist": $plum-mist, - "blue-mist": $dodger-blue-mist, - "green-mist": $green-mist, - "mint": $mint, - "blurple": $blurple, - "pacific-blue": $pacific-blue, + 'yellow-mist': $yellow-mist, + 'red-mist': $red-mist, + 'violet-mist': $violet-mist, + 'plum-mist': $plum-mist, + 'blue-mist': $dodger-blue-mist, + 'green-mist': $green-mist, + 'mint': $mint, + 'blurple': $blurple, + 'pacific-blue': $pacific-blue, // Sourcegraph Colors for Website UI - "black": $space-black, - "white": $white, + 'black': $space-black, + 'white': $white, // Colors not listed in our Brand Guidelines - "dark-9": $dark-9, - "dark-8": $dark-8, - "dark-5": $dark-5, - "dark-3": $dark-3, + 'dark-9': $dark-9, + 'dark-8': $dark-8, + 'dark-5': $dark-5, + 'dark-3': $dark-3, - "light-1": $light-1, - "light-2": $light-2, - "light-5": $light-5, - "light-6": $light-6, - "light-8": $light-8, - "light-9": $light-9, - "light-gray-0": $light-gray-0, - "light-gray-1": $light-gray-1, - "light-gray-2": $light-gray-2, - "light-gray-3": $light-gray-3, - "light-gray-4": $light-gray-4, - "light-gray-5": $light-gray-5, + 'light-1': $light-1, + 'light-2': $light-2, + 'light-5': $light-5, + 'light-6': $light-6, + 'light-8': $light-8, + 'light-9': $light-9, + 'light-gray-0': $light-gray-0, + 'light-gray-1': $light-gray-1, + 'light-gray-2': $light-gray-2, + 'light-gray-3': $light-gray-3, + 'light-gray-4': $light-gray-4, + 'light-gray-5': $light-gray-5, - "green-1": $green-1, - "green-5": $green-5, - "green-7": $green-7, - "green-9": $green-9, + 'green-1': $green-1, + 'green-5': $green-5, + 'green-7': $green-7, + 'green-9': $green-9, - "light-blue": $light-blue, - "light-green": $light-green, - "turquoise": $turquoise, - "malibu": $malibu, - "curious-blue": $curious-blue, - "cornflower-blue": $cornflower-blue, - "dodger-blue": $dodger-blue, + 'light-blue': $light-blue, + 'light-green': $light-green, + 'turquoise': $turquoise, + 'malibu': $malibu, + 'curious-blue': $curious-blue, + 'cornflower-blue': $cornflower-blue, + 'dodger-blue': $dodger-blue ); diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index e3fb51b4edb..8be1990060a 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -17,7 +17,8 @@ const Index: FunctionComponent = props => ( location={props.location} meta={{ title: 'Sourcegraph | Code Intelligence Platform', - description: 'Address security risks, onboard to a new codebase, identify the root cause of incidents, promote code reuse, improve code health, and more with Soucegraph.' + description: + 'Address security risks, onboard to a new codebase, identify the root cause of incidents, promote code reuse, improve code health, and more with Soucegraph.', }} >
From b66a8ae379f1f3f3dc8afa087291a23e9fde64a1 Mon Sep 17 00:00:00 2001 From: Brett Hayes Date: Tue, 12 Apr 2022 15:41:15 -0400 Subject: [PATCH 03/10] conflict fixes and colour consistency updates --- website/src/components/QuoteCarousel/index.tsx | 8 ++++---- website/src/css/_typography.scss | 12 ------------ website/src/css/components/_LeadershipSection.scss | 2 +- website/src/css/styles.scss | 1 - .../nutanix-fixed-log4j-with-sourcegraph.tsx | 8 ++++---- 5 files changed, 9 insertions(+), 22 deletions(-) delete mode 100644 website/src/css/_typography.scss diff --git a/website/src/components/QuoteCarousel/index.tsx b/website/src/components/QuoteCarousel/index.tsx index 8db8d84cebc..63b99fcf9a3 100644 --- a/website/src/components/QuoteCarousel/index.tsx +++ b/website/src/components/QuoteCarousel/index.tsx @@ -32,7 +32,7 @@ export const QuoteCarousel: FunctionComponent = ({ items, au return (
- carouselHook.moveCarousel('decrement')} /> + carouselHook.moveCarousel('decrement')} />
{carouselItems.map(item => ( @@ -54,16 +54,16 @@ export const QuoteCarousel: FunctionComponent = ({ items, au ))}
- carouselHook.moveCarousel()} /> + carouselHook.moveCarousel()} />
- carouselHook.moveCarousel('decrement')} /> + carouselHook.moveCarousel('decrement')} />
- carouselHook.moveCarousel()} /> + carouselHook.moveCarousel()} />
diff --git a/website/src/css/_typography.scss b/website/src/css/_typography.scss deleted file mode 100644 index ec07f6e02ed..00000000000 --- a/website/src/css/_typography.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import '@styles/colors'; - -$colors: ( - 'blue7': $blue-7, - 'gray': $gray, -); - -@each $name, $glyph in $colors { - .text-#{$name} { - color: $glyph; - } -} diff --git a/website/src/css/components/_LeadershipSection.scss b/website/src/css/components/_LeadershipSection.scss index 271d8fc4cb7..7e3b6eacfb0 100644 --- a/website/src/css/components/_LeadershipSection.scss +++ b/website/src/css/components/_LeadershipSection.scss @@ -18,7 +18,7 @@ padding: 0.3rem; } &-social a:hover { - color: #6c757d; + color: $pale-sky; } &-social li:first-child { padding-left: 0; diff --git a/website/src/css/styles.scss b/website/src/css/styles.scss index 393ea2b3d14..974e39fac79 100644 --- a/website/src/css/styles.scss +++ b/website/src/css/styles.scss @@ -287,7 +287,6 @@ table { @import 'pages/code-insights'; @import 'gradients'; @import 'spacing'; -@import 'typography'; .virtual-br::before { content: '\A'; diff --git a/website/src/pages/case-studies/nutanix-fixed-log4j-with-sourcegraph.tsx b/website/src/pages/case-studies/nutanix-fixed-log4j-with-sourcegraph.tsx index 286a2dd5f12..3f24728e647 100644 --- a/website/src/pages/case-studies/nutanix-fixed-log4j-with-sourcegraph.tsx +++ b/website/src/pages/case-studies/nutanix-fixed-log4j-with-sourcegraph.tsx @@ -206,7 +206,7 @@ const NutanixCaseStudy: FunctionComponent = props => (

- +
Results

-

{'<'} 5 min

+

{'<'} 5 min

Nutanix was able to see where JMSAppender existed, fix it, and send out a release in less than 5 minutes.

-

4 days

+

4 days

Nutanix was able to deliver patches to its customers that fully remediated the Log4j vulnerability.

-

100% confidence

+

100% confidence

Nutanix was able to confidently identify every instance of Log4j across its sprawling codebase. From 745496d65ce409fe9ed2b35e8cd44f956f432b8d Mon Sep 17 00:00:00 2001 From: bretthayes Date: Tue, 12 Apr 2022 19:43:50 +0000 Subject: [PATCH 04/10] squash! Prettier --- website/src/components/QuoteCarousel/index.tsx | 12 ++++++++++-- website/src/css/_colors.scss | 2 +- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/website/src/components/QuoteCarousel/index.tsx b/website/src/components/QuoteCarousel/index.tsx index 63b99fcf9a3..2f9587ac1c3 100644 --- a/website/src/components/QuoteCarousel/index.tsx +++ b/website/src/components/QuoteCarousel/index.tsx @@ -32,7 +32,11 @@ export const QuoteCarousel: FunctionComponent = ({ items, au return (

- carouselHook.moveCarousel('decrement')} /> + carouselHook.moveCarousel('decrement')} + />
{carouselItems.map(item => ( @@ -60,7 +64,11 @@ export const QuoteCarousel: FunctionComponent = ({ items, au className={`d-lg-none d-flex justify-content-center mt-4 w-100 position-absolute ${styles.positionNav}`} >
- carouselHook.moveCarousel('decrement')} /> + carouselHook.moveCarousel('decrement')} + />
carouselHook.moveCarousel()} /> diff --git a/website/src/css/_colors.scss b/website/src/css/_colors.scss index 144ba061563..c8723b5e04d 100644 --- a/website/src/css/_colors.scss +++ b/website/src/css/_colors.scss @@ -115,5 +115,5 @@ $theme-colors: ( 'malibu': $malibu, 'curious-blue': $curious-blue, 'cornflower-blue': $cornflower-blue, - 'dodger-blue': $dodger-blue, + 'dodger-blue': $dodger-blue ); From a7ae58f97eed9409422e39210b8c057787b6bbf9 Mon Sep 17 00:00:00 2001 From: Brett Hayes Date: Tue, 12 Apr 2022 15:56:20 -0400 Subject: [PATCH 05/10] rm white since it comes with Bootstrap --- website/src/css/_colors.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/website/src/css/_colors.scss b/website/src/css/_colors.scss index 144ba061563..f7fd16f55c1 100644 --- a/website/src/css/_colors.scss +++ b/website/src/css/_colors.scss @@ -21,7 +21,6 @@ $pacific-blue: #00a1c7; // Sourcegraph Colors for Website UI $space-black: #000000; -$white: #ffffff; // Colors not listed in our Brand Guidelines $dark-9: #1d2535; @@ -82,7 +81,6 @@ $theme-colors: ( // Sourcegraph Colors for Website UI 'black': $space-black, - 'white': $white, // Colors not listed in our Brand Guidelines 'dark-9': $dark-9, From 831a33798062d6d71cda1ff4727cdf96de9c6de2 Mon Sep 17 00:00:00 2001 From: Brett Hayes Date: Tue, 12 Apr 2022 16:09:18 -0400 Subject: [PATCH 06/10] rename blue mist --- website/src/css/_colors.scss | 4 ++-- website/src/css/_gradients.scss | 6 +++--- website/src/css/pages/_code-insights.scss | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/website/src/css/_colors.scss b/website/src/css/_colors.scss index 2a537f8ab14..c6c8e047231 100644 --- a/website/src/css/_colors.scss +++ b/website/src/css/_colors.scss @@ -13,7 +13,7 @@ $yellow-mist: #fff2cf; $red-mist: #ffc9c9; $violet-mist: #e8d1ff; $plum-mist: #bfbfff; -$dodger-blue-mist: #c7ffff; +$blue-mist: #c7ffff; $green-mist: #c4ffe8; $mint: #8fedcf; $blurple: #5033e1; @@ -73,7 +73,7 @@ $theme-colors: ( 'red-mist': $red-mist, 'violet-mist': $violet-mist, 'plum-mist': $plum-mist, - 'blue-mist': $dodger-blue-mist, + 'blue-mist': $blue-mist, 'green-mist': $green-mist, 'mint': $mint, 'blurple': $blurple, diff --git a/website/src/css/_gradients.scss b/website/src/css/_gradients.scss index d67ed795781..f2dd801a765 100644 --- a/website/src/css/_gradients.scss +++ b/website/src/css/_gradients.scss @@ -14,18 +14,18 @@ @mixin GradientVenusSaturated { background: linear-gradient( 90deg, - color.adjust($dodger-blue-mist, $alpha: -0.7) 14.33%, + color.adjust($blue-mist, $alpha: -0.7) 14.33%, color.adjust($mint, $alpha: -0.7) 81.79% ); } @mixin GradientVenusRadial { - background: radial-gradient(ellipse at top left, rgba($dodger-blue-mist, 0.5), transparent), + background: radial-gradient(ellipse at top left, rgba($blue-mist, 0.5), transparent), radial-gradient(ellipse at bottom right, rgba($green-mist, 0.5), transparent); } @mixin GradientSaturnSaturated { background: linear-gradient( 90deg, - color.adjust($dodger-blue-mist, $alpha: -0.7) 14.33%, + color.adjust($blue-mist, $alpha: -0.7) 14.33%, color.adjust($violet-mist, $alpha: -0.7) 81.79% ); } diff --git a/website/src/css/pages/_code-insights.scss b/website/src/css/pages/_code-insights.scss index 3adc1717fa9..ec35f963623 100644 --- a/website/src/css/pages/_code-insights.scss +++ b/website/src/css/pages/_code-insights.scss @@ -39,7 +39,7 @@ &::after { background-image: url('/code-insights/code-insights-illustration.svg'), // Fallback while the SVGs are loading - radial-gradient(ellipse at bottom right, rgba($dodger-blue-mist, 0.5), transparent); + radial-gradient(ellipse at bottom right, rgba($blue-mist, 0.5), transparent); background-position: bottom right; @media only screen and (max-width: 990px) { background-size: 150%; From d869d51aad82e9e8e2d6274a1b23623c85fb2c2c Mon Sep 17 00:00:00 2001 From: Brett Hayes Date: Tue, 12 Apr 2022 17:43:40 -0400 Subject: [PATCH 07/10] merge conflict fixes --- website/src/css/_colors.scss | 6 ++-- website/src/css/styles.scss | 1 + .../nutanix-fixed-log4j-with-sourcegraph.tsx | 28 +++++++++---------- website/src/pages/jobs.tsx | 2 +- 4 files changed, 20 insertions(+), 17 deletions(-) diff --git a/website/src/css/_colors.scss b/website/src/css/_colors.scss index c6c8e047231..891d45b140c 100644 --- a/website/src/css/_colors.scss +++ b/website/src/css/_colors.scss @@ -20,6 +20,7 @@ $blurple: #5033e1; $pacific-blue: #00a1c7; // Sourcegraph Colors for Website UI +$pale-sky: #6c757d; $space-black: #000000; // Colors not listed in our Brand Guidelines @@ -46,7 +47,7 @@ $green-5: #51cf66; $green-7: #37b24d; $green-9: #2b8a3e; -$pale-sky: #6c757d; +$alabaster: #f9f9f9; $light-blue: #d5e6f7; $light-green: #bceee9; $turquoise: #66d9e8; @@ -80,6 +81,7 @@ $theme-colors: ( 'pacific-blue': $pacific-blue, // Sourcegraph Colors for Website UI + 'pale-sky': $pale-sky, 'black': $space-black, // Colors not listed in our Brand Guidelines @@ -106,7 +108,7 @@ $theme-colors: ( 'green-7': $green-7, 'green-9': $green-9, - 'pale-sky': $pale-sky, + 'alabaster': $alabaster, 'light-blue': $light-blue, 'light-green': $light-green, 'turquoise': $turquoise, diff --git a/website/src/css/styles.scss b/website/src/css/styles.scss index 974e39fac79..fc3bd780270 100644 --- a/website/src/css/styles.scss +++ b/website/src/css/styles.scss @@ -149,6 +149,7 @@ body, body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; + background-color: $alabaster; } .material-icons { diff --git a/website/src/pages/case-studies/nutanix-fixed-log4j-with-sourcegraph.tsx b/website/src/pages/case-studies/nutanix-fixed-log4j-with-sourcegraph.tsx index 3f24728e647..465c12aa10c 100644 --- a/website/src/pages/case-studies/nutanix-fixed-log4j-with-sourcegraph.tsx +++ b/website/src/pages/case-studies/nutanix-fixed-log4j-with-sourcegraph.tsx @@ -25,7 +25,7 @@ const NutanixCaseStudy: FunctionComponent = props => ( >
@@ -45,11 +45,11 @@ const NutanixCaseStudy: FunctionComponent = props => (
-
+
- +
Use case
@@ -64,7 +64,7 @@ const NutanixCaseStudy: FunctionComponent = props => (
- +
Challenge
@@ -80,7 +80,7 @@ const NutanixCaseStudy: FunctionComponent = props => (
- +
Solution
@@ -98,11 +98,11 @@ const NutanixCaseStudy: FunctionComponent = props => (
-
+
- +
Results
@@ -131,7 +131,7 @@ const NutanixCaseStudy: FunctionComponent = props => ( As the Technical Director of Solution Engineering at Nutanix, Jon Kohler understands the complexity involved in securing the multitude of applications and solutions required to power such a large organization. “Security is something that we care about intensely here at Nutanix,” Jon said, - “because it’s part of our bedrock. It's why customers like us, and we have to take it seriously.” + “because it's part of our bedrock. It's why customers like us, and we have to take it seriously.”

Log4j: The vulnerability that rocked an industry @@ -231,7 +231,7 @@ const NutanixCaseStudy: FunctionComponent = props => (

Using Sourcegraph, Jon discovered every instance of Log4j and was fully confident in the results. “It's nice,” Jon said, “when you can just run a report and say, 'Here it is,'' or 'Here - it isn't.'' It's much better than having to say, 'Well, boss, I think we got it all.’” + it isn't.'' It's much better than having to say, 'Well, boss, I think we got it all.'”

Nutanix needed that confidence because of its sprawling codebase. One thing that made Log4j @@ -254,26 +254,26 @@ const NutanixCaseStudy: FunctionComponent = props => (

-
+

Results

-

{'<'} 5 min

+

{'<'} 5 min

Nutanix was able to see where JMSAppender existed, fix it, and send out a release in less than 5 minutes.

-

4 days

+

4 days

Nutanix was able to deliver patches to its customers that fully remediated the Log4j vulnerability.

-

100% confidence

+

100% confidence

Nutanix was able to confidently identify every instance of Log4j across its sprawling codebase. @@ -320,7 +320,7 @@ const NutanixCaseStudy: FunctionComponent = props => ( about="Nutanix has 20,000 customers, an annual revenue of nearly $1.394 billion, and over 6,000 employees. Organizations around the world rely on Nutanix software as a single platform to manage any app at any scale for their hybrid multicloud environments." /> -

+
diff --git a/website/src/pages/jobs.tsx b/website/src/pages/jobs.tsx index 14eff13386b..aa5d83c8c2c 100644 --- a/website/src/pages/jobs.tsx +++ b/website/src/pages/jobs.tsx @@ -311,7 +311,7 @@ const CareersPage = props => { -
+
From 49990900b3120c4c19c0e2bcca072d4c0756d080 Mon Sep 17 00:00:00 2001 From: bretthayes Date: Tue, 12 Apr 2022 21:44:56 +0000 Subject: [PATCH 08/10] squash! Prettier --- .../case-studies/nutanix-fixed-log4j-with-sourcegraph.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/website/src/pages/case-studies/nutanix-fixed-log4j-with-sourcegraph.tsx b/website/src/pages/case-studies/nutanix-fixed-log4j-with-sourcegraph.tsx index 465c12aa10c..e8308118461 100644 --- a/website/src/pages/case-studies/nutanix-fixed-log4j-with-sourcegraph.tsx +++ b/website/src/pages/case-studies/nutanix-fixed-log4j-with-sourcegraph.tsx @@ -49,7 +49,7 @@ const NutanixCaseStudy: FunctionComponent = props => (
- +
Use case
@@ -64,7 +64,7 @@ const NutanixCaseStudy: FunctionComponent = props => (
- +
Challenge
@@ -80,7 +80,7 @@ const NutanixCaseStudy: FunctionComponent = props => (
- +
Solution
@@ -102,7 +102,7 @@ const NutanixCaseStudy: FunctionComponent = props => (
- +
Results
From 22887a2ace7a067886e5717c5c36f296892565ac Mon Sep 17 00:00:00 2001 From: Brett Hayes Date: Wed, 13 Apr 2022 11:34:13 -0400 Subject: [PATCH 09/10] blog link colour --- website/src/css/components/blog/_BlogPost.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/website/src/css/components/blog/_BlogPost.scss b/website/src/css/components/blog/_BlogPost.scss index c61034e887e..3a05943c576 100644 --- a/website/src/css/components/blog/_BlogPost.scss +++ b/website/src/css/components/blog/_BlogPost.scss @@ -17,7 +17,6 @@ } &__read-more { - color: $curious-blue; font-weight: bold; } From b8f1a2d384f2147d1c76660d6f116228f4c2d24b Mon Sep 17 00:00:00 2001 From: Brett Hayes Date: Wed, 13 Apr 2022 12:36:11 -0400 Subject: [PATCH 10/10] comments/organize --- website/src/css/_colors.scss | 4 +- website/src/css/_gradients.scss | 4 +- website/src/css/styles.scss | 112 +++++++++++++++++--------------- 3 files changed, 65 insertions(+), 55 deletions(-) diff --git a/website/src/css/_colors.scss b/website/src/css/_colors.scss index 891d45b140c..b01129b5bdc 100644 --- a/website/src/css/_colors.scss +++ b/website/src/css/_colors.scss @@ -1,7 +1,7 @@ /** * Sourcegraph Brand Colors * See: https://handbook.sourcegraph.com/departments/marketing/brand/brand_guidelines/color/ -*/ + */ // Sourcegraph Primary Colors $sky-blue: #00cbec; @@ -59,7 +59,7 @@ $dodger-blue: #2c7ef6; /** * Bootstrap Theme Colors * This allows us to use text-{colorName} and bg-{colorName} utility classes -*/ + */ $theme-colors: ( // Bootstrap overrides 'primary': $blurple, diff --git a/website/src/css/_gradients.scss b/website/src/css/_gradients.scss index f2dd801a765..370bfcf2657 100644 --- a/website/src/css/_gradients.scss +++ b/website/src/css/_gradients.scss @@ -4,13 +4,13 @@ /** * Sourcegraph Brand Gradients * See: https://handbook.sourcegraph.com/departments/marketing/brand/brand_guidelines/color/#gradients -*/ + */ /** * Sourcegraph Gradients * Note: These are slightly adjusted and not true to the Brand Guidelines * due to following Figma designs provided. -*/ + */ @mixin GradientVenusSaturated { background: linear-gradient( 90deg, diff --git a/website/src/css/styles.scss b/website/src/css/styles.scss index fc3bd780270..f4d641618c1 100644 --- a/website/src/css/styles.scss +++ b/website/src/css/styles.scss @@ -8,6 +8,8 @@ @import 'colors'; +/* ==================== Bootstrap Overrides ==================== */ + $font-family-sans-serif: source-sans-pro, sans-serif; /* Adobe Source Sans Pro */ $font-family-monospace: source-code-pro, monospace; /* Adobe Source Code Pro for code */ $font-family-base: $font-family-sans-serif; @@ -123,6 +125,8 @@ $grid-gutter-width: 2rem; @import 'node_modules/bootstrap/scss/dropdown'; @import 'node_modules/bootstrap/scss/carousel'; +/* ==================== Layout ==================== */ + html, body, #___gatsby { @@ -152,27 +156,13 @@ body { background-color: $alabaster; } +/* ==================== Icons ==================== */ + .material-icons { margin-right: 4px; fill: currentColor; } -.popover { - /* Prevent a child element with non-rounded corners from extruding. - overflow: hidden; */ - border: 0; -} - -.text-sans-serif { - font-family: $font-family-sans-serif; -} - -.popover-body { - border: solid 1px $gray-200; - box-shadow: rgba(0, 0, 0, 0.1) 0 0 9px 3px; - background-color: $white; -} - /* Formats an icon so that it appears inline in the text with height matching the text */ .icon-inline { /* SVGs already include padding to account for text baseline, @@ -195,20 +185,7 @@ img.icon-inline, fill: currentColor; } -.img-drop-shadow { - max-width: calc(100% - 10px); - max-height: 100vh; - box-shadow: 0 4px 18px 0 #0000001a, 0 6px 20px 0 #00000017; - margin: 40px auto; - display: block; - vertical-align: middle; - border-style: none; -} - -code.border { - background-color: $light-gray-3; - font-size: 80%; -} +/* ==================== Tables ==================== */ table { width: 100%; @@ -236,6 +213,8 @@ table { background-color: $white; } +/* ==================== BEM Pages/Components ==================== */ + @import 'components/blog/BlogPost'; @import 'components/blog/LinkPost'; @import 'components/blog/PodcastPost'; @@ -289,9 +268,7 @@ table { @import 'gradients'; @import 'spacing'; -.virtual-br::before { - content: '\A'; -} +/* ==================== Typography ==================== */ .font-size-base { font-size: $font-size-base !important; @@ -299,9 +276,40 @@ table { .font-family-base { font-family: $font-family-base !important; } +.font-size-medium { + font-size: 1.2em; + line-height: 1.95em; +} +.font-size-large { + font-size: 4.5em; + line-height: 1.25em; +} +.font-size-extra-large { + font-size: 6em; + line-height: 1.25em; +} +.text-sans-serif { + font-family: $font-family-sans-serif; +} +.text-decoration-underline { + text-decoration: underline; + &:hover { + text-decoration: none; + } +} -.list-spaced > li { - margin-bottom: 1rem; +/* ==================== Bootstrap Components ==================== */ + +.popover { + /* Prevent a child element with non-rounded corners from extruding. + overflow: hidden; */ + border: 0; +} + +.popover-body { + border: solid 1px $gray-200; + box-shadow: rgba(0, 0, 0, 0.1) 0 0 9px 3px; + background-color: $white; } .nav-tabs { @@ -310,19 +318,28 @@ table { border-bottom-width: 1px; } -.font-size-medium { - font-size: 1.2em; - line-height: 1.95em; +/* ==================== Misc ==================== */ + +.virtual-br::before { + content: '\A'; } -.font-size-large { - font-size: 4.5em; - line-height: 1.25em; +.img-drop-shadow { + max-width: calc(100% - 10px); + max-height: 100vh; + box-shadow: 0 4px 18px 0 #0000001a, 0 6px 20px 0 #00000017; + margin: 40px auto; + display: block; + border-style: none; } -.font-size-extra-large { - font-size: 6em; - line-height: 1.25em; +code.border { + background-color: $light-gray-3; + font-size: 80%; +} + +.list-spaced > li { + margin-bottom: 1rem; } .blog-image { @@ -331,10 +348,3 @@ table { border: 1px solid var(--border-color); max-width: 100%; } - -.text-decoration-underline { - text-decoration: underline; - &:hover { - text-decoration: none; - } -}