bb6cab8f8cb26d7fa18d758e513728df1e89668a — Andrew Zah 3 months ago 090fe9a
update mobile and nav view
5 files changed, 24 insertions(+), 52 deletions(-)

M sass/_container.scss
M sass/_misc.scss
M sass/_section.scss
M sass/_variables.scss
M sass/components/_nav.scss
M sass/_container.scss => sass/_container.scss +1 -1
@@ 74,7 74,7 @@ }
  
    p, li, h6 {
-     font-family: 'Libre Baskerville', 'Baskerville', serif;
+     font-family: $serif-stack;
      line-height: 1.5;
    }
  

M sass/_misc.scss => sass/_misc.scss +4 -4
@@ 21,27 21,27 @@ }
  
    h1 {
-     @media (max-device-width: $mobile-screen) { font-size: 2.5rem; }
+     @media (max-device-width: $mobile-screen) { font-size: 2.8rem; }
      @media (min-device-width: $mobile-screen)
        and (max-device-width: $large-screen) { font-size: 3.4rem; }
    }
  
    h2 {
-     @media (max-device-width: $mobile-screen) { font-size: 2.2rem; }
+     @media (max-device-width: $mobile-screen) { font-size: 2.4rem; }
      @media (min-device-width: $mobile-screen)
        and (max-device-width: $large-screen) { font-size: 2.8rem; }
      font-size: 2em;
    }
  
    h3 {
-     @media (max-device-width: $mobile-screen) { font-size: 1.9rem; }
+     @media (max-device-width: $mobile-screen) { font-size: 2.2rem; }
      @media (min-device-width: $mobile-screen)
        and (max-device-width: $large-screen) { font-size: 2.4rem; }
      font-size: 1.5em;
    }
  
    h4 {
-     @media (max-device-width: $mobile-screen) { font-size: 1.5rem; }
+     @media (max-device-width: $mobile-screen) { font-size: 2.0rem; }
      @media (min-device-width: $mobile-screen)
        and (max-device-width: $large-screen) { font-size: 2rem; }
      font-size: 1.2em;

M sass/_section.scss => sass/_section.scss +5 -0
@@ 16,11 16,16 @@ }
  }
  
+ 
  .section-post {
    @media (min-device-width: $large-screen) {
      font-size: 1.65rem;
    }
  
+   .row {
+     @media (max-device-width: $mobile-screen) { font-size: 1.8rem; }
+   }
+ 
    h2 {
      font-size: 1.6em;
      margin-bottom: 0px;

M sass/_variables.scss => sass/_variables.scss +0 -37
@@ 9,45 9,8 @@ monospace
  );
  
- $sans-serif-stack: (
-   -apple-system,
-   BlinkMacSystemFont,
-   "Avenir Next",
-   "Avenir",
-   "Segoe UI",
-   "Lucida Grande",
-   "Helvetica Neue",
-   "Helvetica",
-   "Fira Sans",
-   "Roboto",
-   "Noto",
-   "Droid Sans",
-   "Cantarell",
-   "Oxygen",
-   "Ubuntu",
-   "Franklin Gothic Medium",
-   "Century Gothic",
-   "Liberation Sans",
-   sans-serif,
- );
- 
  $serif-stack: (
    "Libre Baskerville",
-   "Palatino Linotype",
-   Palatino,
-   Palladio,
-   "URW Palladio L",
-   "Book Antiqua",
-   Baskerville,
-   "Bookman Old Style",
-   "Bitstream Charter",
-   "Nimbus Roman No9 L",
-   Garamond,
-   "Apple Garamond",
-   "ITC Garamond Narrow",
-   "New Century Schoolbook",
-   "Century Schoolbook",
-   "Century Schoolbook L",
    Georgia,
    serif
  );

M sass/components/_nav.scss => sass/components/_nav.scss +14 -10
@@ 1,27 1,31 @@ nav {
    div#nav-links {
-     width: 100%;
+     flex-flow: row nowrap;
+     justify-content: center;
+     align-content: center;
+     overflow: auto;
+     text-align: center;
  
      ul {
-       display: flex;
-       align-items: center;
-       justify-content: center;
-       margin: 0;
-       padding: 5px 1px;
-       overflow: auto;
+       display: inline;
+       margin-top: .75rem;
+       margin-bottom: .75rem;
  
-       @media (max-width: $mobile-screen) {
-         padding-left: 2rem;
+       @media (max-device-width: $mobile-screen) {
+         font-size: 1.8rem;
        }
  
        li {
+         display: inline;
+ 
          @include anchor-style;
          @include anchor-colors($med_text);
  
-         margin-right: 1em;
+         margin-right: .75rem;
          list-style-type: none;
  
          a {
+           min-width: 0;
            border-bottom: none;
          }
        }