Image & Figure styling

1 files changed, 25 insertions, 10 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index 42b34ef..cc046d5 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -4,6 +4,8 @@
     --bg-special: #f4e3b2;
     --border-radius-max: 250px;
     --border-radius-minimal: 5px;
+    --breakpoint-laptop: 768px;
+    --breakpoint-tablet: 1024px;
     --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
     --font-size-default: 1rem;
     --font-size-h1: 2rem;
@@ -69,13 +71,13 @@ body {
     max-width: 80ch;
     min-height: 100vh;
 
-    @media (max-width 900px) {
+    @media (max-width var(--breakpoint-laptop)) {
         margin: var(--margin-padding-Y-default);
     }
 }
 
 main {
-    @media (max-width: 900px) {
+    @media (max-width: var(--breakpoint-laptop)) {
         margin: 20px;
     }
 }
@@ -113,6 +115,11 @@ dl {
     }
 }
 
+figure {
+    font-style: italic;
+    text-align: center;
+}
+
 h1, h2, h3, h4, h5, h6 {
     line-height: var(--line-height-heading);
     margin: var(--gap-large) 0 var(--gap-small);
@@ -131,6 +138,14 @@ hr {
     color: var(--bg-special);
 }
 
+img {
+    max-width: 90%;
+
+    @media (max-width: var(--breakpoint-tablet)) {
+        max-width: 100%;
+    }
+}
+
 p {
     margin-bottom: var(--gap-default);
 }
@@ -228,7 +243,7 @@ time {
     align-items: center;
     justify-content: space-evenly;
 
-    @media (max-width: 768px) {
+    @media (max-width: var(--breakpoint-tablet)) {
         flex-direction: column;
     }
 }
@@ -245,7 +260,7 @@ time {
     justify-content: space-around;
     margin-top: 2rem;
 
-    @media (max-width: 768px) {
+    @media (max-width: var(--breakpoint-tablet)) {
         flex-direction: column;
         gap: var(--gap-default);
     }
@@ -257,7 +272,7 @@ time {
     justify-content: center;
     gap: var(--gap-default);
 
-    @media (max-width: 768px) {
+    @media (max-width: var(--breakpoint-tablet)) {
         flex-direction: column;
     }
 }
@@ -297,7 +312,7 @@ time {
     gap: var(--gap-default);
     margin: var(--margin-padding-Y-default) !important;
 
-    @media (max-width: 768px) {
+    @media (max-width: var(--breakpoint-tablet)) {
         flex-direction: column;
         align-items: start;
     }
@@ -337,7 +352,7 @@ time {
     justify-content: space-between;
     margin: 0 1rem !important;
 
-    @media (max-width: 768px) {
+    @media (max-width: var(--breakpoint-tablet)) {
         margin: 0 !important;
     }
 }
@@ -350,7 +365,7 @@ time {
     display: flex;
     gap: var(--gap-default);
 
-    @media (max-width: 768px) {
+    @media (max-width: var(--breakpoint-tablet)) {
         flex-direction: column;
     }
 }
@@ -385,7 +400,7 @@ time {
     padding: 0.2rem;
     width: 50%;
 
-    @media (max-width: 768px) {
+    @media (max-width: var(--breakpoint-tablet)) {
         width: 90%;
     }
 }
@@ -403,7 +418,7 @@ time {
 .search-input {
     width: 30vw;
 
-    @media (max-width: 768px) {
+    @media (max-width: var(--breakpoint-tablet)) {
         width: 100vw;
     }
 }