UI rewamp #120
UI rewamp #120
Conversation
| <!-- Pro --> | ||
| <div class="nav-link"> | ||
| <a href="/freedevtools/pro" class="text-sm nav-link-text flex items-center gap-3 py-1 rounded-lg transition-colors text-slate-700 dark:text-slate-300 "> | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="w-5 h-5 flex-shrink-0 sidebar-icon" style="width: 20px; height: 20px;"> |
There was a problem hiding this comment.
The style attribute for width and height is redundant with the w-5 h-5 Tailwind classes and width/height attributes.
| <!-- Tools --> | ||
| <div class="nav-link"> | ||
| <a href="/freedevtools/t/" class="text-sm nav-link-text flex items-center gap-3 py-1 rounded-lg transition-colors text-slate-700 dark:text-slate-300 "> | ||
| <img src="/freedevtools/svg_icons/dashboard/tools.svg" alt="Tools" class="w-5 h-5 flex-shrink-0 sidebar-icon" width="20" height="20" style="width: 20px; height: 20px;" /> |
There was a problem hiding this comment.
The style attribute for width and height is redundant with the w-5 h-5 Tailwind classes and width/height attributes.
| <!-- Installerpedia --> | ||
| <div class="nav-link"> | ||
| <a href="/freedevtools/installerpedia/" class="text-sm nav-link-text flex items-center gap-3 py-1 rounded-lg transition-colors text-slate-700 dark:text-slate-300 "> | ||
| <img src="/freedevtools/svg_icons/book/download-entypo.svg" alt="Installerpedia" class="w-5 h-5 flex-shrink-0 sidebar-icon" width="20" height="20" style="width: 20px; height: 20px;" /> |
There was a problem hiding this comment.
The style attribute for width and height is redundant with the w-5 h-5 Tailwind classes and width/height attributes.
| <!-- Emojis --> | ||
| <div class="nav-link"> | ||
| <a href="/freedevtools/emojis/" class="text-sm nav-link-text flex items-center gap-3 py-1 rounded-lg transition-colors text-slate-700 dark:text-slate-300 "> | ||
| <img src="/freedevtools/svg_icons/emoji/emoji-smile.svg" alt="Emojis" class="w-5 h-5 flex-shrink-0 sidebar-icon" width="20" height="20" style="width: 20px; height: 20px;" /> |
There was a problem hiding this comment.
The style attribute for width and height is redundant with the w-5 h-5 Tailwind classes and width/height attributes.
| <!-- SVG Icons --> | ||
| <div class="nav-link"> | ||
| <a href="/freedevtools/svg_icons/" class="text-sm nav-link-text flex items-center gap-3 py-1 rounded-lg transition-colors text-slate-700 dark:text-slate-300 "> | ||
| <img src="/freedevtools/svg_icons/bmp/svg.svg" alt="SVG Icons" class="w-5 h-5 flex-shrink-0 sidebar-icon" width="20" height="20" style="width: 20px; height: 20px;" /> |
There was a problem hiding this comment.
The style attribute for width and height is redundant with the w-5 h-5 Tailwind classes and width/height attributes.
| <!-- PNG Icons --> | ||
| <div class="nav-link"> | ||
| <a href="/freedevtools/png_icons/" class="text-sm nav-link-text flex items-center gap-3 py-1 rounded-lg transition-colors text-slate-700 dark:text-slate-300 "> | ||
| <img src="/freedevtools/svg_icons/bmp/png.svg" alt="PNG Icons" class="w-5 h-5 flex-shrink-0 sidebar-icon" width="20" height="20" style="width: 20px; height: 20px;" /> |
There was a problem hiding this comment.
The style attribute for width and height is redundant with the w-5 h-5 Tailwind classes and width/height attributes.
| <!-- MCP --> | ||
| <div class="nav-link"> | ||
| <a href="/freedevtools/mcp/1/" class="text-sm nav-link-text flex items-center gap-3 py-1 rounded-lg transition-colors text-slate-700 dark:text-slate-300 "> | ||
| <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" width="20" height="20" viewBox="0 0 24 24" class="w-5 h-5 flex-shrink-0 sidebar-icon" style="width: 20px; height: 20px; flex:none;line-height:1"> |
There was a problem hiding this comment.
The style attribute for width and height is redundant with the w-5 h-5 Tailwind classes and width/height attributes.
| <!-- TLDR --> | ||
| <div class="nav-link"> | ||
| <a href="/freedevtools/tldr/" class="text-sm nav-link-text flex items-center gap-3 py-1 rounded-lg transition-colors text-slate-700 dark:text-slate-300 "> | ||
| <img src="/freedevtools/svg_icons/tldr/tldr.svg" alt="TLDR" class="w-5 h-5 flex-shrink-0 sidebar-icon" width="20" height="20" style="width: 20px; height: 20px;" /> |
There was a problem hiding this comment.
The style attribute for width and height is redundant with the w-5 h-5 Tailwind classes and width/height attributes.
| <!-- Man Pages --> | ||
| <div class="nav-link"> | ||
| <a href="/freedevtools/man-pages/" class="text-sm nav-link-text flex items-center gap-3 py-1 rounded-lg transition-colors text-slate-700 dark:text-slate-300 "> | ||
| <img src="/freedevtools/svg_icons/reader/books.svg" alt="Man Pages" class="w-5 h-5 flex-shrink-0 sidebar-icon" width="20" height="20" style="width: 20px; height: 20px;" /> |
There was a problem hiding this comment.
The style attribute for width and height is redundant with the w-5 h-5 Tailwind classes and width/height attributes.
| <!-- Cheatsheets --> | ||
| <div class="nav-link"> | ||
| <a href="/freedevtools/c/" class="text-sm nav-link-text flex items-center gap-3 py-1 rounded-lg transition-colors text-slate-700 dark:text-slate-300 "> | ||
| <img src="/freedevtools/svg_icons/docs/docs.svg" alt="Cheatsheets" class="w-5 h-5 flex-shrink-0 sidebar-icon" width="20" height="20" style="width: 20px; height: 20px;" /> |
There was a problem hiding this comment.
The style attribute for width and height is redundant with the w-5 h-5 Tailwind classes and width/height attributes.
| </aside> | ||
| <style> | ||
| /* Active nav link styling */ | ||
| .nav-link-text.active { |
There was a problem hiding this comment.
Hardcoded hex colors for active/hover states make them difficult to manage.
| font-weight: 700; | ||
| } | ||
| .dark .nav-link-text.active { | ||
| color: #d4cb24; |
There was a problem hiding this comment.
Hardcoded hex colors for active/hover states make them difficult to manage.
|
|
||
| /* Hover nav link styling */ | ||
| .nav-link-text:hover:not(.active) { | ||
| color: #b6b000; |
There was a problem hiding this comment.
Hardcoded hex colors for active/hover states make them difficult to manage.
| font-weight: 700; | ||
| } | ||
| .dark .nav-link-text:hover:not(.active) { | ||
| color: #d4cb24; |
There was a problem hiding this comment.
Hardcoded hex colors for active/hover states make them difficult to manage.
| /* Icon styling - make icons inherit text color and adapt to dark mode */ | ||
| /* For img tags with SVG icons */ | ||
| img.sidebar-icon { | ||
| filter: brightness(0) saturate(100%) invert(0); |
There was a problem hiding this comment.
Using CSS filter for icon coloring is complex and less performant than currentColor or separate SVG assets.
| /* Light mode: use fdt-yellow-dark (#b6b000) for hover/active */ | ||
| .nav-link-text:hover img.sidebar-icon, | ||
| .nav-link-text.active img.sidebar-icon { | ||
| filter: brightness(0) saturate(100%) invert(68%) sepia(95%) saturate(2000%) hue-rotate(15deg) brightness(95%) contrast(90%); |
There was a problem hiding this comment.
The filter values are magic numbers and difficult to understand or modify.
| templ Category(data CategoryData) { | ||
| @layouts.BaseLayout(data.LayoutProps) { | ||
| <div id="man-pages-category-container" class="mx-auto" style="max-width: 72rem; padding-left: 0.5rem; padding-right: 0.5rem; margin-bottom: 2.5rem;"> | ||
| <div id="man-pages-category-container" style=" margin-bottom: 2.5rem;"> |
There was a problem hiding this comment.
Removed mx-auto, max-width, padding-left, and padding-right from the container.
|
|
||
| <div id="tool-head-head-container"> | ||
| <div id="tool-head-breadcrumb-container" class="mb-10 mt-10"> | ||
| <div id="tool-head-breadcrumb-container" class="mb-10"> |
There was a problem hiding this comment.
Removed mt-10 from the breadcrumb container.
| padding-left: 1.5rem !important; | ||
| padding-right: 1.5rem !important; | ||
| } | ||
| #man-pages-category-ad-banner { |
There was a problem hiding this comment.
Removed inline style block for #man-pages-category-container padding.
2 participants
Description
Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context.
Fixes # (issue)
Type of Change
Please delete options that are not relevant.
How Has This Been Tested?
Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration.
Screenshots (if applicable)
Add screenshots to help explain your changes.
Checklist
Additional Notes
Add any other context about the pull request here.