Fix website styling bugs caused by Safari

website/content/_index.md

@@ -246,23 +246,25 @@ Make vector art out of shapes ranging from simple geometric primitives to comple
 Style your shapes with strokes, fills, and gradients. Mix your layers with blend modes. Then export as SVG.
 
 <div class="background-video">
-	<video loop muted disablepictureinpicture disableremoteplayback data-auto-play>
+	<video loop muted playsinline disablepictureinpicture disableremoteplayback data-auto-play>
 		<source src="https://static.graphite.rs/content/index/just-a-potted-cactus-timelapse.mp4" type="video/mp4" />
 	</video>
 </div>
 
-<p class="download-artwork">
+<div class="download-artwork">
 	<img src="https://static.graphite.rs/content/index/just-a-potted-cactus-thumbnail.png" alt="Vector art of Just of Potted Cactus" />
-	<span>
-	<em>Just a Potted Cactus</em>
-	<br />
-	<br />
-	<a href="https://static.graphite.rs/graphite-files/just-a-potted-cactus.graphite">Download</a>
-	the artwork and
-	<br />
-	open it in the <a href="https://editor.graphite.rs">Graphite editor</a>
-	</span>
-</p>
+	<p>
+		<span class="balance-text">
+			<em>Just a Potted Cactus</em>
+		</span>
+		<br />
+		<span class="balance-text">
+			<a href="https://static.graphite.rs/graphite-files/just-a-potted-cactus.graphite">Download</a>
+			the artwork and open it in the
+			<a href="https://editor.graphite.rs">Graphite editor</a>
+		</span>
+	</p>
+</div>
 
 </div>
 </section>

website/sass/base.scss

@@ -399,7 +399,8 @@ summary {
 .image-comparison {
 	position: relative;
 	touch-action: pan-y pinch-zoom;
-	
+	max-width: Min(100%, 512px);
+
 	.crop-container {
 		height: 100%;
 		
@@ -415,10 +416,16 @@ summary {
 			}
 		}
 
-		&.crop-container.crop-container img {
-			display: block;
-			width: auto;
-			height: 100%;
+		&.crop-container.crop-container {
+			img {
+				display: block;
+				width: auto;
+				height: 100%;
+			}
+
+			&:first-child img {
+				width: 100%;
+			}
 		}
 	}
 
@@ -898,7 +905,6 @@ hr,
 			padding: 16px;
 			gap: 16px;
 			background: rgba(0, 0, 0, 0.0625);
-			// TODO: Look into maybe switching this approach to https://developer.mozilla.org/en-US/docs/Web/CSS/column-count
 			// Half width, minus own padding on both sides, minus half a gap
 			flex: 1 0 calc(50% - (16px * 2) - (16px / 2));
 

website/sass/blog.scss

@@ -81,6 +81,17 @@
 				display: -webkit-box;
 				-webkit-box-orient: vertical;
 				-webkit-line-clamp: 3;
+
+				// Safari workaround: https://stackoverflow.com/a/72170897/775283
+				// There is still an issue where the ellipsis is rendered inside the text but there doesn't appear to be a fix, or even a way to disable the ellipsis in Safari
+				p {
+					display: inline;
+
+					&::after {
+						content: "\A\A"; // Double new line
+						white-space: pre;
+					}
+				}
 			}
 		}
 

website/sass/index.scss

@@ -151,8 +151,12 @@
 				vertical-align: top;
 			}
 
-			span {
+			p {
+				display: flex;
+				flex-direction: column;
+				max-width: 300px;
 				margin-left: 40px;
+				text-align: left;
 			}
 		}
 	}
@@ -203,11 +207,6 @@
 		}
 	}
 
-	.image-comparison {
-		aspect-ratio: 1;
-		max-width: Min(100%, 512px);
-	}
-
 	// #imaginate-creative-concepts-carousel {
 	// 	margin-top: 20px;