a tool for shared writing and social publishing
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

set card-width var with units as well

+6 -3
+3
app/globals.css
··· 20 20 21 21 --list-marker-width: 36px; 22 22 --card-width-unitless: min(624, calc(var(--page-width-unitless) - 12)); 23 + --card-width-units: min(624px, calc(100vw - 12px)); 23 24 } 24 25 @media (max-width: 640px) { 25 26 :root { ··· 30 31 @media (min-width: 640px) { 31 32 :root { 32 33 --card-width-unitless: min(624, calc(var(--page-width-unitless) - 128)); 34 + --card-width-units: min(624px, calc(100vw - 128px)); 33 35 } 34 36 } 35 37 ··· 39 41 624, 40 42 calc((var(--page-width-unitless) / 2) - 32) 41 43 ); 44 + --card-width-units: min(624px, calc((100vw / 2) - 32px)); 42 45 } 43 46 } 44 47
+3 -3
components/Cards.tsx
··· 29 29 > 30 30 <div 31 31 className="spacer flex justify-end items-start" 32 - style={{ width: `calc(50vw - (1px * (var(--card-width-unitless)/2))` }} 32 + style={{ width: `calc(50vw - ((var(--card-width-units)/2))` }} 33 33 onClick={(e) => { 34 34 e.currentTarget === e.target && blurCard(); 35 35 }} ··· 55 55 ))} 56 56 <div 57 57 className="spacer" 58 - style={{ width: `calc(50vw - (1px * (var(--card-width-unitless)/2))` }} 58 + style={{ width: `calc(50vw - ((var(--card-width-units)/2))` }} 59 59 onClick={(e) => { 60 60 e.currentTarget === e.target && blurCard(); 61 61 }} ··· 103 103 id={elementId.card(props.entityID).container} 104 104 style={{ 105 105 backgroundColor: "rgba(var(--bg-card), var(--bg-card-alpha))", 106 - width: "calc(1px * var(--card-width-unitless))", 106 + width: "var(--card-width-units)", 107 107 }} 108 108 className={` 109 109 card