Merge pull request #1 from ginger51011/fix/line-break-mobile

[FIX] Overflow on mobile devices
ginger51011 · Jun 13, 2022 · b8538a2 · b8538a2
2 parents ad3b779 + da8d623
commit b8538a2
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 20 deletions.
diff --git a/demo/prty_shortcut_cards_firefox_demo.apkg b/demo/prty_shortcut_cards_firefox_demo.apkg
diff --git a/src/back.html b/src/back.html
@@ -54,8 +54,9 @@
             function appendKbd(comboArray, container) {
                 comboArray.forEach((key, index) => {
                     if (index !== 0) {
-                        // Prepend a plus, this is not the first in a combo
-                        container.append('+');
+                        // Prepend a plus, this is not the first in a combo. Add
+                        // word boundaries to allow for wrapping
+                        container.append(document.createElement('wbr'), '+', document.createElement('wbr'));
                     }
 
                     const newElement = document.createElement('kbd');

diff --git a/src/style.css b/src/style.css
@@ -44,37 +44,37 @@
     /* Distances */
     --top-margin: 1.2em;
     --content-text-padding: 0.3em;
-    
+
     /* Borders */
     --outer-border: 0.05em solid var(--outer-border-color);
-    
+
     /* Sizes */
     --note-max-width: 40em;
     --line-height: 1.6;
 
     /* Fonts */
-    --font-family:"Roboto", "Inter", "Rubik", "Avenir", "system-ui";
+    --font-family: "Roboto", "Inter", "Rubik", "Avenir", "system-ui";
     --mono-font-family: "Roboto Mono", "Source Code Pro", "Ubuntu Mono", monospace;
 
     /* Text */
     color: var(--color);
     font-family: var(--font-family);
     font-size: 20px;
     text-align: center;
-    
+
     border: var(--outer-border);
     border-radius: 4px;
-    
+
     background-color: var(--note-background);
-    
+
     line-height: var(--line-height);
-    
+
     /* Margins and padding */
     padding: 0.4em;
     margin: 0 auto;
     margin-top: var(--top-margin) !important;
     max-width: var(--note-max-width);
-    
+
     /* Flexbox */
     display: flex;
     flex-flow: column nowrap;
@@ -84,7 +84,7 @@
 
 code {
     padding: 2px 4px;
-    color: var(--code-color) ;
+    color: var(--code-color);
     background-color: var(--code-background-color);
     border-radius: 3px;
     font-family: var(--mono-font-family);
@@ -103,13 +103,13 @@ code {
     font-size: 20px;
     text-shadow: 0.05em 0 var(--text-shadow);
     color: var(--color);
-    
+
     /* Box */
     padding: .1em .7em;
     border: var(--outer-border);
     border-radius: 20px;
     background-color: var(--title-background-color);
-    
+
     /* Placement */
     margin: 0 auto;
 }
@@ -129,28 +129,31 @@ hr.card-divider {
 
 /* Container for shortcuts */
 .shortcut-container {
+    /* Text */
     color: var(--kbd-color);
-    font-size: x-large;
-    line-height: 2em;
-    text-shadow: var(--kbd-shadow);
+    font-size: 125%;
     text-align: center !important;
-    padding: var(--content-text-padding);
+    text-shadow: var(--kbd-shadow);
+    line-height: 2em;
+
+    /* Placement */
     margin: auto;
+    padding: var(--content-text-padding);
 }
 
 /* Keyboard keys */
 kbd {
     /* Text */
     font-family: var(--mono-font-family);
     text-shadow: none !important;
-    
+
     /* Box */
     border: 1px solid var(--kbd-color);
     border-radius: 3pt;
     background-color: var(--kbd-background-color);
     box-shadow: 0 2px 3px var(--kbd-shadow);
-    
+
     /* Placement */
     margin: .2em;
     padding: .1em .6em;
-}
+}