Figured out how to target the global text styles necessary to override the one that Potion sets. You must use !important; to override the native style.
Well, first: to state the obvious, I didn't get it done in 2 days. But I have a much better idea of how everything works.
I feel like this learning experience is not linear, but exponential.
💡
Triumph: I finally figured out how to change the width of each row independently of each other. This will enable me to have the lines like I have on my previous site!
August 11
Current state:
The navbar is basically done. (Still need to do mobile)
Align-items horizontally in flexbox
align-items: center;
for aligning/centering items on the horizon in flexbox.
Justify-content vertically in flexbox
justify-content: it's like the "align-items" property for the vertical access.
All-caps CSS class = text-transform: uppercase
August 10
Here's where the site is at 11am:
Wahoo! It's starting to look actually like the old site. I feel like the hard stuff is done.
Here's what I've done this morning:
connect google/Adobe fonts → I realized that the link had to be in the <head></head> tag. That's why they weren't working before
Add a footer that will be able to be full-width. This was one of my concerns because
The way Potion works is everything via notion is styled inside the .inner-container so unless I want to manually create the proper margins with CSS for each element, which would be a huge pain, then even the footer would have to share that same width. Not the hugest problem, except I'd prefer to have it be a different color, or with a line like I have now.
Added this code to make the logo smaller without
August 9
Okay, today begins a 2-day sprint to get my site rebuilt in Potion.
Webflow site renews on Wednesday and i'm using that as my deadline
I got the site structure set up on the Notion side
It's basically a tutorial for doing exactly what I want to do.
About to quit for lunch, but that's what I'll be doing this afternoon.
Site looks like this now
Quite ugly, but you can see the site pages on bottom left of body. Menu is now on bottom and completely unstyled. Native notion header is visible on top.
This actually creates a new element on the page. You then add css to style that element in the <style> section below
Like this👇🏼
I think this is quite an elementary thing haha, but having always worked with visual builders, I never understood the relationship between the actual html/divs and the css. Because with them, you just drag the element into the page builder, without seeing behind the scenes where that adds a new <div>
I think this is how it works 🤓
July 27
Navbar
First up: trying to figure out how to make a navbar. I'm not seeing anything obvious, but I have an idea.
Did the obvious thing to put logo in upper left corner, and menu items on right, like so:
Which gives me this:
→ so the structure is there, but it's non-functional. → next up: create proper alignment and the navbar elements clickable links.
I'll also need to figure out how to separate from the page elements because they need different treatment.
Navbar inside .notion-header
Stopped hiding the .notion-header and working with that.
I need to stop for the day, and what I have now is:
Decided to rebuild my personal website instead for these reasons:
already have the content/copy in place so I can focus on manipulating elements instead of making design decisions
since I plan on creating multiple side projects, I'll need multiple websites, and it would be ideal to be able to host them all on Potion's generous multi-site plan
Posting my recent work manifesto to Webflow, I realized there's a certain amount of friction uploading it, formatting it correctly etc. → this would all be removed by using Notion as my CMS.
Since my new work plan is going to require lots of content creation, I think it's a wise move to remove as much friction as possible.
What I'm copying
What I'm starting with (the Notion page as Potion displays it)
Tips
When working with the Chrome inspector, make the background of each selector a different color so you can easily see which one is which.
Decided to work with Potion first. Simple reason: their plan has an option for 3-8 sites for around the same that I'm currently paying for my one Webflow site. I have several ideas for side projects so this seems like a good option.
I prefer the UI of Super.so and the resulting websites in their gallery look better, but I assume that this is a result of who's making them and not the platform capabilities.
Got a free trial and will see what I can do in a week!
4:35pm. What I got done today.
connected an unused domain (margaretryland.com) to use for this experiment. If I decide to move ahead I'll buy a proper domain, but I want to be as "scrappy" as possible, and avoid my past habits of buying domains that I don't use. Instead validating the idea, even just with my own action.
Looked at the code of other templates in the shop to familiarize myself with how the classes are named for Notion.
Learned a lot reading the CSS of the other templates.
Spent lots of time in Chrome inspect trying to figure out how to target specific elements
Read a few things on w3schools.com about CSS and how to make things happen
