Merge pull request #322 from AramZS/fix-for-long-homepage-titles

Fix for long homepage title words causing horizontal scrolling on mobile

Author: carbontwelve

.editorconfig

@@ -0,0 +1,44 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_size = 4
+
+# Matches multiple files with brace expansion notation
+# Set default charset
+[*.{js,py}]
+charset = utf-8
+
+# 4 space indentation
+[*.py]
+indent_style = space
+indent_size = 4
+
+# Tab indentation (no size specified)
+[Makefile]
+indent_style = tab
+
+# Indentation override for all JS under lib directory
+[**.{js,njk}]
+indent_style = space
+indent_size = 2
+quote_type = single
+max_line_length = "80"
+
+[*.{yaml,yml}]
+indent_style = space
+indent_size = 2
+
+# Matches the exact files either package.json or .travis.yml
+[{package.json,.travis.yml}]
+indent_style = space
+indent_size = 2
+
+[*.{sass,css}]
+indent_style = space
+indent_size = 2

src/styles/components/_content-grid.css

@@ -4,92 +4,89 @@
  */
 
 :root {
-    --padding-inline: 1rem;
-    --paragraph-max-width: 864px;
-    --content-max-width: 1400px;
+  --padding-inline: 1rem;
+  --paragraph-max-width: 864px;
+  --content-max-width: 1400px;
 
-    --content-size: calc(
-            (var(--content-max-width) - var(--paragraph-max-width))
-    );
+  --content-size: calc((var(--content-max-width) - var(--paragraph-max-width)));
 }
 
 .content-grid {
-    display: grid;
-    grid-template-columns:
+  display: grid;
+  overflow: hidden;
+  text-wrap: balance;
+  grid-template-columns:
     [full-width-start] minmax(var(--padding-inline), 16rem)
     [breakout-start] 0
     [content-start] 0
     [paragraph-start]
-        min(
-          100% - (var(--padding-inline) * 2),
-          var(--paragraph-max-width)
-        )
+    min(100% - (var(--padding-inline) * 2), var(--paragraph-max-width))
     [paragraph-end]
-    minmax(0, var(--content-size))[content-end]
+    minmax(0, var(--content-size)) [content-end]
     minmax(0, 7rem) [breakout-end]
     minmax(var(--padding-inline), 1fr) [full-width-end];
 }
 
 .content-grid > *,
 .full-width > *,
 article.content-grid section > * {
-    grid-column: content;
+  grid-column: content;
 }
 
 .content-grid > .paragraph,
 .full-width > .paragraph,
 article.content-grid section:not(.two-columns) > .paragraph {
-    grid-column: paragraph;
+  grid-column: paragraph;
 }
 
 .content-grid > .breakout,
 .full-width > .breakout,
 article.content-grid section:not(.two-columns) > .breakout {
-    grid-column: breakout;
+  grid-column: breakout;
 }
 
 .content-grid > .full-width,
 article.content-grid section:not(.two-columns) {
-    grid-column: full-width;
+  grid-column: full-width;
 
-    display: grid;
-    grid-template-columns: inherit;
+  display: grid;
+  grid-template-columns: inherit;
 }
 
 /*
  * List of article elements that must be paragraph width
  */
 article.content-grid p,
 article.content-grid ul {
-    grid-column: paragraph;
+  grid-column: paragraph;
 }
 
 /*
  * List of article elements that must be breakout width
  */
 article.content-grid pre {
-    grid-column: breakout;
+  grid-column: breakout;
 }
 
 .two-columns {
-    grid-column: content;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 2rem;
+  grid-column: content;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
 }
 
 .two-columns__paragraph {
-    grid-template-columns: minmax(auto, var(--paragraph-max-width)) 1fr;
+  grid-template-columns: minmax(auto, var(--paragraph-max-width)) 1fr;
 }
 
 .two-columns > *,
 article.content-grid section.two-columns > * {
-    grid-column: auto;
+  grid-column: auto;
 }
 
 @media (max-width: 864px) {
-    .two-columns {
-        grid-template-columns: 1fr;
-        gap: 0;
-    }
+  .two-columns {
+    grid-template-columns: 1fr;
+    gap: 0;
+  }
 }

src/styles/main.css

@@ -60,13 +60,13 @@ blockquote {
 }
 
 aside.citation {
-    border-left: 3px solid var(--foreground-muted);
-    padding-left: 1em;
+  border-left: 3px solid var(--foreground-muted);
+  padding-left: 1em;
 }
 
 aside.citation blockquote {
-    border-left: none;
-    padding-left: 0;
+  border-left: none;
+  padding-left: 0;
 }
 
 pre {
@@ -150,6 +150,12 @@ main {
   margin-bottom: 2em;
 }
 
+main > section {
+  text-wrap: balance;
+  text-wrap: pretty;
+  overflow: hidden;
+}
+
 article > header {
   padding: 2em 0 1em 0;
 }
@@ -285,7 +291,6 @@ article.resource.bookmark .btn-list li {
   height: 31px;
 }
 
-
 .tags-list ul {
   display: grid;
   width: 100%;
@@ -453,7 +458,7 @@ ul.alphabet {
   top: -200px;
 }
 
-.page-meta{
+.page-meta {
   position: relative;
   background-color: var(--background-muted);
   border-top: 3px solid var(--accent);
@@ -491,7 +496,7 @@ ul.alphabet {
     padding: 0 1em;
   }
 
-  body > header > div.container{
+  body > header > div.container {
     margin-top: 40px;
   }
 }