improve partners css

Author: yyx990803

src/partners/components/PartnerCard.vue

@@ -9,7 +9,7 @@ const { data, hero, page } = defineProps<{
   page?: boolean
 }>()
 
-const { name, intro, region, logo, proficiencies } = data
+const { name, intro, region, logo, proficiencies, flipLogo } = data
 </script>
 
 <template>
@@ -20,6 +20,11 @@ const { name, intro, region, logo, proficiencies } = data
     :href="'/partners/' + normalizeName(name) + '.html'"
   >
     <div class="info">
+      <img
+        class="logo dark"
+        v-if="hero && flipLogo"
+        :src="getLogo(logo, flipLogo)"
+      />
       <img class="logo" v-if="hero" :src="getLogo(logo)" />
       <h3 v-else>{{ name }}</h3>
       <p class="region"><Location /> {{ region.join(', ') }}</p>
@@ -29,7 +34,7 @@ const { name, intro, region, logo, proficiencies } = data
         <span class="proficiency" v-for="p in proficiencies">{{ p }}</span>
       </p>
     </div>
-    <img :src="getHero(name)" :alt="name + ' hero'" />
+    <img class="big" :src="getHero(name)" :alt="name + ' hero'" />
   </component>
 </template>
 
@@ -68,23 +73,31 @@ h3 {
 .logo {
   margin-bottom: 1em;
   max-width: 240px;
+  max-height: 120px;
 }
 
-.dark .logo {
-  filter: grayscale(1) invert(1);
+.logo.dark,
+.dark .logo:not(.dark) {
+  display: none;
 }
 
-.partner-card:not(.hero) img {
+.dark .logo.dark {
+  display: inline-block;
+}
+
+.partner-card:not(.hero) .big {
   margin-top: auto;
 }
 
 .partner-card.hero .info {
   margin-right: 2em;
 }
-.partner-card.hero img {
+.partner-card.hero .big {
   display: inline-block;
   margin-left: auto;
   width: 60%;
+  max-height: 360px;
+  object-fit: cover;
 }
 
 @media (max-width: 768px) {
@@ -97,7 +110,7 @@ h3 {
   .logo {
     max-width: 200px;
   }
-  .partner-card.hero img {
+  .partner-card.hero .big {
     width: 100%;
   }
 }

src/partners/components/type.ts

@@ -1,6 +1,7 @@
 export interface Partner {
   name: string
   logo: string
+  flipLogo?: boolean
   intro: string
   description: string[]
   proficiencies: string[]

src/partners/components/utils.ts

@@ -6,6 +6,7 @@ export function getHero(name: string) {
   return `/images/partners/${normalizeName(name)}-hero.jpg`
 }
 
-export function getLogo(img: string) {
+export function getLogo(img: string, flip: boolean | undefined) {
+  if (flip) img = img.replace(/(\.\w+$)/, '-dark$1')
   return `/images/partners/${img}`
 }

src/partners/partners.json

@@ -2,6 +2,7 @@
   {
     "name": "Vehikl",
     "logo": "vehikl.svg",
+    "flipLogo": true,
     "intro": "Vehikl is a team of code-crushing Laravel experts. Over the years we have built a variety of web applications for customers using Laravel as our framework of choice and implemented Lean Agile development techniques to build professional applications that are functional and easy to use.",
     "description": [
       "Combining the power of Laravel, Lean Agile development techniques, and a diverse team with deep technical knowledge and experience allows us to provide a unique approach to make sure your work gets done as quickly, professionally, and economically as possible. Our customers range from smaller startups looking for help with working through a feature backlog as they scale, to larger established firms that need to refactor a legacy code base and build new features.",
@@ -20,6 +21,7 @@
   {
     "name": "Passionate People",
     "logo": "passionatepeople.png",
+    "flipLogo": true,
     "intro": "We provide you with additional technical capacity to power-up your digital transformation journeys with our teams of first-class engineers and consultants. Full stack JavaScript Cloud Engineers ready to work with you and your teams.",
     "description": [
       "Founded in October 2017, Passionate People is the leading JavaScript consultancy in the Netherlands.",
@@ -108,7 +110,7 @@
       "Our team loves to follow the industry standards, some of which are managing git repo, code review, release deployments via CI/CD (DevOps), automated software testing, maintaining detailed technical documentation, application performance monitoring, etc.",
       "Email us, and let's build your software product."
     ],
-    "region": ["Asia", "North America", "Africa"],
+    "region": ["North America", "Asia", "Europe"],
     "proficiencies": ["Vue", "Laravel", "Nuxt", "Ionic", "Node.js"],
     "website": {
       "text": "webreinvent.com",