diff --git a/back_photo.jpg b/back_photo.jpg new file mode 100644 index 0000000..762a103 Binary files /dev/null and b/back_photo.jpg differ diff --git a/index.html b/index.html index d548f6c..fc22da3 100644 --- a/index.html +++ b/index.html @@ -1,99 +1,82 @@ - - + - - + + + + + Always On Top - - -

Always on Top application

- -
- You have to download native Always On Top application before using browser extension (new extensions policy),
- please download the file from github repository and run AOT.exe to install the app
- After the installation do not remove or move AOT.exe or aot_manifest.json it has created!!

- You don't need to worry about the application: -
    -
  1. You might check it with whatever antivirus you have
    2. -
  2. Even the size of the file is so small you can't possibly put anything bad inside
    3. -
  3. And finally, you can build the app from scratch using its source code
    4. -
-
- - -



-

Always on Top extension

-
- Firefox
-
- -
-
- If you want to set Always on Top style for ANY window in your system, contact me -
- -
-

I aim to bring way more information and features to you and your donations are going to help me get there
- Please contact me if you want to donate in any way

-
- - - - + +
+
+
+
+
+

Always on Top application

+

+ It is not possible to use Always On Top extension without native + application because of new extensions policy. Please download + Always On Top application from
+ + github repository
+ and run AOT.exe to install the app +
+ After the installation do not remove or move AOT.exe or + aot_manifest.json it has created!! +

+
+
+

+ You shouldn't worry about the application:

+ You might check it with whatever antivirus you have
Even the + size of the file is so small you can't possibly put anything bad + inside
And finally, you can build the app from scratch using + its + source code +

+
+
+
+
+

Always on Top extension

+

+ Firefox


+ If you want to set Always on Top style for ANY window in your + system, + contact me +

+
+
+
+
+

+ I aim to bring way more information and features to you and your + donations are going to help me get there
Please + contact me + if you want to donate in any way +

+
+
+
+ diff --git a/main.css b/main.css new file mode 100644 index 0000000..5dfa84c --- /dev/null +++ b/main.css @@ -0,0 +1,136 @@ +* { + margin: 0; + padding: 0; + font-family: "Fira Sans", sans-serif; +} + +h1 { + text-transform: uppercase; + padding-bottom: 1rem; + font-weight: 700; +} + +p { + font-size: 15px; + line-height: 19px; +} + +a { + color: #6495ed; + text-decoration: none; +} + +.left-section { + grid-area: left-section; +} +.right-section { + grid-area: right-section; +} +.footer-section { + grid-area: footer-section; +} + +.inner-container { + /* Photo by Martin Adams on Unsplash */ + background: url(back_photo.jpg) no-repeat center center/cover; + height: 100vh; + width: 100vw; + display: flex; + justify-content: center; +} + +.section-container { + display: grid; + grid-template-areas: + "left-section right-section" + "footer-section footer-section"; + width: 70%; +} + +/* Application & Extention general style */ +section { + text-align: center; + margin: 3rem 2rem; + border-radius: 5px; +} + +/* Application & Extension Container */ +.left-section, +.right-section { + display: grid; + grid-template-rows: repeat(2, 1fr); + height: 30rem; +} + +.left-section { + background-color: #fff; +} + +.right-section { + /* Photo by Jess Bailey on Unsplash */ + background: url(pin.jpg) no-repeat center center/cover; +} + +.left-section > .app { + padding: 1rem; + color: #000; + position: relative; + transition: all 1s; + z-index: 5; +} + +.left-section > .app > .helper { + background-image: linear-gradient( + -125deg, + #5271c4 0%, + #b19fff 48%, + #eca1fe 100% + ); + position: absolute; + z-index: -1; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + opacity: 1; + transition: all 1s; + border-radius: 5px 5px 0 0; +} + +.left-section > .info { + background: #fff; + padding: 1rem; + display: flex; + align-items: center; + justify-content: center; + color: #000; + border-radius: 0 0 5px 5px; +} + +.left-section:hover > .app > .helper { + opacity: 0; +} + +.right-section:hover > .extension { + background-color: inherit; + color: #000; +} + +/* Extension */ +.right-section > .extension { + padding: 1rem; + color: #5271c4; + border-radius: 5px 5px 0 0; + transition: all 1s; +} + +.right-section > .pin { + border-radius: 0 0 5px 5px; +} + +/* Footer */ +.footer-section { + text-align: center; +} diff --git a/pin.jpg b/pin.jpg new file mode 100644 index 0000000..324af47 Binary files /dev/null and b/pin.jpg differ