diff --git a/index.html b/index.html index fe3cd7e..122bfef 100644 --- a/index.html +++ b/index.html @@ -1322,7 +1322,15 @@ - @@ -1515,10 +1523,34 @@

- -
@@ -1540,10 +1572,19 @@
- - - -
@@ -1676,12 +1734,73 @@
- - + +
@@ -1789,10 +1909,34 @@
- -
@@ -1838,7 +1983,7 @@

- - - -
@@ -1961,19 +2122,19 @@
- - -
diff --git a/public/editors-picks.json b/public/editors-picks.json index 20ca3d5..6186a3a 100644 --- a/public/editors-picks.json +++ b/public/editors-picks.json @@ -1,4 +1,26 @@ [ + { + "type": "album", + "id": 89313048, + "title": "DAYTONA", + "artist": { "id": 3972883, "name": "Pusha T" }, + "releaseDate": "2018-05-25", + "cover": "30288caf-2bdd-4511-a95c-57117936b2b6", + "explicit": true, + "audioQuality": "LOSSLESS", + "mediaMetadata": { "tags": ["LOSSLESS", "HIRES_LOSSLESS"] } + }, + { + "type": "album", + "id": 118353565, + "title": "Dyn-O-Mite", + "artist": { "id": 5755811, "name": "ZelooperZ" }, + "releaseDate": "2019-05-18", + "cover": "c42f0025-9839-4dd2-b5de-9fd05ed5e917", + "explicit": true, + "audioQuality": "LOSSLESS", + "mediaMetadata": { "tags": ["LOSSLESS"] } + }, { "type": "album", "id": 4527433, diff --git a/styles.css b/styles.css index 402f8d8..aaea28a 100644 --- a/styles.css +++ b/styles.css @@ -1603,9 +1603,27 @@ input[type='search']::-webkit-search-cancel-button { .detail-header-actions { display: flex; - gap: 1rem; + gap: 0.5rem; margin-top: 1.5rem; flex-wrap: wrap; + align-items: center; +} + +.detail-header-actions .btn-primary, +.detail-header-actions .btn-secondary { + width: 40px; + height: 40px; + padding: 0; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.detail-header-actions .btn-primary span, +.detail-header-actions .btn-secondary span { + display: none; } .btn-primary { @@ -1695,21 +1713,6 @@ input[type='search']::-webkit-search-cancel-button { background: #dc2626; } -.detail-header-actions .btn-secondary { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 0.5rem; - padding: 0.875rem 1.75rem; - border-radius: 2rem; - font-weight: 600; - font-size: 0.95rem; -} - -.detail-header-actions .btn-secondary:hover { - transform: scale(1.05); -} - .modal-actions .btn-secondary { padding: 0.875rem 1.75rem; border-radius: 2rem; @@ -4609,28 +4612,7 @@ img[src=''] { } .detail-header-actions { - width: auto; margin-top: 0.5em; - display: flex; - align-items: center; - gap: 0.5rem; - } - - .detail-header-actions .btn-primary, - .detail-header-actions .btn-secondary { - width: 40px; - height: 40px; - padding: 0; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - } - - .detail-header-actions .btn-primary span, - .detail-header-actions .btn-secondary span { - display: none; } .now-playing-bar {