WordPress has been my blogging software since 2006. I installed version 2,0 and have been a fan ever since. I have been blogging since March 1996. (Wow, 28 years flies by so fast!) I used to blog nearly every day and now its just a few times a month. I am losing my energy I suppose. I just upgraded to 6.7 and the new Twenty Twenty Four theme.
I used to change the look of my site all the time. I would pick new backgrounds and layouts and fonts to keep it interesting. For the last few years, I have settled into a specific look and feel. The grid layout with cards and this patterned background make me happy and comfortable. I change the fonts periodically, but that’s it. I always update to the latest default theme.
I used to put in a ton of CSS on my blog to make it look the way I wanted. Little by little, WordPress has been improving the platform, making it easier for me to achieve the look with less and less customized CSS. Almost all of it now is just for the calendar widget at the bottom. See below.
WordPress is used to power 43.1% of the top 10 million websites as of December 2023. I think the reason is because it’s free, high quality, and keeps innovating. I
/* For some reason, I cant figure out how to make the cards
centered. Feels like a bug */
.home-main {max-width: 640px; margin:auto;}
/* These are the animations used on the cards */
.home-block, img, .is-style-pill a {
box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px;
transition: all .3s ease-in-out;
height: 100%;
border-color: #dddddd; }
.home-block:hover,
img:hover,
.is-style-pill a:hover {
box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
transform: translate3d(0px, -1px, 0px);
transform: rotate(-1deg);
cursor:pointer; }
/* All the calendar stuff */
.wp-calendar-table * { border: 0px; }
.wp-calendar-table thead th {
font-size: 90%;
font-weight: bold;
padding: 0.25rem;
background: rgba(192,205,205,0.5);
text-transform: uppercase;
text-align: center;
}
.wp-calendar-table tbody td {
position: relative;
padding: 0.55rem;
text-align: center;
background: #ffffff;
}
.wp-calendar-table tbody td.pad {
opacity: 0.7;
}
.wp-calendar-table tbody td#today {
font-weight: bold;
}
.wp-calendar-table tbody td#today:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-top: 10px solid #999;
border-left: 10px solid transparent;
}
.wp-calendar-table tbody td a {
display: block;
background: #fec971;
border-radius: 20px;
padding: 0px 8px
}
.wp-calendar-table tbody td a:hover {
background: #3299bb;
color: #fff;
}
.wp-calendar-table a{
background-color: #d50139;
color:white;
width: 50%;
position: relative;
margin:auto;
border-radius: 8px;
text-decoration:none
}
.wp-calendar-table a:hover{
filter: brightness(120%);
transition: filter 0.15s linear;
}
.wp-calendar-table caption,
.wp-calendar-nav a{
color:#333;
font-weight:bold
}
/* Not sure if I still need these. they may have fixed them */
.wp-block-embed-spotify iframe {max-height:350px}
.powerPointEmbed iframe {width: 600px}I still need to add a tiny bit of JavaScript to make the card group clickable. I wish they would just built that in. Seems obvious to me. I used Chat GPT to write the commented code.
// Function to attach click handlers for 'home-block' elements
function attachClickHandlers() {
// Select all elements with the class 'wp-block-post-title'
document.querySelectorAll('.wp-block-post-title').forEach(postTitle => {
// Find the anchor (<a>) element within the current post title
const anchor = postTitle.querySelector('a');
if (!anchor) return; // Skip if no anchor is found
// Find the closest parent element with the class 'home-block'
const homeBlock = postTitle.closest('.home-block');
if (!homeBlock) return; // Skip if no 'home-block' is found
// Attach a click event handler to navigate to the anchor's URL
homeBlock.addEventListener('click', () => {
window.location.href = anchor.href;
}, { once: true }); // Ensure the handler runs only once
});
}
// Execute the function
attachClickHandlers();
Thank you WordPress for almost 20 years of great software!
Whatya think?