• Advertisement

Make a small donation to Ye Olde Inn!

Donate via Paypal

Every cent received goes toward Ye Olde Inn's maintenance and allows us to continue providing the best resources for HeroQuest and Fantasy Gaming fans.

Testing CSS hackery, don't mind me…

Guests may gather here for General Discussions about almost any Topic. NO BRAWLING!
Forum rules
Certain topics have become known to cause friction among passionate members. We kindly ask that topics relating to these subjects be taken outside the Inn to Websites that specialise in those subjects.

Thus far, these topics are: Recreational Drugs, Religion and Science.

Testing CSS hackery, don't mind me…

Postby iKarith » Saturday March 27th, 2021 4:02am

Trying to replace these with SVGs using CSS…

:D :) ;) :( :o :shock: :?
8-) :lol: :x :P :p :oops: :smack:
:bites-lip: :cry: :evil: :twisted: :roll: :!: :?:
:idea: :arrow: :| :mrgreen: :geek: :ugeek:
|_P :barbarian: :dwarf: :elf: :wizard:
:goblin: :orc: :fimir: :skeleton: :zombie:
:mummy: :chaoswarrior: :gargoyle: :cookie: :cheese:
:banana: :2cents: :skull: :whiteshield: :blackshield: :roll1:
:roll2: :roll3: :roll4: :roll5: :roll6: :blueorb:
:greenorb: :greyorb: :redorb: :redheart: :greyheart:
"So I guess when renaissance fairs open again, people are gonna go to them and be like, 'I say, I hath not seen thee since the plague!'"
User avatar
iKarith

Ogre Chieftain
Ogre Chieftain
 
Posts: 246
Joined: Sunday February 14th, 2021 12:42pm
Location: Portlandia
Forum Language: English (United States)
Evil Sorcerer: Morcar
Hero:

Advertisement

Make a small donation to Ye Olde Inn!

Donate via Paypal

Every cent received goes toward Ye Olde Inn's maintenance and allows us to continue providing the best resources for HeroQuest and Fantasy Gaming fans.

Re: Testing CSS hackery, don't mind me…

Postby iKarith » Saturday March 27th, 2021 4:57am

iKarith wrote:Trying to replace these with SVGs using CSS…

:D :) ;) :( :o :shock: :?
8-) :lol: :x :P :p :oops: :smack:
:bites-lip: :cry: :evil: :twisted: :roll: :!: :?:
:idea: :arrow: :| :mrgreen: :geek: :ugeek:
|_P :barbarian: :dwarf: :elf: :wizard:
:goblin: :orc: :fimir: :skeleton: :zombie:
:mummy: :chaoswarrior: :gargoyle: :cookie: :cheese:
:banana: :2cents: :skull: :whiteshield: :blackshield: :roll1:
:roll2: :roll3: :roll4: :roll5: :roll6: :blueorb:
:greenorb: :greyorb: :redorb: :redheart: :greyheart:


I used to have a tool for doing this quickly but lost it and couldn't find it. Ultimately I just had to dig up a URL encoder and call it good.
You do not have the required permissions to view the files attached to this post.
"So I guess when renaissance fairs open again, people are gonna go to them and be like, 'I say, I hath not seen thee since the plague!'"
User avatar
iKarith

Ogre Chieftain
Ogre Chieftain
 
Posts: 246
Joined: Sunday February 14th, 2021 12:42pm
Location: Portlandia
Forum Language: English (United States)
Evil Sorcerer: Morcar
Hero:

Re: Testing CSS hackery, don't mind me…

Postby iKarith » Saturday March 27th, 2021 5:16am

Now that I have the process for this down, I think I will do it with the others as well. I might want to simplify the SVGs a little though, even scour'd, that barbarian SVG is 7.4k and it's now just making every page 7.4k larger. Multiply by the entire list of smilies. I mean the Inn's pages are a lot lighter than faceyspace or similar, and even with all these SVGs added all I have to do is close my dev tools and it'll stop being a major drain … but still, we don't need quite that level of detail in an icon that small.

For the curious, it's done like this:

Code: Select all
mg[alt=":barbarian:"] {
    display: inline-block;
    box-sizing: border-box;
    width: 1.66em;
    height: 1.5em;
    padding-left: 1.66em;
    background-size: 1.66em 1.5em;
    background-image: url("data:image/svg+xml;utf8,<URLENCODED SVG HERE>");
}


I might be able to rescale everything to reduce the complexity of the CSS, but … I'd rather reduce the complexity of the SVGs.

Note, this embedded SVG thing doesn't require my crazy dark mode large font setup. I sized stuff in em. Scaled to 1.5em in this case to fit what the existing glyphs seem to use, but in this case I could have made it 1.11 and 1.0 instead of 1.66 and 1.5 and it'd be exactly the size of the font.

I do intend to put all of the quest icons in, and the dice, and the smilies using twimoji's glyphs where possible. The result should be usable by anyone using Stylus if I properly fill it in as a usercss and put it on gitlab or something. Which I'll probably do!
"So I guess when renaissance fairs open again, people are gonna go to them and be like, 'I say, I hath not seen thee since the plague!'"
User avatar
iKarith

Ogre Chieftain
Ogre Chieftain
 
Posts: 246
Joined: Sunday February 14th, 2021 12:42pm
Location: Portlandia
Forum Language: English (United States)
Evil Sorcerer: Morcar
Hero:

Re: Testing CSS hackery, don't mind me…

Postby iKarith » Saturday March 27th, 2021 7:11pm

Well, here's my progress so far:

yeoldeinn-progress.png


I wanted to get the process down using svgs I had or could easily make. The scaling for Mr. Green didn't quite work out, he's a little too large for the bounding box, but I think that's all right in his case. He's larger than both life and bounding boxes. I could fix it, but I decided explicitly not to. Made the 2 cents myself because I couldn't quickly find one and it was faster to actually edit them in Inkscape and scour (and re-scour by hand) the generated SVG than to do anything else. Should someone extract it and use elsewhere, I don't care. :D

I used the HeroScribe icons for this, which are 18x20 and considered the height to be 1em, making the width 1.11. I can make the width 1.11 and shrink the height a little if people think it should be done.

Wanted: combat dice faces. There's a couple of high enough resolution ones online that I should be able to create them easily enough, but if someone else has done the work… I'll be using twimoji (Twitter's emoji font) to get the others, where they exist.

Comments? Feedback?
You do not have the required permissions to view the files attached to this post.
"So I guess when renaissance fairs open again, people are gonna go to them and be like, 'I say, I hath not seen thee since the plague!'"
User avatar
iKarith

Ogre Chieftain
Ogre Chieftain
 
Posts: 246
Joined: Sunday February 14th, 2021 12:42pm
Location: Portlandia
Forum Language: English (United States)
Evil Sorcerer: Morcar
Hero:

Re: Testing CSS hackery, don't mind me…

Postby iKarith » Sunday March 28th, 2021 8:57am

And then there were 4… Left, that is. The three faces of the combat dice and I have a beer, an orc, and I need to make an orc with a beer… But tonight isn't the night for that. Side effects. *sigh*

then-there-were-4.png


I redid Mr. Green to match the style of the others. I'm still not sure the gargoyle works either, his circle feels a little puny. I decided to use US green for the greenskins, but went with UK black and white for the undead, obviously. This left what to do with the chaos warrior and gargoyle icons. I went with red because chaos warrior armor is typically red in Warhammer proper, and the gargoyle is depicted as red in a lot of HQ's own artwork—that which does not make him gray, at least. But I'm not sure I like my red anyway.

I do like how the red dice came out.

Feedback very much wanted!
You do not have the required permissions to view the files attached to this post.
"So I guess when renaissance fairs open again, people are gonna go to them and be like, 'I say, I hath not seen thee since the plague!'"
User avatar
iKarith

Ogre Chieftain
Ogre Chieftain
 
Posts: 246
Joined: Sunday February 14th, 2021 12:42pm
Location: Portlandia
Forum Language: English (United States)
Evil Sorcerer: Morcar
Hero:


Return to Ye Olde Pub

Who is online

Users browsing this forum: CommonCrawl [Bot] and 0 guests