diff --git a/_sass/typography.scss b/_sass/typography.scss index df3c5f8..6197d6a 100644 --- a/_sass/typography.scss +++ b/_sass/typography.scss @@ -4,144 +4,159 @@ // @font-face { - font-family: 'Bebas Neue'; - src: url('../font/BebasNeue-Regular.woff') format('woff'), /* Pretty Modern Browsers */ + font-family: "Bebas Neue"; + src: url("../font/BebasNeue-Regular.woff") format("woff"); /* Pretty Modern Browsers */ +} + +body { + font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; + letter-spacing: 0.01em; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; +} + +/*- Typography for medium and small screen, based on 16px font-size -*/ + +p, +ul, +ol { + font-size: 18px; + line-height: 1.7em; /* 24px/16px */ + margin-bottom: 1.5em; /* 24px/16px */ +} + +h1 { + font-size: 2.25em; /* 36px/16px */ + line-height: 1.3333em; /* 48px/36px */ + padding: 0.33335em 0; /* 12px/36px * 2 (Use padding instead of margin to maintain proximity with paragraph) */ + font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; +} + +h2 { + font-size: 1.5em; /* 24px/16px */ + line-height: 1.5em; /* 24px/24px */ + padding: 1em 0 0 0; /* 12px/24px * 2, only top (Use padding instead of margin to maintain proximity with paragwithph) */ + font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; + @media (max-width: 480px) { + font-size: 1.6rem; } - - body { - font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; - letter-spacing: 0.01em; - -webkit-font-smoothing: antialiased; - text-rendering: optimizeLegibility; +} + +h3 { + font-size: 1.3em; /* 18px/16px */ + line-height: 1.7em; /* 24px/18px */ + padding: 0.66667em 0; /* 12px/18px * 2 (Use padding instead of margin to maintain proximity with paragraph) */ + font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; +} + +.hted-head th { + font-size: 1.1em; +} + +h4, +h5, +h6 { + font-size: 1.125em; /* 18px/16px */ + line-height: 1.7em; /* 24px/18px */ + padding: 0.66667em 0; /* 12px/18px * 2 (Use padding instead of margin to maintain proximity with paragraph) */ + font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; +} + +h5 { + padding-bottom: 0.3em; + font-size: 1.3em; + margin-bottom: 0.5em; +} + +blockquote { + font-style: italic; + margin: 1.5em; /* 24px/18px */ + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + border-radius: 4px; + background-color: darken($background-color, 5%); + padding: 0 1.5em; /* 24px/18px */ + p, + ul, + ol { + padding: 1.5em 0; /* 24px/18px */ } - - /*- Typography for medium and small screen, based on 16px font-size -*/ - - p, ul, ol { - font-size: 18px; - line-height: 1.7em; /* 24px/16px */ - margin-bottom: 1.5em; /* 24px/16px */ +} + +@media (min-width: 520px) { + //Breakpoint set to 940px + + p, + ul, + ol { + font-size: 20px; + line-height: 1.7em; /* 24px/16px */ + margin-bottom: 1.5em; /* 24px/16px */ } - - h1 { - font-size: 2.25em; /* 36px/16px */ - line-height: 1.3333em; /* 48px/36px */ - padding: 0.33335em 0; /* 12px/36px * 2 (Use padding instead of margin to maintain proximity with paragraph) */ - font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; - } - - h2 { - font-size: 1.5em; /* 24px/16px */ - line-height: 1.5em; /* 24px/24px */ - padding: 1em 0 0 0; /* 12px/24px * 2, only top (Use padding instead of margin to maintain proximity with paragwithph) */ - font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; - @media (max-width: 480px) { - font-size: 1.6rem; - } - } - - h3 { - font-size: 1.3em; /* 18px/16px */ - line-height: 1.7em; /* 24px/18px */ - padding: 0.66667em 0; /* 12px/18px * 2 (Use padding instead of margin to maintain proximity with paragraph) */ - font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; - } - - .hted-head th { - font-size: 1.1em; - } - - h4, h5, h6 { - font-size: 1.125em; /* 18px/16px */ - line-height: 1.7em; /* 24px/18px */ - padding: 0.66667em 0; /* 12px/18px * 2 (Use padding instead of margin to maintain proximity with paragraph) */ - font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; - } - + + h3, h5 { - padding-bottom: 0.3em; - font-size: 1.3em; - margin-bottom: 0.5em; + font-size: 1.5em; } - - blockquote { - font-style: italic; - margin: 1.5em; /* 24px/18px */ - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - border-radius: 4px; - background-color: darken($background-color, 5%); - padding: 0 1.5em; /* 24px/18px */ - p, ul, ol { - padding: 1.5em 0; /* 24px/18px */ - } - } - - @media (min-width: 520px) { //Breakpoint set to 940px - - p, ul, ol { - font-size: 20px; - line-height: 1.7em; /* 24px/16px */ - margin-bottom: 1.5em; /* 24px/16px */ - } - - h3, h5 { - font-size: 1.5em; - } - + .hted-head th { - font-size: 1.2em; + font-size: 1.2em; } - +} + +/*- Typography for big screen, based on 18px font-size -*/ + +@media (min-width: 940px) { + //Breakpoint set to 940px + + p, + ul, + ol { + font-size: 1em; /* 18px */ + line-height: 1.7em; /* 24px/18px */ + margin-bottom: 1.3334em; /* 24px/18px */ } - - /*- Typography for big screen, based on 18px font-size -*/ - - @media (min-width: 940px) { //Breakpoint set to 940px - - p, ul, ol { - font-size: 1em; /* 18px */ - line-height: 1.7em; /* 24px/18px */ - margin-bottom: 1.3334em; /* 24px/18px */ - } - + h1 { - font-size: 2.6667em; /* 48px/18px */ - line-height: 1em; /* 48px/48px */ - padding: 0.25em 0; /* 12px/48px * 2 (Use padding instead of margin to maintain proximity with paragraph) */ + font-size: 2.6667em; /* 48px/18px */ + line-height: 1em; /* 48px/48px */ + padding: 0.25em 0; /* 12px/48px * 2 (Use padding instead of margin to maintain proximity with paragraph) */ } - + h2 { - font-size: 2em; /* 36px/18px */ - line-height: 1.7em; /* 48px/36px */ - padding: 0.66667em 0 0 0; /* 12px/36px * 2, pnly top (Use padding instead of margin to maintain proximity with paragraph) */ + font-size: 2em; /* 36px/18px */ + line-height: 1.7em; /* 48px/36px */ + padding: 0.66667em 0 0 0; /* 12px/36px * 2, pnly top (Use padding instead of margin to maintain proximity with paragraph) */ } - - h3, h4, h5, h6 { - font-size: 1.7em; /* 24px/18px */ - line-height: 1.7em; /* 24px/24px */ - padding: 0.5em 0; /* 12px/24px * 2 (Use padding instead of margin to maintain proximity with paragraph) */ + + h3, + h4, + h5, + h6 { + font-size: 1.7em; /* 24px/18px */ + line-height: 1.7em; /* 24px/24px */ + padding: 0.5em 0; /* 12px/24px * 2 (Use padding instead of margin to maintain proximity with paragraph) */ } - + h5 { - padding-bottom: 0; - font-size: 1.5em; + padding-bottom: 0; + font-size: 1.5em; } - + blockquote { - font-style: italic; - margin: 1.3334em; /* 24px/18px */ - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - border-radius: 4px; - background-color: darken($background-color, 5%); - padding: 0 1.33334em; /* 24px/18px */ - p, ul, ol { - padding: 1.33334em 0; /* 24px/18px */ - } + font-style: italic; + margin: 1.3334em; /* 24px/18px */ + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + border-radius: 4px; + background-color: darken($background-color, 5%); + padding: 0 1.33334em; /* 24px/18px */ + p, + ul, + ol { + padding: 1.33334em 0; /* 24px/18px */ + } } - - } - \ No newline at end of file +}