Skip to content

Commit

Permalink
Updates (#27)
Browse files Browse the repository at this point in the history 
* Add Hover Effect

* Update for Light Mode

* Update Support Info
  • Loading branch information
@smashedr
smashedr authored Jul 12, 2024
1 parent 10956e0 commit cc595d8
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 42 deletions.
4 changes: 2 additions & 2 deletions src/_layouts/default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,11 @@
</ul>
<ul class="navbar-nav nav-icons d-flex flex-row">
<li class="nav-item">
<a class="nav-link" href="{{ site.discord_invite }}" target="_blank" rel="noopener">
<a class="nav-link hvr-grow-lg" href="{{ site.discord_invite }}" target="_blank" rel="noopener">
<i class="fa-brands fa-discord fa-xl"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ site.github_url }}" target="_blank" rel="noopener">
<a class="nav-link hvr-grow-lg" href="{{ site.github_url }}" target="_blank" rel="noopener">
<i class="fa-brands fa-github fa-xl"></i></a>
</li>
</ul>
Expand Down
31 changes: 19 additions & 12 deletions src/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,6 @@ a {
text-underline-offset: 0.125em;
}

.link-default {
color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 1));
/*text-decoration: underline;*/
text-decoration-color: rgba(255, 255, 255, 0.4);
}

.link-default:hover,
.link-default:focus {
color: var(--bs-link-hover-color-rgb);
text-decoration-color: rgba(255, 255, 255, 0.8);
}

.toast-container {
max-width: 260px;
width: 100%;
Expand Down Expand Up @@ -48,3 +36,22 @@ a {
margin-right: 0.3em;
}
}

/* Grow */
.hvr-grow-lg,
.hvr-grow {
display: inline-block;
vertical-align: middle;
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
transition-duration: 0.3s;
transition-property: transform;
}
.hvr-grow:hover {
transform: scale(1.1);
}
.hvr-grow-lg:hover {
transform: scale(1.2);
}
18 changes: 9 additions & 9 deletions src/html/docs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@
<h1 class="animate__animated animate__zoomIn"><i class="fa-regular fa-file-lines"></i> {{ page.title }}</h1>

<p class="lead">
<a href="#configure" class="link-default">Configure</a> &bull;
<a href="#usage" class="link-default">Usage</a> &bull;
<a href="#options" class="link-default">Options</a> &bull;
<a href="#links" class="link-default">Link Results</a>
<a href="#configure" class="link-body-emphasis">Configure</a> &bull;
<a href="#usage" class="link-body-emphasis">Usage</a> &bull;
<a href="#options" class="link-body-emphasis">Options</a> &bull;
<a href="#links" class="link-body-emphasis">Link Results</a>
</p>

<div id="feedback" class="alert alert-success alert-dismissible d-none animate__animated animate__zoomInDown" role="alert">
Expand Down Expand Up @@ -130,7 +130,7 @@ <h5><i class="fa-regular fa-keyboard"></i> Keyboard Shortcuts</h5>
These can be configured on your browser's extension management page and varies by browser.
<br>
<strong>Firefox:</strong>
<a href="https://support.mozilla.org/en-US/kb/manage-extension-shortcuts-firefox" class="link-default" target="_blank" rel="noopener">
<a href="https://support.mozilla.org/en-US/kb/manage-extension-shortcuts-firefox" class="link-body-emphasis" target="_blank" rel="noopener">
https://support.mozilla.org/en-US/kb/manage-extension-shortcuts-firefox</a>
<br>
<strong>Chrome:</strong> Enter the following into your address bar:
Expand All @@ -150,14 +150,14 @@ <h5><i class="fa-solid fa-code"></i> Regex Flags</h5>
<p class="ms-4">
This is the default flags used when filtering links via quick filter or a saved filter. For more information
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions#advanced_searching_with_flags"
class="link-default" target="_blank" rel="noopener">read this document</a>.
class="link-body-emphasis" target="_blank" rel="noopener">read this document</a>.
</p>

<h2 id="links">Link Results</h2>
<hr class="mt-0">

<p>
The Link Results Page utilizes <a href="https://datatables.net/" class="link-default" target="_blank" rel="noopener">
The Link Results Page utilizes <a href="https://datatables.net/" class="link-body-emphasis" target="_blank" rel="noopener">
DataTables.net</a> to display, sort, page, and filter the results.
</p>

Expand Down Expand Up @@ -199,8 +199,8 @@ <h5><i class="fa-solid fa-i-cursor"></i> Filter</h5>

<p>
For more information view the
<a href="{{ site.github_url }}?tab=readme-ov-file#readme" class="link-default" target="_blank" rel="noopener">README.md</a>
on GitHub or join the <a href="{{ site.discord_invite }}" class="link-default" target="_blank" rel="noopener">Discord Server</a>.
<a href="{{ site.github_url }}?tab=readme-ov-file#readme" class="link-body-emphasis" target="_blank" rel="noopener">README.md</a>
on GitHub or join the <a href="{{ site.discord_invite }}" class="link-body-emphasis" target="_blank" rel="noopener">Discord Server</a>.
</p>

</div>
Expand Down
48 changes: 29 additions & 19 deletions src/html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ <h1 class="animate__animated animate__zoomIn"><i class="fa-solid fa-link"></i> {
<img src="https://img.shields.io/amo/v/{{ site.firefox_id }}?label=firefox&logo=firefox" alt="Mozilla Add-on Version"></a>
<a href="{{ site.github_url }}/releases/latest" title="GitHub" target="_blank" rel="noopener">
<img src="https://img.shields.io/github/v/release/{{ site.github_name }}?logo=github" alt="GitHub Release Version"></a>
<a href="{{ site.discord_invite }}" title="GitHub" target="_blank" rel="noopener">
<a href="{{ site.discord_invite }}" title="Discord" target="_blank" rel="noopener">
<img src="https://img.shields.io/discord/899171661457293343?logo=discord&logoColor=white&label=discord&color=7289da" alt="Join Discord"></a>
</div>

Expand All @@ -35,25 +35,25 @@ <h1 class="animate__animated animate__zoomIn"><i class="fa-solid fa-link"></i> {
{% comment %}{% include alerts.html %}{% endcomment %}

<div class="d-flex mb-3 browser-icons" style="min-height: 48px;">
<a href="{{ site.chrome_url }}" title="Chrome" class="px-1" target="_blank" rel="noopener">
<a href="{{ site.chrome_url }}" title="Chrome" class="px-1 hvr-grow-lg" target="_blank" rel="noopener">
<img alt="Chrome" src="https://raw.githubusercontent.com/smashedr/logo-icons/master/browsers/chrome_48.png" width="48" height="auto"
class="mw-100 animate__animated animate__rotateIn" /></a>
<a href="{{ site.firefox_url }}" title="Firefox" class="px-1" target="_blank" rel="noopener">
<a href="{{ site.firefox_url }}" title="Firefox" class="px-1 hvr-grow-lg" target="_blank" rel="noopener">
<img alt="Firefox" src="https://raw.githubusercontent.com/smashedr/logo-icons/master/browsers/firefox_48.png" width="48" height="auto"
class="mw-100 animate__animated animate__rotateIn" /></a>
<a href="{{ site.chrome_url }}" title="Edge" class="px-1" target="_blank" rel="noopener">
<a href="{{ site.chrome_url }}" title="Edge" class="px-1 hvr-grow-lg" target="_blank" rel="noopener">
<img alt="Edge" src="https://raw.githubusercontent.com/smashedr/logo-icons/master/browsers/edge_48.png" width="48" height="auto"
class="mw-100 animate__animated animate__rotateIn" /></a>
<a href="{{ site.chrome_url }}" title="Opera" class="px-1" target="_blank" rel="noopener">
<a href="{{ site.chrome_url }}" title="Opera" class="px-1 hvr-grow-lg" target="_blank" rel="noopener">
<img alt="Opera" src="https://raw.githubusercontent.com/smashedr/logo-icons/master/browsers/opera_48.png" width="48" height="auto"
class="mw-100 animate__animated animate__rotateIn" /></a>
<a href="{{ site.chrome_url }}" title="Brave" class="px-1" target="_blank" rel="noopener">
<a href="{{ site.chrome_url }}" title="Brave" class="px-1 hvr-grow-lg" target="_blank" rel="noopener">
<img alt="Brave" src="https://raw.githubusercontent.com/smashedr/logo-icons/master/browsers/brave_48.png" width="48" height="auto"
class="mw-100 animate__animated animate__rotateIn" /></a>
<a href="{{ site.chrome_url }}" title="Chromium" class="px-1" target="_blank" rel="noopener">
<a href="{{ site.chrome_url }}" title="Chromium" class="px-1 hvr-grow-lg" target="_blank" rel="noopener">
<img alt="Chromium" src="https://raw.githubusercontent.com/smashedr/logo-icons/master/browsers/chromium_48.png" width="48" height="auto"
class="mw-100 animate__animated animate__rotateIn" /></a>
<a href="{{ site.chrome_url }}" title="Yandex" class="px-1" target="_blank" rel="noopener">
<a href="{{ site.chrome_url }}" title="Yandex" class="px-1 hvr-grow-lg" target="_blank" rel="noopener">
<img alt="Yandex" src="https://raw.githubusercontent.com/smashedr/logo-icons/master/browsers/yandex_48.png" width="48" height="auto"
class="mw-100 animate__animated animate__rotateIn" /></a>
</div>
Expand All @@ -73,42 +73,52 @@ <h1 class="animate__animated animate__zoomIn"><i class="fa-solid fa-link"></i> {
<li>Activate from Icon, Context Menu, or Keyboard Shortcuts</li>
</ul>

<p>To see more, view the <a href="{{ "/screenshots/" | relative_url }}" class="link-default" target="_blank">Screen Shot Gallery</a>.</p>
<p>To see more, view the <a href="{{ "/screenshots/" | relative_url }}" class="link-body-emphasis" target="_blank">Screen Shot Gallery</a>.</p>

<h2>Install</h2>

<p class="ms-3">
<p class="ms-3 lead">
<i class="fa-brands fa-chrome fa-lg me-1"></i>
<a href="{{ site.chrome_url }}" class="link-default" target="_blank" rel="noopener">Google Chrome Web Store</a>
<a href="{{ site.chrome_url }}" class="link-body-emphasis" target="_blank" rel="noopener">Google Chrome Web Store</a>
<br>
<i class="fa-brands fa-firefox-browser fa-lg me-1"></i>
<a href="{{ site.firefox_url }}" class="link-default" target="_blank" rel="noopener">Mozilla Firefox Add-ons</a>
<a href="{{ site.firefox_url }}" class="link-body-emphasis" target="_blank" rel="noopener">Mozilla Firefox Add-ons</a>
</p>

<p>
All <strong>Chromium</strong> based browsers can install the extension from the
<a href="{{ site.chrome_url }}" class="link-default" target="_blank" rel="noopener">Chrome Web Store</a>.
<a href="{{ site.chrome_url }}" class="link-body-emphasis" target="_blank" rel="noopener">Chrome Web Store</a>.
</p>

<p>
Mobile browser support available for
<a href="{{ site.firefox_url }}" class="link-default" target="_blank" rel="noopener">Firefox</a> and
<a href="{{ site.chrome_url }}" class="link-default" target="_blank" rel="noopener">Yandex</a>.
<a href="{{ site.firefox_url }}" class="link-body-emphasis" target="_blank" rel="noopener">Firefox</a> and
<a href="{{ site.chrome_url }}" class="link-body-emphasis" target="_blank" rel="noopener">Yandex</a>.
</p>

<h2>Support</h2>

<p>
For usage instructions, head over to the
<a href="{{ "/docs/" | relative_url }}" class="link-default">Documentation</a>.
<a href="{{ "/docs/" | relative_url }}" class="link-body-emphasis">Documentation</a>.
</p>

<p>
If you find any bugs please
<a href="{{ site.github_url }}/issues" class="link-default" target="_blank" rel="noopener">Open an Issue</a>.
<a href="{{ site.github_url }}/issues" class="link-body-emphasis" target="_blank" rel="noopener">Open an Issue</a>.
<br>
If you have any ideas, suggestions, or requests; submit a
<a href="{{ site.github_url }}/discussions/categories/feature-requests" class="link-default" target="_blank" rel="noopener">Feature Request</a>.
<a href="{{ site.github_url }}/discussions/categories/feature-requests" class="link-body-emphasis" target="_blank" rel="noopener">Feature Request</a>.
<br>
You may also get support on the
<a href="{{ site.discord_invite }}" class="link-default" target="_blank" rel="noopener">Discord Server</a>.
<a href="{{ site.discord_invite }}" class="link-body-emphasis" target="_blank" rel="noopener">Discord Server</a>.
</p>

<p>
You can find additional apps on the
<a href="https://cssnr.github.io/" class="link-body-emphasis" target="_blank" rel="noopener">CSSNR Website</a>
as well as submit
<a href="https://cssnr.github.io/feedback/?app=Link%20Extractor" class="link-body-emphasis" target="_blank" rel="noopener">
General Feedback</a>.
</p>
</div>

0 comments on commit cc595d8

Please sign in to comment.