Enhance styling and add Live Sass compiler settings

.vscode/extensions.json

@@ -14,6 +14,7 @@
     "redhat.vscode-yaml",
     "josee9988.minifyall",
     "janne252.fontawesome-autocomplete",
-    "takumii.markdowntable"
+    "takumii.markdowntable",
+    "glenn2223.live-sass"
   ]
 }

.vscode/settings.json

@@ -49,5 +49,17 @@
     "MD046": {
       "style": "fenced"
     }
-  }
+  },
+  "liveSassCompile.settings.formats": [
+    {
+        "format": "expanded",
+        "extensionName": ".css",
+        "savePath": "/_includes/css"
+    },
+    {
+        "extensionName": ".min.css",
+        "format": "compressed",
+        "savePath": "/_includes/css"
+    }
+  ]
 }

_includes/callout.html

@@ -1,5 +1,5 @@
 {%- assign markdown = include.content | markdownify -%}
-{%- assign bgcolor = include.color | default: '#ede89a' -%}
+{%- assign bgcolor = include.color | default: '#fcf475' -%}
 <div class="callout" style="margin-bottom: 24px; padding: 16px 16px 8px; background-color: {{ bgcolor }}; box-shadow: 0 2px 4px;">
   {{ markdown }}
-</div>
+</div>

_includes/css/amp-custom.css

@@ -1,126 +1,144 @@
 amp-img[aria-label=lightbox] {
   cursor: zoom-in;
 }
+
 amp-image-lightbox img {
-  object-fit: scale-down;
+  -o-object-fit: scale-down;
+     object-fit: scale-down;
 }
 amp-image-lightbox button:last-of-type {
   cursor: zoom-out;
   min-width: 100%;
-  min-height: 100%
+  min-height: 100%;
 }
+
 amp-image-viewer img {
+  max-width: -moz-fit-content;
   max-width: fit-content;
-  transition: width 0.25s linear
+  transition: width 0.25s linear;
 }
+
 amp-lightbox {
   background-color: rgba(0, 0, 0, 0.6);
   z-index: 1050;
 }
+
 a.vglnk {
   border-bottom: 2px dashed gray;
-  box-shadow: unset
+  box-shadow: unset;
 }
-figure.shadow-none *,
-.shadow-none {
+
+figure.shadow-none *, .shadow-none {
   box-shadow: none;
 }
+
 h1 {
-  font-size: 2.5rem
+  font-size: 2.5rem;
 }
+
 h2 {
-  font-size: 2rem
+  font-size: 2rem;
 }
+
 h3 {
-  font-size: 1.7rem
+  font-size: 1.7rem;
 }
+
 h4 {
-  font-size: 1.48rem
+  font-size: 1.48rem;
 }
+
 h5 {
-  font-size: 1.3rem
+  font-size: 1.3rem;
 }
+
 h6 {
-  font-size: 1.25rem
+  font-size: 1.25rem;
 }
+
 kbd {
   background-color: #eee;
   border-radius: 3px;
   border: 1px solid #b4b4b4;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
   display: inline-block;
-  font-size: .85em;
+  font-size: 0.85em;
   line-height: 1;
   padding: 2px 4px;
   white-space: nowrap;
 }
-.article-post h2:not(:first-of-type) {
-  margin-top: 5rem;
-}
+
 .article-post del {
   color: #999;
-  text-decoration-color: #f05f70
+  text-decoration-color: #f05f70;
 }
 .article-post del a {
   box-shadow: none;
   border-bottom: 1px solid #ddd;
   text-decoration: inherit;
 }
 .article-post .box-highlight {
-  box-shadow: 1px 2px 15px #675bff
+  box-shadow: 1px 2px 15px #675bff;
 }
 .article-post figcaption {
-  font-size: smaller
+  font-size: smaller;
 }
 .article-post a > code {
   padding: 0.2rem 0.4rem;
   color: #bd4147;
   background-color: #f7f7f9;
   box-shadow: inset 0 -2px 0 #ffe51f, 0 2px 0 #ffe51f;
 }
-.article-post a.citation,
-.article-post a.footnote,
-.article-post a.reversefootnote {
+.article-post a.citation, .article-post a.footnote, .article-post a.reversefootnote {
   box-shadow: none;
   background-color: #ffe51f;
 }
+
 .card .row, .card > a {
-  height: 100%
+  height: 100%;
 }
+
 .container {
   width: 96%;
-  max-width: 100%
+  max-width: 100%;
 }
+
 .inline-fix + * {
   display: inline;
 }
 .inline-fix + * + .badge {
   vertical-align: text-top;
 }
+
 .listfeaturedtag .card .thumbnail img {
   width: 500px;
   height: 258px;
 }
 .listfeaturedtag .card-list {
-  width: 100%
+  width: 100%;
 }
 .listfeaturedtag .card-list .thumbnail img {
   width: 500px;
   height: 150px;
-  object-fit: cover
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 .listfeaturedtag .card-list .card-title {
-  font-size: 1rem
+  font-size: 1rem;
 }
 .listfeaturedtag .card-list .wrapthumbnail {
-  height: 150px
+  height: 150px;
 }
+
 .mono {
-  font-family: Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
+  font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
 }
+
 .thumbnail.fit-left img {
-  object-position: left
+  -o-object-position: left;
+     object-position: left;
 }
 .thumbnail.fit-right img {
-  object-position: right
-}
+  -o-object-position: right;
+     object-position: right;
+}/*# sourceMappingURL=amp-custom.css.map */