Welcome signup improvements for large and small screen widths

This commit is contained in:
Victoria Wang 2015-02-21 16:24:30 -06:00
parent d56edd80ec
commit 4849a0cefb
2 changed files with 51 additions and 15 deletions

View file

@ -1108,10 +1108,6 @@ a.tag:hover {
.section.features .col {
padding-left: 40px;
:first-child {
padding-left: 0;
}
@media (max-device-width:480px), screen and (max-width:800px){
padding-left: 20px;
width: 100%;
@ -1400,9 +1396,47 @@ a.tag:hover {
}
}
.section.plans.welcome {
padding: 55px 3%;
h3 {
color: #5e95a1;
}
.subtitle {
width: 68%;
margin-left: auto;
margin-right: auto;
@media(max-device-width:480px), screen and (max-width:550px) {
width: 100%;
}
}
.plan-overview, >.row {
margin-left: auto;
margin-right: auto;
max-width: 990px;
min-width: 900px;
@media(max-device-width:480px), screen and (max-width:550px) {
min-width: 0;
}
}
>.row >.col {
padding-left: 40px;
&:first-child {
padding-left: 0;
}
@media(max-device-width:480px), screen and (max-width:550px) {
padding-left: 0;
width: 100%;
}
}
>.row {
@media(max-device-width:480px), screen and (max-width:550px) {
margin-bottom: 0;
}
}
.plan-overview {
h3 {
color: $c-Brand-1;
@ -1443,10 +1477,6 @@ a.tag:hover {
.content {
padding: 0;
}
@media(max-device-width:480px), screen and (max-width:550px) {
padding: 14px 10px;
}
}
.col.free {
width: 29%;
@ -1457,7 +1487,7 @@ a.tag:hover {
margin-bottom: 15px;
.main-features {
margin-bottom: 94px;
margin-bottom: 96px;
}
}
.col.supporter {
@ -1466,10 +1496,10 @@ a.tag:hover {
border: 1px solid #E0E0E0;
@include box-shadow(-1px 1px 5px 0px rgba(0,0,0,0.1));
.col:first-child {
width: 40%;
width: 38%;
}
.col:last-child {
width: 60%;
width: 62%;
margin-top: 16px;
p {
font-weight: bold;
@ -1478,6 +1508,14 @@ a.tag:hover {
}
}
}
@media(max-device-width:480px), screen and (max-width:550px) {
.col.free, .col.supporter, .col.supporter .col {
width: 100%!important;
}
.col.free .main-features {
margin-bottom: 10px;
}
}
.row.content.txt-Center {
margin-top: 0.6em;
}

View file

@ -1,9 +1,7 @@
<section class="section plans welcome">
<h2>Welcome to Neocities, <%= current_site.username %>!</h2>
<div class="col-66" style="margin-left: auto; margin-right: auto;">
<h3 class="subtitle">Free accounts will always be free and ad-free.
You can support our quest to bring back the creative, independent web by upgrading to the Supporter Plan.</h3>
</div>
<h3 class="subtitle">Free accounts will always be free and ad-free.
You can support our quest to bring back the creative, independent web by upgrading to the Supporter&nbsp;Plan.</h3>
<div class="plan-overview">
<div class="col free">