• 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:
<InSpectreRetro> All hail Zargon!!! Morcar only has 1BP.


Rewards:
Slaughtered an Orc! Destroyed a Zombie! Unravelled a Mummy!
User avatar
Web Mage
iKarith

Elven Warrior
Elven Warrior
 
Posts: 623
Joined: Sunday February 14th, 2021 12:42pm
Location: Portlandia
Forum Language: English (United States)
Hero:
Evil Sorcerer: Zargon
Usergroups:
Adventurers' Guild Group MemberChampion Group Member

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.
<InSpectreRetro> All hail Zargon!!! Morcar only has 1BP.


Rewards:
Slaughtered an Orc! Destroyed a Zombie! Unravelled a Mummy!
User avatar
Web Mage
iKarith

Elven Warrior
Elven Warrior
 
Posts: 623
Joined: Sunday February 14th, 2021 12:42pm
Location: Portlandia
Forum Language: English (United States)
Hero:
Evil Sorcerer: Zargon
Usergroups:
Adventurers' Guild Group MemberChampion Group Member

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!
<InSpectreRetro> All hail Zargon!!! Morcar only has 1BP.


Rewards:
Slaughtered an Orc! Destroyed a Zombie! Unravelled a Mummy!
User avatar
Web Mage
iKarith

Elven Warrior
Elven Warrior
 
Posts: 623
Joined: Sunday February 14th, 2021 12:42pm
Location: Portlandia
Forum Language: English (United States)
Hero:
Evil Sorcerer: Zargon
Usergroups:
Adventurers' Guild Group MemberChampion Group Member

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.
<InSpectreRetro> All hail Zargon!!! Morcar only has 1BP.


Rewards:
Slaughtered an Orc! Destroyed a Zombie! Unravelled a Mummy!
User avatar
Web Mage
iKarith

Elven Warrior
Elven Warrior
 
Posts: 623
Joined: Sunday February 14th, 2021 12:42pm
Location: Portlandia
Forum Language: English (United States)
Hero:
Evil Sorcerer: Zargon
Usergroups:
Adventurers' Guild Group MemberChampion Group Member

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.
<InSpectreRetro> All hail Zargon!!! Morcar only has 1BP.


Rewards:
Slaughtered an Orc! Destroyed a Zombie! Unravelled a Mummy!
User avatar
Web Mage
iKarith

Elven Warrior
Elven Warrior
 
Posts: 623
Joined: Sunday February 14th, 2021 12:42pm
Location: Portlandia
Forum Language: English (United States)
Hero:
Evil Sorcerer: Zargon
Usergroups:
Adventurers' Guild Group MemberChampion Group Member

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

Postby Daedalus » Monday May 24th, 2021 5:10pm

The smilies are looking good! :D

Why not gray for the Chaos Warrior and Gargoyle? Also, the Gargoyle circle needs enlarging, in my opinion. Can you upside the whole image?

The gems look like they could use some more definition--they appear too flat, in my opinion.
..
UNCLE ZARGON
Image
WANTS.. YOU


Rewards:
Wizard of Zargon Group Member Grin's Stone Map Played a turn in five (5) Play-by-Post games. Created a Hot Topic. Slain a measly Goblin! Slaughtered an Orc! Killed a mighty Fimir! Shattered a Skeleton! Destroyed a Zombie! Unravelled a Mummy!Crushed a powerful Chaos Warrior! Smashed a massive Gargoyle! Encountered all eight (8) Game System monsters. Encountered a menacing Chaos Warlock!
User avatar
Editor-in-Chief
Daedalus
Dread Ruleslawyer

Wizard
Wizard
 
Posts: 4979
Images: 14
Joined: Monday May 9th, 2011 2:31pm
Forum Language: English (United States)
Evil Sorcerer: Zargon
Usergroups:
Wizards of Zargon Group MemberScribes Group MemberAdventurers' Guild Group MemberArtists Group MemberChampion Group Member

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

Postby Kurgan » Monday May 24th, 2021 6:03pm

The Red ones are the "hero" variant (see the gallery).


Rewards:
Destroyed a Zombie!
User avatar
Channeler
Kurgan

Witch Lord
Witch Lord
 
Posts: 6506
Images: 85
Joined: Saturday February 23rd, 2019 7:08pm
Location: https://discord.gg/2R9pEP4cty
Forum Language: English (United States)
Hero:
Evil Sorcerer: Zargon
Usergroups:
Scribes Group MemberAdventurers' Guild Group MemberChampion Group Member

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

Postby iKarith » Tuesday May 25th, 2021 6:20am

Daedalus wrote:The smilies are looking good! :D

Why not gray for the Chaos Warrior and Gargoyle? Also, the Gargoyle circle needs enlarging, in my opinion. Can you upside the whole image?

The gems look like they could use some more definition--they appear too flat, in my opinion.


Gray ended up looking washed out and low-contrast. I said "screw it, I'll make them some other color for now and fix it later…" Picked red, since Chaos Warriors would normally be depicted as having red armor outside of HeroQuest.

The conversion to SVG lost some details from the eps of what the exact intended sizes of these relative to each other should have been and it was kind of a batch job. Also in the "I'll fix it later" category. Except I haven't really gone back to play with it more in awhile. I ultimately decided to make :mrgreen: be U+1F600 just … green … but I haven't gone back and made the alteration to him yet, so he's yellow currently.

You can't put that character directly into a message in this version of phpBB because it predates that being a thing and the DB pukes on it, so here's U+1F600 or what I like to call [emoji key]grin[space][space][enter]:

Image

Friendly fellow, ain't he?
<InSpectreRetro> All hail Zargon!!! Morcar only has 1BP.


Rewards:
Slaughtered an Orc! Destroyed a Zombie! Unravelled a Mummy!
User avatar
Web Mage
iKarith

Elven Warrior
Elven Warrior
 
Posts: 623
Joined: Sunday February 14th, 2021 12:42pm
Location: Portlandia
Forum Language: English (United States)
Hero:
Evil Sorcerer: Zargon
Usergroups:
Adventurers' Guild Group MemberChampion Group Member

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

Postby Daedalus » Tuesday May 25th, 2021 2:18pm

That is one big-time happy face.

I was wondering if the gray was a clarity issue. My fix would be to go to b+w for the CW and Gargoyle, but then you gotta go for some kind of yellowish-beige for the undead and that also may have issues. :zombie:

I think the resized Mr. Green turned out pretty good, though!
..
UNCLE ZARGON
Image
WANTS.. YOU


Rewards:
Wizard of Zargon Group Member Grin's Stone Map Played a turn in five (5) Play-by-Post games. Created a Hot Topic. Slain a measly Goblin! Slaughtered an Orc! Killed a mighty Fimir! Shattered a Skeleton! Destroyed a Zombie! Unravelled a Mummy!Crushed a powerful Chaos Warrior! Smashed a massive Gargoyle! Encountered all eight (8) Game System monsters. Encountered a menacing Chaos Warlock!
User avatar
Editor-in-Chief
Daedalus
Dread Ruleslawyer

Wizard
Wizard
 
Posts: 4979
Images: 14
Joined: Monday May 9th, 2011 2:31pm
Forum Language: English (United States)
Evil Sorcerer: Zargon
Usergroups:
Wizards of Zargon Group MemberScribes Group MemberAdventurers' Guild Group MemberArtists Group MemberChampion Group Member

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

Postby iKarith » Tuesday May 25th, 2021 3:04pm

It's not that big when I see it, obviously, it's the same size as all the others. It's just that I can't drop SVG in the middle of a post and the forum rejects UTF-8 characters that cannot be converted to what it's used to.
<InSpectreRetro> All hail Zargon!!! Morcar only has 1BP.


Rewards:
Slaughtered an Orc! Destroyed a Zombie! Unravelled a Mummy!
User avatar
Web Mage
iKarith

Elven Warrior
Elven Warrior
 
Posts: 623
Joined: Sunday February 14th, 2021 12:42pm
Location: Portlandia
Forum Language: English (United States)
Hero:
Evil Sorcerer: Zargon
Usergroups:
Adventurers' Guild Group MemberChampion Group Member

Next

Return to Ye Olde Pub

Who is online

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