Fix website rendering issues on Firefox with -webkit-line-clamp

Author: Keavon

website/content/contribute/_index.md

@@ -71,7 +71,7 @@ The actual document (the artwork data and layers included in a saved `.graphite`
 
 Every part of the Graphite stack works based on the concept of message passing. Messages are pushed to the front or back of a queue and each one is processed by the module's dispatcher in the order encountered. Only the dispatcher owns a mutable reference to update its module's state.
 
-<details><summary><b>Addition technical details (click to show)</b></summary>
+<details><summary><b>Additional technical details (click to show)</b></summary>
 
 A message is an enum variant of a certain message sub-type like `FrontendMessage`, `ToolMessage`, `DocumentsMessage` (plural), or `DocumentMessage` (singular). An example is `DocumentMessage::DeleteSelectedLayers` (which carries no data) or `DocumentMessage::RenameLayer(Vec<LayerId>, String)` (which carries a layer path and a string as data).
 

website/sass/base.scss

@@ -27,6 +27,7 @@
 		--font-size-link: 20px;
 		--font-size-heading: 32px;
 		--font-size-body: 16px;
+		--page-edge-padding: 28px;
 	}
 
 	@media screen and (max-width: 500px) {
@@ -45,6 +46,7 @@
 		--font-size-link: 14px;
 		--font-size-heading: 24px;
 		--font-size-body: 16px;
+		--page-edge-padding: 12px;
 	}
 }
 
@@ -165,6 +167,8 @@ ol + p {
 code {
 	background: var(--color-fog);
 	padding: 0 4px;
+	word-break: break-all;
+	hyphens: none;
 }
 
 pre {
@@ -577,6 +581,10 @@ hr,
 					box-sizing: border-box;
 					overflow: auto;
 				}
+
+				details {
+					width: 100%;
+				}
 			}
 
 		}

website/templates/blog.html

@@ -32,7 +32,9 @@ <h2><a href="{{ page.permalink | safe }}">{{ page.title }}.</a></h2>
 			</div>
 			<span class="publication">By {{ page.extra.author }}. {{ page.date | date(format="%B %d, %Y", timezone="America/Los_Angeles") }}.</span>
 			<div class="summary">
-				{{ page.summary | safe }}
+				<div>
+					{{ page.summary | safe }}
+				</div>
 			</div>
 			<div class="keep-reading">
 				<a href="{{ page.permalink | safe }}" class="link arrow">Keep Reading</a>

website/templates/index.html

@@ -316,7 +316,9 @@ <h2><a href="{{ article.permalink | safe }}">{{ article.title }}.</a></h2>
 				</div>
 				<span class="publication">By {{ article.extra.author }}. {{ article.date | date(format="%B %d, %Y", timezone="America/Los_Angeles") }}.</span>
 				<div class="summary">
-					{{ article.summary | safe }}
+					<div>
+						{{ article.summary | safe }}
+					</div>
 				</div>
 				<div class="keep-reading">
 					<a href="{{ article.permalink | safe }}" class="link arrow">Keep Reading</a>