Image tags for sizing

2 files changed, 41 insertions, 1 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index 4c5e085..9c0ca9d 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -337,7 +337,7 @@ footer a {
   content: counter(h2-counter) "." counter(h3-counter) "." counter(h4-counter) "\00a0\00a0";
 }
 
-/* light and dark images */
+/* images */
 
 .dark .img-light {
   display: none !important;
@@ -347,6 +347,41 @@ footer a {
   display: none !important;
 }
 
+.img-small div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.img-small img {
+  scale: 80%;
+}
+
+.img-full div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.img-full img {
+  width: 100vw !important;
+  max-width: 100vw !important;
+}
+
+.caption-container {
+  display: flex;
+  justify-content: center;
+}
+
+figcaption {
+  color: var(--content-secondary);
+  padding-left: var(--caption-padding);
+  padding-right: var(--caption-padding);
+  font-size: var(--caption-font-size);
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
 /* 404 */
 
 .not-found {
diff --git a/assets/css/vars.css b/assets/css/vars.css
index 7956909..5e4625a 100644
--- a/assets/css/vars.css
+++ b/assets/css/vars.css
@@ -3,6 +3,8 @@
     --main-padding: 1.4em;
     --main-padding-bottom: 3rem;
 
+    --caption-padding: calc(.25 * var(--main-padding));
+
     /* header settings */
     --header-top-gap: 2rem;
     --header-bottom-gap: 2rem;
@@ -26,6 +28,7 @@
     --hx-font-size: 1.3em;
     --p-font-size: 1em;
     --p-line-height: 1.5em;
+    --caption-font-size: .8em;
 
     /* List indentation */
     --li-indent: 1.5rem;
@@ -68,6 +71,7 @@
     :root {
         --main-width: 750px;
         --header-top-gap: 1rem;
+        --caption-padding: calc(.25 * var(--main-padding));
     }
 }
 
@@ -75,5 +79,6 @@
     :root {
         --header-top-gap: 1rem;
         --social-icons-bottom-margin: 0rem;
+        --caption-padding: calc(2 * var(--main-padding));
     }
 }
\ No newline at end of file