This is an update of current work on depertarespiritual.org
Yesterday I tried to migrate from elementor to gutemberg with the help of AI but it was just a mess. Then AI tried to convert everything into php templates an php. But I lost 10 hrs trying to correct mistakes in design AI was doing, nothing seemed to stay as it was.
So today I decided to start from scratch. I deleted elementor, hello plus, elementor pro and ENF plugins. Also deleted Hello Theme and child theme created there.
I installed Generatepress (most light theme with helpful php architecture).
I created a child theme for Generate press and worked on the following files:
functions.php, front-page.php, home.php (blog achive), single.php (article template), page-registro.php and style.css
Style contains several sections so they can be used sitewide. (the following is a summary by AI):
1. Global Variables (Semantic): Defines the core color palette (primary magenta, secondary blue, accent green, text, and background) and sets the main typography to Montserrat.
2. GeneratePress Container Resets: Forces full-width layouts (100%) for the main containers, removes default margins and padding, and completely hides the default site footer.
3. Global Typography: Establishes baseline font sizes, line heights, and weights for body text and headings (H1-H3), including responsive media queries to scale text down for tablet and mobile.
4. Master Sections: Creates the main wrapper classes, including a magenta hero section, a grey content section, and a 50-50 split-screen layout for landing and registration pages.
5. Components & Utilities: Styles reusable UI elements such as zigzag structural rows, fluid images, primary call-to-action buttons, customized list bullets, vertical YouTube Shorts containers, and custom styles for Fluent Forms submit buttons.
6. Global Responsive Layouts: Ensures complex structures like the split-screen and zigzag rows stack vertically and adjust their padding appropriately on screens smaller than 1024px and 768px.
7. Single.php Template: Formats the individual article body with a justified, highly readable layout capped at an 800px maximum width.
8. Home.php Template: Builds the blog archive grid, featuring a responsive 3-column layout with post cards that include hover animations, image scaling, and custom “read more” underline effects.
9. Mobile Menu Customization: Tweaks the responsive hamburger menu and dropdown background to seamlessly match the site’s custom styling.
