styles and code are added to highlight an ambassador

Signed-off-by: Karina Rodriguez <[email protected]>
linkerd · Jun 21, 2024 · 0b3bb00 · 0b3bb00
1 parent a1f49e5
commit 0b3bb00
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 24 deletions.
diff --git a/linkerd.io/assets/scss/styles.scss b/linkerd.io/assets/scss/styles.scss
@@ -289,6 +289,27 @@
 
 .community-card {
   height: 100%;
+  position: relative;
+  &.highlight {
+    background-color: #EAF3FA;
+  }
+}
+.emeritus{
+  position: absolute;
+  right: 1rem;
+  padding: 0 0.8rem;
+  top: 1rem;
+  width: auto;
+  background-color: #64f9bf;
+  border-radius: 25px;
+  font-size: 0.9rem;
+  @media (max-width: 912px) {
+    right: 0;
+    top: 0;
+    padding: 0 0.7rem;
+    font-size: 0.7rem;
+    border-radius: 0px;
+  }
 }
 
 .adopters-case-studies__quote {

diff --git a/linkerd.io/content/community/ambassadors/_index.md b/linkerd.io/content/community/ambassadors/_index.md
@@ -53,13 +53,6 @@ ambassadors:
     github: https://github.com/fredrkl
     twitter: https://twitter.com/fredrkl
     linkedin: https://www.linkedin.com/in/fredrikklingenberg/
-  - name: Kasper Nissen
-    job_title: Lead Platform Architect
-    image: /images/ambassadors/profile/kasper-nissen.png
-    flag: 🇩🇰
-    github: https://github.com/kaspernissen
-    twitter: https://twitter.com/phennex
-    linkedin: https://www.linkedin.com/in/kaspernissen/
   - name: María Teresa Rojas
     job_title: SRE
     image: /images/ambassadors/profile/maria-rojas.png
@@ -78,4 +71,11 @@ ambassadors:
     image: '/images/ambassadors/profile/steve-gray.png'
     flag: 🇦🇺
     linkedin: https://www.linkedin.com/in/eventualconsistency/
+  - name: Kasper Nissen
+    job_title: Lead Platform Architect
+    image: /images/ambassadors/profile/kasper-nissen.png
+    flag: 🇩🇰
+    github: https://github.com/kaspernissen
+    twitter: https://twitter.com/phennex
+    linkedin: https://www.linkedin.com/in/kaspernissen/
 ---
diff --git a/linkerd.io/layouts/partials/community/ambassadors/ambassadors.html b/linkerd.io/layouts/partials/community/ambassadors/ambassadors.html
@@ -3,32 +3,67 @@
     <div class="columns column is-multiline">
         {{ range . }}
         <div class="column is-6">
+
+          {{ if eq .name "Kasper Nissen" }}
+          <div class="box is-flex is-justify-content-flex-start is-align-items-center px-5 py-5 community-card highlight">
+            <figure class="image is-128x128 mr-4 is-flex-shrink-0">
+              <img class="is-rounded" src="{{ .image }}" alt="{{ .name }}" />
+            </figure>
+            <div>
+              <h3 class="is-size-5 has-text-weight-bold">{{ .name }} {{ .flag }}</h3>
+              <p class="has-text-weight-light mb-2">{{ .job_title }}</p>
+
+                  <div class="is-flex">
+                    {{ with .github }}
+                      <a class="is-block mr-2" href="{{ . }}" target="_blank" rel="noopener noreferrer">       
+                          <img class="image is-32x32" src="/images/ambassadors/github-icon-navy.svg" alt="github icon">
+                      </a>
+                    {{ end }}
+                    {{ with .twitter }}
+                      <a class="is-block mr-2" href="{{ . }}" target="_blank" rel="noopener noreferrer">
+                          <img class="image is-32x32" src="/images/ambassadors/twitter-icon-navy.svg" alt="twitter icon">
+                      </a>
+                    {{ end }}
+                    {{ with .linkedin }}
+                      <a class="is-block mr-2" href="{{ . }}" target="_blank" rel="noopener noreferrer">
+                          <img class="image is-32x32" src="/images/ambassadors/linkedin-icon-navy.svg" alt="linkedin icon">
+                      </a>
+                    {{ end }}
+                  </div>
+            </div>
+
+            <div class="emeritus">Emeritus</div>
+
+          </div>
+          {{ else }}
           <div class="box is-flex is-justify-content-flex-start is-align-items-center px-5 py-5 community-card">
             <figure class="image is-128x128 mr-4 is-flex-shrink-0">
               <img class="is-rounded" src="{{ .image }}" alt="{{ .name }}" />
             </figure>
             <div>
               <h3 class="is-size-5 has-text-weight-bold">{{ .name }} {{ .flag }}</h3>
               <p class="has-text-weight-light mb-2">{{ .job_title }}</p>
-              <div class="is-flex">
-                {{ with .github }}
-                  <a class="is-block mr-2" href="{{ . }}" target="_blank" rel="noopener noreferrer">
-                    <img class="image is-32x32" src="/images/ambassadors/github-icon.svg" alt="github icon">
-                  </a>
-                {{ end }}
-                {{ with .twitter }}
-                  <a class="is-block mr-2" href="{{ . }}" target="_blank" rel="noopener noreferrer">
-                    <img class="image is-32x32" src="/images/ambassadors/twitter-icon.svg" alt="twitter icon">
-                  </a>
-                {{ end }}
-                {{ with .linkedin }}
-                  <a class="is-block mr-2" href="{{ . }}" target="_blank" rel="noopener noreferrer">
-                    <img class="image is-32x32" src="/images/ambassadors/linkedin-icon.svg" alt="linkedin icon">
-                  </a>
-                {{ end }}
-              </div>
+
+                  <div class="is-flex">
+                    {{ with .github }}
+                      <a class="is-block mr-2" href="{{ . }}" target="_blank" rel="noopener noreferrer">       
+                          <img class="image is-32x32" src="/images/ambassadors/github-icon.svg" alt="github icon">
+                      </a>
+                    {{ end }}
+                    {{ with .twitter }}
+                      <a class="is-block mr-2" href="{{ . }}" target="_blank" rel="noopener noreferrer">
+                          <img class="image is-32x32" src="/images/ambassadors/twitter-icon.svg" alt="twitter icon">
+                      </a>
+                    {{ end }}
+                    {{ with .linkedin }}
+                      <a class="is-block mr-2" href="{{ . }}" target="_blank" rel="noopener noreferrer">
+                          <img class="image is-32x32" src="/images/ambassadors/linkedin-icon.svg" alt="linkedin icon">
+                      </a>
+                    {{ end }}
+                  </div>           
             </div>
           </div>
+          {{ end }}
         </div>
         {{ end }}
     </div>

diff --git a/linkerd.io/static/images/ambassadors/github-icon-navy.svg b/linkerd.io/static/images/ambassadors/github-icon-navy.svg
diff --git a/linkerd.io/static/images/ambassadors/linkedin-icon-navy.svg b/linkerd.io/static/images/ambassadors/linkedin-icon-navy.svg
diff --git a/linkerd.io/static/images/ambassadors/twitter-icon-navy.svg b/linkerd.io/static/images/ambassadors/twitter-icon-navy.svg
diff --git a/linkerd.io/themes/buoyant/assets/bulma/sass/grid/columns.sass b/linkerd.io/themes/buoyant/assets/bulma/sass/grid/columns.sass
@@ -503,3 +503,4 @@ $column-gap: 0.75rem !default
       +fullhd
         &.is-#{$i}-fullhd
           --columnGap: #{$i * 0.25rem}
+