Merge pull request #81 from sandstreamdev/adjust_example_page_typography

Adjust typography on the example page
sandstreamdev · Jan 23, 2020 · 72c8c0d · 72c8c0d
2 parents 6b9254c + 96f2ea9
commit 72c8c0d
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 19 deletions.
diff --git a/examples/src/App.js b/examples/src/App.js
@@ -66,10 +66,12 @@ function App() {
 
   return (
     <div className={styles.example}>
-      <h3>react-swipeable-list example</h3>
+      <h1>react-swipeable-list example</h1>
       <h5>(try also mobile view in dev tools for touch events)</h5>
       <h3>Simple example (with default 0.5 action trigger threshold)</h3>
-      <span className={styles.actionInfo}>{triggeredSimpleItemAction}</span>
+      <span className={styles.actionInfo}>
+        {triggeredSimpleItemAction || 'No action triggered yet'}
+      </span>
       <div className={styles.listContainer}>
         <SwipeableList>
           <SwipeableListItem
@@ -97,7 +99,9 @@ function App() {
         More complex items and scroll (with 0.25 action trigger threshold)
       </h3>
       <h3>List in smaller container</h3>
-      <span className={styles.actionInfo}>{triggeredComplexItemAction}</span>
+      <span className={styles.actionInfo}>
+        {triggeredComplexItemAction || 'No action triggered yet'}
+      </span>
       <div className={styles.complexListContainer}>
         <SwipeableList threshold={0.25}>
           <SwipeableListItem

diff --git a/examples/src/app.module.css b/examples/src/app.module.css
@@ -1,7 +1,3 @@
-html {
-  font-family: 'Roboto', sans-serif;
-}
-
 h3 {
   margin-bottom: 0;
   text-align: center;
@@ -13,25 +9,38 @@ h5 {
 }
 
 body {
-  /* stylelint-disable */
-  font-family:
-    system,
-    -apple-system,
-    '.SFNSText-Regular',
-    'San Francisco',
-    'Roboto',
-    'Segoe UI',
-    'Helvetica Neue',
-    'Lucida Grande',
-    sans-serif;
-  /* stylelint-enable */
+  /* prettier-ignore */
+  font-family: system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif;
+  line-height: 1.7;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin-left: 16px;
+  margin-right: 16px;
+}
+
+h1 {
+  display: block;
+  font-size: 1.17em;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  font-weight: bold;
+  margin-bottom: 0;
+  text-align: center;
 }
 
 footer {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 56px 0;
+  text-align: center;
 }
 
 a {