:3
This commit is contained in:
parent
328a6bd178
commit
1dbf1e4074
21 changed files with 1046 additions and 545 deletions
250
assets/style/markdown.scss
Normal file
250
assets/style/markdown.scss
Normal file
|
|
@ -0,0 +1,250 @@
|
|||
|
||||
/* 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;
|
||||
}
|
||||
165
assets/style/style.css
Normal file
165
assets/style/style.css
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Lobster&display=swap');
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
html {
|
||||
@apply min-h-screen bg-slate-950;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Lobster', cursive, 'Courier New', Courier, monospace;
|
||||
@apply text-3xl font-bold;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: 'Lobster', cursive, 'Courier New', Courier, monospace;
|
||||
@apply text-2xl font-bold;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-xl font-bold;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@apply text-lg font-bold;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@apply text-base font-bold;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@apply text-sm font-bold;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply transition text-purple-400 hover:text-purple-600;
|
||||
}
|
||||
|
||||
|
||||
blockquote {
|
||||
@apply border-l-4 border-purple-400 pl-2;
|
||||
container: block;
|
||||
}
|
||||
|
||||
br {
|
||||
content: '';
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
ul {
|
||||
@apply list-disc list-inside;
|
||||
}
|
||||
|
||||
ol {
|
||||
@apply list-decimal list-inside;
|
||||
}
|
||||
|
||||
li {
|
||||
@apply my-2;
|
||||
}
|
||||
p {
|
||||
line-height: normal;
|
||||
}
|
||||
pre code {
|
||||
white-space: pre-wrap;
|
||||
display: block;
|
||||
padding: 1em;
|
||||
background-color: #272822;
|
||||
@apply border-purple-400 border rounded-lg;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
@apply subpixel-antialiased;
|
||||
}
|
||||
|
||||
/* Code if there is no pre tag before it */
|
||||
:not(pre) > code {
|
||||
@apply p-1 border-purple-800 border rounded-lg;
|
||||
}
|
||||
|
||||
.md-contents h2:not(.md-override) {
|
||||
}
|
||||
|
||||
.md-contents div:not(.md-override) {
|
||||
@apply mb-3 mt-3;
|
||||
}
|
||||
|
||||
/* Apply glow effect to separators */
|
||||
.md-contents hr:not(.md-override) {
|
||||
box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Code theme */
|
||||
|
||||
.hljs {
|
||||
background: #272822;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.hljs-tag,
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-literal,
|
||||
.hljs-strong,
|
||||
.hljs-number,
|
||||
.hljs-name {
|
||||
color: #f92672;
|
||||
}
|
||||
|
||||
.hljs-code {
|
||||
color: #66d9ef;
|
||||
}
|
||||
|
||||
.hljs-attribute,
|
||||
.hljs-attr,
|
||||
.hljs-symbol,
|
||||
.hljs-regexp,
|
||||
.hljs-link {
|
||||
color: #bf79db;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-bullet,
|
||||
.hljs-subst,
|
||||
.hljs-title,
|
||||
.hljs-section,
|
||||
.hljs-emphasis,
|
||||
.hljs-type,
|
||||
.hljs-built_in,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo,
|
||||
.hljs-addition,
|
||||
.hljs-variable,
|
||||
.hljs-template-tag,
|
||||
.hljs-template-variable {
|
||||
color: #a6e22e;
|
||||
}
|
||||
|
||||
.hljs-title.class_,
|
||||
.hljs-class .hljs-title {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote,
|
||||
.hljs-deletion,
|
||||
.hljs-meta {
|
||||
color: #75715e;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-literal,
|
||||
.hljs-doctag,
|
||||
.hljs-title,
|
||||
.hljs-section,
|
||||
.hljs-type,
|
||||
.hljs-selector-id {
|
||||
font-weight: bold;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue