This was originally published on codinhood.com
The design and color scheme for Ubuntu and the Ubuntu terminal are relatively unique and immediatel...
For further actions, you may consider blocking this person and/or reporting abuse
We've got a Web Component which, with Prismjs underneath, highlight code and displays it in a styled Mac-like window.
We use the component in DeckDeckGo and we also provide it as a Gatsby plugin
Your article gave me the idea that maybe we could enhance it with another style of Window respectively with an Ubuntu like window style.
User of the component would be then able to select between Mac-isch style, Ubuntu-style or none.
Thanks for the article and idea 👍
P.S.: If anyone is motivated to give a hand and contribute, I've opened a feature request in our repo about it 😃
Trouble there is that Mac style is relatively unchanging, whereas "Ubuntu" style is for one flavour, with one set of defaults. Why stop there, why not cater for other DEs? And at that point... why make it about cloning things, and just open it up as a general "theme"?
General theming is already possible. The component exposes multiple CSS4 variables.
With these it's possible to style either the "window container" or the colors of the highlight code.
I think it's handy to have moreover than variables just one parameter to toggle between one theme or the other or none.
But yes why not, once a new "window style" added, why not repeat and adding more. Go big or go home 😉
DeckDeckGo looks really cool
🙏
And thank again for the great article Cody 😃👍
Ubuntu mono is in fact my favorite coding font, even though I don't use Ubuntu. I've used it for years and I've tried many, and I mean probably too many. Doesn't have ligatures but I actually prefer it that way, when I'm coding I like to see exactly what it is there. I think there is a way to add ligatures to it but as I mentioned, I don't like it so I haven't tried.
Is very clear even in small sizes and the perfect weight, not too light, not too heavy and the bold is still readable while clearly noticeable. And to my taste looks modern without looking weird or over the top.
Nice! It's very cute.
btw, what does
alternatedo in the animation?Makes it animate in the pattern hide-show-show-hide so you only animate "forwards" but get both.
Ah, got it. Never knew it was possible. Thanks 😊
Very nicely done. Good job!
Good job!
Awesome exercise ☺️! There is just a very tiny issue on the border radius of the terminal window :P. Maybe you just need a
overflow: hiddensomewhere ☺️
I love it! <3
Not bad, but do you have a scarf?
dev-to-uploads.s3.amazonaws.com/i/...
nice work, believe me, I tried even to write some commands on it haha
Looks great! :)
This is cool! I'm not sure what I'd USE it for exactly, but still - I need to learn more CSS stuff like this.
Beautiful! ♥