mirror_html/DirectoryLister
1
0
Fork 0
mirror of https://github.com/DirectoryLister/DirectoryLister.git synced 2025-08-17 03:23:58 +02:00
Code Issues Projects Releases Wiki Activity

UI tweaks

Browse Source
This commit is contained in:
Chris Kankiewicz
2025-03-17 10:59:06 -07:00
parent 8baa6955cf
commit 2038f5a485
4 changed files with 24 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/resources/css/app.css
View File

@@ -1,17 +1,5 @@
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Work+Sans&display=swap");
@import "@fortawesome/fontawesome-free/css/fontawesome.css";
@import "@fortawesome/fontawesome-free/css/brands.css";
@import "@fortawesome/fontawesome-free/css/solid.css";
.light {
@import 'highlight.js/styles/github.css';
}
.dark {
@import 'highlight.js/styles/github-dark.css';
}
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
@@ -25,14 +13,21 @@
--font-sans: Work Sans;
}
@import "./markdown.css";
@import "@fortawesome/fontawesome-free/css/fontawesome.css";
@import "@fortawesome/fontawesome-free/css/brands.css";
@import "@fortawesome/fontawesome-free/css/solid.css";
/* @plugin "@tailwindcss/typography"; */
@import "./markdown.css";
.light {
@import 'highlight.js/styles/github.css';
}
.dark {
@import 'highlight.js/styles/github-dark.css';
}
[x-cloak] {
@apply hidden;
}
.footer-icon {
@apply w-6 h-6;
}

2
app/views/components/file.twig
View File

@@ -18,7 +18,7 @@
{% if file.isFile %}
<div class="ml-2">
<button title="{{ translate('file.info') }}" @click.prevent="$dispatch('show-file-info', { file: '{{ url(file.getPathname) | escape('js') }}' })"
class="justify-center items-center rounded-full w-8 h-8 -m-1 cursor-pointer md:invisible hover:bg-slate-300 hover:shadow-sm dark:hover:bg-violet-900 group-hover:visible"
class="justify-center items-center rounded-full w-8 h-8 -m-1 cursor-pointer transition md:invisible hover:bg-slate-300 hover:shadow-sm hover:scale-110 dark:hover:bg-violet-900 group-hover:visible"
>
<i class="fas fa-info-circle"></i>
</button>

16
app/views/components/footer.twig
View File

@@ -5,16 +5,20 @@
</p>
<div class="flex">
<a href="https://github.com/DirectoryLister/DirectoryLister" title="GitHub" class="text-slate-400 mx-2 hover:text-github">
<i class="fab fa-github fa-lg"></i>
<a href="https://github.com/DirectoryLister/DirectoryLister" title="GitHub" class="text-slate-400 mx-2 transition hover:text-github hover:scale-125 dark:hover:text-white">
<i class="fab fa-github fa-xl"></i>
</a>
<a href="https://bsky.app/profile/directorylister.com" title="Bluesky" class="text-slate-400 mx-2 hover:text-bluesky">
<i class="fab fa-bluesky fa-lg"></i>
<a href="https://bsky.app/profile/directorylister.com" title="Bluesky" class="text-slate-400 mx-2 transition hover:text-bluesky hover:scale-125">
<i class="fab fa-bluesky fa-xl"></i>
</a>
<a href="https://github.com/DirectoryLister/DirectoryLister/discussions" title="Discussions" class="text-slate-400 mx-2 hover:text-violet-600">
<i class="fas fa-comments fa-lg"></i>
<a href="https://github.com/DirectoryLister/DirectoryLister/discussions" title="Discussions" class="text-slate-400 mx-2 transition hover:text-violet-600 hover:scale-125">
<i class="fas fa-comments fa-xl"></i>
</a>
<a href="https://github.com/sponsors/PHLAK" title="Sponsor" class="text-slate-400 mx-2 transition hover:text-pink-600 hover:scale-125">
<i class="fas fa-heart fa-xl"></i>
</a>
</div>
</div>

2
app/views/components/scroll-to-top.twig
View File

@@ -2,7 +2,7 @@
x-init="visible = window.scrollY > 10" x-show="visible" x-transition.opacity
>
<div class="container flex justify-end mx-auto px-4 py-10 xl:max-w-screen-xl">
<button title="{{ translate('scroll_to_top') }}" class="flex justify-center items-center w-12 h-12 right-0 rounded-full shadow-lg bg-sky-600 text-white cursor-pointer pointer-events-auto hover:bg-sky-700 dark:bg-violet-700 dark:hover:bg-violet-800"
<button title="{{ translate('scroll_to_top') }}" class="flex justify-center items-center w-12 h-12 right-0 rounded-full shadow-lg bg-sky-600 text-white cursor-pointer pointer-events-auto transition hover:bg-sky-700 dark:bg-violet-700 dark:hover:bg-violet-800 hover:scale-110"
@click="window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });" @scroll.window="visible = window.scrollY > 10"
>
<i class="fas fa-arrow-up fa-lg"></i>