bevyengine · cart · Jul 9, 2023 · Jun 27, 2023 · Jul 7, 2023 · Jul 7, 2023
diff --git a/content/news/2023-07-09-bevy-0.11/2d_gizmos.png b/content/news/2023-07-09-bevy-0.11/2d_gizmos.png
diff --git a/content/news/2023-07-09-bevy-0.11/3d_gizmos.png b/content/news/2023-07-09-bevy-0.11/3d_gizmos.png
diff --git a/content/news/2023-07-09-bevy-0.11/aa.png b/content/news/2023-07-09-bevy-0.11/aa.png
diff --git a/content/news/2023-07-09-bevy-0.11/border-sides.png b/content/news/2023-07-09-bevy-0.11/border-sides.png
diff --git a/content/news/2023-07-09-bevy-0.11/borders.png b/content/news/2023-07-09-bevy-0.11/borders.png
diff --git a/content/news/2023-07-09-bevy-0.11/codespan.png b/content/news/2023-07-09-bevy-0.11/codespan.png
diff --git a/content/news/2023-07-09-bevy-0.11/cubic_curve.png b/content/news/2023-07-09-bevy-0.11/cubic_curve.png
diff --git a/content/news/2023-07-09-bevy-0.11/custom_vertex.png b/content/news/2023-07-09-bevy-0.11/custom_vertex.png
diff --git a/content/news/2023-07-09-bevy-0.11/default-pose-bw.png b/content/news/2023-07-09-bevy-0.11/default-pose-bw.png
diff --git a/content/news/2023-07-09-bevy-0.11/default_font.png b/content/news/2023-07-09-bevy-0.11/default_font.png
diff --git a/content/news/2023-07-09-bevy-0.11/display_and_visibility.png b/content/news/2023-07-09-bevy-0.11/display_and_visibility.png
diff --git a/content/news/2023-07-09-bevy-0.11/earth-parallax.webm b/content/news/2023-07-09-bevy-0.11/earth-parallax.webm
diff --git a/content/news/2023-07-09-bevy-0.11/frown-pose-bw.png b/content/news/2023-07-09-bevy-0.11/frown-pose-bw.png
diff --git a/content/news/2023-07-09-bevy-0.11/grid.png b/content/news/2023-07-09-bevy-0.11/grid.png
diff --git a/content/news/2023-07-09-bevy-0.11/imported_items.png b/content/news/2023-07-09-bevy-0.11/imported_items.png
diff --git a/content/news/2023-07-09-bevy-0.11/index.md b/content/news/2023-07-09-bevy-0.11/index.md
diff --git a/content/news/2023-07-09-bevy-0.11/morph_target_both-0.png b/content/news/2023-07-09-bevy-0.11/morph_target_both-0.png
diff --git a/content/news/2023-07-09-bevy-0.11/morph_target_default-0.png b/content/news/2023-07-09-bevy-0.11/morph_target_default-0.png
diff --git a/content/news/2023-07-09-bevy-0.11/morph_target_frown-0.png b/content/news/2023-07-09-bevy-0.11/morph_target_frown-0.png
diff --git a/content/news/2023-07-09-bevy-0.11/morph_target_frown-half-0.png b/content/news/2023-07-09-bevy-0.11/morph_target_frown-half-0.png
diff --git a/content/news/2023-07-09-bevy-0.11/morph_target_smirk-quarter-frown-half-0.png b/content/news/2023-07-09-bevy-0.11/morph_target_smirk-quarter-frown-half-0.png
diff --git a/content/news/2023-07-09-bevy-0.11/morph_target_smirk.mp4 b/content/news/2023-07-09-bevy-0.11/morph_target_smirk.mp4
diff --git a/content/news/2023-07-09-bevy-0.11/morph_target_smirk.png b/content/news/2023-07-09-bevy-0.11/morph_target_smirk.png
diff --git a/content/news/2023-07-09-bevy-0.11/morph_targets_video.mp4 b/content/news/2023-07-09-bevy-0.11/morph_targets_video.mp4
diff --git a/content/news/2023-07-09-bevy-0.11/msaa.png b/content/news/2023-07-09-bevy-0.11/msaa.png
diff --git a/content/news/2023-07-09-bevy-0.11/no_ssao.png b/content/news/2023-07-09-bevy-0.11/no_ssao.png
diff --git a/content/news/2023-07-09-bevy-0.11/parallax_mapping_depth.jpg b/content/news/2023-07-09-bevy-0.11/parallax_mapping_depth.jpg
diff --git a/content/news/2023-07-09-bevy-0.11/parallax_mapping_depth_mini.jpg b/content/news/2023-07-09-bevy-0.11/parallax_mapping_depth_mini.jpg
diff --git a/content/news/2023-07-09-bevy-0.11/parallax_mapping_none_mini.jpg b/content/news/2023-07-09-bevy-0.11/parallax_mapping_none_mini.jpg
diff --git a/content/news/2023-07-09-bevy-0.11/parallax_mapping_normals.jpg b/content/news/2023-07-09-bevy-0.11/parallax_mapping_normals.jpg
diff --git a/content/news/2023-07-09-bevy-0.11/parallax_mapping_normals_mini.jpg b/content/news/2023-07-09-bevy-0.11/parallax_mapping_normals_mini.jpg
diff --git a/content/news/2023-07-09-bevy-0.11/rcas_off.png b/content/news/2023-07-09-bevy-0.11/rcas_off.png
diff --git a/content/news/2023-07-09-bevy-0.11/rcas_on.png b/content/news/2023-07-09-bevy-0.11/rcas_on.png
diff --git a/content/news/2023-07-09-bevy-0.11/ridge-light-view-1.svg b/content/news/2023-07-09-bevy-0.11/ridge-light-view-1.svg
diff --git a/content/news/2023-07-09-bevy-0.11/size_constraints.png b/content/news/2023-07-09-bevy-0.11/size_constraints.png
diff --git a/content/news/2023-07-09-bevy-0.11/skybox.png b/content/news/2023-07-09-bevy-0.11/skybox.png
diff --git a/content/news/2023-07-09-bevy-0.11/smirk-pose-bw.png b/content/news/2023-07-09-bevy-0.11/smirk-pose-bw.png
diff --git a/content/news/2023-07-09-bevy-0.11/ssao_only.png b/content/news/2023-07-09-bevy-0.11/ssao_only.png
diff --git a/content/news/2023-07-09-bevy-0.11/text_wrap.png b/content/news/2023-07-09-bevy-0.11/text_wrap.png
diff --git a/content/news/2023-07-09-bevy-0.11/texture_atlas_ui.mp4 b/content/news/2023-07-09-bevy-0.11/texture_atlas_ui.mp4
diff --git a/content/news/2023-07-09-bevy-0.11/tm_reinhard_luminance.png b/content/news/2023-07-09-bevy-0.11/tm_reinhard_luminance.png
diff --git a/content/news/2023-07-09-bevy-0.11/tm_tonymcmapface.png b/content/news/2023-07-09-bevy-0.11/tm_tonymcmapface.png
diff --git a/content/news/2023-07-09-bevy-0.11/ui_profile.png b/content/news/2023-07-09-bevy-0.11/ui_profile.png
diff --git a/content/news/2023-07-09-bevy-0.11/webgpu.svg b/content/news/2023-07-09-bevy-0.11/webgpu.svg
diff --git a/content/news/2023-07-09-bevy-0.11/webgpu_examples.png b/content/news/2023-07-09-bevy-0.11/webgpu_examples.png
diff --git a/content/news/2023-07-09-bevy-0.11/with_ssao.png b/content/news/2023-07-09-bevy-0.11/with_ssao.png
diff --git a/sass/components/_image_compare.scss b/sass/components/_image_compare.scss
@@ -1,6 +1,6 @@
 div.image-compare {
-  display: flex;
-  align-items: center;
+  // display: flex;
+  // align-items: center;
   position: relative;
   border-radius: 10px;
   width: 100%;
@@ -12,15 +12,21 @@ div.image-compare {
   &::after {
     position: absolute;
     font-weight: bolder;
-    font-size: 175%;
-    writing-mode: vertical-rl;
+    font-size: 1.8rem;
+    width: 100%;
   }
   &::before {
     content: attr(data-title-a);
     z-index: 1;
+    -webkit-clip-path: inset(0 calc(100% - var(--slider-value) + 1.5px) 0 0);
+    clip-path: inset(0 calc(100% - var(--slider-value) + 1.5px) 0 0);
+    width: 100%;
   }
   &::after {
     content: attr(data-title-b);
+    text-align: end;
+    -webkit-clip-path: inset(0 0 0 calc(var(--slider-value) + 1.5px));
+    clip-path: inset(0 0 0 calc(var(--slider-value) + 1.5px));
     width: 100%;
   }