diff --git a/website/content/_index.md b/website/content/_index.md index d1e20f1f..7cccc18d 100644 --- a/website/content/_index.md +++ b/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.
-
-

+

Vector art of Just of Potted Cactus - - Just a Potted Cactus -
-
- Download - the artwork and -
- open it in the Graphite editor -
-

+

+ + Just a Potted Cactus + +
+ + Download + the artwork and open it in the + Graphite editor + +

+
diff --git a/website/sass/base.scss b/website/sass/base.scss index 7bc8ac47..cf420492 100644 --- a/website/sass/base.scss +++ b/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)); diff --git a/website/sass/blog.scss b/website/sass/blog.scss index 237efe4f..3ea84846 100644 --- a/website/sass/blog.scss +++ b/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; + } + } } } diff --git a/website/sass/index.scss b/website/sass/index.scss index 7872deb7..4f70d2b3 100644 --- a/website/sass/index.scss +++ b/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;