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

Initial stab at making plan charts look okay at small screen sizes

Browse source
This commit is contained in:
Victoria Wang 2014-10-17 15:57:07 -07:00
parent e917023fe9
commit 2a73fac5d3
2 changed files with 27 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -842,9 +842,15 @@ a.tag:hover {
} }
} }
.section.features h2, .section.features h3, .section.features p { .section.features h2, .section.features h3, .section.features p, .section.features a {
color: #fff; color: #fff;
} }
.section.features a {
text-decoration: underline;
&:hover {
text-decoration: none;
}
}
.section.features .fa { .section.features .fa {
margin-right: 10px; margin-right: 10px;
} }
@ -906,6 +912,7 @@ a.tag:hover {
} }
.section.plans { .section.plans {
background: #fff; background: #fff;
width: 100%;
} }
.section.plans h2 { .section.plans h2 {
color:#4F7E89; color:#4F7E89;
@ -997,6 +1004,14 @@ a.tag:hover {
margin: 2em 0 4em 0; margin: 2em 0 4em 0;
width: 100%; width: 100%;
} }
.plan-overview, .plan-chart {
@media(max-width:800px) {
font-size: 90%;
}
@media(max-device-width:480px), screen and (max-width:550px) {
font-size: 80%;
}
}
.plan-chart th { .plan-chart th {
background: #D6D6D6; background: #D6D6D6;
padding: 15px 0; padding: 15px 0;
@ -1027,6 +1042,10 @@ a.tag:hover {
border-bottom: 1px dotted #bbb; border-bottom: 1px dotted #bbb;
cursor: help; cursor: help;
} }
@media(max-device-width:480px), screen and (max-width:800px) {
width: 26%;
}
} }
.plan-chart td:nth-child(even) { .plan-chart td:nth-child(even) {
background: #F8F8F8; background: #F8F8F8;
@ -1034,6 +1053,11 @@ a.tag:hover {
.plan-chart .fa-check { .plan-chart .fa-check {
color: #6CCC24; color: #6CCC24;
} }
.plan-overview .btn-Action, .plan-chart .btn-Action {
@media(max-device-width:480px), screen and (max-width:900px) {
padding: 7px 10px;
}
}
.selected { .selected {
font-weight: bold; font-weight: bold;
} }

4
views/plan/_pricing.erb
View file

@ -104,12 +104,12 @@
<a href="/" class="btn-Action">Choose</a> <a href="/" class="btn-Action">Choose</a>
</th> </th>
<th class="professional"> <th class="professional">
<h3>Cat Bus</h3> <h3>Cat&nbsp;Bus</h3>
<p>$20/mo</p> <p>$20/mo</p>
<a href="/" class="btn-Action">Choose</a> <a href="/" class="btn-Action">Choose</a>
</th> </th>
<th class="professional"> <th class="professional">
<h3>Fat Cat</h3> <h3>Fat&nbsp;Cat</h3>
<p>$50/mo</p> <p>$50/mo</p>
<a href="/" class="btn-Action">Choose</a> <a href="/" class="btn-Action">Choose</a>
</th> </th>