Added on hover ease for buttons and tiles

MagicLike · MagicLike · commit fa13a1033f7d · 2023-09-21T17:38:02.000+02:00
diff --git a/public/static/custom.css b/public/static/custom.css
@@ -10,6 +10,14 @@ html {
   border-radius: 4px;
 }
 
+.hover-transition {
+  transition: ease-in 250ms;
+}
+
+.hover-transition:hover {
+  transition: ease-in 250ms;
+}
+
 #pf-funding-logos {
   width: 333px;
 }
diff --git a/templates/base.html b/templates/base.html
@@ -63,34 +63,34 @@
           <a class="navbar-item" href="https://openandroidinstaller.org">
             <img class="image" src="static/oai-logo.jpg" alt="OpenAndroidInstaller Logo" width="30" height="30">
           </a>
-          <a class="navbar-burger round" role="button" aria-label="menu" aria-expanded="false" data-target="navMenu">
+          <a class="navbar-burger round hover-transition" role="button" aria-label="menu" aria-expanded="false" data-target="navMenu">
             <span aria-hidden="true"></span>
             <span aria-hidden="true"></span>
             <span aria-hidden="true"></span>
           </a>
         </div>
         <div class="navbar-menu round" id="navMenu">
           <div class="navbar-end">
-            <a class="navbar-item round" href="https://openandroidinstaller.org#getting-started">
+            <a class="navbar-item round hover-transition" href="https://openandroidinstaller.org#getting-started">
               <span class="icon"><i class="fa fa-play"></i></span><span>Getting started</span>
             </a>
-            <a class="navbar-item round" href="https://openandroidinstaller.org/supported-devices.html">
+            <a class="navbar-item round hover-transition" href="https://openandroidinstaller.org/supported-devices.html">
               <span class="icon"><i class="fa fa-mobile"></i></span><span>Supported Devices</span>
             </a>
-            <a class="navbar-item round" href="https://openandroidinstaller.org/download.html">
+            <a class="navbar-item round hover-transition" href="https://openandroidinstaller.org/download.html">
               <span class="icon"><i class="fa fa-download"></i></span><span>Download</span>
             </a>
-            <a class="navbar-item round" href="https://openandroidinstaller.org/#contribute">
+            <a class="navbar-item round hover-transition" href="https://openandroidinstaller.org/#contribute">
               <span class="icon"><i class="fa fa-heart"></i></span><span>Contribute</span>
             </a>
-            <a class="navbar-item round" href="https://openandroidinstaller.org/faq.html">
+            <a class="navbar-item round hover-transition" href="https://openandroidinstaller.org/faq.html">
               <span class="icon"><i class="fa fa-question"></i></span><span>FAQ</span>
             </a>
-            <a class="navbar-item round" href="https://github.com/openandroidinstaller-dev/openandroidinstaller"
+            <a class="navbar-item round hover-transition" href="https://github.com/openandroidinstaller-dev/openandroidinstaller"
               rel="noopener" target="_blank">
               <span class="icon"><i class="fab fa-github"></i></span><span>GitHub</span>
             </a>
-            <a class="navbar-item round" href="mailto:hello@openandroidinstaller.org">
+            <a class="navbar-item round hover-transition" href="mailto:hello@openandroidinstaller.org">
               <span class="icon"><i class="fa fa-envelope"></i></span><span>Get Help</span>
             </a>
           </div>
@@ -122,18 +122,18 @@
           </div>
           <div>
             <ul class="is-flex is-flex-wrap-wrap is-align-items-center is-justify-content-center">
-              <li class="mr-4"><a class="button is-white"
+              <li class="mr-4"><a class="button is-white hover-transition"
                   href="https://github.com/openandroidinstaller-dev/openandroidinstaller-dev.github.io/files/10787205/press-kit-openandroidinstaller.zip"
                   rel="noopener" target="_blank">Download press kit</a></li>
-              <li class="mr-4"><a class="button is-white"
+              <li class="mr-4"><a class="button is-white hover-transition"
                   href="https://github.com/openandroidinstaller-dev/openandroidinstaller#acknowledgements"
                   rel="noopener" target="_blank">Funding</a></li>
-              <li class="mr-4"><a class="button is-white"
+              <li class="mr-4"><a class="button is-white hover-transition"
                   href="https://github.com/openandroidinstaller-dev/openandroidinstaller/blob/main/LICENSE"
                   rel="noopener" target="_blank">License</a></li>
-              <li class="mr-4"><a class="button is-white"
+              <li class="mr-4"><a class="button is-white hover-transition"
                   href="https://openandroidinstaller.org/imprint.html">Impressum</a></li>
-              <li class="mr-4"><a class="button is-white" href="https://openandroidinstaller.org/privacy.html">Privacy
+              <li class="mr-4"><a class="button is-white hover-transition" href="https://openandroidinstaller.org/privacy.html">Privacy
                   Statement</a></li>
             </ul>
           </div>
@@ -146,14 +146,14 @@
             Tobias Sterbak. All rights reserved © OpenAndroidInstaller 2022-2023</p>
           <div class="py-2 is-hidden-tablet"></div>
           <div class="ml-auto">
-            <a class="mr-4 is-inline-block" href="https://github.com/openandroidinstaller-dev/openandroidinstaller"
+            <a class="mr-4 is-inline-block hover-transition" href="https://github.com/openandroidinstaller-dev/openandroidinstaller"
               rel="noopener" target="_blank">
               <span class="icon"><i class="fab fa-github"></i></span><span>GitHub</span>
             </a>
-            <a class="mr-4 is-inline-block" href="https://twitter.com/OAInstaller" rel="noopener" target="_blank">
+            <a class="mr-4 is-inline-block hover-transition" href="https://twitter.com/OAInstaller" rel="noopener" target="_blank">
               <span class="icon"><i class="fab fa-twitter"></i></span><span>Twitter</span>
             </a>
-            <a class="mr-4 is-inline-block" href="https://fosstodon.org/@openandroidinstaller" rel="me noopener"
+            <a class="mr-4 is-inline-block hover-transition" href="https://fosstodon.org/@openandroidinstaller" rel="me noopener"
               target="_blank">
               <span class="icon"><i class="fab fa-mastodon"></i></span><span>Mastodon</span>
             </a>
diff --git a/templates/download.html b/templates/download.html
@@ -34,7 +34,7 @@ <h2 class="subtitle">The OpenAndroidInstaller is available for download for diff
     </article>
     <div class="tile is-ancestor">
       <div class="tile is-6 is-vertical is-parent">
-        <a class="tile is-child box is-clickable" rel="noopener" target="_blank"
+        <a class="tile is-child box is-clickable hover-transition" rel="noopener" target="_blank"
           href="https://flathub.org/apps/org.openandroidinstaller.OpenAndroidInstaller">
           <div class="icon-text title">
             <span class="icon is-medium">
@@ -44,7 +44,7 @@ <h2 class="subtitle">The OpenAndroidInstaller is available for download for diff
           </div>
           <p>Get it from Flathub and install it easily on any Linux distribution.</p>
         </a>
-        <a class="tile is-child box is-clickable" rel="noopener" target="_blank"
+        <a class="tile is-child box is-clickable hover-transition" rel="noopener" target="_blank"
           href="https://github.com/openandroidinstaller-dev/openandroidinstaller/releases/download/{{ version }}/openandroidinstaller-{{ version }}-ubuntu-latest.zip">
           <div class="icon-text title">
             <span class="icon is-medium">
@@ -55,7 +55,7 @@ <h2 class="subtitle">The OpenAndroidInstaller is available for download for diff
           <p>Built on Ubuntu 22.04.</p>
           <p>Click to download the zipped executable. You may need to give it execution permissions.</p>
         </a>
-        <a class="tile is-child box is-clickable" rel="noopener" target="_blank"
+        <a class="tile is-child box is-clickable hover-transition" rel="noopener" target="_blank"
           href="https://github.com/openandroidinstaller-dev/openandroidinstaller/releases/download/{{ version }}/openandroidinstaller-{{ version }}-ubuntu-20.04.zip">
           <div class="icon-text title">
             <span class="icon is-medium">
@@ -68,7 +68,7 @@ <h2 class="subtitle">The OpenAndroidInstaller is available for download for diff
         </a>
       </div>
       <div class="tile is-vertical is-parent">
-        <a class="tile is-child box" rel="noopener" target="_blank"
+        <a class="tile is-child box is-clickable hover-transition" rel="noopener" target="_blank"
           href="https://github.com/openandroidinstaller-dev/openandroidinstaller/releases/download/{{ version }}/openandroidinstaller-{{ version }}-windows-latest.zip">
           <div class="icon-text title">
             <span class="icon is-medium">
@@ -78,7 +78,7 @@ <h2 class="subtitle">The OpenAndroidInstaller is available for download for diff
           </div>
           <p>Click to download the zipped .exe.</p>
         </a>
-        <a class="tile is-child box is-clickable" rel="noopener" target="_blank"
+        <a class="tile is-child box is-clickable hover-transition" rel="noopener" target="_blank"
           href="https://github.com/openandroidinstaller-dev/openandroidinstaller/releases/download/{{ version }}/openandroidinstaller-{{ version }}-macos-latest.zip">
           <div class="icon-text title">
             <span class="icon is-medium">
@@ -88,7 +88,7 @@ <h2 class="subtitle">The OpenAndroidInstaller is available for download for diff
           </div>
           <p>Click to download the zipped executable. You may need to give it execution permissions.</p>
         </a>
-        <a class="tile is-child box is-clickable" rel="noopener" target="_blank"
+        <a class="tile is-child box is-clickable hover-transition" rel="noopener" target="_blank"
           href="https://github.com/openandroidinstaller-dev/openandroidinstaller/releases">
           <div class="icon-text title">
             <span class="icon is-medium">
@@ -114,7 +114,7 @@ <h2 class="has-text-white mt-2 mb-3 is-size-1 is-size-3-mobile has-text-weight-b
       </div>
       <div class="column is-5 ml-auto">
         <div class="mx-auto box p-6 has-background-light has-text-centered">
-          <a class="button is-link is-fullwidth" id="contribute-button"
+          <a class="button is-link is-fullwidth hover-transition" id="contribute-button"
             href="mailto:help@openandroidinstaller.org">Write an e-mail</a>
         </div>
       </div>
diff --git a/templates/faq.html b/templates/faq.html
@@ -197,7 +197,7 @@ <h2 class="has-text-white mt-2 mb-3 is-size-1 is-size-3-mobile has-text-weight-b
       </div>
       <div class="column is-5 ml-auto">
         <div class="mx-auto box p-6 has-background-light has-text-centered">
-          <a class="button is-link is-fullwidth" id="contribute-button"
+          <a class="button is-link is-fullwidth hover-transition" id="contribute-button"
             href="mailto:help@openandroidinstaller.org">Write an e-mail</a>
         </div>
       </div>
diff --git a/templates/feedback.html b/templates/feedback.html
@@ -58,7 +58,7 @@ <h2 class="subtitle">Give feedback to the project and how it worked for you. At
 
           <div class="field is-grouped">
             <div class="control">
-              <button type="submit" class="button is-link">Submit</button>
+              <button type="submit" class="button is-link hover-transition">Submit</button>
             </div>
           </div>
       </form>
@@ -86,7 +86,7 @@ <h2 class="has-text-white mt-2 mb-3 is-size-1 is-size-3-mobile has-text-weight-b
       </div>
       <div class="column is-5 ml-auto">
         <div class="mx-auto box p-6 has-background-light has-text-centered">
-          <a class="button is-link is-fullwidth" id="contribute-button"
+          <a class="button is-link is-fullwidth hover-transition" id="contribute-button"
             href="https://openandroidinstaller.org/#contribute">How to contribute?</a>
         </div>
       </div>
diff --git a/templates/imprint.html b/templates/imprint.html
@@ -74,7 +74,7 @@ <h2 class="has-text-white mt-2 mb-3 is-size-1 is-size-3-mobile has-text-weight-b
       </div>
       <div class="column is-5 ml-auto">
         <div class="mx-auto box p-6 has-background-light has-text-centered">
-          <a class="button is-link is-fullwidth" id="contribute-button"
+          <a class="button is-link is-fullwidth hover-transition" id="contribute-button"
             href="mailto:help@openandroidinstaller.org">Write an e-mail</a>
         </div>
       </div>
diff --git a/templates/index.html b/templates/index.html
@@ -11,13 +11,13 @@ <h1 class="mb-4 is-size-1 is-size-3-mobile has-text-weight-bold">OpenAndroidInst
       <h2 class="subtitle">The graphical installer that makes installing alternative Android distributions nice and
         easy.</h2>
       <div class="buttons is-centered">
-        <a class="control button is-link" href="https://openandroidinstaller.org/download.html" id="download-header">
+        <a class="control button is-link hover-transition" href="https://openandroidinstaller.org/download.html" id="download-header">
           <span class="icon is-small">
             <i class="fas fa-download"></i>
           </span>
           <span>Download</span>
         </a>
-        <a class="control button is-light" href="#getting-started" id="getting-started-button">Getting
+        <a class="control button is-light hover-transition" href="#getting-started" id="getting-started-button">Getting
           started</a>
       </div>
     </div>
@@ -129,7 +129,7 @@ <h2 class="has-text-white mt-2 mb-3 is-size-1 is-size-3-mobile has-text-weight-b
         <div class="mx-auto box p-6 has-background-light has-text-centered">
           <h4 class="is-size-5 mb-2 has-text-weight-bold">Free your Android device with a custom ROM!</h4>
           <p class="has-text-grey-dark mb-4">Works on Windows, MacOS and Linux.</p>
-          <a class="button is-link is-fullwidth" href="https://openandroidinstaller.org/download.html"
+          <a class="button is-link is-fullwidth hover-transition" href="https://openandroidinstaller.org/download.html"
             id="download-banner">
             <span class="icon is-small">
               <i class="fas fa-download"></i>
diff --git a/templates/privacy.html b/templates/privacy.html
@@ -160,7 +160,7 @@ <h2 class="has-text-white mt-2 mb-3 is-size-1 is-size-3-mobile has-text-weight-b
       </div>
       <div class="column is-5 ml-auto">
         <div class="mx-auto box p-6 has-background-light has-text-centered">
-          <a class="button is-link is-fullwidth" id="contribute-button"
+          <a class="button is-link is-fullwidth hover-transition" id="contribute-button"
             href="mailto:help@openandroidinstaller.org">Write an e-mail</a>
         </div>
       </div>
diff --git a/templates/supported-devices.html b/templates/supported-devices.html
@@ -627,7 +627,7 @@ <h2 class="has-text-white mt-2 mb-3 is-size-1 is-size-3-mobile has-text-weight-b
       </div>
       <div class="column is-5 ml-auto">
         <div class="mx-auto box p-6 has-background-light has-text-centered">
-          <a class="button is-link is-fullwidth" id="contribute-button"
+          <a class="button is-link is-fullwidth hover-transition" id="contribute-button"
             href="https://openandroidinstaller.org/#contribute">How to contribute?</a>
         </div>
       </div>

Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,14 @@ html {`
`10`	`10`	`border-radius: 4px;`
`11`	`11`	`}`
`12`	`12`
	`13`	`+.hover-transition {`
	`14`	`+ transition: ease-in 250ms;`
	`15`	`+}`
	`16`	`+`
	`17`	`+.hover-transition:hover {`
	`18`	`+ transition: ease-in 250ms;`
	`19`	`+}`
	`20`	`+`
`13`	`21`	`#pf-funding-logos {`
`14`	`22`	`width: 333px;`
`15`	`23`	`}`