From 1ba4373f2e2d732b2de00e0da4c41099422ac3c8 Mon Sep 17 00:00:00 2001 From: elijah Date: Tue, 12 Aug 2014 17:10:28 -0700 Subject: nice scaling masthead --- pages/assets/images/rainbow-masthead-large.png | Bin 0 -> 36446 bytes pages/assets/images/rainbow-masthead-medium.png | Bin 0 -> 23015 bytes pages/assets/images/rainbow-masthead-small.png | Bin 0 -> 12715 bytes pages/assets/rainbow-masthead-large.png | Bin 35946 -> 0 bytes pages/assets/rainbow-masthead-medium.png | Bin 23148 -> 0 bytes pages/assets/style.scss | 125 ++++++++++++++++++------ pages/favicon.ico | Bin 1150 -> 1406 bytes 7 files changed, 95 insertions(+), 30 deletions(-) create mode 100644 pages/assets/images/rainbow-masthead-large.png create mode 100644 pages/assets/images/rainbow-masthead-medium.png create mode 100644 pages/assets/images/rainbow-masthead-small.png delete mode 100644 pages/assets/rainbow-masthead-large.png delete mode 100644 pages/assets/rainbow-masthead-medium.png (limited to 'pages') diff --git a/pages/assets/images/rainbow-masthead-large.png b/pages/assets/images/rainbow-masthead-large.png new file mode 100644 index 0000000..d3d2329 Binary files /dev/null and b/pages/assets/images/rainbow-masthead-large.png differ diff --git a/pages/assets/images/rainbow-masthead-medium.png b/pages/assets/images/rainbow-masthead-medium.png new file mode 100644 index 0000000..a863733 Binary files /dev/null and b/pages/assets/images/rainbow-masthead-medium.png differ diff --git a/pages/assets/images/rainbow-masthead-small.png b/pages/assets/images/rainbow-masthead-small.png new file mode 100644 index 0000000..d412bf5 Binary files /dev/null and b/pages/assets/images/rainbow-masthead-small.png differ diff --git a/pages/assets/rainbow-masthead-large.png b/pages/assets/rainbow-masthead-large.png deleted file mode 100644 index 2724cec..0000000 Binary files a/pages/assets/rainbow-masthead-large.png and /dev/null differ diff --git a/pages/assets/rainbow-masthead-medium.png b/pages/assets/rainbow-masthead-medium.png deleted file mode 100644 index 7c0a5f8..0000000 Binary files a/pages/assets/rainbow-masthead-medium.png and /dev/null differ diff --git a/pages/assets/style.scss b/pages/assets/style.scss index 336fa7e..b1618ae 100644 --- a/pages/assets/style.scss +++ b/pages/assets/style.scss @@ -1,9 +1,14 @@ // note: css paths are always relative to the css file -$masthead-img: '/assets/rainbow-masthead-medium.png'; + + +$masthead-large-img: '/assets/images/rainbow-masthead-large.png'; +$masthead-large-height: 200px; +$masthead-medium-img: '/assets/images/rainbow-masthead-medium.png'; +$masthead-medium-height: 130px; +$masthead-small-img: '/assets/images/rainbow-masthead-small.png'; +$masthead-small-height: 80px; $masthead-background-color: #5e9ee3; -$masthead-height: 128px; -$masthead-large-img: '/assets/rainbow-masthead-large.png'; -$masthead-large-height: 190px; + $gutter: 15px; $background-color: #333; $menu-text-color: #fff; @@ -113,49 +118,109 @@ h2.hidey { background-color: $masthead-background-color; width: 100%; margin: 0; - background: $masthead-background-color url(#{$masthead-img}) 50% 50%; - background-size: cover; - height: $masthead-height; + background-size: cover !important; .masthead-inner { - height: $masthead-height; .text { color: black; margin-left: 50%; width: 50%; - font-size: 40px; font-weight: bold; font-family: Helvetica,Arial,sans-serif; - height: $masthead-height / 2; - &.top { - line-height: 100px; - } &.bottom { - line-height: 40px; + display: none; } } } } -#masthead.large { +// home masthead +body.home #masthead .text { + position: relative; + &.top { + line-height: 0.85em; + span { + position: absolute; + bottom: 0; + left: -1px; + } + } + &.bottom { + display: block; + span { + font-weight: normal; + background: rgba(255,255,255,0.5); + padding: 4px; + } + } +} + +// large masthead + +#masthead { background: $masthead-background-color url(#{$masthead-large-img}) 50% 50%; - height: $masthead-large-height; .masthead-inner { height: $masthead-large-height; .text { - height: $masthead-large-height / 2; padding-left: 4px; - &.top { - font-size: 70px; - line-height: 130px; + font-size: 70px; + line-height: $masthead-large-height; + } + } +} + +body.home #masthead .text { + height: $masthead-large-height/2; + &.bottom { + font-size: 20px; + line-height: 30px !important; + } +} + +// medium masthead + +@media (max-width: 992px) { + #masthead { + background: $masthead-background-color url(#{$masthead-medium-img}) 50% 50%; + .masthead-inner { + height: $masthead-medium-height; + .text { + padding-left: 3px; + font-size: 50px; + line-height: $masthead-medium-height; } - &.bottom { - font-size: 18px; - line-height: 28px; - font-weight: normal; - span { - background: rgba(255,255,255,0.5); - padding: 4px; - } + } + } + body.home #masthead .text { + height: $masthead-medium-height/2; + &.bottom { + font-size: 14px; + line-height: 24px !important; + } + } +} + + +// small masthead + +@media (max-width: 767px) { + #masthead { + background: $masthead-background-color url(#{$masthead-small-img}) 50% 50%; + .masthead-inner { + height: $masthead-small-height; + .text { + padding-left: 1px; + font-size: 30px; + line-height: $masthead-small-height; + } + } + } + body.home #masthead .text { + height: $masthead-small-height/2; + &.bottom { + font-size: 9px; + line-height: 14px !important; + span { + padding: 2px; } } } @@ -183,7 +248,7 @@ h2.hidey { } } -@media only screen and (max-width: 500px) { +@media only screen and (max-width: 767px) { #top-menu a { padding: 5px 6px; font-size: 12px; @@ -299,7 +364,7 @@ html, body { } } - @media (max-width: 767px) { +@media (max-width: 767px) { #footer .footer-text { font-size: 80%; margin: 0 2px; diff --git a/pages/favicon.ico b/pages/favicon.ico index 7f41dd1..c2f9e97 100644 Binary files a/pages/favicon.ico and b/pages/favicon.ico differ -- cgit v1.2.3