diff --git a/README.md b/README.md index b4b549e..518b97b 100644 --- a/README.md +++ b/README.md @@ -1,54 +1,67 @@
- Save Tabs + Save Tabs

Save Tabs

-## About +[![Chrome Web Store](https://img.shields.io/chrome-web-store/v/ljokfgphjbhjheflldgfmjligcmcmhmn.svg?style=plastic)](https://chrome.google.com/webstore/detail/detail/save-tabs/ljokfgphjbhjheflldgfmjligcmcmhmn) [![Firefox Add-ons](https://img.shields.io/amo/v/save-tabs.svg?style=plastic)](https://addons.mozilla.org/firefox/addon/save-tabs/) + + +## 💡 About Save Tab is a browser extension that helps to exports and imports tabs currently opened in the browser window. -## Browsers Supported -Save Tab currently supports Chrome, Firefox. +### For whom? +One who open lots and lots of tabs in a single browser and want to revisit the same sets of tabs after a while. + + +## 🎯 Features -![Firefox](assets/firefox.png "Firefox") -![Chrome](assets/chrome.png "Chrome") +◻️ **Easy Export and Import of Tabs** -## For whom? +◻️ **Export tabs with Custom Name** -* One who open lots and lots of tabs in a single browser and want to revisit the same sets of tabs after a while. +◻️ **Cross Browser Support** _(as of now Chrome and Firefox)_ -## Features +◻️ **Logs Section** -1. **Cross Browser Support** +◻️ **Export and Import of Grouped Tabs** _(Chrome only)_ -2. **Easy Export and Import of Tabs** -3. **Export tabs with custom name** +## 🌐 Browsers Supported -4. **Logs Section** +Chrome Firefox -5. **Export and Import of Grouped Tabs** *(Chrome only)* -## How to set up this extension? +## ⚙️ Install + +### From Web Store + Get it on Chrome Webstore + + Get it on Chrome Webstore ### From Repository 1. Clone this repository by executing following command in cmd/terminal + ``` git clone https://github.com/Karna98/Save-Tabs.git ``` + OR Download zip from [here](https://github.com/Karna98/Save-Tabs/archive/refs/heads/main.zip). 2. Once successfully cloned or extracted, open **Save-Tabs** folder. - * **Using `setup.sh`**. + + - **Using `setup.sh`**. + 1. Open a terminal in Ubuntu or Git Bash within Sa and execute ``` ./setup.sh ``` - + 2. On successful execution, new folder 'firefox' and 'chrome' with the following structure will be created ``` - Save-Tabs @@ -69,88 +82,67 @@ Save Tab currently supports Chrome, Firefox. - icons - saveTab-chrome.css ``` - 3. Then proceed with **Run Extension** (below) based on the browser. - * **Manual setup** - - *Firefox* - 1. Create new folder named **firefox** in **Save-Tabs**. - - 2. Copy following folder and files to newly created folder - - *manifest-firefox.json* - - *saveTab.html* - - *saveTab.css* - - *saveTab.js* - - *background.js* - - *icons* (folder) - - 3. Rename ***firefox/manifest-firefox.json*** to ***firefox/manifest.json***. - - 4. Then proceed with **Run Extension** (below) for Firefox. - - - *Chrome* - 1. Create new folder named **chrome** in **Save-Tabs**. - - 2. Copy following folder and files to newly created folder - - *manifest-chrome.json* - - *saveTab.html* - - *saveTab.css* - - *saveTab.js* - - *background.js* - - *icons* (folder) - - *saveTab-chrome.css* - - 3. Rename ***chrome/manifest-chrome.json*** to ***chrome/manifest.json***. - - 4. Open ***saveTab.html***, update + **Note** (For Chrome only): + * Open **_chrome/saveTab.html_**, update + ``` ``` - to + to ``` ``` Save the updated file. - - 5. Then proceed with **Run Extension** (below) for Chrome. - - **Run Extension** - - *Firefox* - 1. Open *Firefox* browser and visit ***about:debugging#/runtime/this-firefox***. - + 3. Then proceed with **Run Extension** (below) based on the browser. + + * **Run Extension** + + - _Firefox_ + + 1. Open _Firefox_ browser and visit **_about:debugging#/runtime/this-firefox_**. + 2. Under **Temporary Extensions**, click on **Load Temporary Add-on..**. - File Explorer opens, navigate to ***Save-Tabs/firefox*** folder and select ***manifest.json***. - + File Explorer opens, navigate to **_Save-Tabs/firefox_** folder and select **_manifest.json_**. + 3. On successfully loading, **Save Tabs** extension will be listed under **Temporary Extensions**. 4. Also, the user can use the extension by clicking on the **Save Tabs** extension icon listed on browser toolbar. - - - *Chrome* - 1. Open *Chrome* browser and visit ***chrome://extensions/***. - + + - _Chrome_ + + 1. Open _Chrome_ browser and visit **_chrome://extensions/_**. + 2. Click on **Load Unpacked**. - File Explorer opens, navigate to ***Save-Tabs/chrome*** folder and select ***manifest.json***. - + File Explorer opens, navigate to **_Save-Tabs/chrome_** folder and select **_manifest.json_**. + 3. On successfully loading, **Save Tabs** extension will be listed. - + 4. User can use the extension by clicking on the **Save Tabs** extension icon listed on browser toolbar. - Refer [*Manage your Extension*](https://support.google.com/chrome_webstore/answer/2664769?hl=en) to pin extension on the browser toolbar. + Refer [_Manage your Extension_](https://support.google.com/chrome_webstore/answer/2664769?hl=en) to pin extension on the browser toolbar. -## Issues and Suggestions + +## 📝 Issues and Suggestions Please create new [Issue](https://github.com/Karna98/Save-Tabs/issues/new) for : -* To report an issue. -* Proposing new features -* Discussion related to this project. -## Contributing +- To report an issue. +- Proposing new features +- Discussion related to this project. + -Contributions are always WELCOME! +## 💻 Contributing + +Contributions are always WELCOME! Before sending a Pull Request, please make sure that you're assigned the task on a GitHub issue. -- If a relevant issue already exists, discuss the issue and get it assigned to yourself on GitHub. -- If no relevant issue exists, open a new issue and get it assigned to yourself on GitHub. -- Please proceed with a Pull Request only after you're assigned. +- If a relevant issue already exists, discuss the issue and get it assigned to yourself on GitHub. +- If no relevant issue exists, open a new issue and get it assigned to yourself on GitHub. +- Please proceed with a Pull Request only after you're assigned. + + +## ⚠️ License -## License -[MIT License](LICENSE) \ No newline at end of file +[MIT License](LICENSE) diff --git a/assets/B612/B612-Bold.ttf b/assets/B612/B612-Bold.ttf new file mode 100644 index 0000000..651fb88 Binary files /dev/null and b/assets/B612/B612-Bold.ttf differ diff --git a/assets/B612/B612-BoldItalic.ttf b/assets/B612/B612-BoldItalic.ttf new file mode 100644 index 0000000..93a1614 Binary files /dev/null and b/assets/B612/B612-BoldItalic.ttf differ diff --git a/assets/B612/B612-Italic.ttf b/assets/B612/B612-Italic.ttf new file mode 100644 index 0000000..54faebc Binary files /dev/null and b/assets/B612/B612-Italic.ttf differ diff --git a/assets/B612/B612-Regular.ttf b/assets/B612/B612-Regular.ttf new file mode 100644 index 0000000..c2bd6c5 Binary files /dev/null and b/assets/B612/B612-Regular.ttf differ diff --git a/assets/B612/OFL.txt b/assets/B612/OFL.txt new file mode 100644 index 0000000..c4312b0 --- /dev/null +++ b/assets/B612/OFL.txt @@ -0,0 +1,93 @@ +Copyright 2012 The B612 Project Authors (https://github.com/polarsys/b612) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/assets/Preview/Save_Tabs_Export.png b/assets/Preview/Save_Tabs_Export.png new file mode 100644 index 0000000..60d25c7 Binary files /dev/null and b/assets/Preview/Save_Tabs_Export.png differ diff --git a/assets/Preview/Save_Tabs_Import.png b/assets/Preview/Save_Tabs_Import.png new file mode 100644 index 0000000..f014a1a Binary files /dev/null and b/assets/Preview/Save_Tabs_Import.png differ diff --git a/assets/Preview/Save_Tabs_Logs.png b/assets/Preview/Save_Tabs_Logs.png new file mode 100644 index 0000000..ff34195 Binary files /dev/null and b/assets/Preview/Save_Tabs_Logs.png differ diff --git a/assets/chrome_webstore.png b/assets/chrome_webstore.png new file mode 100644 index 0000000..decfc0c Binary files /dev/null and b/assets/chrome_webstore.png differ diff --git a/assets/firefox_addon.png b/assets/firefox_addon.png new file mode 100644 index 0000000..7e3b721 Binary files /dev/null and b/assets/firefox_addon.png differ diff --git a/assets/screenshots/Save_Tabs.PNG b/assets/screenshots/Save_Tabs.PNG new file mode 100644 index 0000000..299d41b Binary files /dev/null and b/assets/screenshots/Save_Tabs.PNG differ diff --git a/assets/screenshots/Save_Tabs_Export-Custom.PNG b/assets/screenshots/Save_Tabs_Export-Custom.PNG new file mode 100644 index 0000000..a8e7954 Binary files /dev/null and b/assets/screenshots/Save_Tabs_Export-Custom.PNG differ diff --git a/assets/screenshots/Save_Tabs_Export.PNG b/assets/screenshots/Save_Tabs_Export.PNG new file mode 100644 index 0000000..6625919 Binary files /dev/null and b/assets/screenshots/Save_Tabs_Export.PNG differ diff --git a/assets/screenshots/Save_Tabs_Import-Grouped.PNG b/assets/screenshots/Save_Tabs_Import-Grouped.PNG new file mode 100644 index 0000000..d280c0e Binary files /dev/null and b/assets/screenshots/Save_Tabs_Import-Grouped.PNG differ diff --git a/assets/screenshots/Save_Tabs_Import.PNG b/assets/screenshots/Save_Tabs_Import.PNG new file mode 100644 index 0000000..2e6de02 Binary files /dev/null and b/assets/screenshots/Save_Tabs_Import.PNG differ diff --git a/assets/screenshots/Save_Tabs_Logs.PNG b/assets/screenshots/Save_Tabs_Logs.PNG new file mode 100644 index 0000000..b4e7168 Binary files /dev/null and b/assets/screenshots/Save_Tabs_Logs.PNG differ diff --git a/background.js b/extension/background.js similarity index 100% rename from background.js rename to extension/background.js diff --git a/icons/Save_Tabs.png b/extension/icons/Save_Tabs.png similarity index 100% rename from icons/Save_Tabs.png rename to extension/icons/Save_Tabs.png diff --git a/icons/Save_Tabs_128.png b/extension/icons/Save_Tabs_128.png similarity index 100% rename from icons/Save_Tabs_128.png rename to extension/icons/Save_Tabs_128.png diff --git a/icons/Save_Tabs_16.png b/extension/icons/Save_Tabs_16.png similarity index 100% rename from icons/Save_Tabs_16.png rename to extension/icons/Save_Tabs_16.png diff --git a/icons/Save_Tabs_32.png b/extension/icons/Save_Tabs_32.png similarity index 100% rename from icons/Save_Tabs_32.png rename to extension/icons/Save_Tabs_32.png diff --git a/icons/Save_Tabs_48.png b/extension/icons/Save_Tabs_48.png similarity index 100% rename from icons/Save_Tabs_48.png rename to extension/icons/Save_Tabs_48.png diff --git a/icons/Save_Tabs_64.png b/extension/icons/Save_Tabs_64.png similarity index 100% rename from icons/Save_Tabs_64.png rename to extension/icons/Save_Tabs_64.png diff --git a/icons/Save_Tabs_96.png b/extension/icons/Save_Tabs_96.png similarity index 100% rename from icons/Save_Tabs_96.png rename to extension/icons/Save_Tabs_96.png diff --git a/manifest-chrome.json b/extension/manifest-chrome.json similarity index 97% rename from manifest-chrome.json rename to extension/manifest-chrome.json index f01aefa..013a06f 100644 --- a/manifest-chrome.json +++ b/extension/manifest-chrome.json @@ -1,7 +1,7 @@ { "manifest_version": 3, "name": "Save Tabs", - "version": "1.0", + "version": "1.0.1", "description": "Export and Import Tabs.", "homepage_url": "https://github.com/karna98/Save-Tabs", diff --git a/manifest-firefox.json b/extension/manifest-firefox.json similarity index 98% rename from manifest-firefox.json rename to extension/manifest-firefox.json index d5f1dc1..0807e6e 100644 --- a/manifest-firefox.json +++ b/extension/manifest-firefox.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "Save Tabs", - "version": "1.0", + "version": "1.0.1", "description": "Export and Import Tabs.", "homepage_url": "https://github.com/karna98/Save-Tabs", diff --git a/saveTab-chrome.css b/extension/saveTab-chrome.css similarity index 99% rename from saveTab-chrome.css rename to extension/saveTab-chrome.css index 158966a..771a94c 100644 --- a/saveTab-chrome.css +++ b/extension/saveTab-chrome.css @@ -27,7 +27,7 @@ body { /* Extension Support Links */ .navbar-content .links { - width: 4rem; + width: 6rem; } .links span svg { diff --git a/saveTab.css b/extension/saveTab.css similarity index 99% rename from saveTab.css rename to extension/saveTab.css index 0b2315f..abf5df1 100644 --- a/saveTab.css +++ b/extension/saveTab.css @@ -124,7 +124,7 @@ body { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; - width: 6rem; + width: 9rem; } .links span { diff --git a/extension/saveTab.html b/extension/saveTab.html new file mode 100644 index 0000000..98a12cb --- /dev/null +++ b/extension/saveTab.html @@ -0,0 +1,272 @@ + + + + + + + Save Tabs + + + + +
+
+
+ Save Tabs Logo + Save Tabs + +
+
+ + + + + + + + + + + + + + + + + +
+
+
+
+
+
+ +
+
+ Export Tabs +
+
+
+
+
+ Exports all the open tabs to + file. +
+ + + + +
+
+
+
+ + +
+ +
+ EXPORT + + + + + + + + + + +
+
+
+
+
+
+ +
+
+ Import Tabs +
+
+
+
+
+ Select file (.json) to import + tabs. +
+ + + + +
+
+
+
+ +
+ + +
+
+
+
+
+ +
+
Logs
+
+ + +
+
+
+
+
+ Display Logs. +
+ + + + +
+
+
+
+ +
+
+
+
+
+
+
+
+
+ Developed by + VEDANT WAKALKAR +
+
+
+ + + diff --git a/saveTab.js b/extension/saveTab.js similarity index 98% rename from saveTab.js rename to extension/saveTab.js index 858b283..be0fc57 100644 --- a/saveTab.js +++ b/extension/saveTab.js @@ -498,6 +498,9 @@ window.addEventListener(`DOMContentLoaded`, () => { case `links-report`: url = `https://github.com/karna98/Save-Tabs#issues-and-suggestions`; break; + case `links-guide`: + url = `https://karna98.github.io/Save-Tabs/#guide`; + break; } browserAPI.tabs @@ -551,6 +554,7 @@ window.addEventListener(`DOMContentLoaded`, () => { // Open link in new tab when clicked. document.getElementById(`links-github`).addEventListener(`click`, () => openURL(`links-github`)); document.getElementById(`links-report`).addEventListener(`click`, () => openURL(`links-report`)); + document.getElementById(`links-guide`).addEventListener(`click`, () => openURL(`links-guide`)); }; init(); diff --git a/index.html b/index.html new file mode 100644 index 0000000..dfdc882 --- /dev/null +++ b/index.html @@ -0,0 +1,416 @@ + + + + + + + + Save Tabs + + + + + + +
+ +
+ +
+
+
+
+ + +
+

Save Tabs

+
+
+ Extension to Export and Import Tabs. +
+
+
+
+

Available On

+
+
+ + Get it on Chrome Webstore + + + Get it on FireFox Add-Ons + +
+
+
+
+
+
+
+

Features

+
+
    +
  • + Easy Export and Import of Tabs with one click. +
    • +
  • Save Exported Tabs with Custom Name.
    • +
  • + Cross Browser Support. (as of now + Chrome and Firefox) +
    • +
  • Logs Section.
    • +
  • + Support for Grouped Tabs (Chrome only). +
    • +
+
+
+
+

Source Code

+
+
+ +
+ View on + + + + + +
+ +
+
+
+
+
+
+

Guide

+
+
+
+
+

Export

+
+
+ Export Guide +
+
+ + * Assuming multiple tabs are open in + browser. + +
+ # Default Export +
+
    +
  1. Open Save Tabs Extension.
    2. +
  2. Click on Export button.
    3. +
  3. Native File Explorer open to save file.
    4. +
  4. Click on Save.
    5. +
+
+ # Custom Name Export +
+
    +
  1. Open Save Tabs Extension.
    2. +
  2. + Enter custom name in + "Enter file name". (Ex. + Research-Project-X) +
    3. +
  3. Click on Export button.
    4. +
  4. Native File Explorer open to save file.
    5. +
  5. Click on Save.
    6. +
+ Tabs will be exported successfully in file. +
+
+
+
+

Import

+
+
+ Import Guide +
+
+ + * Importing file which are exported using + "Save Tabs" Extension. + +
    +
  1. Open Save Tabs Extension.
    2. +
  2. Click on Import button.
    3. +
  3. + Native File Explorer opens. Select the file + to be imported. (Ex. + Research-Project-X.json) +
    4. +
+ Tabs will be imported successfully in + browser. +
+
+
+
+

Logs

+
+
+ Logging Guide +
+
+ + Logs Section lets user know the status of + Export or Import tabs. +
+ # Enable/Disable Logs +
+
    +
  1. Open Save Tabs Extension.
    2. +
  2. + Click on toggle button next to + Logs title. +
    3. +
+
+ If Logs are enabled, user can see the + status of Export or Import. +
+ +
+ + * Logs will be displayed for 10 minutes from + last use. + + +
+
+
+
+
+
+

Gallery

+
+
+
+
+
+
+ Screenshots - 1 +
+
+ Preview of Save Tabs extension +
+
+
+
+
+
+ Screenshots - 2 +
+
+ Exporting tabs +
+
+
+
+
+
+ Screenshots - 3 +
+
+ Custom file name to store exported tabs +
+
+
+
+
+
+ Screenshots - 4 +
+
+ Importing tabs +
+
+
+
+
+
+ Screenshots - 5 +
+
+ Importing Grouped tabs +
+
+
+
+
+
+ Screenshots - 6 +
+
+ Logging Section +
+
+
+
+
+
+
+
+

Privacy

+
+
+
+ NO DATA is COLLECTED or + USED or SHARED . +
+
+
+
+ + + + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..5669ad6 --- /dev/null +++ b/index.js @@ -0,0 +1,26 @@ +`use strict`; + +window.addEventListener(`DOMContentLoaded`, () => { + const hamburger = document.querySelector(".hamburger"); + const navMenu = document.getElementsByTagName("nav")[0].getElementsByTagName("ul")[0]; + const header = document.getElementsByTagName("header")[0]; + const body = document.getElementsByTagName("body")[0]; + + function mobileMenu() { + hamburger.classList.toggle("active"); + navMenu.classList.toggle("active"); + header.classList.toggle("active"); + body.classList.toggle('scroll-lock'); + } + + function closeMenu() { + hamburger.classList.remove("active"); + navMenu.classList.remove("active"); + header.classList.remove("active"); + body.classList.remove('scroll-lock'); + } + + const navLink = document.querySelectorAll(".nav-link"); + navLink.forEach(n => n.addEventListener("click", closeMenu)); + hamburger.addEventListener("click", mobileMenu); +}); \ No newline at end of file diff --git a/saveTab.html b/saveTab.html deleted file mode 100644 index fed4954..0000000 --- a/saveTab.html +++ /dev/null @@ -1,166 +0,0 @@ - - - - - - - Save Tabs - - - - -
-
-
- Save Tabs Logo - Save Tabs - -
-
- - - - - - - - - - - -
-
-
-
-
-
- -
-
Export Tabs
-
-
-
-
- Exports all the open tabs to file. -
- - - - -
-
-
-
- - -
- -
- EXPORT - - - - - - - - - - -
-
-
-
-
-
- -
-
Import Tabs
-
-
-
-
- Select file (.json) to import tabs. -
- - - - -
-
-
-
- -
- - -
-
-
-
-
- -
-
Logs
-
- - -
-
-
-
-
- Display Logs. -
- - - - -
-
-
-
- -
-
-
-
-
-
-
-
-
- Developed by VEDANT WAKALKAR -
-
-
- - - - \ No newline at end of file diff --git a/setup.sh b/setup.sh index 3dfc40a..811a2d8 100644 --- a/setup.sh +++ b/setup.sh @@ -7,9 +7,9 @@ # 6. icons/ # 7. saveTab-chrome.css mkdir chrome -cp background.js saveTab.css saveTab-chrome.css saveTab.js saveTab.html chrome/ -cp -R icons chrome -cp manifest-chrome.json chrome/manifest.json +cp -R extension/{background.js,saveTab.css,saveTab-chrome.css,saveTab.js,saveTab.html} chrome +cp -R extension/icons chrome +cp extension/manifest-chrome.json chrome/manifest.json # Creates firefox folder and copy all required files and folders to it. # 1. manifest.json (manifest-firefox.json) # 2. saveTab.html @@ -18,6 +18,6 @@ cp manifest-chrome.json chrome/manifest.json # 5. background.js # 6. icons/ mkdir firefox -cp background.js saveTab.css saveTab.js saveTab.html firefox/ -cp -R icons firefox -cp manifest-firefox.json firefox/manifest.json \ No newline at end of file +cp -R extension/{background.js,saveTab.css,saveTab.js,saveTab.html} firefox +cp -R extension/icons firefox +cp extension/manifest-firefox.json firefox/manifest.json \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..2afe5b3 --- /dev/null +++ b/style.css @@ -0,0 +1,1127 @@ +html, +body { + margin: 0; + padding: 0; +} + +@font-face { + font-family: B612; + src: url(assets/B612/B612-Regular.ttf); +} + +:root { + --background-color: #f4f9f9; + --color_0: white; + --color_1: black; + --color_A: rgb(255, 0, 0); + --color_A_light_1: rgb(255, 235, 235, 0.05); + --color_A_light_1_1: rgb(255, 235, 235, 0.5); + --color_A_light_2: rgb(255, 118, 118); + --color_B: rgb(0, 128, 0); + --color_B_light_1: rgb(229, 255, 229, 0.05); + --color_B_light_2: rgb(0, 162, 0); + --color_C: rgb(0, 0, 255); + --color_C_light_1: rgb(229, 229, 255, 0.05); + --color_C_light_2: rgb(179, 179, 255); + --color_shadow: rgb(43, 122, 120); + --color_error_interrupted: rgb(204, 0, 0); + --color_success_complete: rgb(0, 128, 0); + --color_ready: rgb(255, 165, 0); +} + +html { + background-color: var(--background-color); + font-family: B612; + scroll-padding-top: 5rem; +} + +* { + scrollbar-width: thin; + scrollbar-color: var(--color_shadow); +} + +body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column; + flex-flow: column; + padding: 0 3rem; +} + +h2, +h3, +h4 { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin: 0; +} + +h2 { + font-size: 4rem; +} + +h3 { + font-size: 2.5rem; +} + +h4 { + font-size: 2rem; +} + +header { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: fixed; + top: 0; + left: 3rem; + width: calc(100% - 6rem); + height: 4rem; + padding: 0.5rem 0; + z-index: 1; + background-color: var(--background-color); +} + +nav, +footer { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0.25rem 0.5rem; + background-color: var(--color_0); + border: 0.1rem solid; + border-color: var(--color_A) var(--color_B) var(--color_C); +} + +nav { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +nav a { + text-decoration: none; +} + +nav .nav-left { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.nav-left .nav-logo { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.nav-logo img { + content: url("extension/icons/Save_Tabs_48.png"); +} + +.nav-logo span { + padding: 0 0.5rem; + font-size: 2rem; + font-weight: 500; + font-variant-caps: petite-caps; +} + +nav ul { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + padding: 0; + height: calc(100% - 1.5rem); + -webkit-box-pack: space-evenly; + -ms-flex-pack: space-evenly; + justify-content: space-evenly; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +nav ul li { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + list-style: none; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + padding: 0.5rem 1rem; +} + +nav ul li .nav-link { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 5rem; + padding: 0.25rem; + font-size: 1.5rem; + font-weight: 400; + font-variant-caps: small-caps; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + +nav ul li .nav-link:hover { + -webkit-box-shadow: 0 0.05rem 0.05rem var(--color_shadow); + box-shadow: 0 0.05rem 0.05rem var(--color_shadow); +} + +.nav-left .hamburger { + display: none; +} + +.hamburger .bars { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + width: 1.2rem; + height: auto; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: distribute; + justify-content: space-around; +} + +.bars span { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 100%; + height: 0.16rem; + margin: 0.08rem auto; + -webkit-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} + +.bars span:nth-child(1) { + background-color: var(--color_A); +} + +.bars span:nth-child(2) { + background-color: var(--color_B); +} + +.bars span:nth-child(3) { + background-color: var(--color_C); +} + +main { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + margin-top: 5rem; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.title, +.description { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + padding: 0; + height: 10%; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + text-align: center; + font-variant-caps: petite-caps; +} + +.description { + font-size: 1.4rem; + font-weight: 600; +} + +main .poster, +main .guide, +main .gallery, +main .privacy { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row; + flex-flow: row; + width: calc(100% - 1rem); + height: calc(100vh - 6.5rem); + padding: 0.5rem; + -webkit-box-pack: space-evenly; + -ms-flex-pack: space-evenly; + justify-content: space-evenly; +} + +main .guide, +main .gallery, +main .privacy { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column; + flex-flow: column; +} + +.poster .section-left, +.poster .section-right { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column; + flex-flow: column; + width: calc(50% - 0.5rem); + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.section-left .brand, +.section-right .feature { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column; + flex-flow: column; + width: 90%; + height: calc(55% - 2rem); + padding: 1rem 0; + -webkit-box-pack: space-evenly; + -ms-flex-pack: space-evenly; + justify-content: space-evenly; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: var(--color_0); +} + +.brand .logo { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + height: calc(50% - 0.5rem); + padding: 0.25rem; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.logo img { + width: 10rem; + height: 10rem; + content: url("extension/icons/Save_Tabs_128.png"); +} + +.brand .title { + height: 20%; +} + +.brand .description { + font-size: 1.8rem; + height: 20%; +} + +.section-left .brand-download, +.section-right .source-code { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column; + flex-flow: column; + height: calc(40% - 2rem); + width: 90%; + padding: 1rem 0; + -webkit-box-pack: space-evenly; + -ms-flex-pack: space-evenly; + justify-content: space-evenly; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: var(--color_0); +} + +.brand-download .title, +.source-code .title { + height: 20%; +} + +.brand-download .links, +.source-code .links { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + width: 100%; + height: 80%; + -webkit-box-pack: space-evenly; + -ms-flex-pack: space-evenly; + justify-content: space-evenly; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.links a { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + padding: 0.25rem; + width: auto; + height: 4rem; + cursor: pointer; + text-decoration: none; +} + +.links a:hover { + -webkit-box-shadow: 0 0 0.4rem var(--color_shadow); + box-shadow: 0 0 0.4rem var(--color_shadow); +} + +.links img, +.links .github { + -o-object-fit: cover; + object-fit: cover; + width: 14rem; + height: 4rem; +} + +.links .github { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: space-evenly; + -ms-flex-pack: space-evenly; + justify-content: space-evenly; +} + +.links .github svg { + -o-object-fit: cover; + object-fit: cover; + width: 3rem; + height: 3rem; +} + +.links .button-text { + font-size: 1.5rem; +} + +.poster .vertical-line { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-item-align: center; + align-self: center; + width: 0.3rem; + height: 70%; + -webkit-box-shadow: inset 0 0 0.3rem var(--color_shadow); + box-shadow: inset 0 0 0.3rem var(--color_shadow); + border-radius: 2rem; +} + +.feature .title { + height: 15%; + width: 40%; + border-bottom: 0.1rem solid var(--color_1); +} + +.feature ul { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column; + flex-flow: column; + height: 85%; + -webkit-box-pack: space-evenly; + -ms-flex-pack: space-evenly; + justify-content: space-evenly; +} + +.feature ul li { + font-size: 1.4rem; +} + +.guide .content, +.gallery .content, +.privacy .content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row; + flex-flow: row; + -webkit-box-pack: space-evenly; + -ms-flex-pack: space-evenly; + justify-content: space-evenly; + height: 90%; +} + +.content .export, +.content .import, +.content .logs { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column; + flex-flow: column; + width: calc(32% - 1rem); + padding: 1rem 0.5rem; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: var(--color_0); +} + +.content .title { + padding: 0.25rem 0; + height: calc(5% - 0.6rem); + border-bottom: 0.1rem solid; +} + +.content .preview { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin-top: 0.5rem; + padding: 0.5rem; + width: calc(100% - 1rem); + height: calc(40% - 1.5rem); + overflow: hidden; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + +.export .preview { + -webkit-box-shadow: inset 0 0 0.15rem var(--color_A_light_2); + box-shadow: inset 0 0 0.15rem var(--color_A_light_2); + background-color: var(--color_A_light_1); +} + +.import .preview { + -webkit-box-shadow: inset 0 0 0.15rem var(--color_B_light_2); + box-shadow: inset 0 0 0.15rem var(--color_B_light_2); + background-color: var(--color_B_light_1); +} + +.logs .preview { + -webkit-box-shadow: inset 0 0 0.15rem var(--color_C_light_2); + box-shadow: inset 0 0 0.15rem var(--color_C_light_2); + background-color: var(--color_C_light_1); +} + +.preview img { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -o-object-fit: scale-down; + object-fit: scale-down; + width: 100%; + height: auto; +} + +.content .points { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column; + flex-flow: column; + overflow-y: auto; + margin-top: 1rem; + width: 100%; + height: calc(55% - 1rem); +} + +.points .title { + margin-top: 1rem; + height: 5%; + font-size: 1.2rem; + -webkit-box-pack: left; + -ms-flex-pack: left; + justify-content: left; +} + +.points ol { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column; + flex-flow: column; +} + +/* Screenshots */ + +.gallery .content { + padding: 0 0.5rem; + width: calc(100% - 1rem); + height: 90%; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + +.gallery .screenshots { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row; + flex-flow: row; + padding: 0 0.5rem; + width: calc(100% - 1rem); + height: 100%; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + overflow-x: auto; +} + +.screenshots .screenshot-content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column; + flex-flow: column; + padding: 1rem; + width: calc(33.3% - 2rem); + height: calc(100% - 2rem); + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + +.screenshot-content .body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column; + flex-flow: column; + padding: 0.5rem; + width: auto; + height: calc(100% - 1rem); + background-color: var(--color_0); +} + +.body .image { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + height: calc(95% - 0.5rem); + padding: 0.25rem; +} + +.image img { + -o-object-fit: scale-down; + object-fit: scale-down; + width: 100%; +} + +.body .description { + font-size: 1rem; + font-variant-caps: normal; + -webkit-box-shadow: inset 0 0 0.1rem var(--color_shadow); + box-shadow: inset 0 0 0.1rem var(--color_shadow); +} + +/* Privacy */ + +.privacy .content { + font-size: 3rem; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + background-color: var(--color_0); +} + +.content .privacy-content { + text-align: center; +} + +/* Footer */ + +footer { + margin-top: 0.5rem; + margin-bottom: 0.5rem; + height: 2rem; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + font-variant-caps: petite-caps; + font-weight: 500; +} + +footer .developer-name { + padding: 0 0.25rem; + font-weight: bold; +} + +/* Extras */ +.border-radius-type-A { + border-radius: 0.5rem; +} + +.border-shadow { + -webkit-box-shadow: 0 0 0.2rem var(--color_shadow); + box-shadow: 0 0 0.2rem var(--color_shadow); +} + +::-webkit-scrollbar { + width: 0.5rem; + height: 0.5rem; +} + +::-webkit-scrollbar-thumb { + border-radius: 0.5rem; + -webkit-box-shadow: inset 0 0 0.5rem var(--color_shadow); + box-shadow: inset 0 0 0.5rem var(--color_shadow); +} + +@media only screen and (max-width: 768px) { + html { + scroll-padding-top: 4rem; + } + + body { + padding: 0 1rem; + } + + h2 { + font-size: 3rem; + } + + h3 { + font-size: 2rem; + } + + header { + left: 1rem; + width: calc(100% - 2rem); + height: 3rem; + padding: 0.5rem 0; + } + + header.active { + height: calc(100% - 1rem); + } + + header.border-shadow { + -webkit-box-shadow: none; + box-shadow: none; + } + + nav { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + padding: 0; + border: none; + } + + header.active nav { + -webkit-box-shadow: none; + box-shadow: none; + } + + nav .nav-left { + width: calc(100% - 1rem); + height: 2.9rem; + padding: 0 0.5rem; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border: 0.05rem solid; + border-color: var(--color_A) var(--color_B) var(--color_C); + -webkit-box-shadow: 0 0 0.2rem var(--color_shadow); + box-shadow: 0 0 0.2rem var(--color_shadow); + } + + .nav-logo img { + content: url("extension/icons/Save_Tabs_32.png"); + } + + .nav-logo span { + padding: 0 0.25rem; + font-size: 1.5rem; + font-weight: 550; + } + + nav ul { + display: none; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + width: calc(100% - 0.2rem); + height: 0; + text-align: center; + border: 0.1rem solid; + border-color: var(--color_A) var(--color_B) var(--color_C); + } + + nav ul.active { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + height: auto; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-box-shadow: 0 0 0.2rem var(--color_shadow); + box-shadow: 0 0 0.2rem var(--color_shadow); + } + + nav ul li { + width: 60%; + padding: 0.5rem 0; + } + + nav ul li .nav-link { + padding: 0.25rem; + font-size: 1.25rem; + font-weight: 400; + border-radius: 0.25rem; + } + + .nav-left .hamburger { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 1.7rem; + height: 1.7rem; + border-radius: 50%; + cursor: pointer; + -webkit-box-shadow: 0 0 0.2rem var(--color_shadow); + box-shadow: 0 0 0.2rem var(--color_shadow); + } + + .hamburger.active span:nth-child(2) { + opacity: 0; + } + + .hamburger.active span:nth-child(1) { + -webkit-transform: translateY(0.32rem) rotate(45deg); + -ms-transform: translateY(0.32rem) rotate(45deg); + transform: translateY(0.32rem) rotate(45deg); + } + + .hamburger.active span:nth-child(3) { + -webkit-transform: translateY(-0.32rem) rotate(-45deg); + -ms-transform: translateY(-0.32rem) rotate(-45deg); + transform: translateY(-0.32rem) rotate(-45deg); + } + + .scroll-lock { + overflow: hidden; + } + + main { + margin-top: 4rem; + } + + main .poster, + main .guide { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + height: auto; + padding: 0 0.25rem; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + } + + main .gallery, + main .privacy { + height: calc(100vh - 5.5rem); + } + + .poster .section-left, + .poster .section-right { + width: 100%; + height: calc(100vh - 4rem); + -webkit-box-pack: space-evenly; + -ms-flex-pack: space-evenly; + justify-content: space-evenly; + } + + .section-left .brand, + .section-right .feature { + width: 100%; + height: calc(55% - 1rem); + padding: 0.5rem 0; + -webkit-box-shadow: 0 0 0.1rem var(--color_shadow); + box-shadow: 0 0 0.1rem var(--color_shadow); + } + + .section-right .feature { + height: calc(60% - 1rem); + } + + .brand .logo { + height: calc(50% - 0.25rem); + padding: 0.125rem; + } + + .logo img { + width: 6rem; + height: 6rem; + } + + .brand .description { + font-size: 1.2rem; + height: 20%; + } + + .section-left .brand-download, + .section-right .source-code { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column; + flex-flow: column; + height: calc(40% - 1rem); + width: 100%; + padding: 0.5rem 0; + } + + .section-right .source-code { + height: calc(35% - 1rem); + } + + .brand-download .links, + .source-code .links { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column; + flex-flow: column; + } + + .links a { + padding: 0.125rem; + height: 3rem; + } + + .links img, + .links .github { + width: 10.5rem; + height: 3rem; + } + + .links .github svg { + width: 2rem; + height: 2rem; + } + + .links .button-text { + font-size: 1.2rem; + } + + .poster .vertical-line { + margin-left: 15%; + width: 70%; + height: 0.3rem; + } + + .feature ul li { + font-size: 1rem; + } + + main .guide, + main .gallery, + main .privacy { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + } + + .guide .content, + .gallery .content, + .privacy .content { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column; + flex-flow: column; + -webkit-box-pack: space-evenly; + -ms-flex-pack: space-evenly; + justify-content: space-evenly; + } + + .content .export, + .content .import, + .content .logs { + margin: 0.5rem 0; + width: calc(100% - 0.5rem); + height: auto; + padding: 0.5rem 0.25rem; + } + + .content .preview { + padding: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(40% - 1rem); + } + + .content .points { + margin-top: 0.5rem; + height: calc(55% - 0.5rem); + } + + .points .title { + margin-top: 0.5rem; + font-size: 1.2rem; + } + + /* Screenshots */ + + .gallery .content { + padding: 0 0.25rem; + width: calc(100% - 0.5rem); + /* background-color: red; */ + } + + .gallery .screenshots { + padding: 0 0.25rem; + width: calc(100% - 0.5rem); + } + + .screenshots .screenshot-content { + padding: 0.5rem; + width: calc(100% - 1rem); + height: calc(100% - 1rem); + } + + .screenshot-content .body { + padding: 0.25rem; + height: calc(100% - 0.5rem); + } + + .body .image { + height: calc(90% - 0.5rem); + } + + .body .description { + font-size: 0.8rem; + } + + /* Footer */ + + footer { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + padding: 0; + height: 2rem; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 2rem; + font-size: 0.9rem; + } + + footer .developer-name { + padding: 0 0.125rem; + font-weight: bold; + } + + .border-radius-type-A { + border-radius: 0.25rem; + } + + .border-shadow { + -webkit-box-shadow: 0 0 0.1rem var(--color_shadow); + box-shadow: 0 0 0.1rem var(--color_shadow); + } +}