Merge pull request #15710 from ssancheza227/feature/lima-ui

[LIMA-2026] Adds event social and styles

Author: toshywoshy

content/events/2026-lima/location.md

@@ -5,11 +5,25 @@ Description = "Location for devopsdays lima 2026"
 +++
 <br>
 
-<p>The event will take place at the <a href="https://www.facebook.com/LimaCentrodeConvencionesLCC" target="_blank" rel="noopener">Lima Convention Center - LCC</a>, strategically located in one of Lima’s most dynamic business districts.</p>
+<p class="text-center">
+  <style>
+    .location-hero-image {
+      width: 100%;
+      height: clamp(220px, 28vw, 360px);
+      object-fit: cover;
+      object-position: 50% 12%;
+      display: block;
+    }
+  </style>
+  <img src="/events/2026-lima/lcc-plano.jpg" alt="Plano del Lima Convention Center (LCC)" class="img-fluid location-hero-image" loading="lazy">
+</p>
+
+<p>The event will take place at the <strong><a href="https://www.facebook.com/LimaCentrodeConvencionesLCC" target="_blank" rel="noopener">Lima Convention Center - LCC</a></strong>, strategically located in one of Lima’s most dynamic business districts.</p>
 
-<p>Av. de la Arqueología 206 <br>
-San Borja 15021, Lima</p>
+<br>
 
+<h2>Venue</h2>
+<p><a href="https://www.google.com/maps?ll=-12.086362,-77.00063&z=15&t=m&hl=es-419&gl=US&mapclient=embed&cid=7426031118201483748" target="_blank" rel="noopener">Av. de la Arqueología 206, San Borja 15021, Lima</a></p>
 <div>
     <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7802.753032193734!2d-77.0055012170037!3d-12.086356312075242!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9105c7d2eb58373d%3A0x670e8ff50b6571e4!2sCentro%20de%20Convenciones%20de%20Lima!5e0!3m2!1ses-419!2sus!4v1771820898497!5m2!1ses-419!2sus" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
 </div>
@@ -33,4 +47,4 @@ San Borja 15021, Lima</p>
 <br>
 
 <h2>Accessibility</h2>
-<p>The venue is fully accessible for people with reduced mobility, including ramps, elevators, and accessible restrooms on all levels. For specific requirements, please contact the {{< event_link page="contact" text="organizers" >}}.</p>
+<p>The venue is fully accessible for people with reduced mobility, including ramps, elevators, and accessible restrooms on all levels. For specific requirements, please contact the {{< event_link page="contact" text="organizers" >}}.</p>

content/events/2026-lima/welcome.md

@@ -16,7 +16,7 @@ Description = "devopsdays lima 2026"
 .welcome-hero-year {
   color: #8C51BF;
   opacity: 0.9;
-  font-weight: 700;
+  font-weight: 900;
 }
 
 .welcome-hero-date {
@@ -75,6 +75,87 @@ Description = "devopsdays lima 2026"
   filter: brightness(0.95);
 }
 
+.welcome-hero-video {
+  width: 100%;
+  max-width: 100%;
+  height: clamp(320px, 38vw, 420px);
+}
+
+.welcome-hero-caption {
+  margin-top: 6px;
+  font-size: 0.9rem;
+  font-style: italic;
+  opacity: 0.85;
+}
+
+.welcome-socials {
+  margin-top: 18px;
+  text-align: left;
+}
+
+.welcome-socials-title {
+  font-size: 1.05rem;
+  font-weight: 600;
+  margin: 16px 0 8px;
+}
+
+.welcome-section-sep {
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  margin-top: 14px;
+  padding-top: 14px;
+}
+
+.welcome-section-gap {
+  margin-top: 14px;
+  padding-top: 14px;
+}
+
+.welcome-socials-icons {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.welcome-socials-icons a {
+  width: 34px;
+  height: 34px;
+  padding: 4px;
+  font-size: 20px;
+  border-radius: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  background-color: transparent;
+  transition: transform 120ms ease, background-color 120ms ease;
+}
+
+.welcome-socials-icons a.social-li { color: rgb(29, 96, 196); --hover-bg: rgba(29, 96, 196, 0.12); }
+.welcome-socials-icons a.social-ig {
+  color: #e1306c; /* fallback */
+  --hover-bg: rgba(225, 48, 108, 0.10);
+}
+.welcome-socials-icons a.social-yt { color: rgb(224, 52, 52); --hover-bg: rgba(224, 52, 52, 0.12); }
+.welcome-socials-icons a.social-x { color: rgb(95, 92, 92); --hover-bg: rgba(95, 92, 92, 0.12); }
+
+@supports ((-webkit-background-clip: text) or (background-clip: text)) {
+  .welcome-socials-icons a.social-ig::before {
+    background-image: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+  }
+}
+
+.welcome-socials-icons a:hover,
+.welcome-socials-icons a:focus {
+  transform: translateY(-1px) scale(1.06);
+  background-color: var(--hover-bg, rgba(0, 0, 0, 0.08));
+}
+
 @media (min-width: 576px) {
   .welcome-hero-cta {
     flex-direction: row;
@@ -103,7 +184,7 @@ a.jssocials-share-link:hover, a.jssocials-share-link:active {
 }
 
 a.p-location{
-  font-weight: 600;
+  font-weight: 700;
   color: #ffffffdd;
 }
 
@@ -112,16 +193,20 @@ a.p-location:hover, a.p-location:active {
 }
 
 .e-summary {
-  font-weight: 500;
+  font-weight: 400;
+}
+
+span.welcome-page-masthead-venue, span.welcome-page-date {
+  font-weight: 700;
 }
 </style>
 
-<div class="row align-items-start">
-  <div class="col-sm-5 p-2 welcome-hero-left">
+<div class="row align-items-start mx-n2">
+  <div class="col-12 col-md-5 p-2 welcome-hero-left">
     <h1 class="welcome-hero-title">Welcome to DevOpsDays Lima! <span class="welcome-hero-year">2026</span></h1>
     <div class="welcome-hero-logo">
       {{< event_logo >}}
-    </div>
+    </div><br>
     <p>DevOpsDays Lima will be coming back to {{< event_location >}} on <strong class="welcome-hero-date">Aug 27-28, 2026</strong>.</p>
     <p>Our mission at DevOpsDays Lima is to drive technological evolution with an event that connects professionals, encourages sharing DevOps knowledge, and strengthens a culture of continuous innovation based on real experiences.</p>
     <div class="welcome-hero-cta">
@@ -135,28 +220,38 @@ a.p-location:hover, a.p-location:active {
       </a>
     </div>
   </div>
-  <div class="col-sm-7 text-center p-2">
+  <div class="col-12 col-md-7 text-center p-2">
     <iframe 
       src="https://www.youtube.com/embed/OOYWupGVhqA?autoplay=1&mute=1&playsinline=1" 
       frameborder="0" 
       allow="autoplay; fullscreen; picture-in-picture" 
       allowfullscreen 
-      style="width: 100%; height: 300px; max-width: 100%;">
-    </iframe>
-    <br/>Impressions from 2025
-  </div>  
-</div>
+      class="welcome-hero-video">
+	    </iframe>
+	    <div class="welcome-hero-caption">Impressions from 2025</div>
+	  </div>  
+	</div>
+
+</br>
 
 <div class="row">
   <div class="col-md-12">
-    <p>
-    <p>First time here? Check out our last events and get hyped!</p>
-    <a href="https://www.devopsdays.org/events/2025-lima/welcome/">DevOpsDays 2025 - Lima</a>
-    </br>
+    <div class="welcome-socials">
+      <h3 class="welcome-socials-title">Follow us!</h3>
+      <div class="welcome-socials-icons">
+        {{< event_social_linkedin >}}
+        <a href="https://www.instagram.com/devopsdayslima/" class="fa-brands social-ig fa-instagram" target="_blank" rel="noopener" title="Follow on Instagram"></a>
+        {{< event_social_youtube >}}
+      </div>
+    </div>
+    <div class="welcome-section-gap">
+      <p>First time here? Check out our last events and get hyped!</p>
+      <a href="https://www.devopsdays.org/events/2025-lima/welcome/">DevOpsDays 2025 - Lima</a>
+    </div>
   </div>
 </div>
 
-<hr>
+<div class="welcome-section-sep"></div>
 
 <div class="row">
   <div class="col-md-2">

data/events/2026/lima/main.yml

@@ -39,15 +39,8 @@ location_address: "Av. de la Arqueología 206, San Borja 15021" #Optional - use
 
 # Optional - Social badges
 # These can be used in the body of any page via matching shortcodes. See sample:  https://devopsdays.org/events/2025-denver/welcome/
-event_social_linkedin: "https://linkedin.com/company/devopsdays" # Change this to the url to your Linkedin group, company, or page.
-event_social_slack: "https://join.slack.com/t/devopsdays/custom_shared_invite_url" # Change this to your slack invite link.
-event_social_listserv: "https://lists.devopsdays.org/subscription?custom_listserv_invite_url" # Change this to your mailing list subscription form url.
-event_social_twitter: "devopsdays" # Change this to the twitter handle for your event such as devopsdayschi or devopsdaysmsp
-event_social_mastodon: "https://mastodon.social/@devopsdays" # Change this to url to your mastodon page
-event_social_bsky: "https://bsky.app/profile/devopsdays.bsky.social" # Change this to url to your bluesky page
-event_social_youtube: "devopsdays" # Change this to the youtube channel handle for your event such as devopsdaysrox
-
-
+event_social_linkedin: "https://www.linkedin.com/company/devops-days-lima" # Change this to the url to your Linkedin group, company, or page.
+event_social_youtube: "DevOpsDaysLima" # Change this to the youtube channel handle for your event such as devopsdaysrox
 # Social Share Buttons
 # Optional: Specify which social share buttons to display on event pages.
 # If not specified, defaults to all: ["email", "twitter", "facebook", "linkedin"]
@@ -57,6 +50,8 @@ social_shares: # ["email", "twitter", "facebook", "linkedin"]
 
 nav_elements: # List of pages you want to show up in the navigation of your page.
  # - name: propose
+  - name: devopsdays.pe
+    url: https://devopsdays.pe/
   - name: location
   - name: registration
  # - name: program