Merge pull request #41 from podfeet/main

Issue #27: Artwork now changes orientation based on screen size
bartificer · Feb 15, 2024 · 8d39940 · 8d39940
2 parents d4468b8 + 34e70e2
commit 8d39940
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/src/assets/topBanner.png b/src/assets/topBanner.png
diff --git a/src/index.html b/src/index.html
@@ -15,8 +15,20 @@
   <div class="container mt-3">
     <div class="row"> <!-- open row for all content above footer -->
       <section id="main" class="col order-2"> <!-- open section for content right of graphic -->
+
+        <div class="row">  <!-- open row for topBanner on mobile screens -->
+          <section id="top-art" class="col order-4 d-inline-flex d-md-none">
+            <picture>
+              <!-- show this up to sm -->
+              <source media="(max-width: 596px)" srcset="/assets/topBanner.png">
+              <!-- else show this -->
+              <img class="img-fluid" alt="XKPasswd - A Secure Memorable Password Generators" src="/assets/sideBanner.png">
+            </picture>
+          </section>
+        </div> <!-- close row for topBanner on mobile screens -->
+
         <header class="row"> <!-- open row for nav -->
-          <nav class="navbar navbar-expand-lg rounded bg-primary bg-gradient col-11 col-md">
+          <nav class="navbar navbar-expand-lg rounded bg-primary bg-gradient col-11 col-md mx-auto">
             <div class="container-fluid">
               <!-- <a class="navbar-brand text-white" href="#"><img class="img-responsive" src="assets/logo.png"><br /><small class="fs-6">Password Generator</small></a> -->
               <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
@@ -52,8 +64,9 @@
             </div>
           </nav>
         </header> <!-- close row for nav -->
+
         <section id="content" class="row"> <!-- open row for content below nav -->
-          <div class="accordion mt-3 mb-3 mb-lg-5 col-11 col-md" id="passwordConfig"> <!-- open config col -->
+          <div class="accordion mt-3 mb-3 mb-lg-5 col-11 col-md mx-auto" id="passwordConfig"> <!-- open config col -->
             <div class="accordion-item">
               <h2 class="accordion-header">
                 <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseConfig"
@@ -134,8 +147,14 @@ <h3>Generate Password(s)</h3>
           </div> <!-- close generate pw -->
         </section> <!-- close section for content below nav -->
       </section> <!-- close section for content right of graphic -->
-      <section id="sidebar-left" class="col-2 order-1"> <!-- open section for graphic -->
-        <img class="img-fluid" "height=300px" src="assets/sideBanner.png" alt="XKPasswd - A Secure Memorable Password Generator" />
+
+      <section id="sidebar-left" class="col-2 order-1 d-none d-md-inline"> <!-- open section for graphic -->
+        <picture>
+          <!-- else show this -->
+        <source media="(max-width: 768px)" srcset="/assets/sideBanner.png">
+        <!-- else show this -->
+        <img class="img-fluid" alt="XKPasswd - A Secure Memorable Password Generators" src="/assets/sideBanner.png">
+        </picture>
       </section> <!-- close section for graphic -->
     </div> <!-- close opening row -->
     <div class="row"> <!-- open row for password card -->