From 1764a370a2946a7cc788fde2aceb6c7fc5f3a3ed Mon Sep 17 00:00:00 2001 From: Travis Beckham Date: Tue, 28 Nov 2023 11:12:59 -0600 Subject: [PATCH] Updated Anchor page (#1716) * Updated Anchor page Signed-off-by: Travis Beckham * Updated anchor image Signed-off-by: Travis Beckham --------- Signed-off-by: Travis Beckham --- linkerd.io/assets/scss/styles.scss | 251 ++++++++---------- linkerd.io/content/community/anchor/_index.md | 49 ++-- .../content/community/get-involved/_index.md | 6 +- linkerd.io/content/enterprise/_index.md | 1 + linkerd.io/layouts/community/adopters.html | 2 +- linkerd.io/layouts/community/ambassadors.html | 2 +- linkerd.io/layouts/community/anchor.html | 10 +- .../layouts/community/get-involved.html | 2 +- linkerd.io/layouts/community/heroes.html | 2 +- linkerd.io/layouts/enterprise/enterprise.html | 2 +- .../community/adopters/case-studies.html | 4 +- .../community/ambassadors/ambassadors.html | 18 +- .../partials/community/anchor/anchor.html | 5 + .../partials/community/anchor/benefits.html | 19 +- .../community/anchor/mid-message.html | 16 +- .../partials/community/anchor/signup.html | 18 +- .../partials/community/anchor/top-hero.html | 19 -- .../partials/community/heroes/heroes.html | 16 +- .../layouts/partials/enterprise/top-hero.html | 10 - .../partials/{community => }/top-hero.html | 2 +- linkerd.io/static/images/anchor.jpg | Bin 0 -> 163339 bytes linkerd.io/static/images/quote.svg | 12 +- 22 files changed, 203 insertions(+), 263 deletions(-) create mode 100644 linkerd.io/layouts/partials/community/anchor/anchor.html delete mode 100644 linkerd.io/layouts/partials/community/anchor/top-hero.html delete mode 100644 linkerd.io/layouts/partials/enterprise/top-hero.html rename linkerd.io/layouts/partials/{community => }/top-hero.html (72%) create mode 100644 linkerd.io/static/images/anchor.jpg diff --git a/linkerd.io/assets/scss/styles.scss b/linkerd.io/assets/scss/styles.scss index a5c5a9e695..707453135b 100644 --- a/linkerd.io/assets/scss/styles.scss +++ b/linkerd.io/assets/scss/styles.scss @@ -10,24 +10,10 @@ } } -.wrapper { - &.features, - &.mid-message, - &.benefits { - padding-top: 50px; - padding-bottom: 70px; - } -} - .twitter-tweet { max-width: 450px; } -.container.blog-content-container figure img.has-image-centered { - margin-left: auto; - margin-right: auto; -} - .hero-body { .image-list { &.has-background-aqua-green { @@ -47,12 +33,23 @@ } } -.features { - .feature-item { - padding: 15px 30px; +.hero-body .wrapper.image-list { + a img { + -webkit-filter: none; + -moz-filter: none; + -o-filter: none; + -ms-filter: none; + filter: none; + opacity: 0.4; } - .buttons { - padding-top: 30px; + a:hover img { + opacity: 1; + } +} + +@media screen and (max-width: 768px){ + .hero-body .wrapper.image-list .column.is-half-mobile{ + width: 50%; } } @@ -262,6 +259,21 @@ } } +.foundation-member { + .foundation-member-banner { + padding: 40px 0 30px 0; + border-radius: 2px; + } + .title { + font-weight: 600 !important; + font-size: 24px !important; + } + img { + width: 200px; + height: auto; + } +} + .tweets { header { a { @@ -307,20 +319,7 @@ } } -.enterprise-support, -.community-content { - padding: 40px 0; - background-image: linear-gradient($light-blue, rgba($light-blue, 0)); - background-size: 100% 200px; - background-repeat: no-repeat; - - @include from($tablet) { - padding: 60px 0; - } -} - -.enterprise-top-hero, -.community-top-hero { +.top-hero { .notification { padding-top: 60px; padding-bottom: 60px; @@ -354,7 +353,7 @@ } } -.enterprise-top-hero { +.top-hero.enterprise-top-hero { @media screen and (min-width: 900px) { .notification { background-image: none; @@ -376,6 +375,45 @@ } } +.top-hero.anchor-top-hero { + background-image: url(/images/anchor.jpg); + background-repeat: no-repeat; + background-position: top center; + background-size: auto 360px; + padding-top: 340px; + @include tablet-only { + background-image: none; + } + @include from($tablet) { + padding-top: 0; + } + @include from($desktop) { + background-size: auto 310px; + background-position: right center; + .notification { + width: 70%; + } + } + @include from($widescreen) { + background-size: auto 360px; + } + @include from($fullhd) { + background-size: auto 380px; + } +} + +.enterprise-support, +.community-content { + padding: 40px 0; + background-image: linear-gradient($light-blue, rgba($light-blue, 0)); + background-size: 100% 200px; + background-repeat: no-repeat; + + @include from($tablet) { + padding: 60px 0; + } +} + .enterprise-support { .title { font-weight: 600 !important; @@ -439,18 +477,45 @@ } } -.foundation-member { - .foundation-member-banner { - padding: 40px 0 30px 0; - border-radius: 2px; +.heroes-card { + position: relative; + & * { + z-index: 1;/* position content above graphic */ } - .title { - font-weight: 600 !important; - font-size: 24px !important; + & .hero-type__graphic { + position: absolute; + right: 0; + z-index: 0; } - img { - width: 200px; - height: auto; +} + +.anchor-mid-message { + p { + margin-bottom: 1rem; + } + strong { + @extend .has-text-navy-black; + } +} + +.anchor-benefits { + ul { + li { + list-style-type: none; + padding-bottom: 1rem; + &:last-child { + padding-bottom: 0; + } + strong { + color: $deep-blue; + } + } + } +} + +.anchor-signup { + label { + @extend .has-text-navy-black; } } @@ -462,20 +527,6 @@ padding: 82px 0 165px; } -.hero-body .wrapper.image-list { - a img { - -webkit-filter: none; - -moz-filter: none; - -o-filter: none; - -ms-filter: none; - filter: none; - opacity: 0.4; - } - a:hover img { - opacity: 1; - } -} - .stats-list { background-image: linear-gradient($light-blue, white); } @@ -564,21 +615,22 @@ hr { margin: 0; } - code { color: inherit; background: inherit; } - table { width: 100%; } - figure { margin: 30px auto; img { margin: 0 0 10px; border-radius: $radius; + &.has-image-centered { + margin-left: auto; + margin-right: auto; + } } } } @@ -856,51 +908,6 @@ blockquote { padding-left: 2em; } -.mid-message { - strong { - @extend .has-text-navy-black; - } -} -.benefits { - ul { - li { - list-style-type: none; - padding-bottom: 1rem; - strong { - color: $deep-blue; - } - } - } -} -.signup { - label { - @extend .has-text-navy-black; - } -} - -.heroes-top-hero { - padding: 40px 20px; - background: url('/images/textures/triangles-2.svg'), $primary-bright-blue; - background-repeat: no-repeat; - background-size: 60%; - background-position: 100%, 50%; - @media screen and (max-width: $tablet) { - background-size: 200%; - background-position: 0 0; - } - .heroes-top-hero__image-wrapper { - @media screen and (max-width: $tablet) { - display: none; - max-width: 200px; - margin-left: auto; - margin-right: auto; - } - img { - vertical-align: middle; - } - } -} - .triangles { background: url('/images/textures/triangles.svg') no-repeat center; background-size: cover; @@ -910,41 +917,11 @@ blockquote { font-size: 18px !important; } - .featured-blogs__thumbnail { +.featured-blogs__thumbnail { height: 150px; overflow: hidden; - } - - // anchors page - .anchors-hero__image { - @include desktop { - width: 100%; - } - img { - @include desktop { - width: 80% !important; - } - } - } - -.heroes-card { - position: relative; - & * { - z-index: 1;/* position content above graphic */ - } - & .hero-type__graphic { - position: absolute; - right: 0; - z-index: 0; - } } .modal-content { width: 95%; } - -@media screen and (max-width: 768px){ - .hero-body .wrapper.image-list .column.is-half-mobile{ - width: 50%; - } -} \ No newline at end of file diff --git a/linkerd.io/content/community/anchor/_index.md b/linkerd.io/content/community/anchor/_index.md index a70c28817c..b61679f13c 100644 --- a/linkerd.io/content/community/anchor/_index.md +++ b/linkerd.io/content/community/anchor/_index.md @@ -1,38 +1,35 @@ --- -title: Becoming a Linkerd Community Anchor -description: Are you passionate about Linkerd and sharing your experience with the broader community? We want to help you tell your story! +title: Become a Linkerd Community Anchor +description: Are you passionate about Linkerd and sharing your experience with + the broader community? We want to help you tell your story! layout: anchor +autopilot: true +top_hero: + class: anchor-top-hero + title: Become a Linkerd Community Anchor + description: + "Are you passionate about Linkerd and sharing your experience with the + broader community? We want to help you tell your story! Whether writing a + blog post, creating a YouTube or Twitch video, or speaking at a conference, + our team will help you deliver your Linkerd story to a broad audience." +mid_message: |- + If you are running Linkerd on a cool project, mission-critical application, + or an interesting or complex use case — we’d love to hear from you. + + **Got questions? Ask us in the #linkerd2-community-anchor Slack channel.** benefits: + title: Benefits items: - - '**Become a recognized expert** in the service mesh, cloud native, and - Kubernetes space by sharing your story with the community. ' - - '**Tell your story in any medium**, from blog posts to YouTube/Twitch to - conferences or all of the above.' + - "**Become a recognized expert** in the service mesh, cloud native, and + Kubernetes space by sharing your story with the community." + - "**Tell your story in any medium**, from blog posts to YouTube/Twitch to + conferences or all of the above." - "**Submit your talk proposal with confidence**. Writing an abstract or putting a presentation together doesn't come naturally to everyone. If you are eager to tell your Linkerd story and need help, we're here for you." - "**Get editing or writing support**. Not a native speaker and/or not confident about your writing skills? No worries. Bring the story and we'll help you tell it in an engaging way." - title: Benefits -autopilot: true -mid_message: |- - If you are running Linkerd on a cool project, mission-critical application, or an interesting or complex use case — we’d love to hear from you. - - **Got questions? Ask us in the #linkerd2-community-anchor Slack channel.** signup: - background_color: has-background-light-blue - title: 'Sign me up!' -title: 'Becoming A Community Anchor' -top_hero: - description: - 'Are you passionate about Linkerd and sharing your experience with the - broader community? We want to help you tell your story! Whether writing a - blog post, creating a YouTube or Twitch video, or speaking at a conference, - our team will help you deliver your Linkerd story to a broad audience.' - image: /uploads/social_linkedin_header.png - image2x: /uploads/social_linkedin_header@2x.png - image_alt: 'Become a linkerd Community Anchor' - image_on_the_right: true - title: 'Become a Linkerd Community Anchor' + title: Sign me up! --- diff --git a/linkerd.io/content/community/get-involved/_index.md b/linkerd.io/content/community/get-involved/_index.md index 0eefdd8123..2415e7f8a8 100644 --- a/linkerd.io/content/community/get-involved/_index.md +++ b/linkerd.io/content/community/get-involved/_index.md @@ -31,17 +31,17 @@ links: And don’t forget to join - image: "/images/get-involved/meetup-in-a-box.svg" alt: Meetup in a box - description: Giving a talk or hosting a meetup? Our [meet-up-in-a-box](https://linkerd.io/meetup-in-a-box/) + description: Giving a talk or hosting a meetup? Our [meet-up-in-a-box](/meetup-in-a-box/) has what you need. - image: "/images/get-involved/steering-meeting.svg" alt: Steering committee description: Interested in learning more about Linked governance? Read our [steering committee charter](https://github.com/linkerd/linkerd2/blob/main/STEERING.md) - and our [commitment to open governance.](https://linkerd.io/2019/10/03/linkerds-commitment-to-open-governance/) + and our [commitment to open governance.](/2019/10/03/linkerds-commitment-to-open-governance/) - image: "/images/get-involved/community-anchor.svg" alt: Community anchor description: Want to share your Linkerd experience with others, but don’t know how - to get started? We’ll help you tell your story with the [Community Anchor](https://linkerd.io/community/anchor/) + to get started? We’ll help you tell your story with the [Community Anchor](/community/anchor/) program. - image: "/images/get-involved/mailing-list.svg" alt: Mailing list diff --git a/linkerd.io/content/enterprise/_index.md b/linkerd.io/content/enterprise/_index.md index 93652ad823..6deec88ea9 100644 --- a/linkerd.io/content/enterprise/_index.md +++ b/linkerd.io/content/enterprise/_index.md @@ -7,6 +7,7 @@ layout: enterprise type: enterprise weight: 1 top_hero: + class: enterprise-top-hero title: Enterprise Support and Training description: "Linkerd was created by Buoyant and contributed to the Cloud Native Computing Foundation in 2017. It was the first service mesh to achieve graduated status, and today powers the critical production systems of enterprises around the world.\n\nHere, you'll find commercial products, support, and training for Linkerd." support: diff --git a/linkerd.io/layouts/community/adopters.html b/linkerd.io/layouts/community/adopters.html index dca4605430..b4e588406a 100644 --- a/linkerd.io/layouts/community/adopters.html +++ b/linkerd.io/layouts/community/adopters.html @@ -1,4 +1,4 @@ {{ define "main" }} -{{ partial "community/top-hero.html" .Params.top_hero }} +{{ partial "top-hero.html" .Params.top_hero }} {{ partial "community/adopters/adopters.html" . }} {{ end }} diff --git a/linkerd.io/layouts/community/ambassadors.html b/linkerd.io/layouts/community/ambassadors.html index a732e229b8..b302e5073c 100644 --- a/linkerd.io/layouts/community/ambassadors.html +++ b/linkerd.io/layouts/community/ambassadors.html @@ -1,4 +1,4 @@ {{ define "main" }} -{{ partial "community/top-hero.html" .Params.top_hero }} +{{ partial "top-hero.html" .Params.top_hero }} {{ partial "community/ambassadors/ambassadors.html" .Params.ambassadors }} {{ end }} diff --git a/linkerd.io/layouts/community/anchor.html b/linkerd.io/layouts/community/anchor.html index 1e40885d5d..273202107d 100644 --- a/linkerd.io/layouts/community/anchor.html +++ b/linkerd.io/layouts/community/anchor.html @@ -1,10 +1,4 @@ -{{ define "head" }} - -{{ end }} - {{ define "main" }} -{{ partial "community/anchor/top-hero.html" .Params.top_hero }} -{{ partial "community/anchor/mid-message.html" .Params.mid_message }} -{{ partial "community/anchor/benefits.html" .Params.benefits }} -{{ partial "community/anchor/signup.html" .Params.signup }} +{{ partial "top-hero.html" .Params.top_hero }} +{{ partial "community/anchor/anchor.html" . }} {{ end }} diff --git a/linkerd.io/layouts/community/get-involved.html b/linkerd.io/layouts/community/get-involved.html index 03a90fc5ac..49c3ed5a3e 100644 --- a/linkerd.io/layouts/community/get-involved.html +++ b/linkerd.io/layouts/community/get-involved.html @@ -1,4 +1,4 @@ {{ define "main" }} -{{ partial "community/top-hero.html" .Params.top_hero }} +{{ partial "top-hero.html" .Params.top_hero }} {{ partial "community/get-involved/get-involved.html" .Params.links }} {{ end }} diff --git a/linkerd.io/layouts/community/heroes.html b/linkerd.io/layouts/community/heroes.html index 820d203f02..c54ac25d3d 100644 --- a/linkerd.io/layouts/community/heroes.html +++ b/linkerd.io/layouts/community/heroes.html @@ -1,4 +1,4 @@ {{ define "main" }} -{{ partial "community/top-hero.html" .Params.top_hero }} +{{ partial "top-hero.html" .Params.top_hero }} {{ partial "community/heroes/heroes.html" .Params.heroes }} {{ end }} diff --git a/linkerd.io/layouts/enterprise/enterprise.html b/linkerd.io/layouts/enterprise/enterprise.html index 7c1e44735c..2eb2264749 100644 --- a/linkerd.io/layouts/enterprise/enterprise.html +++ b/linkerd.io/layouts/enterprise/enterprise.html @@ -1,4 +1,4 @@ {{ define "main" }} -{{ partial "enterprise/top-hero.html" .Params.top_hero }} +{{ partial "top-hero.html" .Params.top_hero }} {{ partial "enterprise/support.html" .Params.support }} {{ end }} diff --git a/linkerd.io/layouts/partials/community/adopters/case-studies.html b/linkerd.io/layouts/partials/community/adopters/case-studies.html index 514449fbf0..329eb9b683 100644 --- a/linkerd.io/layouts/partials/community/adopters/case-studies.html +++ b/linkerd.io/layouts/partials/community/adopters/case-studies.html @@ -7,8 +7,8 @@ {{ .alt }}
-

{{.title}}

-

{{.description}} ...

+

{{ .title }}

+

{{ .description }} ...

Read case study
diff --git a/linkerd.io/layouts/partials/community/ambassadors/ambassadors.html b/linkerd.io/layouts/partials/community/ambassadors/ambassadors.html index 8a2fa080f5..b2c489ef9c 100644 --- a/linkerd.io/layouts/partials/community/ambassadors/ambassadors.html +++ b/linkerd.io/layouts/partials/community/ambassadors/ambassadors.html @@ -5,24 +5,24 @@
- {{.name}} + {{ .name }}
-

{{.name}} {{.flag}}

-

{{.job_title}}

+

{{ .name }} {{ .flag }}

+

{{ .job_title }}

- {{ if .github }} - + {{ with .github }} + github icon {{ end }} - {{ if .twitter }} - + {{ with .twitter }} + twitter icon {{ end }} - {{ if .linkedin }} - + {{ with .linkedin }} + linkedin icon {{ end }} diff --git a/linkerd.io/layouts/partials/community/anchor/anchor.html b/linkerd.io/layouts/partials/community/anchor/anchor.html new file mode 100644 index 0000000000..1f3ef0053e --- /dev/null +++ b/linkerd.io/layouts/partials/community/anchor/anchor.html @@ -0,0 +1,5 @@ +
+ {{ partial "community/anchor/mid-message.html" .Params.mid_message }} + {{ partial "community/anchor/benefits.html" .Params.benefits }} + {{ partial "community/anchor/signup.html" .Params.signup }} +
diff --git a/linkerd.io/layouts/partials/community/anchor/benefits.html b/linkerd.io/layouts/partials/community/anchor/benefits.html index 1ce249ffa5..8f13768acd 100644 --- a/linkerd.io/layouts/partials/community/anchor/benefits.html +++ b/linkerd.io/layouts/partials/community/anchor/benefits.html @@ -1,19 +1,18 @@ -
-
-
-
- {{ if .title }} -

{{.title}} -

+
+
+
+
+ {{ with .title }} +

{{ . }}

{{ end }}
    - {{ range .items}} + {{ range .items }}
  • - {{.|markdownify}} + {{ . | markdownify }}
    • {{ end }}
-
\ No newline at end of file +
diff --git a/linkerd.io/layouts/partials/community/anchor/mid-message.html b/linkerd.io/layouts/partials/community/anchor/mid-message.html index dab04c04b0..0a5ac21b30 100644 --- a/linkerd.io/layouts/partials/community/anchor/mid-message.html +++ b/linkerd.io/layouts/partials/community/anchor/mid-message.html @@ -1,13 +1,9 @@ -
-
-
-
-
-
- {{. | markdownify }} -
-
+
+
+
+
+ {{ . | markdownify }}
-
\ No newline at end of file +
diff --git a/linkerd.io/layouts/partials/community/anchor/signup.html b/linkerd.io/layouts/partials/community/anchor/signup.html index 4c69e03838..74538d5d16 100644 --- a/linkerd.io/layouts/partials/community/anchor/signup.html +++ b/linkerd.io/layouts/partials/community/anchor/signup.html @@ -1,9 +1,9 @@ -