lingo.lol is one of the many independent Mastodon servers you can use to participate in the fediverse.
A place for linguists, philologists, and other lovers of languages.

Server stats:

55
active users

#sass

0 posts0 participants0 posts today
Frontend Dogma<p>Step Gradients With a Given Number of Steps, by <span class="h-card" translate="no"><a href="https://mastodon.social/@anatudor" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>anatudor</span></a></span> (@frontendmasters.com):</p><p><a href="https://frontendmasters.com/blog/step-gradients-with-a-given-number-of-steps/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">frontendmasters.com/blog/step-</span><span class="invisible">gradients-with-a-given-number-of-steps/</span></a></p><p><a href="https://mas.to/tags/gradients" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>gradients</span></a> <a href="https://mas.to/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://mas.to/tags/sass" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>sass</span></a> <a href="https://mas.to/tags/svg" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>svg</span></a> <a href="https://mas.to/tags/filters" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filters</span></a></p>
Ana Tudor 🐯<p>Using CSS variables solves both these problems, but we cannot use <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> variables inside the <a href="https://mastodon.social/tags/Sass" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Sass</span></a> `mix()` function, we have to use the CSS `color-mix()`. This means the compiled output looks way uglier.</p><p>You can check it out in this <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> demo <a href="https://codepen.io/thebabydino/pres/bNdjKwJ" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pres/bN</span><span class="invisible">djKwJ</span></a></p><p><a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/cssVariables" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssVariables</span></a></p>
Ana Tudor 🐯<p>Given the end steps (00272b &amp; e0ff4f) + a number n of steps, create a gradient with n equal &amp; equidistant steps.</p><p>Generating them in a <a href="https://mastodon.social/tags/Sass" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Sass</span></a> loop is always an option, but every gradient with different end steps gets its own long stop list &amp; modifying an end step in DevTools doesn't change ALL steps. 🥴</p><p>You can see it in the live demo <a href="https://codepen.io/thebabydino/pen/xbxeyOM" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/xbx</span><span class="invisible">eyOM</span></a></p><p><a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a></p>
Ana Tudor 🐯<p>Someone asked how to create such cross-browser wave dividers that keep the same height as the width changes, so here's my take on it <a href="https://www.reddit.com/r/css/comments/1kcmabf/comment/mq5ck6m/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">reddit.com/r/css/comments/1kcm</span><span class="invisible">abf/comment/mq5ck6m/</span></a></p><p>Live on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> <a href="https://codepen.io/thebabydino/pen/PwwQxdb?editors=0100" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/Pww</span><span class="invisible">Qxdb?editors=0100</span></a></p><p>`mask` is another option, but needs an extra container and container query units, so not as well supported, plus it wouldn't be exactly the same shape.</p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/clipPath" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>clipPath</span></a> <a href="https://mastodon.social/tags/cssClipPath" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssClipPath</span></a> <a href="https://mastodon.social/tags/Sass" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Sass</span></a> <a href="https://mastodon.social/tags/maths" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>maths</span></a> <a href="https://mastodon.social/tags/cssMaths" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssMaths</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a></p>
Ana Tudor 🐯<p>Saw a <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> demo using... a lot! of elements (screen 1) and quite a bit of <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> to create a simple loader, so I forked it and made a 1 div version (screen 2) in under 30 CSS declarations (gradients, mask, variables to only change --c0 and --c1 values for 2nd loader): <a href="https://codepen.io/thebabydino/pen/PwoLJLR" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/Pwo</span><span class="invisible">LJLR</span></a></p><p><a href="https://mastodon.social/tags/cssMask" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssMask</span></a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</span></a> <a href="https://mastodon.social/tags/conicGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>conicGradient</span></a> <a href="https://mastodon.social/tags/maths" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>maths</span></a> <a href="https://mastodon.social/tags/trigonometry" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>trigonometry</span></a> <a href="https://mastodon.social/tags/Sass" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Sass</span></a> <a href="https://mastodon.social/tags/loader" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>loader</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/cssAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssAnimation</span></a></p>
K.O. Munley<p>I've been planning to spin up a small personal website. I knew I didn't need a full-blown CMS for this and, since I have so much experience using Bootstrap through my day job, decided to use it to build a site from scratch. It's been a while since I created a site from scratch—most of my experience lately involves taking on existing Enterprise sites and caretaking from there—but I was looking forward to both the challenge and the freedom of building my own.</p><p><a href="https://mstdn.social/tags/Bootstrap" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Bootstrap</span></a> <a href="https://mstdn.social/tags/Sass" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Sass</span></a> <a href="https://mstdn.social/tags/LifelongLearning" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>LifelongLearning</span></a></p>
Ana Tudor 🐯<p>Because someone just hearted a 5 year old <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> demo <a href="https://codepen.io/thebabydino/pen/GRooBJm?editors=0100" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/GRo</span><span class="invisible">oBJm?editors=0100</span></a> I made using a <a href="https://mastodon.social/tags/Sass" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Sass</span></a> function + looping to generate a <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> 🌈: we don't need *any* Sass for this anymore! 🎉</p><p>We can now do it with</p><p>background: <br> linear-gradient(in hsl longer hue 90deg, <br> hsl(0, 95%, 65%) 0 0)</p><p><a href="https://mastodon.social/tags/SCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SCSS</span></a> <a href="https://mastodon.social/tags/loop" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>loop</span></a> <a href="https://mastodon.social/tags/looping" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>looping</span></a> <a href="https://mastodon.social/tags/newCSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>newCSS</span></a> <a href="https://mastodon.social/tags/rainbow" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>rainbow</span></a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/hueInterpolation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>hueInterpolation</span></a></p>

Re x.com/meodai/status/1800098657

If you ever want to create a regular/ star-shaped #polygon, I made a #Sass #mixin that generates them years ago
codepen.io/thebabydino/pen/PRM

A heavily commented & more modern version of the regular poly mixin codepen.io/thebabydino/pen/mEg

Bonus: chubby stars mixin codepen.io/thebabydino/pen/KLy

Example of a @codepen demo using such a regular polygon mixin to create three rolling hexagons: codepen.io/thebabydino/pen/LYz

#CSS#geometry#maths

Another fabulous painting from the John Singer Sargent exhibition at Tate Britain. Carmen Dauset Moreno, better known simply as Carmencita, was a Spanish-style dancer in American pre-vaudeville variety and music hall ballet. He's really captured her spirit and verve. And they have the actual dress too.
#Art #Painting #Sass

Time for a #ComingOut post.

So, um, hi.

I’m the CEO of the Self Actualisation Support Society, a Canadian nonprofit organization dedicated to helping ensure accessible resources for the #trans community and setting up for more active advocacy.

You might already know us as HRTCafe.net :)

We’re working on getting formal charity status in Canada and establishing a stateside NFP to help south of the border.

#SASS has some projects planned over the next year. More info soon. :)

hrtcafe.netMain Page - 🏳️‍⚧️☕️ - HRTCafe.net (DIYHRT.Cafe)HRTCafe.net, formerly DIYHRT.Cafe, is a website created to provide information for how to safely obtain DIY HRT for trans people who cannot access prescriptions for various reasons. We take a harm reduction approach to HRT and believe that everyone should be able to access their essential medications safely. We do not encourage the use of our sources, although they have been seen to be more reliable compared to others.

SFM Poster #09 - Foxtober 02

10-9-2023

Created by Zachary Foxx / Nidonemo (on my art stream "Creative Attempts With the Red Foxx")

[Story on reply below]

-Inspirational Music-

None

-Credits-

Map:

"sd_doomsday_event.bsp" - Team Fortress 2

Models:

Repaired Foxy by TheClassyPlushtrap

Fox from Wandering Wildlife (and Other Not-So Wild Ones) - Animal Pack 1 (The Legend of Zelda: Breath of the Wild) by thezebradude1

Found: Steam Workshop

Continued thread

The next fun early stage, is when you dive into CSS (SCSS in my case) and make things come alive.

The early stages are always full of random bold colours to help me check things are fitting together nicely, pink, red, green, etc.

Soon I can populate it with real data, other than just one repeating.