Use semantic HTML to include logo

Not only is the HTML semantically clearer with such a change, if one wanted to print the Welcome/Privacy Policy page, the logo would now be included in that printout (or PDF or whatever).
internetarchive · Jun 5, 2024 · 3d19772 · 3d19772
1 parent ad65aeb
commit 3d19772
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 7 deletions.
diff --git a/webextension/css/welcome.css b/webextension/css/welcome.css
@@ -48,7 +48,6 @@ p {
 }
 
 .welcome-logo {
-    background: url('../images/wayback-light.png') center/cover no-repeat;
     width: 375px;
     height: 150px;
     margin: 0 auto;
@@ -73,9 +72,4 @@ p {
     .bottom-container {
         background-color: #333;
     }
-
-    .welcome-logo {
-        background-image: url('../images/wayback-dark.png')
-    }
-
 }
diff --git a/webextension/welcome.html b/webextension/welcome.html
@@ -12,7 +12,10 @@
   <body>
     <div class="body-container">
       <div class="header-container">
-        <div class="welcome-logo"></div>
+        <picture>
+          <source srcset="./images/wayback-dark.png" media="(prefers-color-scheme: dark)" width="850" height="340"/>
+          <img class="welcome-logo" src="./images/wayback-light.png" width="850" height="340" alt=""/>
+        </picture>
         <h1>
           Welcome to the Internet Archive's<br>
           Wayback Machine Browser Extension