Skip to content

Instantly share code, notes, and snippets.

@yuigoto
Last active April 11, 2020 18:07
Show Gist options
  • Save yuigoto/f3b99246c2e48121ca3b3dd68cc01ee8 to your computer and use it in GitHub Desktop.
Save yuigoto/f3b99246c2e48121ca3b3dd68cc01ee8 to your computer and use it in GitHub Desktop.
[Markdown Style : SIXSIDED] A general-purpose Markdown stylesheet, created for my own use in Markdown Pad 2.
/**
* SIXSIDED : a general-purpose Markdown stylesheet
* ----------------------------------------------------------------------
* Originally made for use with MarkdownPad (http://markdownpad.com).
*
* Mostly based on Nicolas Hery's stylesheet for MDPad2, available at:
* https://github.com/nicolashery/markdownpad-github
*
* Author: Fabio Y. Goto - https://yuiti.com.br | https://github.com/yuigoto
* Version: 1.0.0
*/
*,
*:after,
*:before {
border: 0;
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* BODY
* ---------------------------------------------------------------------- */
html {
font-size: 16px;
}
body {
color: #4b504a;
background-color: #fff;
max-width: 960px;
font-family: 'Inter', 'Inter UI', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1rem;
line-height: 1.6;
margin: 0 auto;
padding: 20px;
}
body > *:first-child {
margin-top: 0 !important;
}
body > *:last-child {
margin-bottom: 0 !important;
}
/* BLOCKS
* ---------------------------------------------------------------------- */
p,
blockquote,
ul,
ol,
dl,
table,
pre {
margin: 1rem 0;
}
/* HEADINGS
* ---------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
margin: 1.5rem 0 1rem;
padding: 0;
-webkit-font-smoothing: antialiased;
}
h1 tt,
h1 code,
h2 tt,
h2 code,
h3 tt,
h3 code,
h4 tt,
h4 code,
h5 tt,
h5 code,
h6 tt,
h6 code {
font-size: inherit;
}
h1 {
border-bottom: 3px solid #d5ddd9;
font-size: 2.5rem;
}
h2 {
border-bottom: 1px solid #d5ddd9;
font-size: 2.0rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1.5rem;
}
h5 {
font-size: 1.25rem;
}
h6 {
color: #8d928b;
font-size: 1.125rem;
}
body > h2:first-child,
body > h1:first-child,
body > h1:first-child + h2,
body > h3:first-child,
body > h4:first-child,
body > h5:first-child,
body > h6:first-child {
margin-top: 0;
padding-top: 0;
}
a:first-child h1,
a:first-child h2,
a:first-child h3,
a:first-child h4,
a:first-child h5,
a:first-child h6 {
margin-top: 0;
padding-top: 0;
}
h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p {
margin-top: 1rem;
}
/* LINKS
* ---------------------------------------------------------------------- */
a {
color: #8aaccf;
text-decoration: none;
}
a:hover {
color: #4b7cb7;
text-decoration: underline;
}
/* LISTS
* ---------------------------------------------------------------------- */
ul,
ol {
margin-bottom: 1rem;
padding-left: 2.5rem;
}
ul li > :first-child,
ol li > :first-child,
ul li ul:first-of-type,
ol li ol:first-of-type,
ul li ol:first-of-type,
ol li ul:first-of-type {
margin-top: 0;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin-bottom: 0;
}
dl {
padding: 0;
}
dl dt {
font-size: 1.125rem;
font-weight: 700;
font-style: italic;
margin: 1rem 0 .5rem;
padding: 0;
}
dl dt:first-child {
padding: 0;
}
dl dt>:first-child {
margin-top: 0;
}
dl dt>:last-child {
margin-bottom: 0;
}
dl dd {
margin: 0 0 1rem;
padding: 0 1rem;
}
dl dd>:first-child {
margin-top: 0;
}
dl dd>:last-child {
margin-bottom: 0;
}
/* CODE
* ---------------------------------------------------------------------- */
pre, code, tt, kbd {
font-size: .9rem;
font-family: 'CamingoCode', 'Liberation Mono', Courier, monospace;
}
code, tt {
background-color: #e7f0f5;
border: 1px solid #d5dddf;
border-radius: .25rem;
margin: 0;
padding: 0;
white-space: nowrap;
}
pre > code {
border: none;
background-color: transparent;
white-space: pre-wrap;
word-wrap: break-word;
margin: 0;
padding: 0;
}
pre {
background: #e7f0f5;
border: 1px solid #d5dddf;
font-size: .9rem;
line-height: 1.5em;
padding: .6rem 1rem;
overflow: auto;
border-radius: .25rem;
}
pre code, pre tt {
background-color: transparent;
border: none;
}
kbd {
color: #697166;
background-color: #e7f0f5;
border: 1px solid #c5cbcb;
padding: .25rem .5rem;
border-radius: .25rem;
box-shadow: 0 .25rem 0 0 #c5cbcb;
}
/* QUOTES
* ---------------------------------------------------------------------- */
blockquote {
border-left: .25rem solid #d5dddf;
color: #9fa5a3;
padding: 0 1rem;
}
blockquote > :first-child {
margin-top: 0;
}
blockquote > :last-child {
margin-bottom: 0;
}
/* HORIZONTAL RULERS
* ---------------------------------------------------------------------- */
hr {
background: transparent;
border-bottom: 1px solid #d5dddf;
height: 0;
margin: 1rem 0 2rem;
padding: 0;
display: block;
clear: both;
overflow: hidden;
}
/* TABLES
* ---------------------------------------------------------------------- */
table {
border-collapse: collapse;
margin: 1rem 0 1rem;
}
table th {
background-color: #e7f0f5;
font-weight: 700;
}
table th,
table td {
border: 1px solid #c5cbcb;
padding: .5rem 1rem;
}
table tr {
border-top: 1px solid #c5cbcb;
background-color: #fff;
}
table tr:nth-child(2n) {
background-color: #fafafa;
}
/* IMAGES
* ---------------------------------------------------------------------- */
img {
max-width: 100%;
margin: 0 auto 1rem;
}
img:last-child {
margin: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment