Skip to content
This repository has been archived by the owner on Mar 22, 2019. It is now read-only.

Commit

Permalink
Merge pull request #3648 from thorsteinsson/frontpage-improvements
Browse files Browse the repository at this point in the history 
Frontpage improvements
  • Loading branch information
@MelSumner
MelSumner authored Oct 20, 2018
2 parents 0ef5280 + 291de98 commit 275324c
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 188 deletions.
35 changes: 11 additions & 24 deletions source/about.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,6 @@ title: "A framework for ambitious web developers"
responsive: true
---
<% content_for :foot do %>
<script type="text/javascript">
$(function() {
$('#slider').bxSlider({
displaySlideQty: 4,
moveSlideQty: 4,
auto: true,
pager: true,
speed: 700,
pause: 5000
});

// Hack to force proper sizing
$('.bx-wrapper, .bx-window').css('width', 940);
});
</script>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
Expand Down Expand Up @@ -58,33 +43,35 @@ responsive: true
<div class="feature">
<div class="structure feature-img"></div>
<p>No need to waste time on trivial choices. Ember's abstractions allow developers to focus on what makes your app <i>unique</i>.</p>

</div>
<div class="feature">
<div class="productivity feature-img"></div>
<p>Ember.js is built for productivity. Designed with developer ergonomics in mind, its friendly APIs help developers <i>efficiently</i> get the job done.</p>


</div>
</div>
<div class="users section">
<h2 class="text-center">Who's Using Ember.js?</h2>
<div class="surround">
<ul id="slider">
<% data.users.slice(0,12).each do |user| %>
<% data.users.slice(0,4).each do |user| %>
<li class="user">
<a href="<%= user.url %>" rel="nofollow">
<img src="/images/about/<%= user.image %>" width="210" height="103" alt="<%= user.alt %>"/>
</a>
</li>
<% end %>
<% data.users.slice(4,4).each do |user| %>
<li class="user desktop-only">
<a href="<%= user.url %>" rel="nofollow">
<img src="/images/about/<%= user.image %>" width="210" height="103" alt="<%= user.alt %>"/>
</a>
</li>
<% end %>
</ul>
</div>
<div class="about__listing-button">
<a class="ember-button ember-button--centered" href="/ember-users">
Meet More Users
</a>
</div>
<a class="ember-button ember-button--centered" href="/ember-users">
Meet More Users
</a>
</div>
<div class="gears section">
<h2 class="text-center">Buy Ember.js Gear and Support Development</h2>
Expand Down
190 changes: 44 additions & 146 deletions source/stylesheets/pages/about.css.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,7 @@

.section {
overflow: hidden;
table.columns {
margin: 0 auto;
td {
vertical-align: top;
padding-right: 50px;
}
}
margin: 4rem 0;
}

.features.section {
Expand Down Expand Up @@ -52,166 +46,68 @@
}

#content .users.section {
align-items: center;
display: flex;
flex-direction: column;

h2 {
margin-bottom: 2rem;
}

.surround {
@include clearfix;
background-color: #FFF;
background-color: #fff;
border-radius: 3px;
border: 1px solid #d1d1d1;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 1px 0 #fff;
margin: 0 auto;
max-width: 100%;
// padding-top: 19px;
width: 940px;
margin: 0 2rem 2rem 2rem;
max-width: 940px;
padding: 1rem;

a:hover {
border: 0;
}

ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0;
}

.bx-wrapper,
.bx-window {
width: 940px;
max-width: 100%;
}

.bx-wrapper {

.bx-prev,
.bx-next {
background: no-repeat;
@include hidpi('about/carousel_controls', png);
float: left;
height: 28px;
width: 30px;
@media screen and (min-width: 958px) {
justify-content: space-between;
}

.bx-prev,
.bx-next,
.pager-link {
text-indent: -9999px;
}

.bx-prev {
background-position: left;
border-right: 1px solid #d1d1d1;
float: right;
position: absolute;
bottom: 0;
left: 0;
}

.bx-next {
background-position: right;
border-left: 1px solid #d1d1d1;
float: right;
position: absolute;
bottom: 0;
right: 1px;
}

.bx-window {
border-bottom: 1px solid #d1d1d1;
height: 124px;
.user.pager {
margin: 11px !important;
min-width: 177px;
}
}

.bx-pager {
@include clearfix;
background: bottom repeat-x #f4f4f4;
@include hidpi('about/carousel_pager_bg', png);
border-left: 1px solid #fafafa;
border-right: 1px solid #fafafa;
border-top: 1px solid #fefefe;
font-size: 0;
height: 28px;
line-height: 0;
margin: 0 29px;
padding-top: 9px;
text-align: center;

.pager-link {
background: 0 0 no-repeat;
@include hidpi('about/carousel_dots', png);
height: 11px;
width: 10px;
margin-left: 10px;
display: inline-block;

&.pager-active,
&.pager-active:hover {
background-position: -22px 0;
}

&:hover {
background-position: -11px 0;
}

&:first-of-type {
margin-left: 0;
}
}
}
}
}

.user {
position: relative;
float: left;
@media screen and (min-width: 0px) and (max-width:767px) {
width: 175px;
}
@media screen and (min-width:768px) {
width: 230px;
}

&.empty {
display: block;
height: 210px;
visibility: hidden; /*Take up space, but be invisible*/
}

a {
display: block;
height: 103px;
margin-left: 20px;
width: 210px;
}
}

p {
text-align: center;
.user a {
display: block;
height: 103px;
width: 210px;
}

.listed {
padding-top: 20px;
display:block;
margin: 0 auto;
width: 100%;
@media screen and (max-width: 767px) {
.desktop-only {
display: none;
}
}
}

.gears.section {
display: block;
clear: both;
max-width: 100%;
margin: 0 auto;

h2 {
margin-bottom: 2rem;
}

.gear {
text-align: center;
height: 120px;
max-width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 2rem;

a {
display: inline-block;
img {
display: block;
max-width: 100%;
margin: 0 auto;
}
margin: 0 0.5rem;
}
}
}
Expand Down Expand Up @@ -298,17 +194,19 @@ a.toc-anchor {
}

.about__listing-button-group {
width: 100%;
align-content: center;
display: flex;
justify-content: center;
align-content: center;
@media screen and (min-width:0) and (max-width: 991px) {
width: 100%;

@media screen and (max-width: 991px) {
flex-flow: row wrap;
}
}
.about__listing-button {
margin: 10px 10px 0 10px;
@media screen and (min-width:0) and (max-width: 991px) {
margin: 0 10px;

@media screen and (max-width: 991px) {
min-width: 100%;
margin: 10px auto;
}
Expand Down
18 changes: 0 additions & 18 deletions source/stylesheets/pages/resources.css.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,21 +145,3 @@ body.community_resources #content {
text-align: center;
}
}

.gears.section {
.gear {
text-align: center;
height: 120px;

.gearplus {
padding: 0px 30px 0px 30px;
display: inline;
line-height: 120px;

img {
vertical-align: top;
padding-top: 50px;
}
}
}
}

0 comments on commit 275324c

Please sign in to comment.