search

twostraws / Ignite

A static site generator for Swift developers.
MIT License
1.76k stars 98 forks source link

Can Ignite Support Gradients? #51

Open mergesort opened 6 months ago

mergesort commented 6 months ago

Hey @twostraws, I've just started checking out Ignite and am very excited to use it for hosting a static site/blog I'm putting together. Part of the design of my blog calls for a gradient mask over text like this, and I was trying to figure out if it's possible to support this in Ignite today.

Plinky Logo

I've gone ahead and looked at your support for Color to try and figure out how it's implemented, but in my cursory glance haven't figured out how I would implement equivalent support for gradients.

I was wondering if:

  1. You had any plans for implementing first class support for gradients.
  2. If not, do you have any advice for how I could do that?

Thank you so much, really excited to put something together using Ignite.

twostraws commented 6 months ago

Hi, Joe! I've added initial support for gradients; they work really well. However, they are background gradients, whereas you're looking for masking what looks like something fairly custom. From what I understand, there is some CSS support for this with a WebKit prefix, but there isn't any support for it in Ignite at this time.

mergesort commented 6 months ago

This looks great, I love how you mimicked SwiftUI's backgroundStyle.

I did a little bit of research and admittedly my web development experience is relatively weak compared to my Swift, but I was able to put together a minimal solution that works across browsers. Not sure if you'd like to do anything with it but I can confirm that this works in Chrome, Firefox, and Safari, all of the colors looking approximately how I would want them to render.

Plinky Serif

<html lang="en">
<head>
    <style>
        body {
            display: flex;
        }
        .gradient-text {
            font-size: 50px; /* Adjust as needed */
            font-weight: bold;
            background: linear-gradient(to right, #3b82f6, #9333ea, #f472b6, #fb923c);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text; /* For Firefox */
            color: transparent; /* Fallback for browsers that do not support text-fill-color */
        }
    </style>
</head>
<body>
    <div class="gradient-text">Plinky</div>
</body>
</html>
pd95 commented 6 months ago

@twostraws: How about adding a style (conforming to HeadElement) to allow injecting such customization classes? Either "structured" (e.g. distinction between rules for class and tags) or just "raw" (e.g. just the style tag with the content as shown above).

twostraws commented 6 months ago

@mergesort I looked into how it might work too, and although the CSS itself seems straightforward I'm not really knowledgeable enough to know the full range of how it works. That is, while we could make it work easily enough for one example, what happens if folks apply it to other elements that we hadn't tried? I'd certainly be interested to see some PRs from folks who know this particular piece of CSS better than I do!

twostraws commented 6 months ago

@pd95 I suspect the right way to do that particular thing is by adding custom stylesheet into the theme using MetaLink, then placing it in the Assets folder.