Skip to content

Beta.releases #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
luvaary merged 10 commits into from
Dec 14, 2025
Merged

Beta.releases #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
6c86596
Merge pull request #2 from CrescentDB/main
luvaary Dec 14, 2025
3e32301
Update components.css
luvaary Dec 14, 2025
cba2912
Update features.css
luvaary Dec 14, 2025
ac32439
Update main.css
luvaary Dec 14, 2025
2b89e60
Update ui.js
luvaary Dec 14, 2025
469fa2f
Update search.js
luvaary Dec 14, 2025
e140fe9
Update ui.js
luvaary Dec 14, 2025
2c0a507
Update search.js
luvaary Dec 14, 2025
2bc558a
Update app.js
luvaary Dec 14, 2025
85ecbd3
Update index.html
luvaary Dec 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 60 additions & 74 deletions css/components.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
.search-container {
width: 100%;
max-width: 720px;
max-width: 700px;
padding: 0 2rem;
margin-top: 2.5rem;
animation: fadeIn 0.9s cubic-bezier(.2,.8,.2,1) 0.15s backwards;
margin-top: 2rem;
animation: fadeIn 1s ease-out 0.2s backwards;
}

.search-box {
Expand All @@ -13,16 +13,17 @@

.search-input {
width: 100%;
padding: 1.3rem 1.6rem;
padding-right: 4rem;
padding: 1.25rem 1.5rem;
padding-right: 3.5rem;
font-family: 'DM Sans', sans-serif;
font-size: 1rem;
border: 1px solid var(--border);
border-radius: 18px;
background: linear-gradient(180deg, var(--bg-card), var(--bg-secondary));
border-radius: 16px;
background: var(--bg-card);
backdrop-filter: blur(10px);
color: var(--text-primary);
box-shadow: 0 10px 30px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.03);
transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
transition: all 0.3s ease;
box-shadow: var(--shadow);
}

.search-input::placeholder {
Expand All @@ -31,29 +32,25 @@

.search-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.15), 0 18px 40px rgba(0,0,0,0.35);
transform: translateY(-1px);
border-color: var(--accent-soft);
box-shadow: var(--shadow-hover);
}

.search-btn {
position: absolute;
right: 10px;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: var(--bg-secondary);
border: 1px solid var(--border);
padding: 0.6rem;
border-radius: 12px;
background: none;
border: none;
padding: 0.75rem;
cursor: pointer;
color: var(--text-muted);
transition: all 0.2s ease;
transition: color 0.2s ease;
}

.search-btn:hover {
color: var(--accent);
border-color: var(--accent-soft);
background: var(--bg-card);
}

.search-btn svg {
Expand All @@ -65,41 +62,39 @@
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem;
margin-top: 1.6rem;
animation: fadeIn 1s cubic-bezier(.2,.8,.2,1) 0.3s backwards;
gap: 0.5rem;
margin-top: 1.5rem;
animation: fadeIn 1s ease-out 0.4s backwards;
}

.api-chip {
padding: 0.55rem 1.1rem;
padding: 0.5rem 1rem;
font-size: 0.75rem;
border-radius: 999px;
border: 1px solid var(--border);
border-radius: 20px;
background: var(--bg-card);
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s ease;
letter-spacing: 0.04em;
letter-spacing: 0.02em;
}

.api-chip:hover {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--text-primary);
transform: translateY(-1px);
}

.api-chip.active {
background: var(--accent);
border-color: var(--accent);
color: white;
box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.35);
}

.results-section {
width: 100%;
max-width: 960px;
padding: 2.5rem 2rem;
max-width: 900px;
padding: 2rem;
margin-top: 2rem;
display: none;
}
Expand All @@ -108,14 +103,14 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.75rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border);
}

.results-header h2 {
font-family: 'Cormorant Garamond', serif;
font-size: 1.35rem;
font-size: 1.25rem;
font-weight: 400;
color: var(--text-secondary);
}
Expand All @@ -127,35 +122,40 @@

.results-grid {
display: grid;
gap: 1.25rem;
gap: 1rem;
}

.result-card {
position: relative;
padding: 1.6rem 1.6rem 1.7rem;
background: linear-gradient(180deg, var(--bg-card), var(--bg-secondary));
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
border-radius: 12px;
padding: 1.5rem;
transition: all 0.3s ease;
cursor: pointer;
animation: slideUp 0.5s cubic-bezier(.2,.8,.2,1) backwards;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
animation: slideUp 0.5s ease-out backwards;
position: relative;
}

.result-card:hover {
transform: translateY(-3px);
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
border-color: var(--accent-soft);
box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

@keyframes slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

.result-source {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.65rem;
font-size: 0.7rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 0.8rem;
letter-spacing: 0.1em;
margin-bottom: 0.75rem;
}

.source-dot {
Expand All @@ -164,24 +164,24 @@
border-radius: 50%;
}

.source-wikipedia { background: #888; }
.source-wikipedia { background: #636363; }
.source-openlib { background: #d4a373; }
.source-dictionary { background: #7ecb8a; }
.source-dictionary { background: #81c784; }
.source-nasa { background: #0b3d91; }

.result-title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.35rem;
font-size: 1.25rem;
font-weight: 400;
color: var(--text-primary);
margin-bottom: 0.6rem;
margin-bottom: 0.5rem;
line-height: 1.4;
}

.result-excerpt {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.65;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
Expand All @@ -190,8 +190,8 @@

.result-meta {
display: flex;
gap: 1.2rem;
margin-top: 1.1rem;
gap: 1rem;
margin-top: 1rem;
font-size: 0.75rem;
color: var(--text-muted);
}
Expand All @@ -200,23 +200,22 @@
position: absolute;
top: 1rem;
right: 1rem;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1rem;
transition: all 0.2s ease;
}

.bookmark-btn:hover {
background: var(--accent);
border-color: var(--accent);
color: white;
transform: scale(1.12);
transform: scale(1.1);
}

.loading {
Expand All @@ -231,27 +230,14 @@
}

.loader {
width: 42px;
height: 42px;
width: 40px;
height: 40px;
border: 2px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.9s linear infinite;
}

@keyframes slideUp {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
animation: spin 1s linear infinite;
}

@keyframes spin {
to {
transform: rotate(360deg);
}
to { transform: rotate(360deg); }
}
Loading