Base Layout Styling
The layout is refined by replacing default background and text colors with theme-based utility classes. The navbar is adjusted with padding, borders, rounded corners, and hover states to create a more modern and contained design.
Homepage Improvements
Text colors and background utilities are standardized using theme-based classes for better consistency. Interactive elements such as social links and buttons receive hover states and accent styling to improve feedback and visual clarity.
Article Page Enhancements
Headings, body text, and strong elements are updated to improve contrast and readability. Theme-aligned color utilities ensure a cohesive appearance across different articles.
Card and Grid Layout Customization
A custom CSS grid layout is introduced to highlight the latest article with a larger layout on large screens. Conditional class application is implemented to ensure the special layout applies only to the first page, while smaller screens retain a stacked layout.
Responsive Behavior and Pagination Logic
Media queries and conditional logic are used to control layout behavior across screen sizes and paginated pages. The design ensures that featured layouts appear only when appropriate, maintaining usability on mobile devices.
Next Development Steps
The project concludes with a presentable blog layout and prepares for future modules. Upcoming work includes building an admin interface for managing articles and implementing authentication to restrict access.
Okay, we are finally ready to make this look like a presentable block. So let's start in views and in the base layout. And in the body here, I simply want to add BG base 100. And of course we need to remove the old background color. All right, let's go back. All right, that's a little bit more pleasant background.
Then I want to go up here in our, first of all, in our nav elements, and I want to add hover to be hover on the line. And I also want it to be text-based content. Now let's jump back. You see the color changed, and when we hover, we actually have a little indicator that something is happening.
Then, do we actually have any more elements for the main layout? Not for now. What we could do, actually, instead of having the navbar take up the entire screen, let's maybe make it bdbase say 200. Let's go back. Okay.
we are still taking up all of the available space. So what instead we can do is move it down here. How is it looking now? Okay. Let's add some padding on the y-axis. Yeah. Maybe let's make it rounded and border.
Let's say border should be border base content. Get a little bit more pleasant border. We do. And now if we add more elements, how does it look? It looks good. So a little bit more modern looking, a nav bar that doesn't take up the entire width. Great. Let's get a bit of this. And then do we have
I have this BG gray around here. Let's also make this BG base 200. Give it a save. A lot better down there as well. And finally, let's just make a text base content. Yes, there we go.
All right, I think that's it for our base layout. Next, let's tackle the home page, or the home.temple file where you have a bunch of different components and also the main page that you need to style. And in the home.temple, I just wanna start by changing this text white to be text-based contents. Let's jump in and see. That's looking nice. We're gonna keep the H1 with just being text white to give us more contrast.
Then for the social link, I want it to be instead of a bdgrade200, I'm gonna use b... Come on, bdbase200. And then I wanna say on hover, we're gonna do bdbase200 and 70 to indicate that we're actually interacting with an element. And also say text accent. Accent.
Yeah, that's a lot better. Then we need to also look at the bottom link here. We wanna say, do we actually want it to be gray? We do not want it to be gray. Let's maybe say BG secondary. How does that look? Hmm.
Maybe text primary instead, and then say hover text primary 70. It's looking a bit out of place, but that's also because we haven't styled the cards yet. So let's just go with this for now. Do we actually have to see the hover here? And we have some indicator, but we need to change the text as well to be text
base content. So now, no, I don't like that. Actually, I'm using the wrong one. Not text, but PG. I accidentally hit the escape. All right, we are back. So now, yes, we have an indicator. Good.
Next part, we want to deal with the article cut. And in the diff here, we want to change the background color to be BG base 300. And horror is going to be BG base 300 and a little bit of opacity. OK. And now you can see the color here is starting to match better together. But I don't think I wanted to horror. I just wanted to be like,
this, yeah, and then we indicate here, great. What about the, what do we want to do next? We also want to, we already dealt with the button link, that's good. What more? We have these paragraphs text that maybe we should just turn into text-based content in both places.
text-based content and this one I think we do text white so it stands out a little bit more like it okay and we also have this latest article section where I want to
Change the color here from text white to also be text-based content. And there we go. Actually, maybe text white. Yeah, I think that makes it a bit clearer. Yeah, let's go with white.
Okay, for now, that is what we're gonna do with the homepage, our home.temple file. Next, we're gonna do a little bit of changes to the article page, and then I wanna show you how we can add more custom classes to make the blog look even better, and also open up options to have thumbnails in our cards to make them more visible on the page. All right, let's jump in and look at an article.
that is actually looking quite decent with these changes, but I want to change the color. So in the headings, we are still gonna be text white. And then what more do we actually want? Let's actually just try and remove all of these and say text base content.
Yes, so now we can see we have some contrast between the headers and actually the text on the page. But we still need to have the prose strong to be, let's say it's text, let's try with text secondary. Yeah, I think that stands out, matches the theme.
Great. This is actually looking quite presentable. Let's take another article. And it's readable. Nice. One final thing is I wanna deal with these cards because we could definitely do this, but it would be nice to have the latest one we just released to be much more visible and then chunked in into smaller pieces. So we have like two.
Let one, two, and then going three or four down. But I only want this to happen on a large screen. So if we go to mobile, we want it to be like this because we don't have enough screen real estate to actually change this around. So let me show you how we can add more custom CSS to Tailwind, but also some of the functions that Temple provides us to create
styles that takes in a Boolean, so we only apply them in certain places, or with certain things that are in place right now. So let's begin by adding this custom class. I'm gonna just say custom CSS, and let me grab the code here really quick, copy paste it in. So what we do here is we create a class. We say it's a display grid, a gap of one, and we're gonna say the
We're going to use grid template columns, so we just create a column of equal size or one fraction, I believe it is. And then we also add this media query to define when this should apply and how it should apply. This might not make a lot of sense now, but this creates the grid layout that I just mentioned. So we have one big card and then two cards, three cards, and then B.
We simply share the space going forward. Now, what we then need to do is we need to go into Home. And now, in our latest articles, we wrap all of this in a div. Maybe add a class. And we want to use temples. We're going to use this temple KV.
where we're gonna say card container. And this should apply when previous page equals to zero. And I need to say paginated articles, page. Okay, we also want to add one that is not true. So we're gonna say temple kv. Again, and here we're gonna say grid, gap, and
We are going to be using a custom size here of one RM. We're going to say grid calls one. And on larger screen sizes, we're going to say grid calls three. And this should only apply when we have paginated articles pref page be larger than zero. Great. Let's jump back into the browser and see what that did.
That did nothing and that did nothing because I didn't import the custom CSS. Let's try again. Custom CSS. Now we do not have it being picked up. Let me try and kill my development server. Still nothing. All right.
But let's fix this. So in home, what are we seeing here? We are adding card container. Let's just try and add card container, directly card container. And I also need to run my development server. I'm going to run that in the background. And now you can see we have this
this layout right here. So something is wrong with our logic. All right, and it's because I didn't add anything here. Does something change? No. Now we have this layout where we could technically add a thumbnail to the first one and the second one to make them stand out. I didn't have all the other ones just be cards like normal.
Of course, now they are squares, but I think this is a much nicer model look. And if we go to the next page, we can see they just take up this free grid layout instead, because we only want this to happen on the first page now. And if we go to mobile size, you can see we have this layout that we had before where they just stack on top of each other. What about pro?
you can see on our large iPad Pro here we are seeing the same layout. So now we have all the elements in place to start actually to ship this to our users. But we probably want a way to write articles and edit articles and update articles to the focus of the next
Module is going to be building an admin where we can create articles, we can update articles, we can mark them as released or not released. And then the module after that, we're going to be adding authentication so only we can access this admin page. But for now, I think we're actually in a decent place with our blog. It's looking good. It's presentable. You can change the theme if you like, but I think we're in a very good place for now.
