diff --git a/_sass/custom.scss b/_sass/custom.scss index 01f16b2..b1592e1 100644 --- a/_sass/custom.scss +++ b/_sass/custom.scss @@ -178,7 +178,7 @@ p.table-title { .newsbyte h4, h4.stat { font-size: 18px; - font-family: Georgia, 'Times New Roman', Times, serif; + font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-weight: 700; @media (max-width: 480px) { font-size: 16px; diff --git a/_sass/typography.scss b/_sass/typography.scss index a8a07db..df3c5f8 100644 --- a/_sass/typography.scss +++ b/_sass/typography.scss @@ -4,143 +4,144 @@ // @font-face { - font-family: 'Bebas Neue'; - src: url('../font/BebasNeue-Regular.woff') format('woff'), /* Pretty Modern Browsers */ -} - -body { - font-family: Georgia, 'Times New Roman', Times, 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, 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, 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, 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, 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 */ - } -} - -@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; -} - -} - -/*- 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) */ -} - -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) */ -} - -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; -} - -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-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; + } + } + + 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 */ + } + } + + @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; + } + + } + + /*- 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) */ + } + + 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) */ + } + + 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; + } + + 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 */ + } + } + + } + \ No newline at end of file