feat(cv): make MiniWorkImage responsive across all breakpoints

Move inline styles to .mini_work_image CSS class and scale down
proportionally at 768px, 500px, and 415px breakpoints.

Made-with: Cursor

src/pages/index.js

@@ -102,25 +102,8 @@ const SimpleCaptchaWrapper = ({ onVerified, language }) => {
 
 const MiniWorkImage = ({ image }) => {
   return (
-    <div
+    <div className="mini_work_image">
-      style={{
+      <img src={ image } />
-          width: "40px",
-        height: "40px",
-        float: "left",
-        marginRight: "10px",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
-      <img
-        src={ image }
-        style={{
-          maxHeight: "100%",
-          maxWidth: "100%",
-          objectPosition: "center",
-        }}
-      />
     </div>
   )
 }
@@ -202,9 +185,16 @@ const SegmentListWork = ({ segment, tabs, borderSize }) => {
      >
        {
          segment.image != "" ?
+           segment.content.length === 0 ? 
              <MiniWorkImage
                image={ segment.image }
              />
+           :
+             <div className="segment_content_list_image">
+              <MiniWorkImage
+               image={ segment.image }
+              />
+             </div>
          :
            ""
        }

src/styles/general.scss

@@ -121,6 +121,22 @@ body {
         }
     }
 
+    .mini_work_image {
+        width: 40px;
+        height: 40px;
+        float: left;
+        margin-right: 10px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        img {
+            max-height: 100%;
+            max-width: 100%;
+            object-position: center;
+        }
+    }
+
     .segment_title {
         float: left;
         width: 250px;
@@ -371,6 +387,16 @@ body {
             height: 30px;
         }
 
+        .mini_work_image {
+            width: 32px;
+            height: 40px;
+            margin-right: 8px;
+        }
+
+        .segment_content_list_image {
+            margin-left: 3px;
+        }
+
         .segment_content_work {
             font-size: 9pt;
 
@@ -466,6 +492,16 @@ body {
             height: 33px;
         }
 
+        .mini_work_image {
+            width: 26px;
+            height: 40px;
+            margin-right: 6px;
+        }
+
+        .segment_content_list_image {
+            margin-left: 6px;
+        }
+
         .segment_content_work {
             font-size: 8pt;
 
@@ -496,12 +532,13 @@ body {
             p {
                 margin-top: 5px;
                 margin-bottom: 5px;
-                font-size: 7pt;
+                font-size: 6.25pt;
             }
 
             a {
-                padding-left: 20.5px;
+                padding-left: 22px;
-                padding-right: 20.5px;
+                padding-right: 22px;
+                font-size: 6pt;
             }
 
             form {
@@ -557,7 +594,7 @@ body {
             }
 
             .segment_description_general {
-                font-size: 5.5pt;
+                font-size: 4.5pt;
                 margin: 4px 4px 4px 10px;
             }
         }
@@ -568,15 +605,28 @@ body {
             height: 28px;
         }
 
+        .mini_work_image {
+            width: 20px;
+            height: 27px;
+            margin-right: 5px;
+        }
+
+        .segment_content_list_image {
+            margin-left: 9px;
+        }
+
         .segment_content_work {
-            font-size: 7pt;
+            font-size: 5pt;
 
             .segment_content_title {
-                font-size: 7.5pt;
+                height: 17px;
+                margin-top: 9px;
+                margin-bottom: 5px;
+                font-size: 6pt;
             }
 
             ul {
-                margin-left: 14px;
+                margin-left: 18px;
             }
 
             ul li {
@@ -584,19 +634,19 @@ body {
             }
 
             ul li::before {
-                margin-left: -4.25em;
+                margin-left: -6.5em;
             }
         }
 
         .segment_description {
-            font-size: 6.5pt;
+            font-size: 4.5pt;
             margin: 4px 0 4px 10px;
         }
 
         .captcha-container .captcha-form {
             width: 85px;
             height: 105px;
-            font-size: 6pt;
+            font-size: 3.5pt;
             padding: 0 5px;
 
             p {
@@ -606,9 +656,9 @@ body {
             }
 
             a {
-                padding-left: 15px;
+                padding-left: 20px;
-                padding-right: 15px;
+                padding-right: 20px;
-                font-size: 6pt;
+                font-size: 5pt;
             }
 
             form {