Skip to content

Instantly share code, notes, and snippets.

@thetutlage
Created June 21, 2019 15:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thetutlage/8510d18f73d832a074fa2eacb1482852 to your computer and use it in GitHub Desktop.
Save thetutlage/8510d18f73d832a074fa2eacb1482852 to your computer and use it in GitHub Desktop.
The dimer theme markdown styling css
:root {
--text-color: #454f5b;
--headings-color: #161d25;
--links-color: #fb2f51;
--lead-text-color: #718096;
--text-font: 'DimerSans', sans-serif;
--headings-font: 'Eina 01', sans-serif;
--pre-font: 'Roboto Mono', monospace;
--alerts-bg: #f1f3f5;
--pre-bg: #1b2b34;
--note-color: #4800ad;
--tip-color: #00c79b;
--container-bg: #fff;
}
.wysiwyg {
font-size: 1.6rem;
line-height: 1.5;
color: var(--text-color);
font-family: var(--text-font);
}
.wysiwyg h1, .wysiwyg h2, .wysiwyg h3, .wysiwyg h4 {
color: var(--headings-color);
font-family: var(--headings-font);
font-weight: 600;
}
.wysiwyg h1 {
margin-bottom: 2.4rem;
font-size: 4.6rem;
line-height: 1.7;
font-weight: 700;
letter-spacing: -.1rem;
}
.wysiwyg p, .wysiwyg .alert, .wysiwyg .embed, .wysiwyg img, .wysiwyg .dimer-highlight {
margin-bottom: 2.6rem;
}
.wysiwyg ul, .wysiwyg ol {
margin-bottom: 3.2rem;
}
.wysiwyg p {
line-height: 1.55;
}
.wysiwyg p.lead {
font-size: 2.2rem;
color: var(--lead-text-color);
margin-bottom: 3.4rem;
}
.wysiwyg h2 {
font-size: 2.2rem;
line-height: 1.2;
margin-top: 5.6rem;
padding-top: 3.2rem;
border-top: .1rem solid currentColor;
margin-bottom: 2.2rem;
}
.wysiwyg h3 {
margin-top: 3.2rem;
margin-bottom: .8rem;
font-size: 1.6rem;
line-height: 2.4rem;
text-transform: uppercase;
letter-spacing: .1rem;
}
.wysiwyg ul, .wysiwyg ol {
list-style: none;
}
.wysiwyg li {
padding-left: 2.4rem;
position: relative;
line-height: 1.55;
margin-bottom: 1.6rem;
}
.wysiwyg ul li:before {
position: absolute;
top: 0;
left: 0;
display: block;
content: "\2022";
font-size: 2.4rem;
line-height: 1;
}
.wysiwyg ol {
counter-reset: numbered-counter;
}
.wysiwyg a {
color: var(--links-color);
text-decoration: none;
background-image: linear-gradient(to bottom, transparent 50%, var(--links-color) 50%);
background-position: 0 93%;
background-repeat: repeat-x;
background-size: 100% .15rem;
text-shadow: 0.1rem 0 var(--container-bg),
0.15rem 0 var(--container-bg),
-0.1rem 0 var(--container-bg),
-0.15rem 0 var(--container-bg);
}
.wysiwyg .alert a {
text-shadow: 0.1rem 0 var(--alerts-bg),
0.15rem 0 var(--alerts-bg),
-0.1rem 0 var(--alerts-bg),
-0.15rem 0 var(--alerts-bg);
}
.wysiwyg ol li:before {
position: absolute;
top: 0;
left: 0;
display: block;
content: counter(numbered-counter, decimal) ".";
counter-increment: numbered-counter;
}
.wysiwyg .alert {
position: relative;
border-radius: 6px;
background: var(--alerts-bg);
padding: 19px 15px 19px 55px;
}
.wysiwyg .alert p:last-of-type {
margin-bottom: 0;
}
.wysiwyg .alert p:first-of-type {
margin-top: 0;
}
.wysiwyg .alert:before {
border-radius: 6px 0 0 6px;
content: "";
width: 30px;
left: 0;
position: absolute;
top: 0;
bottom: 0;
}
.wysiwyg .alert-note:before {
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTggMTZBOCA4IDAgMSAwIDggMGE4IDggMCAwIDAgMCAxNnptLS42NzUtNC4wMDh2LTQuNjVhLjY3NS42NzUgMCAxIDEgMS4zNSAwdjQuNjVhLjY3NS42NzUgMCAwIDEtMS4zNSAwem0uNjczLTguOTZjLjU1MiAwIC44ODIuMzI3Ljg4Mi44NzUgMCAuNTYtLjMzLjg4Ni0uODgyLjg4Ni0uNTQ4IDAtLjg3Ny0uMzI3LS44NzctLjg4NiAwLS41NDguMzI5LS44NzQuODc3LS44NzR6Ii8+PC9zdmc+) no-repeat 50% var(--note-color);
}
.wysiwyg .alert-tip:before {
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDE0IDE1Ij4gIDxwYXRoIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTIuNDM5IDBhLjUyNS41MjUgMCAwIDAtLjM4OC4xNjYuNTg3LjU4NyAwIDAgMCAwIC44LjUyLjUyIDAgMCAwIC43NjEgMCAuNTg3LjU4NyAwIDAgMCAwLS44QS41MjYuNTI2IDAgMCAwIDIuNDQgMHptOS4xMzggMGEuNTI1LjUyNSAwIDAgMC0uMzkuMTY2LjU4Ny41ODcgMCAwIDAgMCAuOC41Mi41MiAwIDAgMCAuNzYyIDAgLjU4Ny41ODcgMCAwIDAgMC0uOC41MjYuNTI2IDAgMCAwLS4zNzItLjE2NnpNNyAuMjc0Yy0yLjY3NyAwLTQuODQ2IDIuMjgyLTQuODQ2IDUuMDk4IDAgMi44MzIgMi4xNTQgMy45NjQgMy4yMyA2LjIzaDMuMjMxYzEuMDc3LTIuMjY2IDMuMjMxLTMuMzk4IDMuMjMxLTYuMjNDMTEuODQ2IDIuNTU2IDkuNjc2LjI3NCA3IC4yNzR6TS41MzggNC44MDVBLjU1My41NTMgMCAwIDAgMCA1LjM3MmMwIC4zMTMuMjQxLjU2Ni41MzguNTY2YS41NTMuNTUzIDAgMCAwIC41MzktLjU2Ni41NTMuNTUzIDAgMCAwLS41MzktLjU2N3ptMTIuOTI0IDBhLjU1My41NTMgMCAwIDAtLjUzOS41NjdjMCAuMzEzLjI0MS41NjYuNTM5LjU2NkEuNTUzLjU1MyAwIDAgMCAxNCA1LjM3MmEuNTUzLjU1MyAwIDAgMC0uNTM4LS41Njd6TTIuNDM5IDkuNjExYS41MjUuNTI1IDAgMCAwLS4zOS4xNjYuNTg3LjU4NyAwIDAgMCAwIC44LjUyNS41MjUgMCAwIDAgLjM4Mi4xNjdjLjE0MyAwIC4yOC0uMDYuMzgxLS4xNjdhLjU4Ny41ODcgMCAwIDAgMC0uOC41MjYuNTI2IDAgMCAwLS4zNzMtLjE2NnptOS4xMzcgMGEuNTI1LjUyNSAwIDAgMC0uMzg4LjE2Ni41ODIuNTgyIDAgMCAwLS4xNTguNGMwIC4xNTEuMDU3LjI5NS4xNTguNDAyYS41Mi41MiAwIDAgMCAuNzYxIDAgLjU4Mi41ODIgMCAwIDAgLjE1OC0uNDAxLjU4Mi41ODIgMCAwIDAtLjE1OC0uNDAxLjUyNi41MjYgMCAwIDAtLjM3My0uMTY1em0tNi4xOTEgMy4xMjR2LjU2NmMwIC42MjYuNDgyIDEuMTMzIDEuMDc3IDEuMTMzIDAgLjMxMi4yNC41NjYuNTM4LjU2NmEuNTUzLjU1MyAwIDAgMCAuNTM4LS41NjZjLjU5NSAwIDEuMDc3LS41MDcgMS4wNzctMS4xMzN2LS41NjZoLTMuMjN6Ii8+PC9zdmc+) no-repeat 50% var(--tip-color);
}
.wysiwyg img {
max-width: 100%;
}
/**
* Codeblocks
*/
.wysiwyg .dimer-highlight {
background: var(--pre-bg);
font-family: var(--pre-font);
border-radius: 6px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment