More prominently position IWK/mdw logos

Author: musicog

index.html

@@ -45,6 +45,12 @@
 
   <!-- ====================== HERO ====================== -->
   <section class="hero" aria-labelledby="hero-heading">
+    <a class="hero-corner hero-corner-left" href="https://iwk.mdw.ac.at" target="_blank" rel="noopener">
+      <img src="assets/logos/IWK-logo2018-P281-short.svg" alt="IWK – Department of Music Acoustics – Wiener Klangstil">
+    </a>
+    <a class="hero-corner hero-corner-right" href="https://mdw.ac.at" target="_blank" rel="noopener">
+      <img src="assets/logos/MDW_Logo_englisch281.svg" alt="mdw – University of Music and Performing Arts Vienna">
+    </a>
     <div class="wrap">
       <h1 id="hero-heading" class="visually-hidden" style="position:absolute;left:-9999px;">Let's Encode!</h1>
       <!--

styles.css

@@ -161,6 +161,7 @@ a:hover {
   border-bottom: 1px solid var(--line);
   padding: clamp(2.5rem, 6vw, 5rem) 0;
   text-align: center;
+  position: relative;
 }
 
 .hero .logo {
@@ -174,6 +175,35 @@ a:hover {
   display: block;
 }
 
+/* Institutional logos pinned to the top corners of the hero. */
+.hero-corner {
+  position: absolute;
+  top: clamp(1rem, 3vw, 2rem);
+  display: inline-flex;
+  align-items: center;
+  transition: transform .15s ease, opacity .15s ease;
+  z-index: 1;
+}
+
+.hero-corner-left {
+  left: clamp(1rem, 3vw, 2rem);
+}
+
+.hero-corner-right {
+  right: clamp(1rem, 3vw, 2rem);
+}
+
+.hero-corner img {
+  height: 44px;
+  width: auto;
+  display: block;
+}
+
+.hero-corner:hover {
+  transform: translateY(-2px);
+  opacity: .85;
+}
+
 .hero .tagline {
   font-size: clamp(1.15rem, 2.4vw, 1.55rem);
   font-weight: 600;
@@ -528,6 +558,17 @@ section.alt {
     scroll-padding-top: 26px;
   }
 
+  /* smaller corner logos so they clear the centered project logo on narrow screens */
+  .hero-corner img {
+    height: 30px;
+  }
+
+  /* the corner logos are absolutely positioned, so add top padding to push the
+     centered project logo down clear of them (logo height + inset + breathing room) */
+  .hero {
+    padding-top: 5.5rem;
+  }
+
   /* swap the logo image for a plaintext wordmark on mobile */
   .brand-logo {
     display: none;