+/**
+ * Fonts
+ */
+
+body, button, input, select, label, textarea {
+ font-family: $text;
+}
+.Codemirror, pre, #markdown-editor-input, .editor-toolbar, .code-base {
+ font-family: $mono;
+}
+
/*
* Header Styles
*/
}
h3 {
font-size: 2.333em;
- line-height: 1.571428572em;
+ line-height: 1.221428572em;
margin-top: 0.78571429em;
margin-bottom: 0.43137255em;
}
margin-bottom: 0.66em;
}
+@include smaller-than($s) {
+ h1 {
+ font-size: 2.8275em;
+ }
+ h2 {
+ font-size: 2.333em;
+ }
+ h3 {
+ font-size: 1.666em;
+ }
+ h4 {
+ font-size: 1.333em;
+ }
+ h5 {
+ font-size: 1.161616em;
+ }
+}
+
/*
* Link styling
*/
cursor: pointer;
text-decoration: none;
transition: color ease-in-out 80ms;
- font-family: $text;
line-height: 1.6;
&:hover {
text-decoration: underline;
color: darken($primary, 20%);
}
- i {
- padding-right: $-s;
+ &.icon {
+ display: inline-block;
}
- i.zmdi-hc-flip-horizontal {
- padding-right: 0;
- padding-left: $-s;
+ svg {
+ position: relative;
+ display: inline-block;
}
}
hr {
border: 0;
height: 1px;
- border: 0;
background: #EAEAEA;
margin-bottom: $-l;
&.faded {
font-size: 0.8em;
}
-pre {
- font-family: monospace;
- white-space:pre;
+sub, .subscript {
+ vertical-align: sub;
font-size: 0.8em;
- overflow: hidden;
- border-radius: 4px;
- box-shadow: 0 1px 2px 0px rgba(10, 10, 10, 0.06);
- border: 1px solid rgba(221, 221, 221, 0.66);
- background-color: #fdf6e3;
- padding: $-s;
- overflow-x: scroll;
+}
+
+pre {
+ font-size: 12px;
+ background-color: #f5f5f5;
+ border: 1px solid #DDD;
+ padding-left: 31px;
+ position: relative;
+ padding-top: 3px;
+ padding-bottom: 3px;
+ &:after {
+ content: '';
+ display: block;
+ position: absolute;
+ top: 0;
+ width: 29px;
+ left: 0;
+ background-color: #f5f5f5;
+ height: 100%;
+ border-right: 1px solid #DDD;
+ }
+}
+
+@media print {
+ pre {
+ padding-left: 12px;
+ }
+ pre:after {
+ display: none;
+ }
}
blockquote {
.code-base {
background-color: #F8F8F8;
- font-family: monospace;
font-size: 0.80em;
border: 1px solid #DDD;
border-radius: 3px;
border: 0;
font-size: 1em;
display: block;
+ line-height: 1.6;
}
/*
* Text colors
*/
p.pos, p .pos, span.pos, .text-pos {
color: $positive;
+ fill: $positive;
&:hover {
color: $positive;
+ fill: $positive;
}
}
p.neg, p .neg, span.neg, .text-neg {
color: $negative;
+ fill: $negative;
&:hover {
color: $negative;
+ fill: $negative;
}
}
p.muted, p .muted, span.muted, .text-muted {
color: lighten($text-dark, 26%);
+ fill: lighten($text-dark, 26%);
&.small, .small {
color: lighten($text-dark, 32%);
+ fill: lighten($text-dark, 32%);
}
}
p.primary, p .primary, span.primary, .text-primary {
color: $primary;
+ fill: $primary;
&:hover {
color: $primary;
+ fill: $primary;
}
}
p.secondary, p .secondary, span.secondary, .text-secondary {
color: $secondary;
+ fill: $secondary;
&:hover {
color: $secondary;
+ fill: $secondary;
}
}
.text-book {
color: $color-book;
+ fill: $color-book;
&:hover {
color: $color-book;
+ fill: $color-book;
}
}
.text-page {
color: $color-page;
+ fill: $color-page;
&:hover {
color: $color-page;
+ fill: $color-page;
}
&.draft {
color: $color-page-draft;
+ fill: $color-page-draft;
}
&.draft:hover {
color: $color-page-draft;
+ fill: $color-page-draft;
}
}
.text-chapter {
color: $color-chapter;
+ fill: $color-chapter;
&:hover {
color: $color-chapter;
+ fill: $color-chapter;
}
}
.faded .text-book:hover {
color: $color-book !important;
+ fill: $color-book !important;
}
.faded .text-chapter:hover {
color: $color-chapter !important;
+ fill: $color-chapter !important;
}
.faded .text-page:hover {
color: $color-page !important;
+ fill: $color-page !important;
}
span.highlight {
/*
* Lists
*/
+ul, ol {
+ overflow: hidden;
+ p {
+ margin: 0;
+ }
+}
ul {
padding-left: $-m * 1.3;
list-style: disc;
- overflow: hidden;
+ ul {
+ list-style: circle;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ label {
+ margin: 0;
+ }
}
ol {
list-style: decimal;
padding-left: $-m * 2;
- overflow: hidden;
+}
+
+li.checkbox-item, li.task-list-item {
+ list-style: none;
+ margin-left: - ($-m * 1.3);
+ input[type="checkbox"] {
+ margin-right: $-xs;
+ }
}
/*
color: inherit;
}
+.break-text {
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+}
+
/**
* Grouping
*/
display: block;
}
-.action-header {
- h1 {
- margin-top: $-m;
- }
-}
-
/**
* Icons
*/
padding-right: $-xs;
}
+.svg-icon {
+ width: 1em;
+ height: 1em;
+ display: inline-block;
+ position: relative;
+ bottom: -0.105em;
+ margin-right: $-xs;
+}
+