Merge Family edits from @electrikjesus
diff --git a/css/style.css b/css/style.css
index 594394a..19120a8 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; }
@@ -104,7 +104,7 @@
transition: background-color .2s ease 0s; }
.navbar-brand {
- display: none;
+ opacity: 0;
margin-top: 10px;
color: #ffffff;
font-weight: 400; }
@@ -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 {
+ background-color: #07374a;
+}
+.navbar-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;
@@ -169,10 +188,11 @@
transition: background-color .2s ease 0s;
box-shadow: 0 0 4px rgba(7, 55, 74, 0.2); }
.navbar.solid .navbar-brand {
+ opacity: 1;
display: inline-block;
color: #ffffff;
- -webkit-transition: color .2s ease 0s, border-color .2s ease 0s;
- transition: color .2s ease 0s, border-color .2s ease 0s; }
+ -webkit-transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s;
+ transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s; }
.navbar.solid .navbar-nav > li > a {
color: #ffffff;
-webkit-transition: color .2s ease 0s, border-color .2s ease 0s;
@@ -181,7 +201,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 +209,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; } }
@@ -287,12 +314,15 @@
color: #0080ff;
list-style: none; }
.contact-social-icons ul a:hover,
- .team-links-list a:hover {
+ .team-links-list a:hover,
+ .family-links-list a:hover {
color: #ffffff; }
.contact-social-icons ul a:focus,
.contact-social-icons ul a:active,
.team-links-list a:focus,
- .team-links-list a:active {
+ .team-links-list a:active,
+ .family-links-list a:focus,
+ .family-links-list a:active {
color: rgba(255,255,255,0.8); }
.contact-social-icons ul a li {
display: inline-block;
@@ -326,10 +356,10 @@
display: block; }
/* our team section */
-#team {
+#team, #family {
background-color: #0080ff;
font-weight: 700;
- font-size: 1.5em;
+ font-size: 20px;
}
.hr.invisible_hr {
height: 0;
@@ -356,33 +386,34 @@
.team-role, .team-name, .team-links-list a {
color: #07374a;
}
-.team-links {
+.team-links, .family-links {
padding-top: .75em;
}
-.team-image img {
+.team-image img, .family-image img {
max-width:150px;
max-height: 150px;
margin:0 auto;
}
-/* our team section */
-#family {
- background-color: #07374a;
-}
-.family-role, .family-name, .family-links-list {
+/* Bliss family section */
+#family {
+ background-color: #07374a;
+}
+.family-role, .family-name, .family-description {
color: #FFFFFF;
}
.family-description {
- color: #b7b7b7;
+ color: #fff;
+ font-size: 18px;
}
-.family-role h4 {
+.family-role h4, .family-links-list a {
color: #0080ff;
}
.family-header h2 {
color: #0080ff;
}
-.family-links {
- padding-top: .75em;
+#family .about-tools {
+ font-size: 20px;
}
.family-image img {
max-width:150px;
@@ -403,4 +434,71 @@
.family-projects--btn:focus,
.family-projects--btn:active {
background: #0080ff;
- color: #ffffff; }
\ No newline at end of file
+ color: #ffffff; }
+
+@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 33d932a..cd3d990 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>
@@ -579,10 +579,11 @@
</div>
<!-- Close Team -->
<div id="family" class="row cover">
+<div class="container">
<div class="family-header text-center">
<h2 class="text-center">About Bliss Family</h2></div>
<div class="row">
- <div class="text-center about-info">
+ <div class="text-center">
<img class="img-circle text-center profile-img" src="images/bliss_opt_logo.png">
<p class="text-center">We are currently in the process of moving into a new era of Bliss. As a ROM team, we worked together to overcome some of the hardest obstacles that a ROM team could face. And in doing so, we have grown and acted as an example to other teams. This growth allowed us to grow into a family of ROM teams, helping to support one another in our innovative efforts, and also inspire work from other community members as well. </p>
<p class="text-center">This growth allowed us to see many of the needs our fellow community members had, and sparked an idea to allow us all to succeed in the future. So, we decided to start our journey into making that happen, and are turning Bliss Family of ROMs into a nonprofit corporation, with the intent to enable the development community like never before. </p>
@@ -596,20 +597,19 @@
</div><br/> <br/>
<div class="family-header text-center">
<h2 class="text-center">Bliss Family Projects</h2></div>
- <div class="about-tools center">
- <p class="text-center">The Bliss Family projects we currently support can be found bellow:
- </p>
+ <div class="center">
+ <h4 class="text-center highlight_secondary">The Bliss Family projects we currently support can be found below:<br><br></h4>
<div class="col-lg-3">
- <div class="family">
- <img class="img-circle img-responsive portfolio-projects--image" src="images/deso.jpg">
+ <div class="family">
<div class="family-image text-center">
- <div class="family-links ">
- <div class="family-links-list">
- <a href="https://t.me/DesolationDomination" target="_blank"><i class="fa fa-paper-plane"></i></a>
- <a href="https://plus.google.com/communities/112693605933023229650" target="_blank"><i class="fa fa-google-plus"></i></a>
- </div>
+ <img class="img-circle img-responsive" src="images/deso.jpg">
+ <div class="family-links ">
+ <div class="family-links-list">
+ <a href="https://t.me/DesolationDomination" target="_blank"><i class="fa fa-paper-plane"></i></a>
+ <a href="https://plus.google.com/communities/112693605933023229650" target="_blank"><i class="fa fa-google-plus"></i></a>
+ </div>
<!-- /.family-links-list -->
- </div>
+ </div>
<!-- /.family-links -->
</div>
<!-- /.family-image -->
@@ -618,8 +618,8 @@
<div class="family-role">
<h4>Dark Style ROM, AOSP/CAF</h4>
</div>
- <div class="family-description">
- Desolation ROM is a great dark style rom, offering heavy optimizations along with a unique style.</div>
+ <h4 class="family-description">
+ Desolation ROM is a great dark style rom, offering heavy optimizations along with a unique style.</h4>
</div>
<!-- /.family-content -->
</div>
@@ -627,8 +627,8 @@
</div>
<div class="col-lg-3">
<div class="family">
- <img class="img-circle img-responsive portfolio-projects--image" src="images/xosp.jpg">
<div class="family-image text-center">
+ <img class="img-circle img-responsive" src="images/xosp.jpg">
<div class="family-links ">
<div class="family-links-list">
<a href="https://t.me/XOSPCommunity" target="_blank"><i class="fa fa-paper-plane"></i></a>
@@ -644,8 +644,8 @@
<div class="family-role">
<h4>Xperia Style ROM, AOSP/CAF</h4>
</div>
- <div class="family-description">
- XOSP offers the unuque stylings of Sony's Xperia line to AOSP/CAF devices, along with many welcomed features worth checking out.</div>
+ <h4 class="family-description">
+ XOSP offers the unuque stylings of Sony's Xperia line to AOSP/CAF devices, along with many welcomed features worth checking out.</h4>
</div>
<!-- /.family-content -->
</div>
@@ -653,8 +653,8 @@
</div>
<div class="col-lg-3">
<div class="family">
- <img class="img-circle img-responsive portfolio-projects--image" src="images/xtremis.jpg">
<div class="family-image text-center">
+ <img class="img-circle img-responsive" src="images/xtremis.jpg">
<div class="family-links ">
<div class="family-links-list">
<a href="#" target="_blank"><i class="fa fa-paper-plane"></i></a>
@@ -670,8 +670,8 @@
<div class="family-role">
<h4>AOSP/CAF ROM</h4>
</div>
- <div class="family-description">
- Not much info available at this time. Please check in later. </div>
+ <h4 class="family-description">
+ Not much info available at this time. Please check in later. </h4>
</div>
<!-- /.family-content -->
</div>
@@ -680,8 +680,8 @@
<div class="col-lg-3">
<div class="family">
- <img class="img-circle img-responsive portfolio-projects--image" src="images/question-mark.png">
<div class="family-image text-center">
+ <img class="img-circle img-responsive" src="images/question-mark.png">
<div class="family-links ">
<div class="family-links-list">
<a href="#" target="_blank"><i class="fa fa-paper-plane"></i></a>
@@ -697,12 +697,12 @@
<div class="family-role">
<h4>Submit your application now!</h4>
</div>
- <div class="family-description">
+ <h4 class="family-description">
Follow the link and fill out an application for your project, and we will get in touch with you momentarily <br>
<li>
<a href="https://goo.gl/kAb7ti">Join Bliss Family</a>
</li>
- </div>
+ </h4>
</div>
<!-- /.family-content -->
</div>
@@ -712,6 +712,7 @@
</div>
</div>
</div>
+ </div>
<!-- End #About -->
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);
});