~andrewzah/personal-site

bb6cab8f8cb26d7fa18d758e513728df1e89668a — Andrew Zah 8 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 @@ main .section {
  }
}


.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-stack: (
  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;
        }
      }