Skip to content

Add search to the navigation bar and align the layout #70

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

Open
vlnst wants to merge 14 commits into
base: master
Choose a base branch
from
Open

Add search to the navigation bar and align the layout #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
12bd454
Add search field to the navigation bar
vlnst Oct 17, 2026
c5e7b59
Align the navigation bar with page content
vlnst Oct 17, 2026
3c05c89
Group the artist image, name and socials into one header
vlnst Oct 18, 2026
9f6a25d
Align the song header with the cover like the artist header
vlnst Oct 18, 2026
fb523cd
Clean up spacing on song and album pages
vlnst Oct 18, 2026
0a5cc38
Rework song card layout like the page headers
vlnst Oct 18, 2026
b304252
Fix focus rings, hover lift and layout shifts
vlnst Oct 18, 2026
0e57ff7
Keep the navigation bar the same on every page
vlnst Oct 18, 2026
137719a
Fix mobile nav spacing and the gap under the header
vlnst Oct 18, 2026
dbdb46b
Move song lists out of the album and artist panels
vlnst Oct 18, 2026
1fc240c
Keep song views on the same line as the release date
vlnst Oct 18, 2026
346eb55
Center the site name on the desktop homepage
vlnst Oct 18, 2026
5d6cb6d
Keep the version on the left of the desktop homepage
vlnst Oct 18, 2026
44cfea8
Fix artist header overflow on narrow screens
vlnst Oct 18, 2026
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
76 changes: 29 additions & 47 deletions static/style/artist.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,37 @@
.artist {
display: grid;
grid-template-columns: 15em 25em;
grid-template-rows: 6.5em 8.5em 1fr;
gap: 1em 1em;
grid-template-areas:
"image name"
"image social"
"description description"
"songs songs";
display: flex;
flex-direction: column;
gap: 1em;
box-sizing: border-box;
width: 100%;
padding: 0.75rem;
margin: 2rem auto;
border-radius: var(--radius);
background: var(--foreground);
color: var(--text);
}

.artist-header {
display: flex;
gap: 1em;
}

.artist-image {
grid-area: image;
flex-shrink: 0;
width: 15em;
aspect-ratio: 1;
object-fit: cover;
width: 100%;
max-height: 100%;
border-radius: var(--radius);
}

@media only screen and (min-width: 513px) {
.artist-image {
height: 100%;
}
.artist-details {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
gap: 1em;
}

.artist-info {
grid-area: name;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
Expand All @@ -55,18 +56,18 @@
margin: 0;
}

.artist-description {
grid-area: description;
.artist-description > :first-child {
margin-top: 0;
}

.artist-songs {
grid-area: songs;
.artist-description > :last-child {
margin-bottom: 0;
}

.artist-search-songs {
padding: 10px 20px;
border-radius: var(--radius);
background-color: var(--background);
background-color: var(--foreground);
color: var(--text);
border: none;
cursor: pointer;
Expand All @@ -77,11 +78,9 @@

.artist-search-songs:hover {
background: var(--highlighted);
transform: var(--hover-transform);
}

.artist-socials {
grid-area: social;
display: flex;
flex-direction: column;
gap: 0.5em 0;
Expand All @@ -102,7 +101,6 @@

.social:hover {
box-shadow: var(--shadow);
transform: var(--hover-transform);
}

.social-icon {
Expand Down Expand Up @@ -134,28 +132,13 @@
background-color: var(--twitter);
}

@media only screen and (max-width: 512px) {
.artist {
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas:
"image"
"name"
"social"
"description"
"songs";
@media only screen and (max-width: 768px) {
.artist-header {
flex-direction: column;
}
}

@media only screen and (min-width: 513px) and (max-width: 768px) {
.artist {
grid-template-columns: auto auto auto;
grid-template-rows: auto;
grid-template-areas:
"image name"
"image social"
"description description"
"songs songs";
.artist-image {
width: 100%;
}
}

Expand All @@ -180,7 +163,6 @@

.gray_container:hover {
background: var(--highlighted);
transform: var(--hover-transform);
}

.gray_container div {
Expand Down
10 changes: 7 additions & 3 deletions static/style/home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
border-radius: var(--radius);
display: flex;
box-shadow: var(--shadow);
margin: -50px auto auto;
background: var(--foreground);
}

Expand All @@ -34,6 +33,11 @@
height: unset;
}

.search-bar > form input:focus {
outline: 2px solid var(--text-dark);
@media only screen and (min-width: 513px) {
.site-name {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
68 changes: 40 additions & 28 deletions static/style/lyrics.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,57 @@
.song-lyrics {
display: flex;
flex-direction: column;
gap: 1em;
box-sizing: border-box;
width: 100%;
padding: 0.75rem;
margin: 2rem auto;
max-width: 920px;
border-radius: var(--radius);
background: var(--foreground);
color: var(--text);
}

.song-lyric {
margin: 0.33rem;
margin: 0.33rem 0;
line-height: 1.2;
}

.verse > :first-child {
margin-top: 0;
}

.verse > :last-child {
margin-bottom: 0;
}

.header {
display: grid;
grid-template-columns: 12em auto;
grid-template-rows: 3em 3em 6em;
gap: 0 0.75em;
grid-template-areas:
"cover song"
"cover song"
"cover stats";
display: flex;
gap: 0.75em;
}

.header-cover {
flex-shrink: 0;
width: 12em;
aspect-ratio: 1;
object-fit: cover;
border-radius: var(--radius);
}

.header-details {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
gap: 1em;
}

@media only screen and (max-width: 512px) {
.header {
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas:
"cover"
"song"
"stats";
flex-direction: column;
}
}

.header-cover {
grid-area: cover;
width: 100%;
height: 100%;
border-radius: var(--radius);
.header-cover {
width: 100%;
}
}

.song-info {
Expand All @@ -51,8 +64,6 @@
"title"
"artist"
"album";
grid-area: song;
margin-top: 1em;
}

.title {
Expand Down Expand Up @@ -86,22 +97,23 @@

.stats {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: 1fr auto;
grid-template-rows: 1fr;
align-items: end;
gap: 0 1.5em;
grid-template-areas: "release-date views";
grid-area: stats;
margin-top: auto;
}

.stats-release-date {
grid-area: release-date;
font-size: 14px;
margin: 0;
}

.stats-views {
grid-area: views;
font-size: 14px;
margin: 0;
text-align: right;
}

Expand Down
7 changes: 5 additions & 2 deletions static/style/search.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
.song-list > .genius-link {
align-self: flex-end;
margin-bottom: var(--page-gutter);
}

.pagination {
display: inline-block;
margin: auto;
Expand All @@ -14,11 +19,9 @@
}

.pagination a.active {
transform: var(--hover-transform);
background-color: var(--highlighted);
}

.pagination a:hover:not(.active) {
transform: var(--hover-transform);
background-color: var(--foreground);
}
8 changes: 7 additions & 1 deletion static/style/settings.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
padding: 12px;
border-radius: var(--radius);
box-shadow: var(--shadow);
margin: -50px auto auto;
background: var(--foreground);
}

Expand All @@ -21,6 +20,13 @@
font-size: 16px;
}

.settings > form select {
background: var(--background);
color: var(--text);
border: 0;
border-radius: var(--radius);
}

.settings > form option {
background: var(--background);
color: var(--text);
Expand Down
Loading
Loading