Add the static main page

m1r0 commented 1 month ago

Proposed Changes

Add the main static page.
Propose a scaffold for the static pages.
The CSS uses the mobile-first approach and the BEM methodology.
Add some temporary code to load the static pages in the WordPress context. Loading the pages this way helps with the responsive implementation and avoids style clashes with WP.

Screenshots

Desktop:

iPhone 12 (horizontal):

iPhone 12 (vertical):

Testing Instructions

Download and install the plugin. You could use jurassic.ninja for a quick environment setup.
Go to /wp-admin/admin.php?page=automattic&static=main.
Compare the page to the design. Having small differences should be fine.
Make sure it looks good on mobile and the different browsers.

markbiek commented 1 month ago

This is looking good!

What do you think about having a separate CSS file that defines a bunch of CSS variables (colors, fonts, common widths, etc).

m1r0 commented 1 month ago

Good idea, Mark!

I've created a file for the variables and added the more obvious ones. I think we should continue updating that as we go, but do let me know if I missed something.

m1r0 commented 1 month ago

There could be some copy updates related to this but overall it should be ready for review. 🙂

m1r0 commented 1 month ago

@fditrapani, could you give the mobile version a quick look? I'm not sure about the spacing and font-sizes. Please ignore the checkbox bug, it will be fixed in the next iteration. 🙂

fditrapani commented 1 month ago

Nice! This looks good from the screenshots but I can't get it to install locally. I'll connect with you on slack to get it working.

blogvault / wpcom-migration