Hacking the Svekyll Theme

If you want to customize your Svekyll design, you can do it without creating problems like merging changes from the upstream repository later. Just make sure you customize the user.css file (not the svekyll.css).

To recap, svekyll.css is stores the base styles for each of the svekyll “components”, like posts, cards which are displayed on the index page, nav bar, links, etc.

For example, here are a bunch of different components (represented by the class names):

.svekyll-posts 
.svekyll-title 
.svekyll-post 
.svekyll-body 
.svekyll-description 
.svekyll-tags 
.svekyll-tag 
.svekyll-page-nav
.svekyll-navbar-container 
.svekyll-navbar-title 
.svekyll-navbar-header 
.svekyll-navbar-links 
.svekyll-navbar-link 
.svekyll-main 
.svekyll-webmention-comments 
.svekyll-webmention-comment 
.svekyll-card-image 
.svekyll-footer-links 
.svekyll-post img

You can customize any of these.

Hacking Theme

In the above example, we are customizing the post to add a shadow, making the nav bar header have some padding around it, and rounding the corners, and then adding a white border around the logo image. To do that, just add the following code to user.css.


.svekyll-post {
	@apply 
    shadow-xl
    rounded-lg
}

.svekyll-navbar-header {
@apply rounded-xl mx-auto p-4 p-8 container;
}

.svekyll-navbar-logo {
    @apply p-2 bordered border-white border-2;
}