Update screenshots to current version

css/main.css

@@ -48,6 +48,14 @@ hr {
 	border-bottom: 1px solid rgb(200,200,200);	
 }
 
+hr#mac-features {
+	margin: 0rem 0rem 1rem 0rem;
+	border-left: none;
+	border-right: none;
+	border-top: none;
+	border-bottom: 1px solid rgb(200,200,200);	
+}
+
 .clear {
 	clear: both;
 }
@@ -102,12 +110,10 @@ t - animation duration = (f+p)*n
 div.screenshots {
 	position: relative;
 	width: 800px;
-	max-width: 800px;
-	height: 600px;
+	max-width: 1020px;
+	height: 887px;
 	margin: auto;
 	border-radius: 0.5rem;
-	border: 1px solid rgb(200,200,200);
-	box-shadow: 0rem 0.5rem 2rem rgba(10,10,10,0.2);
 }
 
 div.screenshots img:nth-of-type(1) { animation-delay: 24s; }
@@ -120,6 +126,7 @@ div.screenshots img:nth-of-type(7) { animation-delay: 0s; }
 
 
 img.screenshot {
+	opacity: 0;
 	position: absolute;
 	left: 0;
 	width: 100%;

index.html

@@ -3,151 +3,250 @@
 title: MacPass
 id: home
 ---
-<p class="header-claim">A free, open-source, KeePass-compatible password manager for macOS.</p>
+
+<p class="header-claim">
+  A free, open-source, KeePass-compatible password manager for macOS.
+</p>
 <div class="buttons">
-    <a href="https://github.com/mstarke/MacPass/releases/tag/0.7.12" class="button button-large">
-        Download for macOS
-    </a>
-    <div class="button-description">Version 0.7.12 for macOS 10.10 and later</div>
-</div>
-<hr/>
+  <a
+    href="https://github.com/mstarke/MacPass/releases/tag/0.7.12"
+    class="button button-large"
+  >
+    Download for macOS
+  </a>
+  <div class="button-description">Version 0.7.12 for macOS 10.10 and later</div>
+</div>
+<hr />
 <div class="screenshots">
-    <img src="img/screenshot_quicklook_text.png" class="screenshot" />
-    <img src="img/screenshot_tabs.png" class="screenshot" />
-    <img src="img/screenshot_search.png" class="screenshot" />
-    <img src="img/screenshot_icon_selection.png" class="screenshot" />
-    <img src="img/screenshot_password_generator.png" class="screenshot" />
-    <img src="img/screenshot_database.png" class="screenshot" />
-    <img src="img/screenshot_locked.png" class="screenshot" />
+  <img src="img/screenshots/screenshot_quicklook_text.png" class="screenshot" />
+  <img src="img/screenshots/screenshot_tabs.png" class="screenshot" />
+  <!-- <img src="img/screenshot_search.png" class="screenshot" /> -->
+  <img src="img/screenshots/screenshot_icon_selection.png" class="screenshot" />
+  <img
+    src="img/screenshots/screenshot_password_generator.png"
+    class="screenshot"
+  />
+  <img src="img/screenshots/screenshot_database.png" class="screenshot" />
+  <img src="img/screenshots/screenshot_locked.png" class="screenshot" />
 </div>
 <hr id="mac-features" />
 <h2>MacPass behaves just the way a macOS app should</h2>
 <div class="feature">
-    <div class="feature-item">
-        <h3>Tabs</h3>
-        <p>Open files in individual windows or use tabs to use a single window.</p>
-    </div>
-    <img src="img/tabs.png">
+  <div class="feature-item">
+    <h3>Tabs</h3>
+    <p>Open files in individual windows or use tabs to use a single window.</p>
+  </div>
+  <img src="img/screenshots/tabs.png" alt="Screenshot Tabs" loading="lazy" />
 </div>
 <div class="feature">
-    <div class="feature-item">
-        <h3>Autosave</h3>
-        <p>Your files will get saved constantly. Lost something and cannot recover it from an entries history? Browse versions
-            to find what you're looking for!</p>
-    </div>
-    <img src="img/versions.png">
+  <div class="feature-item">
+    <h3>Autosave</h3>
+    <p>
+      Your files will get saved constantly. Lost something and cannot recover it
+      from an entries history? Browse versions to find what you're looking for!
+    </p>
+  </div>
+  <img
+    src="img/screenshots/versions.png"
+    alt="Screenshot Versions"
+    loading="lazy"
+  />
 </div>
 <div class="feature">
-    <div class="feature-item">
-        <h3>Undo/Redo</h3>
-        <p>MacPass supports Undo/Redo for everything you do with your data. Something went wrong and you want to revert
-            it, just undo your changes an you're good to go!</p>
-    </div>
-    <img src="img/edit_menu.png">
+  <div class="feature-item">
+    <h3>Undo/Redo</h3>
+    <p>
+      MacPass supports Undo/Redo for everything you do with your data. Something
+      went wrong and you want to revert it, just undo your changes an you're
+      good to go!
+    </p>
+  </div>
+  <img
+    src="img/screenshots/edit_menu.png"
+    alt="Screenshot of the Edit Menu"
+    loading="lazy"
+  />
 </div>
 <div class="feature">
-    <div class="feature-item">
-        <h3>Drag &amp; Drop</h3>
-        <p>Move or copy entries and groups inside a database or between two files. Add file attachments by dropping them
-            onto entries. You even can add entries by dragging URLs onto the database.
-    </div>
-    <img src="img/drag_and_drop.png">
+  <div class="feature-item">
+    <h3>Drag &amp; Drop</h3>
+    <p>
+      Move or copy entries and groups inside a database or between two files.
+      Add file attachments by dropping them onto entries. You even can add
+      entries by dragging URLs onto the database.
+    </p>
+  </div>
+
+  <img
+    src="img/screenshots/drag_and_drop.png"
+    alt="Screenshot of the file drag & drop"
+    loading="lazy"
+  />
 </div>
 <div class="feature">
-    <div class="feature-item">
-        <h3>Quicklook</h3>
-        <p>Enable previews to leverage the QuickLook system for previews of a variety of file types to take a look at your
-            file attachments.
-    </div>
-    <img src="img/quicklook_text.png">
+  <div class="feature-item">
+    <h3>Quicklook</h3>
+    <p>
+      Enable previews to leverage the QuickLook system for previews of a variety
+      of file types to take a look at your file attachments.
+    </p>
+  </div>
+
+  <img
+    src="img/screenshots/quicklook_text.png"
+    alt="Screenshot of the file preview feature"
+    loading="lazy"
+  />
 </div>
 <hr id="other-features" />
 <h2>But there's more…</h2>
 <div class="feature">
-    <div class="feature-item">
-        <h3>Autotype</h3>
-        <p>Autotype enables MacPass to supply authentication credentials for any text based input. From webforms to authentication
-            dialogs in any application. With Global Autotype you even can invoke Autotype from anywhere with a system
-            wide shortcut. For more information please refer to the
-            <a href="https://github.com/mstarke/MacPass/wiki">documentation</a>.
-        </p>
-    </div>
-    <img src="img/autotype.png">
+  <div class="feature-item">
+    <h3>Autotype</h3>
+    <p>
+      Autotype enables MacPass to supply authentication credentials for any text
+      based input. From webforms to authentication dialogs in any application.
+      With Global Autotype you even can invoke Autotype from anywhere with a
+      system wide shortcut. For more information please refer to the
+      <a href="https://github.com/mstarke/MacPass/wiki">documentation</a>.
+    </p>
+  </div>
+  <img
+    src="img/screenshots/autotype.png"
+    alt="Screenshot Autotype"
+    loading="lazy"
+  />
 </div>
 <div class="feature">
-    <div class="feature-item">
-        <h3>Full KDB and KDBX Support</h3>
-        <p>MacPass can read and write KDB Legacy files as well as the latest KDBX Format. You can even convert KDB to KDBX
-            and the other way around.</p>
-    </div>
-    <img src="img/kdb_kdbx.png">
+  <div class="feature-item">
+    <h3>Full KDB and KDBX Support</h3>
+    <p>
+      MacPass can read and write KDB Legacy files as well as the latest KDBX
+      Format. You can even convert KDB to KDBX and the other way around.
+    </p>
+  </div>
+  <img
+    src="img/screenshots/kdb_kdbx.png"
+    alt="Screenshot of KDB and KDBX"
+    loading="lazy"
+  />
 </div>
 <div class="feature">
-    <div class="feature-item">
-        <h3>Custom Icons</h3>
-        <p>Change the way your entries and groups look by choosing from the many icons. If you like a bit of color, let
-            MacPass generate icons based on websites for you!</p>
-    </div>
-    <img src="img/icon_selection.png">
+  <div class="feature-item">
+    <h3>Custom Icons</h3>
+    <p>
+      Change the way your entries and groups look by choosing from the many
+      icons. If you like a bit of color, let MacPass generate icons based on
+      websites for you!
+    </p>
+  </div>
+  <img
+    src="img/screenshots/icon_selection.png"
+    alt="Screenshot of the custom icons"
+    loading="lazy"
+  />
 </div>
 <div class="feature">
-    <div class="feature-item">
-        <h3>Password Generator</h3>
-        <p>Generate passwords using the built-in generator. Adjust the method to comply with any restriction you might encounter.</p>
-    </div>
-    <img src="img/password_generator.png">
+  <div class="feature-item">
+    <h3>Password Generator</h3>
+    <p>
+      Generate passwords using the built-in generator. Adjust the method to
+      comply with any restriction you might encounter.
+    </p>
+  </div>
+  <img
+    src="img/screenshots/password_generator.png"
+    alt="Screenshot of the passwort generator feature"
+    loading="lazy"
+  />
 </div>
 <div class="feature">
-    <div class="feature-item">
-        <h3>Expiration Dates</h3>
-        <p>Set a date, when passwords expire. MacPass will mark them with a special icon so you'll spot them easily. You
-            can even search for expired ones!</p>
-    </div>
-    <img src="img/date_picker.png">
+  <div class="feature-item">
+    <h3>Expiration Dates</h3>
+    <p>
+      Set a date, when passwords expire. MacPass will mark them with a special
+      icon so you'll spot them easily. You can even search for expired ones!
+    </p>
+  </div>
+  <img
+    src="img/screenshots/date_picker.png"
+    alt="Screenshot of the date picker"
+    loading="lazy"
+  />
 </div>
 <div class="feature">
-    <div class="feature-item">
-        <h3>Synchronization</h3>
-        <p>Changes made to your database outside of MacPass can be merged. No data is lost and all files are synchronized!
-            You even can merge arbitrary files into one single database.
-            MacPass is able to merge even KDB files, although the format is not designed for synchronisation.</p>
-    </div>
-    <img src="img/merge_options.png">
+  <div class="feature-item">
+    <h3>Synchronization</h3>
+    <p>
+      Changes made to your database outside of MacPass can be merged. No data is
+      lost and all files are synchronized! You even can merge arbitrary files
+      into one single database. MacPass is able to merge even KDB files,
+      although the format is not designed for synchronisation.
+    </p>
+  </div>
+  <img
+    src="img/screenshots/merge_options.png"
+    alt="Screenshot of the merge options"
+    loading="lazy"
+  />
 </div>
 <div class="feature">
-    <div class="feature-item">
-        <h3>History</h3>
-        <p>If enabled, your changes to entries will get stored inside the database. Just restore an old state or take a
-            look at what changed over time.</p>
-    </div>
-    <img src="img/history.png">
+  <div class="feature-item">
+    <h3>History</h3>
+    <p>
+      If enabled, your changes to entries will get stored inside the database.
+      Just restore an old state or take a look at what changed over time.
+    </p>
+  </div>
+  <img
+    src="img/screenshots/history.png"
+    alt="Screenshot of an example history"
+    loading="lazy"
+  />
 </div>
 <div class="feature">
-    <div class="feature-item">
-        <h3>Auto update</h3>
-        <p>MacPass incorporates
-            <a href="https://sparkle-project.org">Sparkle</a> to support auto updates. You're always up to date!</p>
-    </div>
-    <img src="img/auto_update.png">
+  <div class="feature-item">
+    <h3>Auto update</h3>
+    <p>
+      MacPass incorporates <a href="https://sparkle-project.org">Sparkle</a> to
+      support auto updates. You're always up to date!
+    </p>
+  </div>
+  <img
+    src="img/screenshots/auto_update.png"
+    alt="Screenshot of the auto update setting"
+    loading="lazy"
+  />
 </div>
 <div class="feature">
-    <div class="feature-item">
-        <h3>Plugins</h3>
-        <p>Since there's no one-size-fits-all, MacPass allows for Plugins to alter and extend its feauture set.
-            Head over to the <a href="/plugins">Plugin respository</a> and start customizing.</p>
-    </div>
-    <img src="img/plugins.png">
+  <div class="feature-item">
+    <h3>Plugins</h3>
+    <p>
+      Since there's no one-size-fits-all, MacPass allows for Plugins to alter
+      and extend its feauture set. Head over to the
+      <a href="/plugins">Plugin respository</a> and start customizing.
+    </p>
+  </div>
+  <img
+    src="img/screenshots/plugins.png"
+    alt="Screenshot of the plugins section"
+    loading="lazy"
+  />
 </div>
 <div class="feature">
-    <div class="feature-item">
-        <h3>Open-source</h3>
-        <p>MacPass is free, open source software licensed under the
-            <a href="https://www.gnu.org/licenses/gpl-3.0.en.html">GPLv3</a>. It's build using other open source software like
-            <a href="https://github.com/mattt/TransformerKit">TransformerKit</a>,
-            <a href="https://github.com/MacPass/KeePassKit">KeePassKit</a>,
-            <a href="https://github.com/robbiehanson/KissXML">KissXML</a>,
-            <a href="https://sparkle-project.org">Sparkle</a> and a lot more. The source code is available on
-            <a href="https://github.com/MacPass/MacPass">GitHub</a>.</p>
-    </div>
-    <img src="img/source_code.png">
+  <div class="feature-item">
+    <h3>Open-source</h3>
+    <p>
+      MacPass is free, open source software licensed under the
+      <a href="https://www.gnu.org/licenses/gpl-3.0.en.html">GPLv3</a>. It's
+      build using other open source software like
+      <a href="https://github.com/mattt/TransformerKit">TransformerKit</a>,
+      <a href="https://github.com/MacPass/KeePassKit">KeePassKit</a>,
+      <a href="https://github.com/robbiehanson/KissXML">KissXML</a>,
+      <a href="https://sparkle-project.org">Sparkle</a> and a lot more. The
+      source code is available on
+      <a href="https://github.com/MacPass/MacPass">GitHub</a>.
+    </p>
+  </div>
+  <img src="img/source_code.png" />
 </div>