personal-site/assets/style/markdown.scss

/* Note: Use `md-override` to override the default markdown styling */

/* Headers (1-3) get a small visual upgrade */
.md-contents h1:not(.md-override), .md-contents h2:not(.md-override), .md-contents h3:not(.md-override) {
    @apply border-highlight border-b-2;
    padding-bottom: 0.25rem;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

/* Markdown alerts get a box, a shadow, and a background+border color */
.md-contents .markdown-alert:not(.md-override) {
    @apply rounded-lg border-highlight border-b-2 shadow-primary shadow-md;
    background-color: #333;
    padding: 0.5rem;
    margin: 1rem 0;
}
.md-contents .markdown-alert-title {
    font-weight: bold;
    margin-bottom: 0.5rem;
}
.md-contents .markdown-alert-warning:not(.md-override) {
    @apply border-2 border-warning shadow-warning shadow-md;
}

.md-contents .markdown-alert-warning .markdown-alert-title:not(.md-override):before {
    content: "⚠️ ";
    text-shadow: 1px 1px 1px #000;
}
.md-contents .markdown-alert-danger:not(.md-override) {
    @apply border-2 border-danger shadow-danger shadow-md;
}
.md-contents .markdown-alert-danger .markdown-alert-title:not(.md-override):before {
    content: "❌ ";
    text-shadow: 1px 1px 1px #000;
}
.md-contents .markdown-alert-success:not(.md-override) {
    @apply border-2 border-success shadow-success shadow-md;
}
.md-contents .markdown-alert-success .markdown-alert-title:not(.md-override):before {
    content: "✅ ";
    text-shadow: 1px 1px 1px #000;
}
.md-contents .markdown-alert-info:not(.md-override) {
    @apply border-2 border-info shadow-info shadow-md;
}
.md-contents .markdown-alert-info .markdown-alert-title:not(.md-override):before {
    content: "ℹ️ ";
    text-shadow: 1px 1px 1px #000;
}
.md-contents .markdown-alert-important:not(.md-override) {
    @apply border-2 border-important shadow-important shadow-md;
}
.md-contents .markdown-alert-important .markdown-alert-title:not(.md-override):before {
    content: "❗ ";
    text-shadow: 1px 1px 1px #000;
}
.md-contents .markdown-alert-caution:not(.md-override) {
    @apply border-2 border-warning shadow-warning shadow-md;
}
.md-contents .markdown-alert-caution .markdown-alert-title:not(.md-override):before {
    content: "⚠️ ";
    text-shadow: 1px 1px 1px #000;
}
.md-contents .markdown-alert-note:not(.md-override) {
    @apply border-2 border-note shadow-note shadow-md;
}
.md-contents .markdown-alert-note .markdown-alert-title:not(.md-override):before {
    content: "📝 ";
    text-shadow: 1px 1px 1px #000;
}
.md-contents .markdown-alert-tip:not(.md-override) {
    @apply border-2 border-tip shadow-tip shadow-md;
}
.md-contents .markdown-alert-tip .markdown-alert-title:not(.md-override):before {
    content: "💡 ";
    text-shadow: 1px 1px 1px #000;
}
.md-contents .markdown-alert-question:not(.md-override) {
    @apply border-2 border-note shadow-note shadow-md;
}
.md-contents .markdown-alert-question .markdown-alert-title:not(.md-override):before {
    content: "❓ ";
    text-shadow: 1px 1px 1px #000;
}
.md-contents .markdown-alert-quote:not(.md-override) {
    @apply border-2 border-note shadow-note shadow-md border-dashed;
}
.md-contents .markdown-alert-quote .markdown-alert-title:not(.md-override):before {
    content: "❝ ";
    text-shadow: 1px 1px 1px #000;
}
.md-contents .markdown-alert-deprecated:not(.md-override) {
    @apply border-2 border-danger shadow-danger shadow-md;
}
.md-contents .markdown-alert-deprecated .markdown-alert-title:not(.md-override):before {
    content: "🚫 ";
    text-shadow: 1px 1px 1px #000;
}
.md-contents .markdown-alert-example:not(.md-override) {
    @apply border-2 border-info shadow-info shadow-md;
}
.md-contents .markdown-alert-example .markdown-alert-title:not(.md-override):before {
    content: "💡 ";
    text-shadow: 1px 1px 1px #000;
}
.md-contents .markdown-alert-todo:not(.md-override) {
    @apply border-2 border-warning shadow-warning shadow-md;
}
.md-contents .markdown-alert-todo .markdown-alert-title:not(.md-override):before {
    content: "📝 ";
    text-shadow: 1px 1px 1px #000;
}
.md-contents .markdown-alert-done:not(.md-override) {
    @apply border-2 border-success shadow-success shadow-md;
}
.md-contents .markdown-alert-done .markdown-alert-title:not(.md-override):before {
    content: "✅ ";
    text-shadow: 1px 1px 1px #000;
}

/* Footnotes, ensure they are by default white with no transition if they have no href */
.md-contents .footnote-anchor:not([href]) {
    color: white;
    transition: none;
}


/* Apply margin to code blocks */
.md-contents pre:not(.md-override) {
    margin: 1rem 0;
}

/* Apply styling to lists and list items with nesting */
.md-contents ul:not(.md-override), .md-contents ol:not(.md-override) {
    margin: 1rem 0;
    padding-left: 1rem;
}

/* Apply different bullet types to nested lists as they are nested */
.md-contents ul:not(.md-override) ul:not(.md-override), .md-contents ol:not(.md-override) ul:not(.md-override) {
    list-style-type: circle;
}

/* Apply table styling, with a pleasant glowing border effect */
.md-contents table:not(.md-override) {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #333;
    box-shadow: 0 0 7px #A020F0
}

.md-contents th:not(.md-override), .md-contents td:not(.md-override) {
    border: 1px solid #A020F0;
    padding: 0.5rem;
}

.md-contents th:not(.md-override) {
    background-color: #333;
    color: white;
}
Hosted
.md-contents button:not(.md-override) {
    background-color: #333;
    color: white;
    border: 1px solid #A020F0;
    padding: 0.5rem;
    border-radius: 0.25rem;
    box-shadow: 0 0 7px #A020F0;
}

.md-contents button:hover:not(.md-override) {
    background-color: #555;
    box-shadow: 0 0 10px #A020F0;
    color: white;
}

/* transition for button hover effect */
.md-contents button:not(.md-override) {
    transition: background-color 0.5s;
}

/* iframes get a border and a shadow */
.md-contents iframe:not(.md-override) {
    @apply border-2 border-purple-600 rounded-lg;
    box-shadow: 0 0 7px #A020F0;
}

/* Identify if the iframe links to a YouTube video - If so, red border */
.md-contents iframe[src*="youtube.com"]:not(.md-override) {
    @apply border-2 border-red-600;
    box-shadow: 0 0 7px red;
}

/* Identify if the iframe links to a Twitch video - If so, purple border */
.md-contents iframe[src*="twitch.tv"]:not(.md-override) {
    @apply border-2 border-purple-600;
    box-shadow: 0 0 7px #A020F0;
}

/* Identify if the iframe links to a Spotify playlist - If so, green border */
.md-contents iframe[src*="spotify.com"]:not(.md-override) {
    @apply border-2 border-green-600 rounded-xl;
    box-shadow: 0 0 7px green;
}

/* Identify if the iframe links to a SoundCloud track - If so, orange border */
.md-contents iframe[src*="soundcloud.com"]:not(.md-override) {
    @apply border-2 border-orange-600;
    box-shadow: 0 0 7px orange;
}

/* Identify if the iframe links to a Bandcamp track - If so, blue border */
.md-contents iframe[src*="bandcamp.com"]:not(.md-override) {
    @apply border-2 border-blue-600;
    box-shadow: 0 0 7px blue;
}

/* Identify if the iframe links to a GitHub Gist - If so, gray border */
.md-contents iframe[src*="gist.github.com"]:not(.md-override) {
    @apply border-2 border-gray-600;
    box-shadow: 0 0 7px gray;
}

/* And if it links to Wikipedia, the free online encyclopedia, give it a white border */
.md-contents iframe[src*="wikipedia.org"]:not(.md-override) {
    @apply border-2 border-white;
    box-shadow: 0 0 7px white;
}

/* If the iframe links to a Google Maps location */
.md-contents iframe[src*="google.com/maps"]:not(.md-override) {
    border-left: 2px solid #4285F4;
    border-right: 2px solid #0F9D58;
    border-top: 2px solid #F4B400;
    border-bottom: 2px solid #DB4437;
    box-shadow: 0 0 7px #4285F4;
}

/* Redo the audio element styling */
.md-contents audio:not(.md-override) {
    @apply border-2 border-purple-600 rounded-lg;
    box-shadow: 0 0 7px #A020F0;
}

/* Images get a border and a shadow */
.md-contents img:not(.md-override) {
    @apply border-2 border-image shadow-image shadow-sm m-1;
}