2018 Refresh

assets/css/_articles.less

@@ -0,0 +1,128 @@
+.default-title {
+	.pb4;
+
+	h1 {
+		.mb0;
+	}
+}
+article,
+.default-spacing {
+	.py6;
+	.px3;
+
+	h2,
+	h3,
+	h4,
+	p,
+	ul,
+	ol,
+	blockquote,
+	.twitter-tweet,
+	time,
+	pre,
+	figure.inline,
+	.max-width {
+		.wmx6;
+		.mx0;
+	}
+	time,
+	pre {
+		.d-block;
+	}
+}
+@media screen and (max-width: @breakpoint-small) {
+	article,
+	.default-spacing {
+		.py4;
+	}
+}
+article {
+	p,
+	li {
+		.ff-serif;
+	}
+
+	h2 {
+		.mt5;
+		.mb4;
+	}
+	h3 {
+		.mt5;
+		.mb3;
+	}
+	p {
+		.mb5;
+		.lh-md;
+	}
+	ul,
+	ol {
+		.my5;
+
+		li {
+			.my2;
+			position: relative;
+			list-style: none;
+		}
+	}
+	ul li:before {
+		position: absolute;
+	    content: "";
+	    display: inline-block;
+	    width: 0.3rem;
+	    height: 0.3rem;
+	    background: @gray-4;
+	    top: 0.5rem;
+	    left: -1rem;
+	}
+	ol {
+		counter-reset: section;
+
+		li:before {
+			counter-increment: section;
+  			content: counter(section);
+			position: absolute;
+		    display: inline-block;
+		    top: -1px;
+		    left: -1.3rem;
+		    .ff-sans;
+		    text-align: right;
+		    font-weight: bold;
+		    .fs-fine;
+		    color: @gray-5;
+		}
+		li:nth-child(-n+9):before {
+			content: "0" counter(section);
+		}
+	}
+
+	figure {
+		.mx0;
+		max-width: @site-width;
+
+		img,
+		iframe {
+			.wmx100;
+			.w100;
+			.d-block;
+		}
+		figcaption {
+			.fc-light;
+			.fs-caption;
+			.lh-sm;
+			.d-block;
+			.py2;
+			word-break: break-all;
+		}
+	}
+	.flush {
+		max-width: @site-width;
+		.w100;
+		margin-left: -@su3;
+		margin-right: -@su3;
+	}
+	.bordered {
+		.flush;
+		.p3;
+		border: 1px solid @gray-2;
+	}
+}