diff --git a/core/themes/olivero/css/components/feed.css b/core/themes/olivero/css/components/feed.css index 1fb0c963755d092a3b6966350b9ded0e67f07ad5..a0582022c30a421bb244a66042fe2ad39bc78dbf 100644 --- a/core/themes/olivero/css/components/feed.css +++ b/core/themes/olivero/css/components/feed.css @@ -22,6 +22,13 @@ color: var(--color--primary-50); } +@media (max-width: 75rem) { + .feed-icon { + flex-direction: row-reverse; + justify-content: flex-end; + } +} + .feed-icon__label { flex-shrink: 0; letter-spacing: 0.08em; @@ -38,6 +45,7 @@ height: var(--sp1-5); margin-inline-start: var(--sp0-5); color: var(--color--white); + border-radius: 2px; background-color: var(--color--primary-50); } @@ -45,3 +53,9 @@ vertical-align: top; fill: currentColor; } + +@media (max-width: 75rem) { + .feed-icon__icon { + margin-inline: 0 var(--sp0-5); + } +} diff --git a/core/themes/olivero/css/components/feed.pcss.css b/core/themes/olivero/css/components/feed.pcss.css index 1229c7f8ef2137fd2b2ac2f22dd05e497a672dd5..4b13c8873265da9987adf8f7631892bdbdfc15aa 100644 --- a/core/themes/olivero/css/components/feed.pcss.css +++ b/core/themes/olivero/css/components/feed.pcss.css @@ -14,6 +14,11 @@ &:hover { color: var(--color--primary-50); } + + @media (--max-nav) { + flex-direction: row-reverse; + justify-content: flex-end; + } } .feed-icon__label { @@ -32,10 +37,15 @@ height: var(--sp1-5); margin-inline-start: var(--sp0-5); color: var(--color--white); + border-radius: 2px; background-color: var(--color--primary-50); & svg { vertical-align: top; fill: currentColor; } + + @media (--max-nav) { + margin-inline: 0 var(--sp0-5); + } }