Website 2021 updates

[iKarith]

Something I could use pretty soon is attached. Here are watermarky-versions of some icons in svg format. If you've ever looked at a svg before, it's a plain text file. Each of these files begins with these line:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" viewBox="0 0 50 50" version="1.1">


See that viewBox there? If you look at Fimir.svg, it's centered. If you overlay the others on top of it, most of them aren't, generally in the vertical direction. What I need to know is the number to replace those two 0s with to center the icons.

I did this by taking the fimir circle (just that first path really) and changing it to black and pasting it in to each SVG, but it's making my eyes hurt, so I figure I'd ask someone who's visually better able to do it than I am. That's it, I just need the offsets (which can be fractions of a pixel to absurd precision, though I don't need them to be. They will ultimately get rendered at 50x50, though I intend to do more of these and eventually be able to use them to be able to draw maps here on the forum.

Anyway, my previous attempt started out looking like this…



…but I realized the size wasn't consistent from icon to icon. I fixed that, and my eyes are now saying nope to any more squinting and head-tilting and … yeah.

[iKarith]

Something resembling new infrastructure needing mostly a lot of art asset work is now live as promised. Info in the updated top post.

Links don't work really, but … that's because that's the only thing that's remotely close to "done" yet. A little more fine-tuning and some images are needed, then it's on to editing content. Not all the CSS is there yet, but I'll add what I need as I get there.

[iKarith]

I don't need a new logo right away—I'm sort of planning that for later down the line … basically, I figure the Inn logo probably is going to need to lose the HQ branding at some point. So the new Inn logo is something I'm proposing to be a taller sign that hangs down from offscreen. I'm asking now because I'd like to get people thinking about it long before we get there.

What I have in mind for the buttons is a radial gradient for the "face" of the button, and then … I'm not real sure what for the bevel, actually. If I do it, the bevel's likely to look pretty sharp because that's what I'm able to create. Someone else might be able to do better. That I'll need much sooner—but after I've done it, someone else can still improve upon it. I have the PSD used to create the original if it'd help to have that.

I can help with the sign, I play with GIMP here and there and could export something to an SVG

If you can get a clean, scalable image out of gimp, I'd welcome the help … I've never been able to. Gimp is very much a raster editor, or has been in my experience. I do a lot of SVG editing by hand (I'm nuts!), and I've been slowly learning to use inkscape more and more. It's not the easiest tool out there, but it's the free one.

[iKarith]

That's um … that's not an image, folks.

Code: Select all

   box-shadow: inset 4px 4px 2px 0 #8d5d34,
      inset -2px -2px 2px 0 #492414,
      inset 4px 4px 1px 1px #fcc970,
      inset -4px -4px 1px 1px #7d4d2d;
   padding: 4px;
   background: #fcc970;
   background: linear-gradient(to right, #7d4d2d, #fcc970, #7d4d2d),
         radial-gradient(ellipse at top, #fcc970, transparent);


inntest updated. Top post update in a few seconds.

[Stig]

I don't need a new logo right away—I'm sort of planning that for later down the line … basically, I figure the Inn logo probably is going to need to lose the HQ branding at some point. So the new Inn logo is something I'm proposing to be a taller sign that hangs down from offscreen. I'm asking now because I'd like to get people thinking about it long before we get there.

What I have in mind for the buttons is a radial gradient for the "face" of the button, and then … I'm not real sure what for the bevel, actually. If I do it, the bevel's likely to look pretty sharp because that's what I'm able to create. Someone else might be able to do better. That I'll need much sooner—but after I've done it, someone else can still improve upon it. I have the PSD used to create the original if it'd help to have that.

I can help with the sign, I play with GIMP here and there and could export something to an SVG

If you can get a clean, scalable image out of gimp, I'd welcome the help … I've never been able to. Gimp is very much a raster editor, or has been in my experience. I do a lot of SVG editing by hand (I'm nuts!), and I've been slowly learning to use inkscape more and more. It's not the easiest tool out there, but it's the free one.

What dimsions are we looking for? Web banner strip? Rectangle? Both? If you need any specific height X width let me know

[iKarith]

inntest updated. Top post update in a few seconds.

That took longer than intended.

I don't need a new logo right away—I'm sort of planning that for later down the line … basically, I figure the Inn logo probably is going to need to lose the HQ branding at some point. So the new Inn logo is something I'm proposing to be a taller sign that hangs down from offscreen. I'm asking now because I'd like to get people thinking about it long before we get there.

What I have in mind for the buttons is a radial gradient for the "face" of the button, and then … I'm not real sure what for the bevel, actually. If I do it, the bevel's likely to look pretty sharp because that's what I'm able to create. Someone else might be able to do better. That I'll need much sooner—but after I've done it, someone else can still improve upon it. I have the PSD used to create the original if it'd help to have that.

I can help with the sign, I play with GIMP here and there and could export something to an SVG

If you can get a clean, scalable image out of gimp, I'd welcome the help … I've never been able to. Gimp is very much a raster editor, or has been in my experience. I do a lot of SVG editing by hand (I'm nuts!), and I've been slowly learning to use inkscape more and more. It's not the easiest tool out there, but it's the free one.

What dimsions are we looking for? Web banner strip? Rectangle? Both? If you need any specific height X width let me know

That's part of why I'm using SVG and CSS here—the buttons are 14em wide and 1.5em tall at present. (Font is set to 12px for now—I expect it's going to be 1rem in future.) There's a 4px border around the button which bleeds into the button itself (4px padding, "border" done with inset box-shadows). But that same design should be able to scale up to do the big Paypal donate button on the index page.

Using 1rem for font size allows the browser to decide how big the text is going to be. That's an accessibility feature that (if it had been used the past 25 years) was built into the first versions of Netscape I used on Windows 3.1! We didn't have rem sizing and calc() with CSS back then, but we do now. I'm testing this layout at 160px wide (it fares poorly) all the way up to 1920. I can't test 4k, but I've got a friend who can.

I implemented something last night and it's the best I can do. I can see it's not perfect in the corners especially. It's possible though that if I hadn't said anything, nobody would've noticed.

[iKarith]

Background's done!

[Daedalus]

Glad to hear you got through the background--hope it wasn't too painful. I'm limited to Android for now and couldn't get your linked background icons to download properly. I was hoping someone else would pick up the ball, but I'm not surprised you handled it either.

[iKarith]

drathe pointed out it looks different on Firefox than on Chrome. I have to decide if I'm okay with that (I am developing on Firefox, but drathe thought it looked comparatively weirder there) …



I might just make it a smooth background with the icons (which would look fine if I darkened it a little)



I was saying to him that the inntest page looks a little darker than the current site. Kinda like (if anyone is familiar with it), Animusic's Pipe Dream. Animusic is this cool thing showing off 3D rendering software that makes movies out of MIDI files. Pipe Dream was on Animusic 1:

https://youtu.be/3yi1DGgessM

On Animusic 2, there was a revisit of Pipe Dream that was described as the Pipe Dream machine has been playing its song now for a long time, and it has aged a bit…

https://youtu.be/kgl3sz2qe7U

The inntest page feels the same, it's just aged a bit more. The colors are a little less bright, but a bit more homely. I haven't uploaded it yet, but I have button hovers now and am working on focuses used by us keyboard jockeys. I am not done with the latter yet, but then there will be some back-end stuff and then it's on to content!

[StratosVX]

Well the Firefox and Safari versions look the same to me. This may be an issue with Chrome itself.