Style updates

rowanhogan · Feb 16, 2020 · fb52547 · fb52547
1 parent ada5880
commit fb52547
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 6 deletions.
diff --git a/src/components/settings/index.js b/src/components/settings/index.js
@@ -56,6 +56,13 @@ class Settings extends Component {
           <p className='settings-hint'>
             Reduce eye strain for low-light reading.
           </p>
+
+          <Toggle
+            label={settings.sansSerif ? 'Sans-serif fonts' : 'Serif fonts'}
+            name='sansSerif'
+            checked={settings.sansSerif}
+            onChange={this.props.updateSetting}
+          />
         </Modal>
       </Fragment>
     )

diff --git a/src/store/settings/index.js b/src/store/settings/index.js
@@ -16,7 +16,8 @@ const initialState = {
   darkMode: localStorage.getItem('darkMode')
     ? getBooleanValue('darkMode')
     : window.matchMedia('(prefers-color-scheme: dark)').matches,
-  lowContrast: getBooleanValue('lowContrast')
+  lowContrast: getBooleanValue('lowContrast'),
+  sansSerif: getBooleanValue('sansSerif')
 }
 
 export default (state = initialState, action) => {

diff --git a/src/styles/_home.scss b/src/styles/_home.scss
@@ -82,7 +82,7 @@
     }
   }
 
-  @media (min-width: 52rem) {
+  @media (min-width: 48rem) {
     #mp-upper {
       tr {
         display: flex;

diff --git a/src/styles/_page.scss b/src/styles/_page.scss
@@ -225,6 +225,10 @@ table.navbox {
   display: block;
   max-width: 100%;
   width: 100%;
+
+  td[style*=background] {
+    opacity: 0.75;
+  }
 }
 
 table.mbox-small {

diff --git a/src/styles/_settings.scss b/src/styles/_settings.scss
@@ -58,3 +58,11 @@
     }
   }
 }
+
+.sansSerif {
+  font-family: $sans-stack;
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: $sans-stack;
+  }
+}
diff --git a/src/styles/_thumbs.scss b/src/styles/_thumbs.scss
@@ -25,6 +25,7 @@
   img {
     display: block;
     min-width: 50%;
+    max-width: 20rem;
     margin: 1rem auto;
   }
 

diff --git a/src/styles/styles.css b/src/styles/styles.css
@@ -466,7 +466,7 @@ table {
     .home-page #mp-topbanner ul li a {
       padding: 0.25rem; }
 
-@media (min-width: 52rem) {
+@media (min-width: 48rem) {
   .home-page #mp-upper tr {
     display: flex; }
     .home-page #mp-upper tr td {
@@ -541,6 +541,7 @@ table {
   .thumb img {
     display: block;
     min-width: 50%;
+    max-width: 20rem;
     margin: 1rem auto; }
   @media (max-width: 36rem) {
     .infobox :only-child > .image,
@@ -616,7 +617,7 @@ table {
   font-family: "PT Serif", "Lora", Georgia, serif; }
 
 .sans-stack {
-  font-family: "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
 
 h1,
 h2,
@@ -712,6 +713,9 @@ table.navbox {
   display: block;
   max-width: 100%;
   width: 100%; }
+  table.wikitable td[style*=background],
+  table.navbox td[style*=background] {
+    opacity: 0.75; }
 
 table.mbox-small {
   background: transparent;
@@ -912,3 +916,8 @@ pre {
   .darkMode a:focus, .darkMode a:hover, .darkMode a:active {
     color: #916308;
     outline: 0; }
+
+.sansSerif {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
+  .sansSerif h1, .sansSerif h2, .sansSerif h3, .sansSerif h4, .sansSerif h5, .sansSerif h6 {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
@@ -1,6 +1,5 @@
 $serif-stack: "PT Serif", "Lora", Georgia, serif;
-$sans-stack: "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light",
-  "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+$sans-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 $title-stack: "Playfair Display", $serif-stack;
 $header-height: 3.25rem;