From b23be75978c87d48bbc7b2029f1d7bc9e50b3b4c Mon Sep 17 00:00:00 2001 From: Eltrac Date: Tue, 29 Apr 2025 11:38:24 +0800 Subject: feat: better card section page - show 2 cards on one row - show card statistics - use wider container for the page Former-commit-id: 5f25a26c7e77335e90c2b954784fa98aed3ec864 --- assets/css/utils/_utility.scss | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) (limited to 'assets/css/utils') diff --git a/assets/css/utils/_utility.scss b/assets/css/utils/_utility.scss index a54268b3..9b857fdb 100644 --- a/assets/css/utils/_utility.scss +++ b/assets/css/utils/_utility.scss @@ -29,22 +29,31 @@ figure { } .outbox { - display: flex; - justify-content: center; + display: flex; + justify-content: center; + width: 100%; - // Default width - width: 100%; + @media screen and (min-width: 768px) { + width: calc(var(--page-width) + 10rem); + margin: 0 -5rem; + } - // Properly interpolate calc() in media queries + @media screen and (min-width: 1200px) { + width: calc(var(--page-width) + 20rem); + margin: 0 -10rem; + } + + &.small { @media screen and (min-width: 768px) { - width: calc(var(--page-width) + 5rem * 2); - margin: 0 -5rem; + width: calc(var(--page-width) + 4rem); + margin: 0 -2rem; } @media screen and (min-width: 1200px) { - width: calc(var(--page-width) + 10rem * 2); - margin: 0 -10rem; + width: calc(var(--page-width) + 10rem); + margin: 0 -5rem; } + } } .font-mono { -- cgit v1.2.3