Peacock Plume Posts - Answer Overflow

Peacock Plume

•Created by Peacock Plume on 4/27/2024 in #front-end

Using escaped unicode in content

Is it possible to use escaped unicode in content to get emoji combinations like Phoenix for example, seems like this is not working. (🐦‍🔥) I tried both with the plain emoji and the escaped unicode.

.phoenix::after {
    content: "🐦🔥";
}
.phoenix::after {
        content: "\01F426\01F525";
}

.phoenix::after {
    content: "🐦🔥";
}
.phoenix::after {
        content: "\01F426\01F525";
}

But this only works if I use it in the html span tag directly on the page, but not as after pseudo element like in the code above. Of course the font is set and all I was using Noto Color Emoji which supports this combination.

29 replies

KPCKevin Powell - Community

•Created by Peacock Plume on 3/16/2023 in #front-end

How do I style only the text inside lists

How do I style only the text inside lists, I'm using marker on these lists not "::before". And I don't want the marker to be affected at all by it.

34 replies

KPCKevin Powell - Community

•Created by Peacock Plume on 3/16/2023 in #front-end

Body - font-feature-settings question.

Imagine you have 2 different variable fonts and want to set different font-feature-settings on body for those 2 fonts, how do you go about it without using classes, you don't have to look at browser compatibility and you can use all the latest css but it has to be supported by at least the latest Chrome and Firefox versions, other browsers are irrelevant so you don't have to worry about that. I wonder if that's even possible using stuff like :where, :is... For those who don't know what exactly I mean, here is an example, so I have my body font settings like this and want to apply the font-feature-settings only to the font family assigned to body, without affecting other fonts.

body {
  font-family: 'VariableFont';
  font-feature-settings: "dlig" 1, "frac" 1, "salt" 1, "ss03" 1, "ss04" 1;
}

body {
  font-family: 'VariableFont';
  font-feature-settings: "dlig" 1, "frac" 1, "salt" 1, "ss03" 1, "ss04" 1;
}

I guess my problem will be easily solved in the future, but right now setting this up in @font-face itself is sadly only supported by firefox. https://caniuse.com/mdn-css_at-rules_font-face_font-feature-settings

2 replies

KPCKevin Powell - Community

•Created by Peacock Plume on 3/2/2023 in #front-end

Cloning Google Font's Light/Dark Mode Toggle

I was following along with this one, not really being a tutorial, but there are certainly things to learn in this video, anyway. I was doing this for fun on a HUGO website I'm playing with. And I pretty much cloned what Kevin did, but I can't get the browser to remember my prefers-color-sheme, no matter what I do it will always switch to dark, which I am using as the main theme for the site. And I've checked all instances of it that I have set up with Hugo in css and golang html. I don't seem to have done anything different than Kevin. The only thing is that I'm on a pretty old 2013 Macbook Pro running OSX 10.14.6. On chrome and yes, everything on this system is themed dark. Google fonts does recognize my preference, so theirs kind of seems to work. Any clues/ ideas as to what might be causing this for me would be great.

49 replies

Gaming

Programming