summaryrefslogtreecommitdiff
path: root/pages/assets
diff options
context:
space:
mode:
authorelijah <elijah@riseup.net>2014-08-12 17:10:28 -0700
committerelijah <elijah@riseup.net>2014-08-12 17:10:28 -0700
commit1ba4373f2e2d732b2de00e0da4c41099422ac3c8 (patch)
tree2a5bc1cfb299e567ed83ce4e2e99631d162e4987 /pages/assets
parentdfb4ed7419125d87c99994251ce808e7f0e7b670 (diff)
nice scaling masthead
Diffstat (limited to 'pages/assets')
-rw-r--r--pages/assets/images/rainbow-masthead-large.pngbin0 -> 36446 bytes
-rw-r--r--pages/assets/images/rainbow-masthead-medium.pngbin0 -> 23015 bytes
-rw-r--r--pages/assets/images/rainbow-masthead-small.pngbin0 -> 12715 bytes
-rw-r--r--pages/assets/rainbow-masthead-large.pngbin35946 -> 0 bytes
-rw-r--r--pages/assets/rainbow-masthead-medium.pngbin23148 -> 0 bytes
-rw-r--r--pages/assets/style.scss125
6 files changed, 95 insertions, 30 deletions
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
--- /dev/null
+++ b/pages/assets/images/rainbow-masthead-large.png
Binary files 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
--- /dev/null
+++ b/pages/assets/images/rainbow-masthead-medium.png
Binary files 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
--- /dev/null
+++ b/pages/assets/images/rainbow-masthead-small.png
Binary files differ
diff --git a/pages/assets/rainbow-masthead-large.png b/pages/assets/rainbow-masthead-large.png
deleted file mode 100644
index 2724cec..0000000
--- a/pages/assets/rainbow-masthead-large.png
+++ /dev/null
Binary files differ
diff --git a/pages/assets/rainbow-masthead-medium.png b/pages/assets/rainbow-masthead-medium.png
deleted file mode 100644
index 7c0a5f8..0000000
--- a/pages/assets/rainbow-masthead-medium.png
+++ /dev/null
Binary files 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;