style: refactor header actions and theme toggle

- Updated CSS for header actions, introducing a new flex layout and base styles for action buttons.
- Enhanced theme toggle button with improved accessibility attributes and visual feedback.
- Adjusted HTML structure to accommodate GitHub link and theme toggle within a unified header actions group.
- Removed outdated theme icon styles and streamlined theme icon animations for better performance.

Author: ciro-maciel

themes/default/assets/css/style.css

@@ -582,8 +582,15 @@ body {
     box-shadow: var(--shadow-sm);
 }
 
-/* Theme Toggle in Header */
-.theme-toggle-header {
+/* Header Actions Group */
+.header-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+}
+
+/* Header Action Buttons - Base Style */
+.header-action-btn {
     background: none;
     border: 1px solid var(--border-medium);
     border-radius: 6px;
@@ -595,20 +602,92 @@ body {
     cursor: pointer;
     transition: var(--transition);
     color: var(--text-secondary);
+    text-decoration: none;
     position: relative;
+    overflow: hidden;
 }
 
-.theme-toggle-header:hover {
+.header-action-btn:hover {
     background: var(--bg-tertiary);
-    border-color: var(--border-medium);
-    color: var(--text-primary);
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-sm);
 }
 
-.theme-toggle-header:focus {
+.header-action-btn:focus {
     outline: 2px solid var(--primary-color);
     outline-offset: 2px;
 }
 
+.header-action-btn:active {
+    transform: translateY(0);
+    box-shadow: none;
+}
+
+/* GitHub Link Specific Styles */
+.github-link svg {
+    width: 20px;
+    height: 20px;
+    transition: var(--transition);
+}
+
+.github-link:hover svg {
+    transform: scale(1.1);
+}
+
+/* Theme Toggle Specific Styles */
+.theme-toggle-header .theme-icon {
+    position: absolute;
+    font-size: 16px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Theme Icons Animation */
+.theme-icon-light,
+.theme-icon-dark {
+    position: absolute;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Light theme - show sun icon */
+[data-theme="light"] .theme-icon-light {
+    opacity: 1;
+    transform: rotate(0deg) scale(1);
+}
+
+[data-theme="light"] .theme-icon-dark {
+    opacity: 0;
+    transform: rotate(180deg) scale(0.5);
+}
+
+/* Dark theme - show moon icon */
+[data-theme="dark"] .theme-icon-light {
+    opacity: 0;
+    transform: rotate(-180deg) scale(0.5);
+}
+
+[data-theme="dark"] .theme-icon-dark {
+    opacity: 1;
+    transform: rotate(0deg) scale(1);
+}
+
+/* Theme Toggle in Header */
+.theme-toggle-header {
+    /* Inherits from .header-action-btn */
+}
+
+.theme-toggle-header:hover {
+    /* Inherits from .header-action-btn:hover */
+}
+
+.theme-toggle-header:focus {
+    /* Inherits from .header-action-btn:focus */
+}
+
 /* Page Actions */
 .page-actions {
     display: flex;
@@ -664,35 +743,6 @@ body {
     letter-spacing: 0.3px;
 }
 
-/* Theme Icons */
-.theme-icon-light,
-.theme-icon-dark {
-    position: absolute;
-    transition: var(--transition);
-}
-
-/* Light theme - show sun icon */
-[data-theme="light"] .theme-icon-light {
-    opacity: 1;
-    transform: rotate(0deg);
-}
-
-[data-theme="light"] .theme-icon-dark {
-    opacity: 0;
-    transform: rotate(90deg);
-}
-
-/* Dark theme - show moon icon */
-[data-theme="dark"] .theme-icon-light {
-    opacity: 0;
-    transform: rotate(-90deg);
-}
-
-[data-theme="dark"] .theme-icon-dark {
-    opacity: 1;
-    transform: rotate(0deg);
-}
-
 /* Mobile Menu Button - Hidden on desktop */
 .mobile-menu-toggle {
     display: none;
@@ -703,7 +753,7 @@ body {
     padding: 8px;
     border-radius: 6px;
     transition: var(--transition);
-    margin-right: var(--space-md);
+    margin-right: var(--space-xs);
     -webkit-tap-highlight-color: transparent;
 }
 
@@ -1113,6 +1163,21 @@ body {
         padding: 8px;
     }
 
+    /* Header actions adjustments */
+    .header-actions {
+        gap: var(--space-xs);
+    }
+
+    .header-action-btn {
+        width: 40px;
+        height: 40px;
+    }
+
+    .github-link svg {
+        width: 18px;
+        height: 18px;
+    }
+
     /* Page actions adjustments */
     .page-actions {
         margin-bottom: var(--space-md);
@@ -1192,4 +1257,27 @@ body {
     .download-text {
         font-size: 12px;
     }
+
+    /* Header actions adjustments for small screens */
+    .header-actions {
+        gap: 4px;
+    }
+
+    .header-action-btn {
+        width: 32px;
+        height: 32px;
+    }
+
+    .github-link svg {
+        width: 16px;
+        height: 16px;
+    }
+
+    .theme-toggle-header .theme-icon {
+        font-size: 14px;
+    }
+
+    .navigation {
+        padding: var(--space-md);
+    }
 }

themes/default/assets/js/main.js

@@ -443,11 +443,11 @@ class Knowledge {
         document.documentElement.setAttribute('data-theme', theme);
         localStorage.setItem('knowledge-theme', theme);
 
-        // Update toggle button
+        // Update toggle button aria-label
         const toggleBtn = document.querySelector('.theme-toggle-header');
         if (toggleBtn) {
-            toggleBtn.textContent = theme === 'dark' ? '☀️' : '🌙';
-            toggleBtn.setAttribute('aria-label', `Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`);
+            toggleBtn.setAttribute('aria-label', `Alternar para tema ${theme === 'dark' ? 'claro' : 'escuro'}`);
+            toggleBtn.setAttribute('title', `Alternar para tema ${theme === 'dark' ? 'claro' : 'escuro'}`);
         }
 
         // Atualizar meta theme-color para mobile

themes/default/layouts/default.html

@@ -72,9 +72,24 @@ <h1 class="site-title">
 
             <!-- Right side (for future elements like theme toggle, etc.) -->
             <div class="header-right">
-                <button class="theme-toggle-header" aria-label="Toggle dark mode">
-                    🌙
-                </button>
+                <div class="header-actions">
+                    <a href="https://github.com/riligar/knowledge" target="_blank" class="header-action-btn github-link"
+                        title="Ver no GitHub" aria-label="Ver repositório no GitHub">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                            class="icon icon-tabler icons-tabler-outline icon-tabler-brand-github">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                            <path
+                                d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
+                        </svg>
+                    </a>
+
+                    <button class="header-action-btn theme-toggle-header" aria-label="Alternar tema escuro/claro"
+                        title="Alternar tema">
+                        <span class="theme-icon theme-icon-light">☀️</span>
+                        <span class="theme-icon theme-icon-dark">🌙</span>
+                    </button>
+                </div>
             </div>
         </div>
     </header>