Implement the background pattern on the header of the index page about origin-website HOT 16 CLOSED

Working on making this publicly viewable. Added @Royalharsh for now. Anyone else who wants access, just ping me.

from origin-website.

I’ve got a 90% solution using a combination of CSS and SVG. I think it will need some JavaScript as well. I’ll send over my progress in an hour or so.

from origin-website.

Our process is always to fork & then submit a pull request so we can review it before merging.

from origin-website.

I'm getting 'You’re not invited to this project'.

from origin-website.

Alright, here's the public link:
https://scene.zeplin.io/project/59fa2311bac7acbc8d953da9/screen/5a0a7247a8dbd1c49339620f

from origin-website.

Seems like an svg background would be a good way to go, possibly even with very subtle animation of dots and lines changing:

Sample code from web:
https://codepen.io/guerreiro/pen/rILqi

from origin-website.

@joshfraser @wanderingstan here is a walkthrough of my attempt at this.

https://www.useloom.com/share/fb997fe077594f4bbd6960cb126e246e

Please let me know if I'm on the right track and where to go from here. Thx 👊

from origin-website.

from origin-website.

Thanks, @wanderingstan. Do you want to grant permission for me to push a branch on this repo, or would you prefer that I fork it? I saw some discussion about that recently on Slack.

from origin-website.

Here is a commit with my progress. micahalcorn@3cd2c8a It seems that I inadvertently created a big white footer.

from origin-website.

@micahalcorn, I think you're one step from a great solution: If we get one big svg with the background grid and all the connected circles, we just set that as background image for main.landing-page, centered horizontally and aligned-top vertically. With the clever way you solved the boundary between dark/light regions, the clipping will take care of the rest.

I.e. imagine the repeating slack icon replaced with one giant image, wider than page, containing the grid+circles+lines

EDIT: I've put a request into @aure for such an svg image, which would be good to have a vector version of in any case.

from origin-website.

Aure got the image, and I think it looks pretty good. Code is in https://github.com/OriginProtocol/company-website/tree/issue/2_background_pattern

BUT realized we're getting bad background behavior when screen gets narrow:

@micahalcorn , what do you think, and any ideas on how to fix that narrow-page issue?

from origin-website.

@wanderingstan good to hear. Try out these changes: micahalcorn@6107df3

I noticed that all of the top-level templates were using the landing-page class, which I assume was not intentional. I've changed them in order to prevent the background tricks from affecting the rest of the site. Also, in my experience, all of the mysterious lines have disappeared with this commit. Let me know if you see any on your end. And I'm also happy to put all of it together and create a pull request for the issue branch if that is helpful and you want to send me the svg.

from origin-website.

@micahalcorn Nice fix! The wierd behavior with narrow pages is gone too. Good catch on the landing-page getting re-used everywhere. Similar thing was happening with page <title>s a while ago too.

The svg background image was in my commit: https://github.com/OriginProtocol/company-website/blob/issue/2_background_pattern/static/img/dot-grid.svg

Yes, please put together a PR!

EDIT: That image could use some tweaking to make it tile nicer on super-big screens, but I think its good enough for now.

from origin-website.

@wanderingstan found it, thanks. I think that the vertical linear gradients are failing to appear. It's probably related to the requirement for separate definitions containing gradientUnits="userSpaceOnUse" (beyond these). Can that be fixed prior to the svg export, or does it need to be done manually on my end? I assume that Aure wants them to be included.

Reference:
"If the gradientUnits attribute isn't specified, then the effect is as if a value of objectBoundingBox were specified."

"Keyword objectBoundingBox should not be used when the geometry of the applicable element has no width or no height, such as the case of a horizontal or vertical line, even when the line has actual thickness when viewed due to having a non-zero stroke width since stroke width is ignored for bounding box calculations. When the geometry of the applicable element has no width or height and objectBoundingBox is specified, then the given effect (e.g., a gradient or a filter) will be ignored."

from origin-website.

Looking good!

The SVG isn't tall enough so it doesn't cover the div properly at the bottom when viewed on large monitors.

from origin-website.