zydronium/neocities
1
0
Fork 0
mirror of https://github.com/neocities/neocities.git synced 2025-04-25 09:42:36 +02:00
Code Issues Projects Releases Packages Wiki Activity

Welcome signup improvements for large and small screen widths

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

60
sass/_project-sass/_project-Main.scss
View file

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

6
views/welcome_mockup.erb
View file

@ -1,9 +1,7 @@
<section class="section plans welcome"> <section class="section plans welcome">
<h2>Welcome to Neocities, <%= current_site.username %>!</h2> <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.
<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>
You can support our quest to bring back the creative, independent web by upgrading to the Supporter Plan.</h3>
</div>
<div class="plan-overview"> <div class="plan-overview">
<div class="col free"> <div class="col free">