search

mysticsymbolic / mysticsymbolic.github.io

Fun with procedurally generated visionary art!
https://mysticsymbolic.art/
Other
52 stars 11 forks source link

Start of #56: Logo, Favicon and Fonts #186

Closed webaissance closed 3 years ago

webaissance commented 3 years ago

Added Logo and Favicon Added Copperplate font (3 versions) Updated dist structure to separate css, img and fonts Pared down dist/index.html to bare bones Put all fonts in Copperplate (to me this looks good - but I await feedback from others...)

webaissance commented 3 years ago

Logo, Favicon and Fonts are on Netlfiy: https://deploy-preview-186--quizzical-swanson-c06190.netlify.app/

image

toolness commented 3 years ago

Nice, do you think this PR is ready for review + merging @webaissance or are you still drafting it? If it's ready for review, you can click on the "Ready for review" button near the bottom of the page, but no worries if you're still drafting it.

webaissance commented 3 years ago

Thanks @toolness Yes - I think it's ready for review! I'll change the status. I want to get @ninapaley 's input - and anyone else. The logo is not yet randomized -but I think that can be a separate pull request. Also - I like using the new font (Copperplate) everywhere on the site - but I am guessing others might not like this? If people want a different font setup let's discuss. But if everyone likes it this way then I think it can go live.

toolness commented 3 years ago

Cool! Hmm, visually I think Copperplate is ok as the font for a logo, but I'm not a fan of it as the font for the whole page, not least because the absence of lower-case text is a bit of a bummer for me... hmm.

Will take a look at the code soon!

webaissance commented 3 years ago

Thanks for the comments @toolness

I will make those updates

I can remove the extra font. There are multiple copperplate fonts and I thought it might be good to have more to choose from. Also - the reason for the OPTI version is that I was trying to find one to match Nina's logo font. I should actually ask @ninapaley which version was used. @ninapaley - which version of copperplate did you use for the logo? Can you upload it? (Or if you did already I didn't find it) For the rest of the text I used a different version because the OPTI version looked odd at different sizes.

On Sun, Jun 27, 2021, 7:22 AM Atul Varma @.***> wrote:

@.**** commented on this pull request.

Cool this is looking good overall! I added a few comments... also, I noticed there is a file called Copperplate V2.woff2 that has been added but doesn't seem to be used by the CSS, should it be removed?

In dist/css/style.css https://github.com/mysticsymbolic/mysticsymbolic.github.io/pull/186#discussion_r659328595 :

  • grid-template-columns: auto 20em;
  • grid-template-rows: 3em auto 3em;
  • grid-template-areas:
  • "header header"
  • "canvas sidebar"
  • "footer footer"; +}

  • +header {

  • grid-area: header;
  • display: flex; +}

  • @.*** {

  • font-family: 'Copperplate';
  • src: url('/fonts/Copperplate V1.woff2') format('woff');

Can you make this a relative URL? Currently the site isn't dependent on where the files are put, e.g. they could be placed in /my/funky/dir/ and everything would still work, but using an absolute URL here would require the site to always be at the root directory of the website it's hosted at.

Also, do you mind renaming Copperplate V1.woff2 to contain no spaces, e.g. Copperplate_V1.woff2?

In dist/css/style.css https://github.com/mysticsymbolic/mysticsymbolic.github.io/pull/186#discussion_r659328750 :

@.*** {

  • font-family: 'Copperplate';
  • src: url('/fonts/Copperplate V1.woff2') format('woff'); +}

  • @.*** {

  • font-family: 'OPTICopperplate';
  • src: url('/fonts/OPTICopperplate.woff2') format('woff'); +}

  • +header h1 {

  • margin: 0;
  • flex-grow: 1;
  • font-size: 1.0em;
  • text-transform: uppercase;
  • font-weight:500;

Hmm, I guess I should enable Prettier for CSS, there's some inconsistent indentation here that would be nice to clean up. I will add it to the main branch soon!

In dist/css/style.css https://github.com/mysticsymbolic/mysticsymbolic.github.io/pull/186#discussion_r659329166 :

  • font-family: 'OPTICopperplate';
  • src: url('/fonts/OPTICopperplate.woff2') format('woff');

Huh, I'm curious what the difference between this "OPTICopperplate" used in the

is versus the other Copperplate used in the rest of the page?

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/mysticsymbolic/mysticsymbolic.github.io/pull/186#pullrequestreview-693422057, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABAURRG5QKIEKYGYSRUQOWDTU4XZZANCNFSM47IZARGQ .

ninapaley commented 3 years ago

@webaissance I'm not picky about which copperplate is used. I agree with @toolness that it's better for the logo and not body text. Also we're really not designing anything like the final UX, so any UX design done now might be totally gone in the future. That said, I love having the custom favicon!

webaissance commented 3 years ago

@toolness and @ninapaley - I've made the requested updates to the Logo pull request https://deploy-preview-186--quizzical-swanson-c06190.netlify.app/ Let me know if you'd like anything else changed

ninapaley commented 3 years ago

Thanks, Dave! The text below the canvas is still Copperplate (and the hyperlinks don't show in color). Can you revert them to the text they had before? I'd really just like to see "MysticSymbolic" in the Copperplate font - nothing else needs it at this point, and I guess it's burned into a raster image. So how about we just have the logo and favicon in this version?

(Now if you separately want to make an "active" logo that drops a different logo icon between "mystic" and "symbolic" in copperplate every time the age is reloaded, per issue #56 , I'd like to see that!)

webaissance commented 3 years ago

Okay @ninapaley - thanks for the feedback I've just made an update that reverts the fonts of the menu and footer to what it was. https://deploy-preview-186--quizzical-swanson-c06190.netlify.app/ Now only the title text is in Copperplate (OPTICopperplate to be exact - which seems to match the logo. @ninapaley - which exact font did you use for the logo? Can you upload it here as a woff? If so I can use that one. Here is where I found the Copperplate fonts: https://www.onlinewebfonts.com/search?q=copperplate )

ninapaley commented 3 years ago

@webaissance In my system the font is just called "Copperplate." It looks like Copperplate V1 and Copperplate Bold Bold, but I'm just going by eye. I'm not married to it anyway!

webaissance commented 3 years ago

Ok @ninapaley Do you have a woff version of the font you could upload here?

webaissance commented 3 years ago

Oh - and I'm planning to do a different pull request for the randomized logo.

webaissance commented 3 years ago

@ninapaley and @toolness I think this update is ready. Anything else needed before merging with main?

ninapaley commented 3 years ago

@webaissance I think this is ok, although it could just be the favicon without the font (don't need special font for headers, font will just be in the logo). @toolness do you want to check this over? I only merge my own changes to svgs and tomls, all other merges are done by Atul.

ninapaley commented 3 years ago

@toolness Yes I meant "Creature" (for now) should not be Copperplate. The logo itself is Copperplate, that's enough for me.

webaissance commented 3 years ago

Okay - so I'll remove all of the Copperplate fonts and all references to them. This wouldn't be my vote. But we could always add them in later if desired.

webaissance commented 3 years ago

I closed this pull request - and sent a fresh, simple one - with the latest updates from main