pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-20 03:31:08 -05:00
Code Issues Packages Projects Releases Wiki Activity

Improve icon sizes for better visual consistency across devices

Browse Source 
Update Tailwind CSS with new height and width utilities for icons and adjust icon sizes in the enhanced header component for improved responsiveness.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9ac4060c-9ba6-40b4-b325-c945a385dd39
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
This commit is contained in:
pac7
2025-09-23 21:15:44 +00:00
parent beac6ddfd8
commit f2fccdf190
3 changed files with 24 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.replit
View File

@@ -54,6 +54,10 @@ outputType = "webview"
localPort = 5000 localPort = 5000
externalPort = 80 externalPort = 80
[[ports]]
localPort = 38645
externalPort = 3002
[[ports]] [[ports]]
localPort = 41923 localPort = 41923
externalPort = 3000 externalPort = 3000

16
static/css/tailwind.css
View File

@@ -716,6 +716,9 @@
.h-6 { .h-6 {
height: calc(var(--spacing) * 6); height: calc(var(--spacing) * 6);
} }
.h-7 {
height: calc(var(--spacing) * 7);
}
.h-8 { .h-8 {
height: calc(var(--spacing) * 8); height: calc(var(--spacing) * 8);
} }
@@ -815,6 +818,9 @@
.w-6 { .w-6 {
width: calc(var(--spacing) * 6); width: calc(var(--spacing) * 6);
} }
.w-7 {
width: calc(var(--spacing) * 7);
}
.w-8 { .w-8 {
width: calc(var(--spacing) * 8); width: calc(var(--spacing) * 8);
} }
@@ -3280,6 +3286,11 @@
display: none; display: none;
} }
} }
.md\:h-7 {
@media (width >= 48rem) {
height: calc(var(--spacing) * 7);
}
}
.md\:h-\[140px\] { .md\:h-\[140px\] {
@media (width >= 48rem) { @media (width >= 48rem) {
height: 140px; height: 140px;
@@ -3290,6 +3301,11 @@
height: 100%; height: 100%;
} }
} }
.md\:w-7 {
@media (width >= 48rem) {
width: calc(var(--spacing) * 7);
}
}
.md\:w-48 { .md\:w-48 {
@media (width >= 48rem) { @media (width >= 48rem) {
width: calc(var(--spacing) * 48); width: calc(var(--spacing) * 48);

8
templates/components/layout/enhanced_header.html
View File

@@ -180,8 +180,8 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
@click="toggleTheme()" @click="toggleTheme()"
class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-12 w-12" class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-12 w-12"
> >
<i class="fas fa-sun h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"></i> <i class="fas fa-sun h-6 w-6 md:h-7 md:w-7 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"></i>
<i class="fas fa-moon absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"></i> <i class="fas fa-moon absolute h-6 w-6 md:h-7 md:w-7 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"></i>
<span class="sr-only">Toggle theme</span> <span class="sr-only">Toggle theme</span>
</button> </button>
@@ -280,8 +280,8 @@ Includes: Browse menu, advanced search, theme toggle, user dropdown, mobile menu
@click="toggleTheme()" @click="toggleTheme()"
class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10" class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10"
> >
<i class="fas fa-sun h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"></i> <i class="fas fa-sun h-6 w-6 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"></i>
<i class="fas fa-moon absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"></i> <i class="fas fa-moon absolute h-6 w-6 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"></i>
</button> </button>
</div> </div>