diff --git a/css/style.css b/css/style.css index aecc7a8..9a16e4a 100644 --- a/css/style.css +++ b/css/style.css @@ -413,7 +413,6 @@ footer { padding: 1.8rem; font-size: 0.9rem; box-shadow: 0 -4px 20px rgba(255,20,147,0.3); - margin-left: 240px; } @media (max-width: 900px) { @@ -1615,3 +1614,178 @@ footer { background: linear-gradient(135deg, var(--pink-500), #1a1a3e); } +/* Search */ +.sidebar-search { + position: relative; + margin-top: 0.5rem; + margin-bottom: 0.25rem; +} + +.sidebar-search-input { + width: 100%; + padding: 0.55rem 0.8rem; + border: 2px solid rgba(255,255,255,0.15); + border-radius: 10px; + font-size: 0.85rem; + color: var(--white); + background: rgba(0,0,0,0.2); + font-family: inherit; + outline: none; + transition: border-color 0.2s, background 0.2s; + box-sizing: border-box; +} + +.sidebar-search-input::placeholder { + color: rgba(255,255,255,0.4); +} + +.sidebar-search-input:focus { + border-color: var(--pink-400); + background: rgba(0,0,0,0.3); +} + +.search-results-dropdown { + position: fixed; + background: var(--white); + border-radius: 12px; + box-shadow: 0 10px 40px rgba(0,0,0,0.2), 0 4px 10px rgba(255,20,147,0.15); + border: 2px solid var(--pink-200); + z-index: 9999; + display: none; + max-height: 400px; + overflow-y: auto; + margin-top: 0.3rem; +} + +.search-result-item { + padding: 0.75rem 0.9rem; + cursor: pointer; + border-bottom: 1px solid var(--pink-100); + transition: background 0.15s; +} + +.search-result-item:last-child { + border-bottom: none; +} + +.search-result-item:hover, +.search-result-item.active { + background: var(--pink-50); +} + +.search-result-title { + display: flex; + align-items: center; + gap: 0.4rem; + margin-bottom: 0.2rem; + flex-wrap: wrap; +} + +.search-result-page { + font-size: 0.72rem; + font-weight: 700; + color: var(--pink-500); + text-transform: uppercase; + letter-spacing: 0.3px; +} + +.search-result-category { + font-size: 0.68rem; + font-weight: 600; + color: var(--pink-400); + background: var(--pink-100); + padding: 0.1rem 0.45rem; + border-radius: 999px; +} + +.search-result-heading { + font-size: 0.92rem; + font-weight: 700; + color: var(--pink-700); + margin-bottom: 0.15rem; +} + +.search-result-snippet { + font-size: 0.82rem; + color: var(--pink-800); + line-height: 1.4; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} + +.search-no-results { + padding: 1rem 0.9rem; + font-size: 0.88rem; + color: var(--pink-400); + text-align: center; + font-style: italic; +} + +.search-highlight { + background: var(--pink-200); + color: var(--pink-900); + font-weight: 700; + border-radius: 2px; + padding: 0 0.1rem; +} + +/* Dark mode search styles */ +[data-theme="dark"] .sidebar-search-input { + border-color: rgba(255,255,255,0.1); + color: var(--text-primary); + background: rgba(255,255,255,0.05); +} + +[data-theme="dark"] .sidebar-search-input::placeholder { + color: var(--text-secondary); +} + +[data-theme="dark"] .sidebar-search-input:focus { + border-color: var(--border-accent); + background: rgba(255,255,255,0.08); +} + +[data-theme="dark"] .search-results-dropdown { + background: var(--bg-card); + border-color: var(--border-primary); + box-shadow: 0 10px 40px rgba(0,0,0,0.4); +} + +[data-theme="dark"] .search-result-item { + border-bottom-color: var(--border-primary); +} + +[data-theme="dark"] .search-result-item:hover, +[data-theme="dark"] .search-result-item.active { + background: var(--bg-secondary); +} + +[data-theme="dark"] .search-result-page { + color: var(--text-heading-strong); +} + +[data-theme="dark"] .search-result-category { + color: var(--text-heading); + background: rgba(255,20,147,0.1); +} + +[data-theme="dark"] .search-result-heading { + color: var(--text-heading); +} + +[data-theme="dark"] .search-result-snippet { + color: var(--text-secondary); +} + +[data-theme="dark"] .search-no-results { + color: var(--text-secondary); +} + +[data-theme="dark"] .search-highlight { + background: rgba(255,20,147,0.2); + color: var(--text-heading); +} + diff --git a/index.html b/index.html index 1153116..fcd38e1 100644 --- a/index.html +++ b/index.html @@ -157,9 +157,13 @@ +
+ + + + + + + + + + + + + + + + + + + +