diff options
| -rw-r--r-- | assets/static/css/style.css | 59 |
1 files changed, 40 insertions, 19 deletions
diff --git a/assets/static/css/style.css b/assets/static/css/style.css index f714f3c..517b9ce 100644 --- a/assets/static/css/style.css +++ b/assets/static/css/style.css @@ -6,7 +6,7 @@ CUSTOM PROPERTIES ============================================================================= */ :root { - /* Named palette */ + /* Palette */ --black: light-dark(#575279, #393b44); --red: light-dark(#b4637a, #c94f6d); --green: light-dark(#618774, #81b29a); @@ -17,7 +17,7 @@ CUSTOM PROPERTIES --white: light-dark(#e5e9f0, #dfdfe0); --orange: light-dark(#d7827e, #f4a261); --pink: light-dark(#d685af, #d67ad2); - /* Dim palette */ + --dim-black: light-dark(#504c6b, #30323a); --dim-red: light-dark(#a5576d, #ab435d); --dim-green: light-dark(#597668, #6e9783); @@ -27,7 +27,7 @@ CUSTOM PROPERTIES --dim-cyan: light-dark(#50848c, #54aeb0); --dim-white: light-dark(#c8cfde, #bebebe); --dim-foreground: light-dark(#4c4769, #aeafb0); - /* Bright palette */ + --bright-black: light-dark(#5f5695, #575860); --bright-red: light-dark(#c26d85, #d16983); --bright-green: light-dark(#629f81, #8ebaa4); @@ -37,14 +37,10 @@ CUSTOM PROPERTIES --bright-cyan: light-dark(#5ca7b4, #7ad5d6); --bright-white: light-dark(#e6ebf3, #e4e4e5); --bright-foreground: light-dark(#625c87, #d6d6d7); - /* Semantic */ + --foreground: light-dark(#575279, #cdcecf); --background: light-dark(#faf4ed, #192330); - /* Layout */ - --measure: 60ch; - --column-min-width: calc(1/3 * 100vw); - --column-max-width: 100%; - /* Gradient border — reused in header, footer */ + --gradient-border: linear-gradient( to right, var(--foreground), @@ -52,6 +48,19 @@ CUSTOM PROPERTIES var(--foreground) ); + /* Layout */ + --measure: 60ch; + --column-min-width: calc(1/3 * 100vw); + --column-max-width: 100%; + + --breakout-xxs: 2rem; + --breakout-xs: 4rem; + --breakout-sm: 8rem; + --breakout-md: 12rem; + --breakout-lg: 16rem; + --breakout-xl: 24rem; + --breakout-xxl: 32rem; + /* Responsive layout */ @media (min-width: 500px) { --column-max-width: var(--measure); @@ -693,29 +702,39 @@ img { width: 75%; } + &.breakout-xxs { + width: calc(100% + 2 * var(--breakout-xxs)); + transform: translateX(calc(-1 * var(--breakout-xxs))); + } + &.breakout-xs { - width: calc(100% + 16rem); - transform: translateX(-8rem); + width: calc(100% + 2 * var(--breakout-xs)); + transform: translateX(calc(-1 * var(--breakout-xs))); } &.breakout-sm { - width: calc(100% + 24rem); - transform: translateX(-12rem); + width: calc(100% + 2 * var(--breakout-sm)); + transform: translateX(calc(-1 * var(--breakout-sm))); } &.breakout-md { - width: calc(100% + 32rem); - transform: translateX(-16rem); + width: calc(100% + 2 * var(--breakout-md)); + transform: translateX(calc(-1 * var(--breakout-md))); } &.breakout-lg { - width: calc(100% + 48rem); - transform: translateX(-24rem); + width: calc(100% + 2 * var(--breakout-lg)); + transform: translateX(calc(-1 * var(--breakout-lg))); } &.breakout-xl { - width: calc(100% + 64rem); - transform: translateX(-32rem); + width: calc(100% + 2 * var(--breakout-xl)); + transform: translateX(calc(-1 * var(--breakout-xl))); + } + + &.breakout-xxl { + width: calc(100% + 2 * var(--breakout-xxl)); + transform: translateX(calc(-1 * var(--breakout-xxl))); } &.breakout-full { @@ -723,11 +742,13 @@ img { margin-left: calc(50% - 50vw); } + &.breakout-xxs, &.breakout-xs, &.breakout-sm, &.breakout-md, &.breakout-lg, &.breakout-xl, + &.breakout-xxl, &.breakout-full { max-width: 100vw; } |