Styling (#33)

* Update main.ts * Update favorite.ts Center brands * Update main.ts Not sure what it's used for * Update favorite-buttons.ts This size is reachable, "VW" make this icon big on larger screens but very small on mobile. * Update favorite.ts
punxaphil · Mar 4, 2022 · a0d8f32 · a0d8f32
1 parent ea4e486
commit a0d8f32
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/src/components/favorite-buttons.ts b/src/components/favorite-buttons.ts
@@ -146,7 +146,10 @@ class FavoriteButtons extends LitElement {
         flex-direction: column;
       }
       .browse {
-        --mdc-icon-size: 2vw;
+        --mdc-icon-size: 1.5rem;
+        text-align: right;
+        padding-right: .5rem;
+        margin-left: -.5rem;
       }
       .browse:focus,
       .browse:hover {

diff --git a/src/components/favorite.ts b/src/components/favorite.ts
@@ -40,8 +40,7 @@ class Favorite extends LitElement {
         box-shadow: var(--sonos-int-box-shadow);
       }
       .image {
-        background-position-x: center;
-        background-position-y: bottom;
+        background-position: center center;
         background-repeat: no-repeat;
         background-size: contain;
         position: relative;
@@ -50,8 +49,9 @@ class Favorite extends LitElement {
         padding-bottom: 100%;
       }
       .title {
-        width: calc(100% - 0.2rem);
-        font-size: 0.6rem;
+        width: calc(100% - 1.2rem);
+        font-size: 1rem;
+        padding: 0px 0.5rem;
       }
       .title-with-image {
         text-overflow: ellipsis;