ulfr/recipe-mockup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restructure recipe grid
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m11s
Details

Browse Source
This commit is contained in:
Rafał
2026-04-08 22:53:17 +02:00
parent 165f39d0b7
commit 6bf50f67ad
5 changed files with 94 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
index.html
View File

@@ -11,7 +11,7 @@
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>Recipe App - Modular</title>
<link rel="manifest" href="./manifest.webmanifest?v=20260408-82">
<link rel="manifest" href="./manifest.webmanifest?v=20260408-97">
<link rel="icon" type="image/png" sizes="192x192" href="./icons/icon-192.png">
<link rel="apple-touch-icon" href="./icons/apple-touch-icon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
@@ -233,9 +233,16 @@
}
#main-view,
#main-view > div:last-child,
#recipe-grid {
#recipe-grid,
#planner-picker-grid {
background: #2d2e2b !important;
}
#recipe-grid,
#planner-picker-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem !important;
align-items: stretch;
}
#planner-view,
#planner-view > div:first-child,
#planner-scroll,
@@ -255,24 +262,82 @@
}
/* Cards and sheets */
#recipe-grid > * {
#recipe-grid > *,
#planner-picker-grid > * {
background: #393937 !important;
border: none !important;
border-radius: 1.75rem !important;
box-shadow: none !important;
transition: transform 180ms ease, box-shadow 180ms ease !important;
}
#recipe-grid > *:hover {
#recipe-grid > .recipe-list-card,
#planner-picker-grid > .recipe-list-card {
border-radius: 1.25rem !important;
height: 11.9rem;
}
#recipe-grid > .recipe-list-card .recipe-browser-card-media,
#planner-picker-grid > .recipe-list-card .recipe-browser-card-media {
height: 5.25rem;
}
#recipe-grid > .recipe-list-card .recipe-browser-card-body,
#planner-picker-grid > .recipe-list-card .recipe-browser-card-body {
padding: 0.58rem;
}
#recipe-grid > .recipe-list-card .recipe-browser-card-title,
#planner-picker-grid > .recipe-list-card .recipe-browser-card-title {
display: -webkit-box;
min-height: 2.76rem;
margin-bottom: 0.55rem;
font-size: 0.66rem;
font-weight: 400 !important;
line-height: 0.92rem;
overflow: hidden;
text-decoration: none !important;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
#recipe-grid > .recipe-list-card .recipe-browser-card-meta,
#planner-picker-grid > .recipe-list-card .recipe-browser-card-meta {
margin-bottom: 0.45rem;
gap: 0.2rem;
font-size: 0.58rem;
line-height: 0.78rem;
flex-wrap: nowrap;
}
#recipe-grid > .recipe-list-card .recipe-browser-card-meta > div,
#planner-picker-grid > .recipe-list-card .recipe-browser-card-meta > div {
min-width: 0;
white-space: nowrap;
}
#recipe-grid > .recipe-list-card .recipe-browser-card-meta i,
#planner-picker-grid > .recipe-list-card .recipe-browser-card-meta i {
font-size: 0.52rem;
}
#recipe-grid > .recipe-list-card .recipe-browser-card-labels,
#planner-picker-grid > .recipe-list-card .recipe-browser-card-labels {
gap: 0.25rem;
}
#recipe-grid > .recipe-list-card .recipe-browser-card-label,
#planner-picker-grid > .recipe-list-card .recipe-browser-card-label {
padding: 0.14rem 0.36rem;
font-size: 0.54rem;
line-height: 0.72rem;
}
#recipe-grid > *:hover,
#planner-picker-grid > *:hover {
transform: translateY(-2px);
box-shadow: none !important;
}
#recipe-grid > * img {
#recipe-grid > * img,
#planner-picker-grid > * img {
transition: transform 240ms ease;
}
#recipe-grid > *:hover img {
#recipe-grid > *:hover img,
#planner-picker-grid > *:hover img {
transform: scale(1.04);
}
#recipe-grid > * > div:first-child::after,
#planner-picker-grid > * > div:first-child::after,
#rd-hero::after {
content: '';
position: absolute;
@@ -295,7 +360,9 @@
0 5px 10px rgba(0, 0, 0, 0.16),
0 14px 22px rgba(0, 0, 0, 0.24),
0 22px 34px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
inset 0 1px 0 rgba(255, 255, 255, 0.04),
inset 0 2px 6px rgba(0, 0, 0, 0.16),
inset 0 -1px 2px rgba(255, 255, 255, 0.02) !important;
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
@@ -322,7 +389,9 @@
0 6px 12px rgba(0, 0, 0, 0.18),
0 16px 24px rgba(0, 0, 0, 0.24),
0 24px 36px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 2px 7px rgba(0, 0, 0, 0.18),
inset 0 -1px 2px rgba(255, 255, 255, 0.03) !important;
}
#recipe-search-input,
#planner-picker-search {
@@ -531,7 +600,7 @@
</div>
<script>
const APP_ASSET_VERSION = '20260408-82';
const APP_ASSET_VERSION = '20260408-97';
const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
const APP_VERSION_QUERY_KEY = 'appv';
@@ -565,7 +634,7 @@
})();
</script>
<script type="module">
const appVersion = window.__APP_ASSET_VERSION__ || '20260408-82';
const appVersion = window.__APP_ASSET_VERSION__ || '20260408-97';
const recoveryKey = `recipe-app-recovery-${appVersion}`;
function renderBootstrapError(message) {