f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-11-04 20:29:01 +00:00
Code Wiki Activity

swap order

Browse Source
This commit is contained in:
Víctor Losada Hernández
2026-10-06 22:43:09 +02:00
parent 414c8e1200
commit 95f18df490
1 changed files with 90 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
+90 -97
View File
@@ -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 {