antarctica: sea level illustration --> swap out dog for bags and twea…

…k positioning + padding
nprapps · Apr 7, 2023 · 6705b52 · 6705b52
1 parent e892c7e
commit 6705b52
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 7 deletions.
diff --git a/src/ai2html/_sea-level-illo.html b/src/ai2html/_sea-level-illo.html
@@ -1,5 +1,5 @@
 
-<!-- Generated by ai2html v0.115.5 - 2023-04-03 15:34 -->
+<!-- Generated by ai2html v0.115.5 - 2023-04-07 00:13 -->
 <!-- ai file: sea-level-illo.ai -->
 <style media="screen,print">
 	#g-_sea-level-illo-box ,
@@ -107,10 +107,10 @@
 	<div id="g-_sea-level-illo-wide" class="g-artboard" style="min-width: 730px;" data-aspect-ratio="1.61" data-min-width="730">
 <div style="padding: 0 0 62.109% 0;"></div>
 		<img id="g-_sea-level-illo-wide-img" class="g-_sea-level-illo-wide-img g-aiImg" alt="" src="assets/synced/ai-img/_sea-level-illo-wide.jpg"/>
-		<div id="g-ai0-1" class="g-text g-aiAbs g-aiPointText" style="top:36.0364%;margin-top:-8.4px;left:66.9561%;margin-left:-31px;width:62px;">
+		<div id="g-ai0-1" class="g-text g-aiAbs g-aiPointText" style="top:41.3298%;margin-top:-8.4px;left:47.3209%;margin-left:-31px;width:62px;">
 			<p class="g-pstyle0">2 feet</p>
 		</div>
-		<div id="g-ai0-2" class="g-text g-aiAbs g-aiPointText" style="top:44.4176%;margin-top:-8.4px;left:95.0965%;margin-left:-38.5px;width:77px;">
+		<div id="g-ai0-2" class="g-text g-aiAbs g-aiPointText" style="top:54.7838%;margin-top:-8.4px;left:90.7312%;margin-left:-38.5px;width:77px;">
 			<p class="g-pstyle0">8 inches</p>
 		</div>
 	</div>
@@ -141,4 +141,4 @@
 
 </div>
 
-<!-- End ai2html - 2023-04-03 15:34 -->
+<!-- End ai2html - 2023-04-07 00:13 -->
diff --git a/src/css/seed-antarctica.less b/src/css/seed-antarctica.less
@@ -31,20 +31,39 @@
   }
 }
 
+// mobile styles for illo
 @media screen and @mobile-above {
   #mobile-sea-level-illo-1, #mobile-sea-level-illo-2 { display: none; }
   #sea-level-illo { display: block; }
 }
 
 @media screen and @mobile {
-  #mobile-sea-level-illo-1, #mobile-sea-level-illo-2 { display: block; }
+  #mobile-sea-level-illo-1, #mobile-sea-level-illo-2 { 
+    display: block; 
+
+    img {
+      padding: 20px;
+    }
+  }
   #sea-level-illo { display: none; }
 }
 
-// ai2html artboard sizes
+// desktop ai2html artboard sizes for illo
 @media screen and (min-width: 729px) {
     #g-_sea-level-illo-small, #g-_sea-level-illo-medium { display: none; }
-    #g-_sea-level-illo-wide { padding: 30px; }
+    #g-_sea-level-illo-box { 
+      width: 50%;
+      height: 100%;
+      float: right;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      align-items: center;
+      padding-right: 20px; 
+    }
+    #g-_sea-level-illo-wide {
+      min-width: 100% !important; 
+    }
 }
 
 @media screen and (max-width: 728px) and (min-width: 410px) {