When @matt added Microhooks to his popular Tiny Theme, I decided to give it a try. My current theme, which is based on the Alpine theme, is a messy mesh of CSS fragments and several modified HTML files. I thought I could use a fresh start and get things more organized.

I’m having fun exploring and tweaking my test blog so far. This time I hope to keep all the changes in one CSS file with comments. Here’s what it looks like for now:


    /* 
    Importing Righteous font from Google Fonts for the site title. I still need to work here to get the Title set up; there's a Tinyhook for that.
    */
    
    @import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
    
    /* Setting up my beige background color  and my fonts to dark gray from Tiny's white: */ 
    
    body {
            background-color: #eee8d5;
            color: #666
    }
    
    /* Change the color of h2 link posts and dates to the red-crimson I use */
    
    h2 a, a.post-date.u-url {
            color: #8b0000;
            text-decoration: none;
    }
    
    /* Chane the color of the links, and remove underlines; when hovering over a link, underline it to indicate it's a link
    
    With links, we need to define these different instances of link selectors. These are: link, visited, hover, and active.
    
    In TinyTheme, the little "blurbs" on the main page listing the posts are inside an "e-content" div. We want to specify these links only. Otherwise, other links will be affected: */
    
     .e-content a:link, a:active, a:visited {
            color: #8b0000;
            text-decoration: none;
    }
    
    .e-content a:hover   {
    text-decoration: underline;
    }