From 95f18df4906d9ac4b734abe1fc2f87ca040d0fe3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Tue, 6 Oct 2026 22:43:09 +0200 Subject: [PATCH] swap order --- .../basePages/listPage/brewItem/brewItem.less | 187 +++++++++--------- 1 file changed, 90 insertions(+), 97 deletions(-) diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less index 4fb6a0052..4797660c9 100644 --- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less +++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less @@ -5,14 +5,14 @@ --bg-clr : #EEE; --bg-image : @backgroundImageAlt; --text-clr : black; - --text-shadow-clr : hsl(from var(--text-clr) h calc(100% - s) calc(100% - l)); //inverted text color + --text-shadow-clr : white; + position : relative; display : flex; flex-direction : column; overflow : hidden; font-size : 15px; color : var(--text-clr); - background-color : var(--bg-clr); background-image : var(--bg-image); background-size : cover; @@ -22,13 +22,16 @@ .thumbnail { position : absolute; top : 0; - right : 0; + right : 30px; z-index : -1; - width : 150px; + width : 155px; height : 100%; background-repeat : no-repeat; background-position : right top; background-size : contain; + opacity : 50%; + -webkit-mask-image : linear-gradient(80deg, #0000 20%, #050 40%); + mask-image : linear-gradient(80deg, #0000 20%, #050 40%); } .text { h2 { @@ -133,20 +136,6 @@ padding-right : 30px; border-radius : 5px; box-shadow : 0 4px 5px 0 #333; - .thumbnail { - position : absolute; - top : 0; - right : 30px; - z-index : -1; - width : 155px; - height : 100%; - background-repeat : no-repeat; - background-position : right top; - background-size : contain; - opacity : 50%; - -webkit-mask-image : linear-gradient(80deg, #0000 20%, #050 40%); - mask-image : linear-gradient(80deg, #0000 20%, #050 40%); - } .text { min-height : 54px; h2 { margin-bottom : 5px; } @@ -166,6 +155,87 @@ } } } +.card > .brewItem { + gap : 5px; + justify-content : flex-end; + width : 300px; + height : 400px; + padding : 100px 10px 50px; + background-image : url('@themes/assets/naturalCritLogoBlack.svg'), var(--bg-image); + background-repeat : no-repeat; + background-position : center 20%, center; + background-size : 50%, cover; + border : 3px solid; + border-radius : 10px; + box-shadow : 0 4px 5px #222; + &::before { + position : absolute; + right : 0; + bottom : 0; + left : 0; + z-index : -1; + display : block; + height : 50%; + content : ''; + background-image : linear-gradient(0deg, var(--bg-clr) 0, hsl(from var(--bg-clr) h s l / 0) 90%); + transition : height @defaultDuration; + } + &:hover { + &::before { + height : 100%; + background-image : linear-gradient(0deg, var(--bg-clr) 0, var(--bg-clr) 55%, hsl(from var(--bg-clr) h s l / 0) 65%); + } + .text .description { height : fit-content; } + } + .thumbnail { + position : absolute; + top : 0; + left : 0; + z-index : -2; + width : 100%; + height : 100%; + background-repeat : no-repeat; + background-position : right top; + background-size : cover; + mask-image:unset; + opacity:1; + } + .text { + filter : drop-shadow(0 1px 4px white); + h2 { font-weight : 900; } + .description { + height : 0; + overflow : hidden; + transition : height @defaultDuration; + } + } + .info { + display : grid; + grid-template-areas : 'tags tags tags tags' + 'authors authors authors authors' + 'pages views . .' + 'update update storage .'; + grid-template-columns : 1fr 1fr 1fr 30px; + height : 110px; + filter : drop-shadow(0 1px 2px var(--text-shadow-clr)); + .brewTags { + grid-area : tags; + color : inherit; + i { color : inherit;} + > span { background : hsl(from currentColor h 20% 80%); } + } + .brewAuthors { grid-area : authors; } + .brewPages { grid-area : pages; } + .lastViewed { grid-area : views; } + .lastUpdated { grid-area : update; } + .storage { grid-area : storage; } + } + .links { + bottom : 0; + left : 0; + height : 40px; + } +} .list > .brewItem { display : grid; grid-template-columns : 35% 3fr 150px; @@ -247,85 +317,8 @@ } } } -.card > .brewItem { - gap : 5px; - justify-content : flex-end; - width : 300px; - height : 400px; - padding : 100px 10px 50px; - background-image : url('@themes/assets/naturalCritLogoBlack.svg'), var(--bg-image); - background-repeat : no-repeat; - background-position : center 20%, center; - background-size : 50%, cover; - border : 1px solid; - border-radius : 10px; - box-shadow : 0 4px 5px #222; - &::before { - position : absolute; - right : 0; - bottom : 0; - left : 0; - z-index : -1; - display : block; - height : 50%; - content : ''; - background-image : linear-gradient(0deg, var(--bg-clr) 0, hsl(from var(--bg-clr) h s l / 0) 90%); - transition : height @defaultDuration; - } - &:hover { - &::before { - height : 100%; - background-image : linear-gradient(0deg, var(--bg-clr) 0, var(--bg-clr) 55%, hsl(from var(--bg-clr) h s l / 0) 65%); - } - .text .description { height : fit-content; } - } - .thumbnail { - position : absolute; - top : 0; - left : 0; - z-index : -2; - width : 100%; - height : 100%; - background-repeat : no-repeat; - background-position : right top; - background-size : cover; - } - .text { - filter : drop-shadow(0 1px 4px white); - h2 { font-weight : 900; } - .description { - height : 0; - overflow : hidden; - transition : height @defaultDuration; - } - } - .info { - display : grid; - grid-template-areas : 'tags tags tags tags' - 'authors authors authors authors' - 'pages views . .' - 'update update storage .'; - grid-template-columns : 1fr 1fr 1fr 30px; - height : 110px; - filter : drop-shadow(0 1px 2px white); - .brewTags { - grid-area : tags; - color : inherit; - i { color : inherit;} - > span { background : hsl(from currentColor h 20% 80%); } - } - .brewAuthors { grid-area : authors; } - .brewPages { grid-area : pages; } - .lastViewed { grid-area : views; } - .lastUpdated { grid-area : update; } - .storage { grid-area : storage; } - } - .links { - bottom : 0; - left : 0; - height : 40px; - } -} + +//these media queries are just for the list layout and could be moved inside it, not sure it is a good idea @media screen and (max-width : 1400px) { .brewCollection .brewGroup { &.list {