From 111507b391443362a8b6502a5ee2a5f20eda65e6 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Sun, 22 Mar 2015 08:59:19 +0000 Subject: [PATCH] CSS changes --- .../opdavies/opdavies/assets/css/styles.css | 56 ++++++++++++------- .../opdavies/assets/scss/modules/_header.scss | 1 + .../opdavies/opdavies/assets/scss/styles.scss | 21 +++++-- .../assets/scss/variables/_typography.scss | 4 ++ 4 files changed, 57 insertions(+), 25 deletions(-) create mode 100644 source/themes/opdavies/opdavies/assets/scss/variables/_typography.scss diff --git a/source/themes/opdavies/opdavies/assets/css/styles.css b/source/themes/opdavies/opdavies/assets/css/styles.css index b66e7a69..f7487457 100644 --- a/source/themes/opdavies/opdavies/assets/css/styles.css +++ b/source/themes/opdavies/opdavies/assets/css/styles.css @@ -54,6 +54,11 @@ a img { article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } +@media -sass-debug-info{filename{font-family:file\:\/\/\/Library\/Ruby\/Gems\/2\.0\.0\/gems\/compass-core-1\.0\.3\/stylesheets\/compass\/typography\/_vertical_rhythm\.scss}line{font-family:\00003106}} +html { + font-size: 100%; + line-height: 1.5em; } + @media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/modules\/_content\.scss}line{font-family:\000031}} .content { max-width: 960px; @@ -77,10 +82,11 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, @media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/modules\/_header\.scss}line{font-family:\000031}} header[role="banner"] { + line-height: 1.5em; background-color: #064771; color: white; padding: 1.5em 0; } -@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/modules\/_header\.scss}line{font-family:\000036}} +@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/modules\/_header\.scss}line{font-family:\000037}} header[role="banner"] .inner { max-width: 960px; margin-left: auto; @@ -90,29 +96,29 @@ header[role="banner"] { content: " "; display: block; clear: both; } -@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/modules\/_header\.scss}line{font-family:\000039}} +@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/modules\/_header\.scss}line{font-family:\0000310}} header[role="banner"] .inner .site-name { width: 23.72881%; float: left; margin-left: 0; } -@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/modules\/_header\.scss}line{font-family:\0000313}} +@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/modules\/_header\.scss}line{font-family:\0000314}} header[role="banner"] .inner .main-menu { width: 74.57627%; float: left; margin-left: 1.69492%; text-align: right; } -@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/modules\/_header\.scss}line{font-family:\0000317}} +@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/modules\/_header\.scss}line{font-family:\0000318}} header[role="banner"] .inner .main-menu a { border-bottom: 1px solid #064771; color: white; display: block; margin-left: .5em; text-decoration: none; } -@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/modules\/_header\.scss}line{font-family:\0000324}} +@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/modules\/_header\.scss}line{font-family:\0000325}} header[role="banner"] .inner .main-menu a.active { border-color: white; } -@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/modules\/_header\.scss}line{font-family:\0000332}} +@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/modules\/_header\.scss}line{font-family:\0000333}} .main-menu ul { margin: 0; padding: 0; @@ -131,42 +137,52 @@ header[role="banner"] { *display: inline; white-space: nowrap; } -@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/styles\.scss}line{font-family:\0000310}} +@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/styles\.scss}line{font-family:\0000311}} body { + font-size: 0.875em; + line-height: 1.71429em; + line-height: 1.5em; color: #222; - font: 14px Arial; } + font-family: Arial; } -@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/styles\.scss}line{font-family:\0000315}} +@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/styles\.scss}line{font-family:\0000318}} p, ul, ol, pre { margin-bottom: 1em; } -@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/styles\.scss}line{font-family:\0000321}} +@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/styles\.scss}line{font-family:\0000324}} p:last-child, ul:last-child, ol:last-child, pre:last-child { margin-bottom: 0; } -@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/styles\.scss}line{font-family:\0000326}} +@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/styles\.scss}line{font-family:\0000329}} h1 { - font-size: 2em; - margin-bottom: .5em; } - -@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/styles\.scss}line{font-family:\0000330}} -h2 { - font-size: 1.5em; - margin-bottom: .5em; } + font-size: 2.14286em; + line-height: 0.8em; + line-height: 1.5em; + margin-bottom: .2em; } @media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/styles\.scss}line{font-family:\0000335}} +h2 { + font-size: 1.5em; + line-height: 1.14286em; + display: inline-block; + margin: .5em 0; } +@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/styles\.scss}line{font-family:\0000340}} + h1 + h2 { + margin-top: 0; } + +@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/styles\.scss}line{font-family:\0000346}} ul { list-style-type: disc; } -@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/styles\.scss}line{font-family:\0000339}} +@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/styles\.scss}line{font-family:\0000350}} code { font-family: "Courier New"; } -@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/styles\.scss}line{font-family:\0000343}} +@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/opdavies\/Code\/Personal\/Current\/oliverdavies\.co\.uk\/source\/themes\/opdavies\/opdavies\/assets\/scss\/styles\.scss}line{font-family:\0000354}} dd { padding-left: 1.5em; } diff --git a/source/themes/opdavies/opdavies/assets/scss/modules/_header.scss b/source/themes/opdavies/opdavies/assets/scss/modules/_header.scss index 1f46ee3f..2870f829 100644 --- a/source/themes/opdavies/opdavies/assets/scss/modules/_header.scss +++ b/source/themes/opdavies/opdavies/assets/scss/modules/_header.scss @@ -1,4 +1,5 @@ header[role="banner"] { + @include adjust-leading-to(1); background-color: #064771; color: white; padding: 1.5em 0; diff --git a/source/themes/opdavies/opdavies/assets/scss/styles.scss b/source/themes/opdavies/opdavies/assets/scss/styles.scss index 08641929..40ae4ad6 100644 --- a/source/themes/opdavies/opdavies/assets/scss/styles.scss +++ b/source/themes/opdavies/opdavies/assets/scss/styles.scss @@ -1,6 +1,7 @@ @import 'compass'; @import 'compass/reset'; @import 'compass/css3'; +@import 'compass/typography/vertical_rhythm'; @import 'susy'; @import "variables/**/*"; @@ -8,8 +9,10 @@ @import "modules/**/*"; body { + @include adjust-font-size-to(14px); + @include adjust-leading-to(1); color: #222; - font: 14px Arial; + font-family: Arial; } p, @@ -24,12 +27,20 @@ pre { } h1 { - font-size: 2em; - margin-bottom: .5em; + @include adjust-font-size-to(30px, 1, 14px); + @include adjust-leading-to(1); + margin-bottom: .2em; } + h2 { - font-size: 1.5em; - margin-bottom: .5em; + @include adjust-font-size-to(21px, 1, 14px); + display: inline-block; + margin: .5em 0; + + h1 + & { + // Remove the top margin if the h2 is after a h1. + margin-top: 0; + } } ul { diff --git a/source/themes/opdavies/opdavies/assets/scss/variables/_typography.scss b/source/themes/opdavies/opdavies/assets/scss/variables/_typography.scss new file mode 100644 index 00000000..118813cb --- /dev/null +++ b/source/themes/opdavies/opdavies/assets/scss/variables/_typography.scss @@ -0,0 +1,4 @@ +$base-font-size: 16px; +$base-line-height: 24px; + +@include establish-baseline(); \ No newline at end of file