fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-10-02 03:18:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix website styling bugs caused by Safari

Browse Source
This commit is contained in:
Keavon Chambers
2023-08-10 22:59:24 -07:00
parent f429db6369
commit 7c1198a1b4
4 changed files with 42 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/content/_index.md
+14 -12
View File
@@ -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. Style your shapes with strokes, fills, and gradients. Mix your layers with blend modes. Then export as SVG.
<div class="background-video"> <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" /> <source src="https://static.graphite.rs/content/index/just-a-potted-cactus-timelapse.mp4" type="video/mp4" />
</video> </video>
</div> </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" /> <img src="https://static.graphite.rs/content/index/just-a-potted-cactus-thumbnail.png" alt="Vector art of Just of Potted Cactus" />
<span> <p>
<em>Just a Potted Cactus</em> <span class="balance-text">
<br /> <em>Just a Potted Cactus</em>
<br /> </span>
<a href="https://static.graphite.rs/graphite-files/just-a-potted-cactus.graphite">Download</a> <br />
the artwork and <span class="balance-text">
<br /> <a href="https://static.graphite.rs/graphite-files/just-a-potted-cactus.graphite">Download</a>
open it in the <a href="https://editor.graphite.rs">Graphite editor</a> the artwork and open it in the
</span> <a href="https://editor.graphite.rs">Graphite editor</a>
</p> </span>
</p>
</div>
</div> </div>
</section> </section>
website/sass/base.scss
+11 -5
View File
@@ -399,6 +399,7 @@ summary {
.image-comparison { .image-comparison {
position: relative; position: relative;
touch-action: pan-y pinch-zoom; touch-action: pan-y pinch-zoom;
max-width: Min(100%, 512px);
.crop-container { .crop-container {
height: 100%; height: 100%;
@@ -415,10 +416,16 @@ summary {
} }
} }
&.crop-container.crop-container img { &.crop-container.crop-container {
display: block; img {
width: auto; display: block;
height: 100%; width: auto;
height: 100%;
}
&:first-child img {
width: 100%;
}
} }
} }
@@ -898,7 +905,6 @@ hr,
padding: 16px; padding: 16px;
gap: 16px; gap: 16px;
background: rgba(0, 0, 0, 0.0625); 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 // Half width, minus own padding on both sides, minus half a gap
flex: 1 0 calc(50% - (16px * 2) - (16px / 2)); flex: 1 0 calc(50% - (16px * 2) - (16px / 2));
website/sass/blog.scss
+11
View File
@@ -81,6 +81,17 @@
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 3; -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
+5 -6
View File
@@ -151,8 +151,12 @@
vertical-align: top; vertical-align: top;
} }
span { p {
display: flex;
flex-direction: column;
max-width: 300px;
margin-left: 40px; margin-left: 40px;
text-align: left;
} }
} }
} }
@@ -203,11 +207,6 @@
} }
} }
.image-comparison {
aspect-ratio: 1;
max-width: Min(100%, 512px);
}
// #imaginate-creative-concepts-carousel { // #imaginate-creative-concepts-carousel {
// margin-top: 20px; // margin-top: 20px;