A space to discuss and keep up software development and manage your software career
An inclusive community for gaming enthusiasts
News and discussion of science and technology such as AI, VR, cryptocurrency, quantum computing, and more.
From composing and gigging to gear, hot music takes, and everything in between.
Discussing AI software development, and showing off what we're building.
Memes and software development shitposting
Movie and TV enthusiasm, criticism and everything in-between.
Web design, graphic design and everything in-between
A community for makers, hobbyists, and professionals to discuss Arduino, Raspberry Pi, 3D printing, and much more.
For engineers building software at scale. We discuss architecture, cloud-native, and SRE—the hard-won lessons you can't just Google
Discussing the core forem open source software project — features, bugs, performance, self-hosting.
Your central hub for all things security. From ethical hacking and CTFs to GRC and career development, for beginners and pros alike
A general discussion space for the Forem community. If it doesn't have a home elsewhere, it belongs here
A collaborative community for all things Crypto—from Bitcoin to protocol development and DeFi to NFTs and market analysis.
css vars are awesome. Here's some cool things i've been using them for.
Flexible container widths without having to overwrite the rule:
:root { --container-sm: 60rem; --container-md: 110rem; --container-lg: 126rem; } .g-container { max-width: var(--container-width, var(--container-md)); width: calc(100% - var(--container-gap, 2rem)); margin-left: auto; margin-right: auto; } ... <article class="c-supportPlans g-container"> ... .c-supportPlans { --container-width: var(--container-xl); ... }
Font styles management:
--muli-1: 800 1.6rem/1.25 'Muli', sans-serif; --muli-2: 700 1.4rem/1.25 'Muli', sans-serif; --muli-3: 400 1.2rem/2 'Muli', sans-serif; --open-sans-1: 800 3.2rem/1.375 'Open Sans', sans-serif; --open-sans-2: 400 2.4rem/1.167 'Open Sans', sans-serif; --open-sans-3: 800 2rem/1.4 'Open Sans', sans-serif; ... .c-supportPlans-plan h2 { font: var(--open-sans-3); }
and declarative simple animations:
@keyframes fromTo { from { transform: var(--from); } to { transform: var(--to); } } .c-industriesBanner-list { --from: translateX(0); --to: translateX(calc(-100% + -3rem)); animation: linear 20s fromTo infinite; display: grid; grid-gap: 3rem; gap: 3rem; grid-auto-flow: column; grid-auto-columns: 15rem; }
codepen.io/dillonbheadley/pen/oNXNyPa
fun stuff!
Thanks for sharing this @dillonheadley . Awesome work! It's always so helpful to see how people implement the tech in their own project. Let me link this in the code notes 👏
Here's one more to manage buttons with vars: codepen.io/dillonbheadley/pen/PoqWqxq
For sure! 👍🏼 Love your posts btw!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
css vars are awesome. Here's some cool things i've been using them for.
Flexible container widths without having to overwrite the rule:
Font styles management:
and declarative simple animations:
codepen.io/dillonbheadley/pen/oNXNyPa
fun stuff!
Thanks for sharing this @dillonheadley . Awesome work! It's always so helpful to see how people implement the tech in their own project. Let me link this in the code notes 👏
Here's one more to manage buttons with vars: codepen.io/dillonbheadley/pen/PoqWqxq
For sure! 👍🏼 Love your posts btw!