styling images

1 files changed, 82 insertions, 6 deletions

diff --git a/site/assets/css/css.css b/site/assets/css/css.css
index c9d9b029..1024ffcd 100644
--- a/site/assets/css/css.css
+++ b/site/assets/css/css.css
@@ -120,14 +120,14 @@ h1 {
   margin: 75px 0 10px;
   padding: 0;
 }
-h3 {
-  margin: 0 0 10px 0;
+h2, h3 {
+  margin: 0 0 20px 0;
   padding: 0;
   font-size: 11pt;
   font-weight: 500;
 }
 
-th, .gray, h3 {
+th, .gray, h2, h3 {
   font-family: 'Roboto Mono', monospace;
   font-weight: 400;
   text-transform: uppercase;
@@ -165,13 +165,89 @@ p {
   color: #fff;
 }
 code {
-  display: block;
   font-family: 'Roboto Mono', monospace;
   font-size: 9pt;
+  padding: 2px 4px;
+  background: rgba(255,255,255,0.1);
+}
+pre code {
+  display: block;
   max-height: 400px;
   max-width: 640px;
-  padding: 2px 5px;
-  background: rgba(255,255,255,0.1);
+}
+hr {
+  height: 1px;
+  background: #888;
+  border: 0;
+  width: 80px;
+}
+.footnotes hr {
+  display: none;
+}
+.footnotes ol:before {
+  content: 'Footnotes';
+  margin: 0 0 10px -40px;
+  padding-bottom: 0;
+  display: block;
+  font-family: 'Roboto Mono', monospace;
+  font-weight: 400;
+  text-transform: uppercase;
+  color: #666;
+  font-size: 11pt;
+}
+
+/* images */
+
+section img {
+  max-width: 100%;
+  display: block;
+  margin: 0 auto;
+}
+section .image {
+  margin-bottom: 40px;
+}
+section.images {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: center;
+}
+.image:only-child {
+  width: 100%;
+}
+.image:first-child {
+  margin-left: 0;
+}
+.image:nth-child(2),
+.image:nth-child(3) {
+  margin-left: 40px;
+}
+.image:first-child:nth-last-child(2),
+.image:first-child:nth-last-child(2) ~ .image {
+  width: 300px;
+}
+.image:first-child:nth-last-child(3),
+.image:first-child:nth-last-child(3) ~ .image {
+  width: 186px;
+}
+section.wide {
+  width: 100%;
+}
+section.wide .image {
+  max-width: 100%;
+}
+.caption {
+  text-align: center;
+  font-size: 9pt;
+  color: #888;
+  max-width: 620px;
+  margin: 10px auto 0 auto;
+}
+
+blockquote {
+  margin-left: 28px;
+  padding: 0 0 0 10px;
+  border-left: 2px solid #555;
 }
 
 /* top of post metadata */