Merge Bliss family section
diff --git a/css/style.css b/css/style.css
index 2363f6e..2133e86 100644
--- a/css/style.css
+++ b/css/style.css
@@ -83,7 +83,7 @@
.container>.navbar-collapse,
.container>.navbar-header {
margin:auto;
- }
+}
.container-fluid .text-muted {
margin: 20px 0; }
@@ -139,29 +139,48 @@
.navbar.solid .navbar-nav > li > a:focus {
background-color: transparent;
color: rgba(255,255,255,0.8); }
+.navbar-toggle {margin-right:0;}
.navbar-default .navbar-toggle {
border-color: #ffffff; }
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #07374a;
- }
+ }
.navbar-default .navbar-toggle .icon-bar {
color: #ffffff;
background-color: #ffffff; }
+.navbar-default .navbar-collapse.collapse.in ul, .navbar-collapse {
+ background-color: #07374a;
+}
+.navbar-collapse.collapse.collapsing {
+ background-color: #07374a;
+}
+.navbar-default .navbar-toggle .icon-bar {
+ color: #ffffff;
+ background-color: #ffffff; }
.navbar-default .navbar-collapse.collapse.in ul {
background-color: #07374a;
- }
+}
.navbar-collapse.collapse.collapsing {
background-color: #07374a;
+}
- }
-
- .navbar-collapse.collapse.show {
+.navbar-collapse.collapse.show {
background-color: #07374a;
-webkit-transition: background-color .2s ease 0s;
transition: background-color .2s ease 0s;
- }
+ -webkit-border-bottom-left-radius: 4px;
+ -webkit-border-bottom-right-radius: 4px;
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+}
-
+.navbar-collapse .navbar-nav > li > a,
+.navbar-collapse .navbar-nav > li > a:hover,
+.navbar-collapse .navbar-nav > li > a:focus,
+.navbar-collapse .navbar-nav > li > a:active {
+ border-color: transparent !important;
+}
+
/* Solid class attached on scroll past first section */
.navbar.solid {
background-color: #07374a;
@@ -181,7 +200,7 @@
.cover {
padding: 10% 0 10% 0; }
.cover.top {
- padding: 5% 0 10% 0;
+ padding: 10vh 0 15vh 0;
height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
@@ -189,9 +208,16 @@
background-color: #0080ff; }
.cover.bottom {
padding: 10% 0 10% 0; }
+ @media (max-width: 550px) {
+ .cover, .cover.bottom {padding: 17.5% 0 17.5% 0; } }
.headline {
padding-top: 6.25em; }
+ body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {
+ max-width: 100%;
+ width: auto;
+ margin: 0 auto;
+ display: block; }
@media screen and (min-width: 768px) {
.headline {
padding-top: 3.75em; } }
@@ -364,9 +390,10 @@
max-height: 150px;
margin:0 auto;
}
-/* our team section */
+
+/* Bliss family section */
#family {
- background-color: #07374a;
+ background-color: #07374a;
}
.family-role, .family-name, .family-links-list {
@@ -382,10 +409,77 @@
color: #0080ff;
}
.family-links {
- padding-top: .75em;
+ padding-top: .75em;
}
.family-image img {
max-width:150px;
max-height: 150px;
margin:0 auto;
-}
\ No newline at end of file
+}
+
+@media (max-height: 880px) {
+ #scrollIcon, #scrollTopIcon {margin-top: 15vh}
+}
+@media (max-height: 800px) {
+ #scrollIcon, #scrollTopIcon {margin-top: 10vh}
+ .cover.top {padding: 7.5vh 0 12.5vh 0;}
+}
+@media (max-height: 750px) {
+ #scrollIcon, #scrollTopIcon {margin-top: 8vh}
+}
+@media (max-height: 720px) {
+ #scrollIcon, #scrollTopIcon {margin-top: 5vh}
+ .cover.top {padding: 5vh 0 10vh 0;}
+}
+@media (max-height: 650px) {
+ #scrollIcon, #scrollTopIcon {margin-top: 5vh}
+ .cover.top {padding: 2.5vh 0 5vh 0;}
+ body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 42vh;}
+}
+@media (max-height: 550px) {
+ #scrollIcon, #scrollTopIcon {margin-top: 5vh}
+ .cover.top {padding: 1.5vh 0 3vh 0;}
+ .headline {padding-top:3vh;}
+ body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 32vh;}
+}
+@media (max-height: 480px) {
+ #scrollIcon, #scrollTopIcon {margin-top: 0}
+ .cover.top {padding: 3vh 0 3vh 0;}
+ .headline {padding-top:1.5vh;}
+ body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 32vh;}
+}
+@media (max-height: 320px) {
+ .cover.top {padding: 1vh 0 3vh 0;}
+ .headline {padding-top:1vh;}
+ body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 25vh;}
+}
+@media (max-width: 768px) {
+ .container-fluid {padding:30px 0 !important;}
+ .h1, .h2, .h3, h1, h2, h3 {
+ margin-top: 10px;
+ margin-bottom: 10px;
+ }
+ .lead, .about, .about-info, .about-tools, .about-last {font-size: 16px}
+ .about-info {padding: 0% 6% 0% 6%;}
+ .row.cover.top .lead {
+ max-width: 350px;
+ margin-left:auto;
+ margin-right: auto
+ }
+ .h4, h4 {font-size: 20px}
+ #portfolio h2 {padding-bottom: 0}
+ .portfolio-projects--btn {margin-top:1.25em;}
+ #scrollIcon, #scrollTopIcon {font-size: 1em}
+}
+@media (max-device-height: 480px) and (orientation: landscape) {
+ .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
+ max-height: 240px;
+ }
+ .navbar-nav>li>a {
+ padding-top: 6px;
+ padding-bottom: 6px;
+ }
+}
+@media (max-width: 360px) {
+ .h1, h1 {font-size: 32px;}
+}
diff --git a/index.html b/index.html
index 34b0ce3..5baca88 100644
--- a/index.html
+++ b/index.html
@@ -117,7 +117,7 @@
</div>
<div class="row break">
<div class="centered col-md-6 about-last">
- <p class="text-center">Head To The Downloads <span class="glyphicon glyphicon-arrow-down"></span></p>
+ <p class="text-center"><a href="#portfolio" id="scrollPortfolio">Head To The Downloads <span class="glyphicon glyphicon-arrow-down"></span></a></p>
</div>
</div>
</div>
diff --git a/js/script.js b/js/script.js
index a82fd4b..50719bd 100644
--- a/js/script.js
+++ b/js/script.js
@@ -19,6 +19,10 @@
e.preventDefault();
$.scrollTo($("#about"), 1000);
});
+ $("#scrollPortfolio").click(function(e) {
+ e.preventDefault();
+ $.scrollTo($("#portfolio"), 1000);
+ });
$("#nav-about").click(function(e) {
e.preventDefault();
$.scrollTo($("#about"), 1000);
@@ -31,7 +35,7 @@
e.preventDefault();
$.scrollTo($("#contact"), 1000);
});
- $("#nav-team").click(function(e) {
+ $("#nav-team").click(function(e) {
e.preventDefault
$.scrollTo($("#team"), 1000);
});