Blog — Martin Schendel

Modern Base CSS

For years I’ve wanted a really simple base CSS file. I wanted something I could just slap on every project and have it look ok, and something that would be a starting point, easily changed for different projects. I just want the elements styled, NO CLASSES!!

The internet is disgusting for this. Everyone wants to sell you a class or a subscription to a collection of themes. I was just looking for something simple that wouldn’t look like shit. Then today, I realized Jippity (ChatGPT o3-mini-high{which I pay a subscription for but let’s not think about that}) is finally advanced enough to do this for me trivially easily.

Below is the CSS that Jippity helped me craft. It’s a clean, modern base stylesheet with defaults for semantic HTML elements, a simple reset, and a built-in dark/light mode(this functionality still requires a bit of javascript and a single class{h*ck me}).

Feel free to copy, modify, and play around with this CSS. It’s exactly what I’ve always wanted, and now you can have it too! (You could also get exactly what you want from Jippity faster than finding this blog post though, so who am I kidding. Everything Bagel, amirite?)

Here’s the button for the theme toggle:

<button class="theme-toggle" id="theme-toggle">Switch to Dark Mode</button>

Here’s the javascript to make it work:

const themeToggleButton = document.getElementById('theme-toggle');
const htmlElement = document.documentElement;
// Check localStorage for a saved theme, default to light
const savedTheme = localStorage.getItem('theme') || 'light';
htmlElement.setAttribute('data-theme', savedTheme);
themeToggleButton.textContent = savedTheme === 'dark'
    ? 'Switch to Light Mode'
    : 'Switch to Dark Mode';



themeToggleButton.addEventListener('click', () => {
    let currentTheme = htmlElement.getAttribute('data-theme');
    if (currentTheme === 'light') {
        htmlElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark');
        themeToggleButton.textContent = 'Switch to Light Mode';
    } else {
        htmlElement.setAttribute('data-theme', 'light');
        localStorage.setItem('theme', 'light');
        themeToggleButton.textContent = 'Switch to Dark Mode';
    }
});

And here’s that lovely CSS:

/* -------------------------
   Color Variables for Light Mode (default)
   ------------------------- */
:root {
    --background: #fdfdfd;
    --card-background: #fff;
    --input-background: #f1f1f1;
    --text-color: #333;
    --accent-color: #4FC3F7;
    --border-color: #e5e5e5;
    --shadow-color: rgba(0, 0, 0, 0.1);
}



/* -------------------------
   Dark Mode Overrides
   ------------------------- */
[data-theme="dark"] {
    --background: #121212;
    --card-background: #1E1E1E;
    --input-background: #2C2C2C;
    --text-color: #E0E0E0;
    --accent-color: #4FC3F7;
    --border-color: #333;
    --shadow-color: rgba(0, 0, 0, 0.5);
}



/* -------------------------
   Basic Reset
   ------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}



html {
    font-size: 100%;
    line-height: 1.6;
}



body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    color: var(--text-color);
    background-color: var(--background);
    padding: 1rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}



.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}



/* -------------------------
   Semantic Element Styling
   ------------------------- */
header,
nav,
main,
section,
article,
aside,
footer,
form {
    background-color: var(--card-background);
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px var(--shadow-color);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}



header {
    border-bottom: 2px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}



nav ul {
    list-style: none;
    display: flex;
    gap: 1rem;
}



nav a {
    text-decoration: none;
    color: var(--accent-color);
}



nav a:hover {
    text-decoration: underline;
}



/* -------------------------
   Theme Toggle Button
   ------------------------- */
.theme-toggle {
    background-color: var(--accent-color);
    border: none;
    border-radius: 4px;
    color: var(--card-background);
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.2s ease;
}



.theme-toggle:hover {
    background-color: #42A9DC;
    /* slightly darker blue */
}



main {
    min-height: 60vh;
}



article,
section {
    margin-bottom: 1rem;
}



aside {
    background-color: var(--input-background);
}



footer {
    border-top: 2px solid var(--border-color);
    text-align: center;
    font-size: 0.9rem;
}



figure {
    margin: 1rem 0;
    text-align: center;
}



figcaption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-color);
    opacity: 0.8;
}



blockquote {
    margin: 1rem;
    padding: 1rem;
    border-left: 4px solid var(--border-color);
    font-style: italic;
    background-color: var(--input-background);
}



code,
pre {
    font-family: "Courier New", Courier, monospace;
    background-color: var(--input-background);
    color: var(--text-color);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}



pre {
    overflow-x: auto;
    padding: 1rem;
}



table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}



th,
td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}



details {
    margin-bottom: 1rem;
}



summary {
    cursor: pointer;
    font-weight: bold;
}



/* -------------------------
   Modernized Form Styles
   ------------------------- */
form {
    padding: 1.5rem;
    max-width: 500px;
    margin: 0 auto 1rem auto;
}



fieldset {
    border: none;
    padding: 0;
    margin: 0;
}



legend {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: bold;
    color: var(--text-color);
}



label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-color);
}



input,
textarea,
select {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--input-background);
    color: var(--text-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}



input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 5px var(--accent-color);
    outline: none;
}



button[type="submit"] {
    width: 100%;
    padding: 0.75rem;
    background-color: var(--accent-color);
    border: none;
    border-radius: 4px;
    color: var(--card-background);
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
}



button[type="submit"]:hover {
    background-color: #42A9DC;
}



/* Sleek and Modern Link Styling Using --accent-color */



a {
    text-decoration: none;
    color: var(--accent-color);
    position: relative;
    transition: color 0.3s ease;
}



a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background-color: var(--accent-color);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}



a:hover,
a:focus {
    color: var(--accent-color);
    /* Keeps the accent consistent; optionally, you can define a hover variant */
}



a:hover::after,
a:focus::after {
    transform: scaleX(1);
    transform-origin: left;
}



/* Enhanced focus style for accessibility */
a:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

Should you buy a CampSnap?

Yes. The quality is shite, the colors are shite, the photos are ugly, but that’s not what it’s about. It’s about the fun, which it is.

Dear John: Regarding Jordan Peterson

TL;DR for the Podcast:

Thanks for touching on Jordan Peterson. He's a thoughtful person, and like anyone understanding him fully takes infinite hours. As you mentioned, treating any person as a shibboleth is a bad idea. I don't expect you to invest hundreds of hours to understand him, but I hope you do anyway! Watch his biblical lectures. You'll see why, as a liberal lefty, I appreciate his work. I went into it trying to prove he was a fraud. I couldn't. It's actually good.

Context for Newcomers:

I deeply respect and care for John Roderick. I've followed him for many years, leaving his music behind in the playlists of my ex-girlfriends and writing his thoughts and attitudes on my heart.

In the last two years, I've embarked on an intellectual journey with Jordan B. Peterson (herein JBP) acting as a guide, showing me new ways to understand the world. His writings and lectures have had an immense effect on me, and I also have his thoughts and attitudes etched on my heart.

John Roderick has, on occasion, made dismissive remarks about JBP. John also has a very personal podcast available through his Patreon called Dear John Letters. These letters are often private, but with this topic, I felt it was important to share my thoughts publicly. So, this is my semi-public submission to DJL. You should sign up with this link for his Patreon for what I imagine will be a thoughtful response.

The Full Letter:

Dear John,

You are right. JBP's genius is being filtered by your liberal culture. If you listened to him unfiltered in his own words, you would see that you've been misled. Unfortunately, that movie (I'm assuming you're talking about The Rise of Jordan Peterson) gave a pretty bad view of him, especially in the beginning when he was VERY sick. However, it wouldn't take you an hour of listening to him to come to that realization—it would take many hours.

I don't doubt that you've heard much of what he's saying. You are a well-read and thoughtful person. I can only speak to my experience: he was the first to introduce me to some profound, nuanced, and compelling ideas. I started watching him seriously because I wanted to see where he was wrong. He seemed like an arrogant prick, and as an arrogant leftie prick myself, I figured I could crush his ideas with my own intellect. I've watched approximately 135 lectures of his, most of which are over an hour long. I've read both of his accessible books and struggled mightily through his densely packed one. While dense, it was worthwhile. I am unable to dismantle his ideas with my intellect, though that doesn't mean it's impossible. At the very least, he's worth paying attention to.

That said, I don't insist anyone pays attention to him. The world is vast, and his ideas can cause strife, especially if you have many leftist friends. Luckily for me, I'm usually the leftie in the room, so all that happened was my extremist ideas were tempered, and I found new toeholds in arguments with those on the right. Understanding their positions better and offering slightly more moderate positions that align with their values has been very helpful for me.

In your response to my last letter, you touched on exactly why I'm reaching out to you about this. It is not good to use a real person as a shibboleth. That is a lazy shortcut that makes you look uninformed. I understand that you've absorbed your opinions about him through the culture and used references to him as a shortcut to indicate your baseline position. But for a person of your stature and capacity, it is unbecoming to do so. I heard that understanding in your voice as you answered my last letter, so I don't hold it against you. We are all struggling uphill together, after all. Still, I hope your reflection on your words can spread thoughtfulness.

-Martin

P.S. I defy you to watch Lecture: Biblical Series I: Introduction to the Idea of God all the way through and come away able to deride him in such a pithy way ;)

A cool John Green quote

Poster Design

Is this gonna be on the test?

Yeah, about the test...

The test will measure whether you are an informed, engaged, and productive citizen of the world, and it will take place in schools, and bars, and hospitals, and dorm rooms, and in places of worship.

You will be tested on first dates, in job interviews, while watching football, and while scrolling through your Twitter feed. The test will judge your ability to think about things other than celebrity marriages, whether you'll be easily persuaded by empty political rhetoric, and whether you'll be able to place your life and your community in a broader context.

The test will last your entire life, and it will be comprised of the millions of decisions which when taken together, make your life yours. And everything—everything—will be on it.

-John Green

I made another thing

For reasons, I’ve been thinking about taxes recently. I created the following tool using the federal 2023 tax brackets to figure what my net tax rate is. Thought I’d share it here.

Tax Calculator

Net Tax Rate Calculator

Cumulative Tax: $0

Net Tax Rate: 0%

People Who Annoy Me

Sometimes I am annoyed by a person. Here is an incomplete list, for no reason, with no justification. Use your imagination.

Patrick Rothfuss

M. Night Shyamalan

Dan Benjamin

I made a thing

So, on a lark I made a thing. You can find it here:

http://counttill.online/

I also realized I could put the whole thing on this site, so here’s a working version of it, though I may not keep this up to date:

CountTill

CountTill

This is a tool to count a till. Input the number of each denomination of currency you have and the value of what you owe the house. It will calculate the tips you should take out to reset the till to the base value.

Base Value of Till $
Due on Checkout $
Currency Count Subtotal
$100 $
$50 $
$20 $
$10 $
$5 $
$2 $
$1 $
Quarters $
Dimes $
Nickels $
Pennies $
Total $
Tips in Drawer $

Literally nothing ever hits our servers, so your data will not be saved if you refresh this page.

v 1.1.1

Goodbye Alice.

I know I chose you against your will, but it’s been such a pleasure to watch you grow and learn to trust and love. Thank you for choosing me as your throne today. Goodbye Alice. I love you.

What's with the Seahorse?

Family.

When I was little I my mother an I lived with my grandparents. They have been extremely influential in my life, and we have a special bond. When my grandfather was in the Navy, he got himself many tattoos that he later came to regret. I never understood why he disliked his tattoos(except for one I guess) because they seem to interesting and cool to me. They represent a piece of his story, and in turn a small piece of him.

One of those tattoos is a small seahorse on his lower right leg, just below his calf, just above his ankle. Its colors are faded and the lines have been blurred by time, but it’s still there more than 50 years later.

Around 2012, my mother got a seahorse tattoo on her left leg in nearly the same spot. It was larger, beautifully colored, and to me it represents a deep and undying love of her father. At that point I started wanting one of my own, and thought it would be so cool for our whole family to each have one. It would be so cool if we each had different designs. It’d be like a symbol of our family.

In the Summer of 2013, just after I graduated high school, I went into a tattoo parlor by myself on a whim. I asked for a tattoo and had it done within an hour. Best $100 I’ve ever spent. I went home to show my mom “The newest fish in the family”.

In the following years, each of my siblings have gotten their own seahorses. Different designs, same place. Some have more tattoos, though nobody rivals our mother lol.

So that’s what it’s about.

AskATP: Overcast's multiple downloads: how's this work?

Today in Overcast I set more than 180 added podcasts to download, and was surprised to see Overcast started downloading more than 50 at once, leaving the rest with the “WAITING TO DOWNLOAD…” text.

At first I figured Overcast was assigning each download to a thread, but a quick google search says each core can support 2 threads, and that my iPhone 12 Pro Max has 6 cores. This would lead me to believe Overcast would be able to assign a maximum of 12 podcasts to be downloaded.

Clearly, I don’t understand how this works. Could you elaborate? How is Overcast able to do 50+ simultaneous downloads?

What I Want(!)

TLDR: Please make an ATP shirt inspired by the chip design on the M1 shirts depicting The Windows of Siracusa County.

The Problem:

I have spent the years since first hearing Ep. 96 of ATP trying to conceive of what John's desktop actually looks like. I’d like to simply ask to see it, but there’s certainly private information in each of those windows. John could redact a screenshot, but that would likely take some time and effort, and for what? To share on Twitter? Yeah right. John's way too busy with his jobby-job to do that.

What's that about Independence day? John quit his jobby-job? Good for him!... What? That interposed Max shirt sold really well because it's a humorous in-joke? That gives me an idea.

What I Want(!):

An ATP shirt in the style of the M1 shirts, but instead of a Mac chip design, it shows John’s desktop. John has already demonstrated the ability to make a shirt design that consists of a bunch of rectangles, and I was thinking that he might be able to make a design that is a representation of what his workspace looks like - preferably on a busy day.

This would also be a great opportunity to tie in apps like Overcast, SwitchGlass, Front & Center, y'all's websites, etc. for the funsies. Maybe, maybe not. Either way, tie it all together with the ATP logo on the front and "96: The Windows of Siracusa County" on the back with the design.

Let me tell you, this will be the best selling shirt of ATP history.

Now, John is far too humble to do this on his own, that’s why I didn’t send him the link to this post. I suspect he’ll require lot's of cajoling by co-hosts/listeners to get him to do the fairly large amount of work of creating the design. If this has a shot of happening, then Casey and Marco will have to be the ones to bring the idea to John.

Please. This would make me so happy.