Skip to content

Commit

Permalink
New visual style
Browse files Browse the repository at this point in the history
  • Loading branch information
mitchray committed Jan 21, 2022
1 parent 3ed4e70 commit 8413d92
Show file tree
Hide file tree
Showing 92 changed files with 855 additions and 1,083 deletions.
5 changes: 5 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
# Changelog

## [0.30.0] - 2022-01-21
### Changed
- New visual style for many items
- Overhauled color system

## [0.22.0] - 2021-12-27
### Added
- Basic media keys ([mediasession](https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API)) support in [browsers which have it](https://caniuse.com/mdn-api_mediasession)
Expand Down
6 changes: 3 additions & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

34 changes: 17 additions & 17 deletions public/css/containerqueries/album.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,18 @@
.details {
display: flex;
gap: var(--spacing-xl);
margin-bottom: 0;
padding: unset;
}

.details,
.name {
background-color: unset;
box-shadow: unset;
}

.name {
padding: unset;
}

.title {
Expand All @@ -17,17 +29,11 @@
}
}

@container album-details-wrapper size(min-width: 650px) {
.actions {
flex-direction: row;
gap: var(--spacing-xxl);
align-items: center;
}
}

@container album-details-wrapper size(min-width: 800px) {
.title {
font-size: 50px;
font-weight: 600;
letter-spacing: -0.014em;
}

.artist {
Expand All @@ -40,8 +46,8 @@
}
}

@container album-page-wrapper (min-width: 1100px) {
.container {
@container album-page-wrapper (min-width: 1200px) {
.wrapper > .container {
display: flex;
overflow: hidden;
}
Expand All @@ -51,18 +57,12 @@
}

.details-container {
width: 340px;
border-right: 1px solid var(--color-border);
width: 400px;
padding-right: var(--spacing-xl);
margin-right: var(--spacing-xxl);
flex-shrink: 0;
}

.songs-container {
flex: 1;
}

.songs {
max-width: 800px;
}
}
46 changes: 8 additions & 38 deletions public/css/containerqueries/artist.css
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@
.title {
font-size: 40px;
text-align: left;
color: white;
margin-bottom: 0.2em;
padding-right: var(--spacing-xxl);
padding-top: var(--spacing-xl);
padding-top: var(--spacing-lg);
padding-left: calc(180px + var(--spacing-xxl));
}

.art-container {
Expand All @@ -33,44 +33,13 @@
margin-left: calc(180px + var(--spacing-xxl));
position: relative;
}

.header {
display: flex;
align-items: end;
min-height: 135px;
padding-bottom: var(--spacing-md);
padding-left: calc(180px + var(--spacing-xxl) * 2);
position: relative;
overflow: hidden;
margin-top: calc(-1 * var(--spacing-xxl));
margin-left: calc(-1 * var(--spacing-xxl));
margin-right: calc(-1 * var(--spacing-xxl));
}

.header__image-copy,
.header__image-blur {
background-color: hsla(0, 0%, 40%, 0.7);
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: -20px; /* match the blur amount */
pointer-events: none;
z-index: -1;
background-size: cover;
background-position: center 60%;
background-attachment: fixed;
}

.header__image-blur {
filter: saturate(200%) contrast(70%) brightness(60%) blur(20px);
}
}

@container artist-info-wrapper size(min-width: 800px) {
.title {
font-size: 50px;
font-weight: 600;
letter-spacing: -0.014em;
}

.art-container {
Expand All @@ -82,11 +51,12 @@
margin-left: calc(240px + var(--spacing-xxl));
}

.header {
padding-left: calc(240px + var(--spacing-xxl) * 2);
.title {
padding-top: var(--spacing-xxl);
padding-left: calc(240px + var(--spacing-xxl));
}

.profile {
margin-top: -100px;
margin-top: -90px;
}
}
Loading

0 comments on commit 8413d92

Please sign in to comment.