init

1 files changed, 136 insertions, 0 deletions

diff --git a/sass/include/_typography.scss b/sass/include/_typography.scss
new file mode 100644
index 0000000..f9f0caa
--- /dev/null
+++ b/sass/include/_typography.scss
@@ -0,0 +1,136 @@
+// Typography
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  padding-left: 0;
+	color: var(--f2);
+  margin-bottom: var(--s1);
+	margin-top: var(--s2);
+  font-weight: var(--fh);
+  font-size: var(--fs);
+}
+h1 {
+	font-size: 2rem;
+}
+h2 {
+	font-size: 1.75rem;
+}
+h3 {
+	font-size: 1.5rem;
+}
+h4 {
+	font-size: 1.25rem;
+}
+h5 {
+	font-size: 1.125rem;
+}
+header h1 {
+	margin-top: 0;
+}
+a {
+	color: var(--a1);
+	text-decoration: none;
+}
+a:hover {
+  color: var(--a2);
+	text-decoration: underline;
+}
+h1 a, h2 a, main nav a {
+  color: var(--f2);
+  text-decoration:none;
+  &:hover {
+		color: var(--a3);
+		text-decoration: none;
+  }
+}
+article {
+  padding-bottom: .2rem;
+}
+
+// Abbreviations
+// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari
+abbr[title] {
+  border-bottom: var(--bw) dotted;
+  text-decoration: none; // 1
+  cursor: help;
+}
+
+// Highlighted text
+mark {
+  background-color: var(--c4);
+  color: var(--c1);
+  vertical-align: baseline;
+	padding: .1rem .4rem;
+}
+blockquote {
+	margin-left: 0;
+	padding: .5rem 0 .5rem 1.5rem;
+	border-left: .25rem solid var(--c3);
+}
+blockquote > :last-child {
+	margin-bottom: 0;
+}
+small {
+	font-size: .875rem;
+}
+
+/* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
+sub,
+sup {
+	font-size: .75em;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+sub {
+	bottom: -.25em;
+}
+sup {
+	top: -.5em;
+}
+
+address,
+blockquote,
+dl,
+figure,
+form,
+ol,
+p,
+pre,
+table,
+ul {
+  margin: var(--s1) 0;
+  color: var(--f1);
+  font-style: normal;
+  font-weight: var(--fw);
+  font-size: var(--fs);
+}
+
+/* Lists */
+ul,
+ol {
+  padding-right: 0;
+  padding-left: var(--s2);
+
+  li {
+    margin-bottom: var(--s1);
+  }
+}
+
+ul li {
+  list-style: square;
+}
+
+// Ins
+ins {
+  color: var(--cg);
+  text-decoration: none;
+}
+
+// del
+del {
+  color: var(--cr);
+}