search

CSS-Next / logo.css

140 stars 9 forks source link

how to share html/css versions of the logo? #13

Open argyleink opened 2 days ago

argyleink commented 2 days ago

gotta be some good ways to distribute these as native css/html. the repo currently hosts files, should we host html/css/js files, or link out, or?

raymondsowden commented 1 day ago

css version would be nice :)

argyleink commented 1 day ago

here's the CSS version, awaiting a good sharing mechanism https://codepen.io/argyleink/pen/qBegwRB

Que-tin commented 1 day ago

If me move them into the folders introduced by the new asset build we need to adjust the build to not recursively remove the whole folder.

Que-tin commented 1 day ago

Opinions on a web component?

romainmenke commented 1 day ago

Opinions on a web component

I think it would be unfortunate if we need JavaScript to render a logo for CSS. So I'd rather not have it be a web component :)

argyleink commented 1 day ago

https://codepen.io/argyleink/pen/qBegwRB

should remove all the other logo junk and try to reduce to the smallest amount possible. also change the element name to <css-logo>

Opinions on a web component?

the codepen is a custom element, no js required, but decently self contained. we could provide an example where the CSS is in a tag inside the custom element so it's like a single file?

itsjavi commented 14 hours ago

what about adding html and css files here (a simplified version of the codepen), and publish that as Github Pages as well? that can be easily shared.

In the HTML I would also preview the code needed to recreate the logo.

villepreux commented 14 hours ago

Looking at the codepen (and this is very subjective), it seems to me that, at small sizes (let say for a favicon for example), the bottom-right padding could benefit from a bit more space between the logo border and the "css" text.

Would'nt it be an opportunity for a responsive logo ? Aren't we talking about CSS after all ?

(Even quick'n'dirty mini "hacks to the Pen like margin-block-end: calc(min(2px, 10%) - .2ex); margin-inline-end: calc(min(2px, 5%) - .05ch); make it more readable to me at small sizes while nearly unaffecting the logo at bigger scales (also maybe some alteration on font weight or letter spacing would be cool))

-- My non-professional 2 cents ;)